- A+
所属分类：.NET技术
经过一段时间的准备，新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始，在之前的文章中，讲解了商城系统的整体功能设计，页面布局设计，环境搭建，系统配置，及首页【商品类型，banner条，友情链接，降价促销，新品爆款】，商品列表页面，商品详情，购物车等功能的开发，今天继续讲解订单管理功能开发，仅供学习分享使用，如有不足之处，还请指正。
![[回馈]ASP.NET Core MVC开发实战之商城系统(六)](https://www.ztsky.cn/wp-content/uploads/2023/08/20230827_64eaebc2b414f.png)
订单管理功能说明
在商城系统中，当用户需要购买商品时，就会进行下单。购买的入口有很多，比如：
- 首页或商品列表页面，看到商品缩略图，可以点击【立即购买】按钮进行下单；
- 在商品详情页面，查看商品的详细参数后，也可以点击【立即购买】按钮进行下单；
- 在购物车页面，选择购物车中的商品，进行批量下单。
以上3个入口，下单方式大致相同，却又略有差异。具体如下所示：
- 1,2两种方式是单个商品的购买。
- 3是批量商品下单或单个商品下单，可以自由选择。
- 1是默认商品参数进行下单，2是可以自由选择商品参数进行下单。
所以在不同是入口进行下单，要进行细微的调整。但是在跳转的下单页面，又可以进行统一。
同样立即购买功能，和添加购物车功能一样，需要用户的信息，需要登录才可以。
商品下单流程图
在易购商城系统中，商品下单流程图，如下所示：
![[回馈]ASP.NET Core MVC开发实战之商城系统(六)](https://www.ztsky.cn/wp-content/uploads/2023/08/20230827_64eaebc4a925c.png)
订单管理功能开发
1. 数据表创建
订单表【EB_Purchase】，主要保存用户的订单信息，包括订单ID，商品ID，用户ID，物流ID，收货地址，商品备注等信息。具体如下所示：
![[回馈]ASP.NET Core MVC开发实战之商城系统(六)](https://www.ztsky.cn/wp-content/uploads/2023/08/20230827_64eaebc60527c.png)
订单表创建表语句如下所示：
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. 订单表实体模型创建
实体模型和数据库表字段保持一致，便于进行数据映射，具体如下所示：
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. 数据处理层DAL
数据处理层DAL，主要进行订单的查询，插入等操作。如下所示：
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. 控制器获取
控制器主要包括订单管理【如：查询，删除等操作】，下单购买功能，根据上述分析，不同的入口单独进行处理。如下所示：
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. 视图层展示
订单相关功能主要有两个页面，一个下单页面，一个订单管理页面。
下单页面主要功能是展示商品列表，下单按钮，以及用户的选择，备注，价格等信息。如下所示：
<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" alt="[回馈]ASP.NET Core MVC开发实战之商城系统(六)"> </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" alt="[回馈]ASP.NET Core MVC开发实战之商城系统(六)" 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" alt="[回馈]ASP.NET Core MVC开发实战之商城系统(六)"> </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>订单管理页面
订单管理页面，主要查看已经购买过从商品信息。如下所示：
@{ 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="[回馈]ASP.NET Core MVC开发实战之商城系统(六)" 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" alt="[回馈]ASP.NET Core MVC开发实战之商城系统(六)"> </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" alt="[回馈]ASP.NET Core MVC开发实战之商城系统(六)"> </a> <a href="/Rule/XiaoBao" title="如实描述" type="3" style="margin-right:8px;" target="_blank"><img src="~/imgs/TB1PDB6IVXXXXaVaXXXXXXXXXXX.png" alt="[回馈]ASP.NET Core MVC开发实战之商城系统(六)"></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>
下单及订单管理展示
运行程序，点击登录，在登录成功后，选择商品点击【立即购买】或者购物车页面点击【购买】，然后跳转到下单页面，如下所示：
![[回馈]ASP.NET Core MVC开发实战之商城系统(六)](https://www.ztsky.cn/wp-content/uploads/2023/08/20230827_64eaebc70a3ed.png)
订单管理页面
运行程序，点击登录，在登录成功后，在右上角个人名称，点击下拉菜单，选择订单管理，然后打开订单管理页面，如下所示：
![[回馈]ASP.NET Core MVC开发实战之商城系统(六)](https://www.ztsky.cn/wp-content/uploads/2023/08/20230827_64eaebc88dbcc.png)
以上就是ASP.NET Core MVC开发实战之商城系统第六部分内容，后续将继续介绍其他模块，敬请期待。
