After a period of preparation, the new issue [ASP.NET Core MVC Development Practical Mall System] has begun. In the previous article, the overall functional design, page layout design, environment construction, and system configuration of the mall system were explained. And the development of functions such as homepage [product type, banner, friendly links, price reduction promotions, new products], product list page, product details, shopping cart and other functions. Today we will continue to explain the development of order management functions. It is only for learning and sharing. If any Please correct me if there are any shortcomings.
Order management function description
In the mall system, when users need to purchase goods, they place an order. There are many entrances to purchase, such as:
- On the homepage or product list page, when you see the product thumbnail, you can click the [Buy Now] button to place an order;
- On the product details page, after viewing the detailed parameters of the product, you can also click the [Buy Now] button to place an order;
- On the shopping cart page, select the items in the shopping cart and place a batch order.
The above three entrances have roughly the same ordering methods, but there are slight differences. The details are as follows:
- The two methods 1 and 2 are for the purchase of a single product.
- 3. You can choose whether to place an order for bulk products or a single product.
- 1. Use the default product parameters to place an order. 2. You can freely select product parameters to place an order.
Therefore, when placing orders at different entrances, subtle adjustments must be made. But on the jumped order page, it can be unified.
Note: The buy now function, like the add shopping cart function, requires user information and login.
Product order flow chart
In the e-commerce mall system, the product order flow chart is as follows:
Order management function development
1. Data table creation
The order table [EB_Purchase] mainly stores the user's order information, including order ID, product ID, user ID, logistics ID, delivery address, product remarks and other information. The details are as follows:
The order table creation table statement is as follows:
CREATE TABLE [dbo].[EB_Purchase](
[Id] [bigint] IDENTITY(1,1) NOT NULL,
[ProductId] [bigint] NULL,
[CustomerId] [bigint] NULL,
[BuyCount] [int] NULL,
[TotalPrice] [money] NULL,
[LogisticsId] [bigint] NULL,
[Status] [int] NULL,
[Remark] [varchar](200) NULL,
[RecvAddr] [varchar](300) NULL,
[CreateTime] [datetime] NOT NULL,
[CreateUser] [varchar](50) NULL,
[LastEditTime] [datetime] NULL,
[LastEditUser] [varchar](50) NULL
) ON [PRIMARY]
2. Creation of order table entity model
The entity model and database table fields are consistent to facilitate data mapping, as shown below:
using SqlSugar;
namespace EasyBuyShop.Models
{
[SugarTable("EB_Purchase")]
public class Purchase : EntityModel
{
public long ProductId { get; set; }
public long CustomerId { get; set; }
public int BuyCount { get; set; }
public decimal TotalPrice { get; set; }
public long LogisticsId { get; set; }
/// <summary>
/// 收件地址ID
/// </summary>
public string RecvAddr { get; set; }
/// <summary>
/// 订单状态
/// </summary>
public int Status { get; set; }
public string Remark { get; set; }
}
}
3. Data processing layer DAL
The data processing layer DAL mainly performs operations such as order query and insertion. As follows:
using EasyBuyShop.Models;
using EasyBuyShop.Utils;
namespace EasyBuyShop.DAL
{
public class PurchaseDal : BaseDal
{
/// <summary>
/// 获取当前用户的订单列表
/// </summary>
/// <param name="userId"></param>
/// <returns></returns>
public List<Purchase> GetPurchases(long userId)
{
try
{
using (var db = this.GetDb(BaseDal.ConnStr))
{
return db.Queryable<Purchase>().Where(r => r.CustomerId == userId).ToList();
}
}
catch (Exception ex)
{
LogHelper.Fatal(ex.Message);
return new List<Purchase>();
}
}
}
}
4. Controller acquisition
The controller mainly includes order management [such as query, delete and other operations] and order purchase functions. Based on the above analysis, different entrances are processed separately. As follows:
using EasyBuyShop.DAL;
using EasyBuyShop.Models;
using Microsoft.AspNetCore.Mvc;
namespace EasyBuyShop.Controllers
{
public class PurchaseController : Controller
{
public IActionResult Index()
{
var username = HttpContext.Session.GetString("username");
var realName = HttpContext.Session.GetString("realname");
var userId = HttpContext.Session.GetInt32("userid");
ViewData["Username"] = username;
ViewData["RealName"] = realName;
var purchaseDal = new PurchaseDal();
var purchases = purchaseDal.GetPurchases(userId.Value);
var products=new List<Product>();
var shops = new List<Shop>();
if (purchases != null && purchases.Count() > 0)
{
var productDal = new ProductDal();
var pIds = purchases.Select(x => x.ProductId).ToList();
products = productDal.GetProductListByIds(pIds);
if (products != null && products.Count() > 0)
{
var shopDal = new ShopDal();
shops = shopDal.GetShops(products.Select(r => r.ShopId).ToList());
}
}
ViewData["Shops"] = shops;
ViewData["ProductList"] = products;
ViewData["Purchases"] = purchases;
return View();
}
/// <summary>
/// 首页或商品列表快捷下单
/// </summary>
/// <param name="productId"></param>
/// <returns></returns>
[HttpGet]
public IActionResult Buy(int productId)
{
Msg msg = new Msg();
var userId = HttpContext.Session.GetInt32("userid");
var userName = HttpContext.Session.GetString("username");
var realName = HttpContext.Session.GetString("realname");
ViewData["Username"] = userName;
ViewData["RealName"] = realName;
if (userId == null)
{
msg.code = -1;
msg.message = "尚未登录";
return Redirect("/Auth/Login");
}
var shopDal = new ShopDal();
var productDal = new ProductDal();
var addrDal = new AddrDal();
var product = productDal.GetProduct(productId);
var shop = shopDal.GetShopById(product.ShopId);
var addrs = addrDal.GetAddrByUserId((long)userId);
List<Product> products = new List<Product>() { product };
List<Shop> shops = new List<Shop>() { shop };
Dictionary<string, string> productConfigs = new Dictionary<string, string>();
ViewData["Products"] = products;
ViewData["Shops"] = shops;
ViewData["Addrs"] = addrs;
ViewData["ProductConfigs"] = productConfigs;
return View();
}
/// <summary>
/// 确认下单
/// </summary>
/// <returns></returns>
[HttpPost]
public IActionResult Buy()
{
Msg msg = new Msg();
var userId = HttpContext.Session.GetInt32("userid");
var userName = HttpContext.Session.GetString("username");
if (userId == null)
{
msg.code = -1;
msg.message = "尚未登录";
return Redirect("/Auth/Login");
}
var addr = Request.Form["addr"];
var productIds = Request.Form["productId"].ToList();
foreach (var productId in productIds)
{
var remark = Request.Form[$"textarea_{productId}"];
var quantity = Request.Form[$"quantity_{productId}"];
var productDal = new ProductDal();
var product = productDal.GetProduct(long.Parse(productId));
if (product != null)
{
var pruchaseDal = new PurchaseDal();
var purchase = new Purchase();
purchase.ProductId = long.Parse(productId);
purchase.CustomerId = userId.Value;
purchase.BuyCount = int.Parse(quantity);
purchase.TotalPrice = product.PreferentialPrice * int.Parse(quantity);
purchase.LogisticsId = 0;//物流ID,下单时为空，商家发货后制定
purchase.Remark = remark;
purchase.Status = 0;
purchase.RecvAddr = addr;
purchase.CreateUser = userName;
purchase.CreateTime = DateTime.Now;
purchase.LastEditUser = userName;
purchase.LastEditTime = DateTime.Now;
int id = pruchaseDal.InsertT<Purchase>(purchase);
if (id > 0)
{
msg.code = 0;
msg.message = "成功";
}
else
{
msg.code = -1;
msg.message = "购买失败";
break;
}
}
else
{
msg.code = -1;
msg.message = "商品不存在";
break;
}
}
if (msg.code < 0)
{
ViewData["Msg"] = msg;
return View();
}
else
{
return Redirect("/Purchase/Index");
}
}
/// <summary>
/// 从详情页面下单
/// </summary>
/// <returns></returns>
[HttpPost]
public IActionResult BuyWithForm()
{
Msg msg = new Msg();
var userId = HttpContext.Session.GetInt32("userid");
var userName = HttpContext.Session.GetString("username");
if (userId == null)
{
msg.code = -1;
msg.message = "尚未登录";
return Json(msg);
}
var productId = long.Parse(Request.Form["productId"]);
var quantity = int.Parse(Request.Form["quantity"]);
var color = Request.Form["color"];
var size = Request.Form["size"];
var remark = $"颜色：{color},大小：{size}";
var productDal = new ProductDal();
var product = productDal.GetProduct(productId);
var shopDal = new ShopDal();
var addrDal = new AddrDal();
var shop = shopDal.GetShopById(product.ShopId);
var addrs = addrDal.GetAddrByUserId((long)userId);
List<Product> products = new List<Product>() { product };
List<Shop> shops = new List<Shop>() { shop };
Dictionary<string, string> productConfigs = new Dictionary<string, string>();
productConfigs.Add($"remark_{productId}", remark);
productConfigs.Add($"quantity_{productId}", quantity.ToString());
ViewData["Products"] = products;
ViewData["Shops"] = shops;
ViewData["Addrs"] = addrs;
ViewData["ProductConfigs"] = productConfigs;
return View("/Views/Purchase/Buy.cshtml");
}
/// <summary>
/// 从购物车下单
/// </summary>
/// <returns></returns>
[HttpPost]
public IActionResult BuyWithCart()
{
Msg msg = new Msg();
var userId = HttpContext.Session.GetInt32("userid");
var userName = HttpContext.Session.GetString("username");
if (userId == null)
{
msg.code = -1;
msg.message = "尚未登录";
return Json(msg);
}
var cartIds = Request.Form["chkCart"];
if (string.IsNullOrEmpty(cartIds))
{
msg.code = -1;
msg.message = "没有选择任何商品";
return Json(msg);
}
var cartIdArr = cartIds.ToString().Split(',');
if(cartIdArr!=null && cartIdArr.Length > 0)
{
var cartDal = new CartDal();
var productDal = new ProductDal();
var shopDal = new ShopDal();
var addrDal = new AddrDal();
List<Product> products = new List<Product>();
List<Shop> shops = new List<Shop>();
Dictionary<string, string> productConfigs = new Dictionary<string, string>();
foreach (var cartId in cartIdArr)
{
var cart = cartDal.GetCart(long.Parse( cartId));
var product = productDal.GetProduct(cart.ProductId);
if (product != null)
{
products.Add(product);
}
var shop = shopDal.GetShopById(product.ShopId);
if (shop != null)
{
shops.Add(shop);
}
productConfigs.Add($"remark_{cart.ProductId}", cart.Remark);
productConfigs.Add($"quantity_{cart.ProductId}", cart.Quantity.ToString());
}
var addrs = addrDal.GetAddrByUserId((long)userId);
ViewData["Products"] = products;
ViewData["Shops"] = shops;
ViewData["Addrs"] = addrs;
ViewData["ProductConfigs"] = productConfigs;
return View("/Views/Purchase/Buy.cshtml");
}
else
{
return View("/Views/Cart/Index");
}
}
}
}
5. View layer display
There are two main pages for order-related functions, an order page and an order management page.
The main function of the order page is to display the product list, order button, as well as user selection, remarks, price and other information. As follows:
<div class="container">
<form method="post" action="/Purchase/Buy">
@{
var addrs = ViewData["Addrs"] as List<Address>;
addrs = addrs.OrderByDescending(r => r.IsDefault).ToList();
var defaultAddr = addrs.FirstOrDefault(r => r.IsDefault);
var productConfigs = ViewData["ProductConfigs"] as Dictionary<string, string>;
var total = 0M;
}
<div data-halo-id="addressPC_1" data-halo-type="address">
<div class="order-address OneRow" id="addressPC_1">
<div class="header-wrapper border-bottom">
<h2 class="header-title">
确认收货地址
<a class="header-operation" rel="noopener noreferrer" target="_blank" href="//member1.taobao.com/member/fresh/deliver_address.htm">管理收货地址</a>
</h2>
</div>
<div class="address-tips-top"></div>
<input type="hidden" name="addr" id="addr" value="@($"{defaultAddr.ToString()} ({defaultAddr.Name} 收) {defaultAddr.Phone}")" />
<div class="address-list">
@{
for (int i = 0; i < addrs.Count; i++)
{
var addr = addrs[i];
if (addr.IsDefault)
{
<div class="addr-item-wrapper OneRow addr-selected addr-default">
<div class="inner-infos">
<div class="content-container">
<div class="selected-description">
<i class="marker">♥</i>
<span class="marker-tip">寄送至</span>
</div>
<label dir="ltr" aria-checked="true" class="next-radio-wrapper address-contents checked ">
<span class="next-radio checked" onclick="javascript:CheckAddr(this);">
<span class="next-radio-inner press"></span>
<input role="radio" tabindex="0" type="radio" aria-checked="true" class="next-radio-input" checked="">
</span>
<span class="next-radio-label">
<span class="provinceName">@addr.Province </span>
<span class="cityName">@addr.City </span>
<span class="areaName">@addr.District </span>
<span class="townName">@addr.Street </span>
<span class="addressDetail">@addr.Detail </span>
<span class="reciver">（@(addr.Name) 收）</span>
<span class="mobile">@addr.Phone </span>
<span class="default-tip">默认地址</span>
</span>
</label>
<a class="set-default" title="设置当前地址为默认">设置为默认收货地址</a>
</div>
<a title="修改地址" class="modify-operation">修改本地址</a>
</div>
<div class="curMarker"></div>
</div>
}
else
{
<div class="addr-item-wrapper OneRow addr-not-default">
<div class="inner-infos">
<div class="content-container">
<label dir="ltr" aria-checked="false" class="next-radio-wrapper address-contents ">
<span class="next-radio" onclick="javascript:CheckAddr(this);">
<span class="next-radio-inner unpress"></span>
<input role="radio" tabindex="0" type="radio" aria-checked="false" class="next-radio-input">
</span>
<span class="next-radio-label">
<span class="provinceName">@addr.Province </span>
<span class="cityName">@addr.City </span>
<span class="areaName">@addr.District </span>
<span class="townName">@addr.Street </span>
<span class="addressDetail">@addr.Detail </span>
<span class="reciver">（@(addr.Name) 收）</span>
<span class="mobile">@addr.Phone </span>
<span class="default-tip">默认地址</span>
</span>
</label>
<a class="set-default" title="设置当前地址为默认">设置为默认收货地址</a>
</div>
</div>
<div class="curMarker"></div>
</div>
}
}
}
</div>
<div class="address-tips OneRow"></div>
<div class="operations">
<a class="operation OneRow" style="font-size:12px;">使用其它地址</a>
</div>
</div>
</div>
<div data-halo-id="orderDesc_orderDesc_1" data-halo-type="itemHeader">
<div class="item-headers" id="orderDesc_orderDesc_1">
<div class="header-wrapper ">
<h2 class="header-title">确认订单信息</h2>
</div>
<div class="item-headers-wrap item-headers-column-6">
<div class="item-headers-content item-headers-0">店铺宝贝</div>
<div class="item-headers-content item-headers-1">商品属性</div>
<div class="item-headers-content item-headers-2">单价</div>
<div class="item-headers-content item-headers-3">数量</div>
<div class="item-headers-content item-headers-4">优惠方式</div>
<div class="item-headers-content item-headers-5">小计</div>
</div>
</div>
</div>
@{
var products = ViewData["Products"] as List<Product>;
var shops = ViewData["Shops"] as List<Shop>;
for (int i = 0; i < products.Count; i++)
{
var product = products[i];
var quantity_key = $"quantity_{product.Id}";
var remark_key = $"remark_{product.Id}";
var quantity = 1;
var remark = "";
if (productConfigs != null || productConfigs.Count > 0)
{
if (productConfigs.ContainsKey(quantity_key))
{
quantity = int.Parse(productConfigs[quantity_key]);
}
if (productConfigs.ContainsKey(remark_key))
{
remark = productConfigs[remark_key];
}
}
var shop = shops.FirstOrDefault(r => r.Id == product.ShopId);
total += (product.PreferentialPrice * quantity);
<input type="hidden" name="productId" value="@(product.Id)" />
<div id="@(product.Id)" data="[object Object]" extension="[object Object]" class="dinamicx-card-group" style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-content: flex-start; flex-shrink: 0;">
<div data-halo-id="seller_a805f2fc129a1c05fb8a632a8777f2d2" data-halo-type="seller">
<div class="order-orderInfo" id="seller_a805f2fc129a1c05fb8a632a8777f2d2" style="font-size:12px;">
<span class="shop-name">店铺: </span>
<a href="/Shop/Index?id=@(product.ShopId)" target="_blank" rel="noopener noreferrer" title="" class="order-link shop-url">@(shop.Description)</a>
<span class="shop-seller">
卖家:
<a href="##" target="_blank" rel="noopener noreferrer" title="@(shop.Description)" class="order-link shop-url">@(shop.Name)</a>
</span>
<span class="ww-light ww-large" data-encode="true" data-nick="@(shop.Name)" data-display="inline" data-icon="large">
<a href="" target="_blank" class="ww-inline ww-online" title=""><span></span></a>
</span>
</div>
</div>
<div data-halo-id="item_187bb8c6f1e163c55f64eb56fef0eacc" data-halo-type="flex">
<div id="item_187bb8c6f1e163c55f64eb56fef0eacc" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; margin: 0px; padding: 0px; background-color: rgb(251, 252, 255); border-bottom: 1px dotted rgb(221, 221, 221);">
<div style="padding: 0px;">
<div data-halo-id="itemInfoPC_187bb8c6f1e163c55f64eb56fef0eacc" data-halo-type="itemRow">
<div id="itemInfoPC_187bb8c6f1e163c55f64eb56fef0eacc" class="item-row">
<div class="order-itemInfo">
<div class="info-detail info-cell">
<a href="/Product/Detail/@(product.Id)" target="_blank" rel="noopener noreferrer" class="order-link info-cell">
<img class="info-img" src="@(product.ImageUrl)">
</a>
<div class="info-cell info-msg">
<a href="/Product/Detail/@(product.Id)" target="_blank" rel="noopener noreferrer" class="order-link info-title">@(product.Name)</a>
<div class="info-icon-list">
<div>
<a href="##" target="_blank" rel="noopener noreferrer" title="如实描述 - 消费者保障服务，卖家承诺商品如实描述" class="order-link icon-main">
<img src="~/imgs/others/quanyi.png">
</a>
<a target="_blank" rel="noopener noreferrer" title="7天无理由退货" class="order-link icon-main"><img></a>
</div>
</div>
</div>
</div>
<div class="info-sku info-cell">
<p>
<span class="hd">基础风格：@(product.BasicStyle)</span>
</p>
<p>
<span class="bd">商品类型：@(product.ProductStyle)</span>
</p>
</div>
<div class="info-price info-cell">@(Math.Round(product.Price, 2))</div>
</div>
<div class="order-quantity">
<div class="quantity-inner">
<p><input type="text" name="quantity_@(product.Id)" id="quantity_@(product.Id)" value="@(quantity)" style="width:40px; border:1px solid lightblue" onchange="javascript:confirmTotalPrice(@(product.Id));" /></p>
</div>
</div>
<div class="item-row__select"><p class="item-row__text">@(product.Preferential > 0 ? Math.Round(product.Preferential * 100, 2).ToString() + "%" : "无优惠")</p></div>
<div class="item-row__price">
<div class="label item-row__price-item">
<input type="hidden" value="@(Math.Round(product.PreferentialPrice,2))" id="preferentitalprice_@(product.Id)" />
<span style="font-weight: bold; font-style: normal; text-decoration: none; color: rgb(255, 68, 0); font-size: 14px; min-width: 100px;" id="item-row__price-item_@(product.Id)" name="item_row_price">@(Math.Round(product.PreferentialPrice * quantity, 2))</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-halo-type="flex">
<div style="display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; margin: 0px; padding: 0px; background-color: rgb(242, 247, 255); border-bottom: 1px dotted rgb(128, 178, 255);">
<div style="padding: 0px; border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="flex">
<div style="display: grid; grid-template-columns: 1fr 1fr; margin: 0px;">
<div style="padding: 0px; border-right: 1px solid rgb(255, 255, 255); border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="flex">
<div style="display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; margin: -5px 0px; padding: 0px;">
<div style="padding: 5px; border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="textArea">
<div class="textarea">
<label class="textarea__title">
<div>给卖家留言：</div>
</label>
<div class="textarea__wrapper">
<span class="next-input next-input-textarea textarea__input">
<textarea placeholder="选填，请先和商家协商一致，付款后商家可见" id="textarea_@(product.Id)" name="textarea_@(product.Id)" maxlength="200" data-real="true" rows="1">@(remark)</textarea>
<span class="next-input-control"><span class="next-input-len">0/200</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="padding: 0px; border-right: 1px solid rgb(255, 255, 255); border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="flex">
<div style="display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; margin: -5px 0px; padding: 0px;">
<div style="padding: 5px; border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="deliveryMethod">
<div class="delivery-method">
<div class="delivery-select">
<span class="delivery-title">运送方式：</span>
<div class="delivery-box">
<span class="single-method">
<label class="title-text">普通配送</label>
<label class="delivery-type"></label>
<span>快递￥10.00</span>
</span>
<div class="appoint-container"></div>
</div>
</div><span class="select-price" style="color: rgb(255, 80, 0);">10.00</span>
</div>
</div>
</div>
<div style="padding: 5px; border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="postageInsurance">
<div class="order-postageInsurance">
<div class="user-title">运费险：</div>
<div class="user-operate">
<label class="next-checkbox-wrapper ins-checkbox ">
<span class="next-checkbox">
<span class="next-checkbox-inner"><i class="next-icon next-icon-select next-xs"></i></span>
<input type="checkbox" aria-checked="false" class="next-checkbox-input">
</span>
<span class="next-checkbox-label">
<span class="trigger">运费险</span>
<div class="user-content">退换货可赔付10元</div>
</span>
</label>
<span class="widget-tips-box">
<img src="~/imgs/others/msg.png" class="wtip-icon">
<div class="wtip-msg-box wtip-msg-right">
<div class="wtip-arrow-icon"></div>
<div class="">退换货可赔付10元</div>
</div>
</span>
<a href="##" target="_blank" class="ins-question widget-tips-question">
<img class="ins-question-icon" src="~/imgs/others/ask.png">
</a>
</div>
<div class="user-price">0.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div style="padding: 0px; border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="flex">
<div style="display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; margin: 0px; padding: 10px 0px;">
<div style="padding: 0px;">
<div data-halo-type="label">
<div class="label ">
<span class="label__header" style="font-weight: normal; font-style: normal; text-decoration: none; font-size: 14px; min-width: 100px; margin-right: 10px;">店铺合计(含运费)</span>
<span style="font-weight: bold; font-style: normal; text-decoration: none; color: rgb(255, 68, 0); font-size: 14px; min-width: 100px;" id="total_price1">￥@(Math.Round(product.PreferentialPrice * quantity, 2))</span>
</div>
</div>
</div>
<div style="padding: 0px;">
<div data-halo-type="descriptionGroup"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
}
}
<div data-halo-id="realPayPC_1" data-halo-type="realPay">
<div class="realpay order-payInfo" id="realPayPC_1">
<div class="box">
<div class="box__wrapper">
<div class="box__shadow">
<div>
<span class="realpay--title">实付款：</span>
<span class="realpay--price-symbol">¥</span>
<span class="realpay--price" style="color: rgb(255, 80, 0);" id="total_price2">@(Math.Round(total, 2))</span>
</div>
<div class="order-confirmAddr">
<div class="confirmAddr-addr">
<span class="confirmAddr-title">寄送至：</span>
<span class="confirmAddr-addr-bd">@defaultAddr.ToString();</span>
</div>
<div class="confirmAddr-addr-user">
<span class="confirmAddr-title">收货人：</span>
<span class="confirmAddr-addr-bd">@defaultAddr.Name @defaultAddr.Phone</span>
</div>
</div>
<div class="order-confirm-eticket"></div>
</div>
</div>
</div>
</div>
</div>
<div data-halo-id="submitOrderPC_1" data-halo-type="submitOrder">
<div class="submitOrder-container" id="submitOrderPC_1">
<div class="wrapper">
<a class="go-back" target="_self" role="button" title="返回购物车" href="//cart.taobao.com/cart.htm">返回购物车</a>
<input type="submit" title="提交订单" class="go-btn" style="background-color: rgb(255, 80, 0);border-width:0px;margin-top:5px;" value="提交订单"></input>
</div>
<div class="base-msg">若价格变动，请在提交订单后联系卖家改价，并查看已买到的宝贝</div>
</div>
</div>
</form>
</div>
<script src="~/js/shop.js"></script>
Order management page
The order management page mainly checks the information of purchased products. As follows:
@{
var purchases = ViewData["Purchases"] as List<Purchase>;
var products = ViewData["ProductList"] as List<Product>;
var shops = ViewData["Shops"] as List<Shop>;
}
<div id="tp-bought-root" class="index-mod__root___3ZrD7">
<div class="tabs-mod__container___ICzlj nav-mod__tabs___1D0ZI">
<div class="tabs-mod__main___74ZLv">
<div class="tabs-mod__tab___3vuhD tabs-mod__selected___2DHDY">
<span class="nav-mod__tab___1PnZ4">
<span class="nav-mod__text___3O7jT">所有订单</span>
<span class="nav-mod__count___hc9IJ"></span>
</span>
<span class="tabs-mod__sep___waJNr">|</span>
</div>
<div class="tabs-mod__tab___3vuhD">
<span class="nav-mod__tab___1PnZ4">
<span class="nav-mod__text___3O7jT">待付款</span>
<span class="nav-mod__count___hc9IJ"></span>
</span>
<span class="tabs-mod__sep___waJNr">|</span>
</div>
<div class="tabs-mod__tab___3vuhD">
<span class="nav-mod__tab___1PnZ4">
<span class="nav-mod__text___3O7jT">待发货</span>
<span class="nav-mod__count___hc9IJ"></span>
</span>
<span class="tabs-mod__sep___waJNr">|</span>
</div>
<div class="tabs-mod__tab___3vuhD">
<span class="nav-mod__tab___1PnZ4">
<span class="nav-mod__text___3O7jT">待收货</span>
<span class="nav-mod__count___hc9IJ"></span>
</span>
<span class="tabs-mod__sep___waJNr">|</span>
</div>
<div class="tabs-mod__tab___3vuhD">
<span class="nav-mod__tab___1PnZ4">
<span class="nav-mod__text___3O7jT">待评价</span>
<span class="nav-mod__count___hc9IJ"></span>
</span>
<span class="tabs-mod__sep___waJNr">|</span>
</div>
<div class="tabs-mod__tab___3vuhD">
<span class="nav-mod__tab___1PnZ4 nav-mod__small___2yzl8">
<span class="nav-mod__text___3O7jT">分阶段</span>
<span class="nav-mod__count___hc9IJ"></span>
</span>
</div>
</div>
<div class="tabs-mod__minors___3PnBm">
<div class="tabs-mod__tab___3vuhD">
<span id="recycleTab" class="nav-mod__tab___1PnZ4 nav-mod__recycle___2c0Pl">
<img class="nav-mod__img___3LK9B" src="~/imgs/TB1G5QqIFXXXXbvXFXXcmA2.FXX-11-12.png" alt="订单回收站">
<span class="nav-mod__text___3O7jT">订单回收站</span>
</span>
</div>
</div>
</div>
<div class="index-mod__ems-ad___3fP6L js-ems-ad">
<div data-reactid=".0.1.0">
<div data-reactid=".0.1.0.0">
<span></span>
</div>
</div>
</div>
<form class="container">
<div class="search-mod__simple-part___3YVUs">
<input type="text" placeholder="输入商品标题或订单号进行搜索" class="search-mod__order-search-input___29Ui1">
<button type="submit" class="search-mod__order-search-button___1q3E0">订单搜索</button>
<button type="button" class="search-mod__more-button___nbIba">
<span>更多筛选条件</span>
<img src="~/imgs/TB1jK1dIVXXXXXzXVXXXXXXXXXX.png">
</button>
</div>
<div class="more-part" style="display: none;" data-reactid=".0.2.1">
<div class="row-mod__row___1aPep search-mod__row___1iPN4">
<div class="search-mod__col___3ytvL search-mod__col1___-AZN4">
<label>
<span class="search-mod__label-text___1aQSY">订单类型</span>
<span class="field-select-mod__select___xOMpt trade-select search-mod__select-input___35Np6 rc-select rc-select-enabled">
<span class="rc-select-selection rc-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<span class="rc-select-selection__rendered">
<span>全部</span>
</span>
<span class="rc-select-arrow" tabindex="-1" style="outline:none;">
<b></b>
</span>
</span>
</span>
</label>
</div><div class="search-mod__col___3ytvL search-mod__col2___24ptm">
<span class="search-mod__label-text___1aQSY">成交时间</span>
<input class="field-input-mod__input___Iwb6D search-mod__select-input___35Np6" placeholder="请选择时间范围起始" type="text">
<span class="search-mod__sep___3Np13">-</span>
<input class="field-input-mod__input___Iwb6D search-mod__select-input___35Np6" placeholder="请选择时间范围结束" type="text">
</div>
<div class="search-mod__col___3ytvL search-mod__col3___2W40T">
<label class="search-mod__last-field___3cUFK">
<span class="search-mod__label-text___1aQSY">卖家昵称</span>
<input class="field-input-mod__input___Iwb6D search-mod__select-input___35Np6" type="text">
</label>
</div>
</div>
<div class="row-mod__row___1aPep search-mod__row___1iPN4">
<div class="search-mod__col___3ytvL search-mod__col1___-AZN4">
<label>
<span class="search-mod__label-text___1aQSY">评价状态</span>
<span class="field-select-mod__select___xOMpt trade-select search-mod__select-input___35Np6 rc-select rc-select-enabled">
<span class="rc-select-selection rc-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<span class="rc-select-selection__rendered">
<span>全部</span>
</span>
<span class="rc-select-arrow" tabindex="-1" style="outline:none;">
<b></b>
</span>
</span>
</span>
</label>
</div>
<div class="search-mod__col___3ytvL search-mod__col2___24ptm">
<label data-reactid=".0.2.1.1.1.0">
<span class="search-mod__label-text___1aQSY" data-reactid=".0.2.1.1.1.0.0">交易状态</span>
<span class="field-select-mod__select___xOMpt trade-select search-mod__select-input___35Np6 rc-select rc-select-enabled">
<span class="rc-select-selection rc-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<span class="rc-select-selection__rendered">
<span>全部</span>
</span>
<span class="rc-select-arrow" tabindex="-1" style="outline:none;">
<b></b>
</span>
</span>
</span>
</label>
</div>
<div class="search-mod__col___3ytvL search-mod__col3___2W40T">
<label class="search-mod__last-field___3cUFK">
<span class="search-mod__label-text___1aQSY">售后服务</span>
<span class="field-select-mod__select___xOMpt trade-select search-mod__select-input___35Np6 rc-select rc-select-enabled">
<span class="rc-select-selection rc-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<span class="rc-select-selection__rendered">
<span>全部</span>
</span>
<span class="rc-select-arrow" tabindex="-1" style="outline:none;">
<b></b>
</span>
</span>
</span>
</label>
</div>
</div>
</div>
</form>
<span id="nav_anchor" style="visibility:hidden;height:0;"></span>
<table class="bought-table-mod__table___AnaXt table-head-mod__table___17eFg">
<colgroup data-reactid=".0.4.0">
<col class="bought-table-mod__col1___3U5RK">
<col class="bought-table-mod__col2___224Oh">
<col class="bought-table-mod__col3___J0oe0">
<col class="bought-table-mod__col4___XvKTC">
<col class="bought-table-mod__col5___2kktP">
<col class="bought-table-mod__col6___1KqCQ">
<col class="bought-table-mod__col7___PpB_p">
</colgroup>
<tbody data-reactid=".0.4.1">
<tr data-reactid=".0.4.1.0">
<th>宝贝</th>
<th>单价</th>
<th>数量</th>
<th>商品操作</th>
<th>实付款</th>
<th>
<span class="field-select-mod__select___xOMpt trade-select table-head-mod__status___SBEwU rc-select rc-select-enabled">
<span class="rc-select-selection rc-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<span class="rc-select-selection__rendered">
<span>交易状态</span>
</span>
<span class="rc-select-arrow" tabindex="-1" style="outline:none;">
<b></b>
</span>
</span>
</span>
</th>
<th>交易操作</th>
</tr>
</tbody>
</table>
<div class="row-mod__row___1aPep js-actions-row-top">
<div style="float:left;">
<div class="batch-mod__container___sK68S"></div>
</div>
<div style="float:right;">
<div class="simple-pagination-mod__container___1pC5p">
<button class="button-mod__button___2HDif button-mod__default___2pRKd button-mod__small___1a8rc simple-pagination-mod__prev___pJnpC" disabled="">上一页</button>
<button class="button-mod__button___2HDif button-mod__default___2pRKd button-mod__small___1a8rc">下一页</button>
</div>
</div>
</div>
@if (purchases != null && purchases.Count > 0)
{
foreach (var purchase in purchases)
{
var product = products.FirstOrDefault(r => r.Id == purchase.ProductId);
var shop = shops.FirstOrDefault(r => r.Id == product.ShopId);
<div class="index-mod__order-container___1ur4- js-order-container">
<div class="bought-wrapper-mod__trade-order___2lrzV bought-wrapper-mod__closed___3pIh6">
<table class="bought-table-mod__table___AnaXt bought-wrapper-mod__table___3xFFM">
<colgroup>
<col class="bought-table-mod__col1___3U5RK">
<col class="bought-table-mod__col2___224Oh">
<col class="bought-table-mod__col3___J0oe0">
<col class="bought-table-mod__col4___XvKTC">
<col class="bought-table-mod__col5___2kktP">
<col class="bought-table-mod__col6___1KqCQ">
<col class="bought-table-mod__col7___PpB_p">
</colgroup>
<tbody class="bought-wrapper-mod__head___2vnqo">
<tr>
<td class="bought-wrapper-mod__head-info-cell___29cDO">
<label class="bought-wrapper-mod__checkbox-label___3Va60">
<span class="bought-wrapper-mod__checkbox___11anQ">
<input type="checkbox" disabled="">
</span>
<span class="bought-wrapper-mod__create-time___yNWVS">@(purchase.CreateTime.ToString("yyyy-MM-dd"))</span>
</label>
<span>
<span>订单号</span>
<span>: </span>
<span>@purchase.Id</span>
</span>
</td>
<td colspan="2" class="bought-wrapper-mod__seller-container___3dAK3">
<span class="seller-mod__container___zFAFV">
<a href="" class="seller-mod__name___2IlQm" title="@shop.Name" target="_blank" rel="noopener noreferrer">@shop.Name</a>
</span>
</td>
<td>
<span id="webww1">
<span class="ww-light ww-large" data-display="inline" data-nick="@shop.Name" data-tnick="@shop.Name"><a href="" target="_blank" class="ww-inline ww-online" title=""><span></span></a></span>
</span>
</td>
<td colspan="3" class="bought-wrapper-mod__thead-operations-container___2LwDA">
<span></span>
<a href="" class="bought-wrapper-mod__th-operation___yRtHm" title="编辑标记信息，仅自己可见" target="_blank" rel="noopener noreferrer" id="flag">
<i style="height:17px;width:1px;padding-left:17px;overflow:hidden;vertical-align:middle;font-size:0px;display:inline-block;background:url(/imgs/TB1heyGFVXXXXXpXXXXR3Ey7pXX-550-260.png) no-repeat -176px -176px;"></i>
</a>
<a href="###" class="bought-wrapper-mod__th-operation___yRtHm always-visible" title="删除订单" target="_blank" rel="noopener noreferrer" action="a7" data="[object Object]" id="delOrder">
<i style="height:17px;width:1px;padding-left:17px;overflow:hidden;vertical-align:middle;font-size:0px;display:inline-block;visibility:visible;background:url(/imgs/TB1heyGFVXXXXXpXXXXR3Ey7pXX-550-260.png) no-repeat -239px -176px;"></i>
</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="sol-mod__no-br___36X3g">
<div class="ml-mod__container___2DOxT production-mod__production___123Ax suborder-mod__production___3WebF">
<div class="ml-mod__media___2sZrj" style="width:80px;">
<a href="/Product/Detail/@(product.Id)" class="production-mod__pic___G8alD" target="_blank" rel="noopener noreferrer">
<img src="@(product.ImageUrl)">
<span> </span>
</a>
</div>
<div style="margin-left:90px;">
<p>
<a href="/Product/Detail/@(product.Id)" target="_blank" rel="noopener noreferrer">
<span> </span>
<span style="line-height:16px;">@product.Name</span>
<span> </span>
</a>
<span></span>
<span></span>
<span></span>
</p>
<p>
<a href="/Rule/Real" title="正品保证" type="3" style="margin-right:8px;" target="_blank">
<img src="~/imgs/T1SyeXFpliXXaSQP_X-16-16.png">
</a>
<a href="/Rule/XiaoBao" title="如实描述" type="3" style="margin-right:8px;" target="_blank"><img src="~/imgs/TB1PDB6IVXXXXaVaXXXXXXXXXXX.png"></a>
</p>
</div>
</div>
</td>
<td class="sol-mod__no-br___36X3g">
<div class="price-mod__price___3_8Zs">
<p>
<span>￥</span>
<span>@(Math.Round(product.PreferentialPrice, 2))</span>
</p>
</div>
</td>
<td class="sol-mod__no-br___36X3g">
<div>
<p>@(purchase.BuyCount)</p>
</div>
</td>
<td>
<div>
<p style="margin-bottom:3px;">
<span class="text-mod__link___1rXmw text-mod__hover___1TDrR" action="a3">申请售后</span>
</p>
</div>
</td>
<td class="">
<div>
<div class="price-mod__price___3_8Zs">
<p>
<strong>
<span>￥</span>
<span>@(purchase.TotalPrice)</span>
</strong>
</p>
</div>
<p style="color:#6c6c6c;font-family:verdana;">
<span></span>
<span></span>
<span></span>
<span></span>
</p>
<div style="font-family:verdana;">
<div></div>
</div>
<span></span>
</div>
</td>
<td class="">
<div>
<p style="margin-bottom:3px;"><span class="text-mod__link___1rXmw">购买成功</span></p>
<div>
<p style="margin-bottom:3px;">
<a href="" class="text-mod__link___1rXmw text-mod__hover___1TDrR" target="_blank" rel="noopener noreferrer" id="viewDetail">订单详情</a>
</p>
</div>
</div>
</td>
<td class="">
<div>
<p style="margin-bottom:3px;">
<a href="" class="text-mod__link___1rXmw text-mod__hover___1TDrR" target="_blank" rel="noopener noreferrer">追加评论</a>
</p>
<p style="margin-bottom:3px;">
<span class="text-mod__link___1rXmw text-mod__hover___1TDrR" action="a1">再次购买</span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
}
}
else
{
<div class="index-mod__empty-list___3CaW2 js-empty-list">
<img class="index-mod__empty-list-img___3kyoO" src="~/imgs/avif/noorder.avif">
<span data-reactid=".0.7.1">没有符合条件的宝贝，请尝试其他搜索条件。</span>
</div>
}
<div class="row-mod__row___1aPep js-actions-row-bottom">
<div style="float:left;">
<div class="batch-mod__container___sK68S"></div>
</div>
<div style="float:right;">
<ul class="pagination " unselectable="unselectable">
<li title="上一页" class="pagination-disabled pagination-prev"><a></a></li>
<li title="1" class="pagination-item pagination-item-1 pagination-item-active"><a>1</a></li>
<li title="2" class="pagination-item pagination-item-2"><a>2</a></li>
<li title="3" class="pagination-item pagination-item-3"><a>3</a></li>
<li title="4" class="pagination-item pagination-item-4"><a>4</a></li>
<li title="下一页" class="pagination-next"><a></a></li>
<noscript></noscript>
</ul>
</div>
</div>
<div class="loading-mod__loading___3nGTY loading-mod__hidden___1tIoI">
<div class="loading-mod__bg___2ylNX loading-mod__q___3pSfD"></div>
<div class="loading-mod__bg___2ylNX loading-mod__z___3Le9C">
</div>
</div>
</div>
Order placement and order management display
Run the program and click to log in. After successful login, select the product and click [Buy Now] or click [Buy] on the shopping cart page, and then jump to the order page, as shown below:
Run the program and click Login. After successful login, click on the personal name in the upper right corner, click the drop-down menu, select Order Management, and then open the Order Management page, as shown below:
The above is the sixth part of the practical mall system development of ASP.NET Core MVC. We will continue to introduce other modules in the future, so stay tuned.