[回馈]ASP.NET Core MVC开发实战之商城系统(六)

  • [回馈]ASP.NET Core MVC开发实战之商城系统(六)已关闭评论
  • 180 次浏览
  • A+
所属分类:.NET技术
摘要

经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情,购物车等功能的开发,今天继续讲解订单管理 功能开发,仅供学习分享使用,如有不足之处,还请指正。

经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情,购物车等功能的开发,今天继续讲解订单管理功能开发,仅供学习分享使用,如有不足之处,还请指正。

[回馈]ASP.NET Core MVC开发实战之商城系统(六)

 

订单管理功能说明

 

在商城系统中,当用户需要购买商品时,就会进行下单。购买的入口有很多,比如:

  1. 首页或商品列表页面,看到商品缩略图,可以点击【立即购买】按钮进行下单;
  2. 在商品详情页面,查看商品的详细参数后,也可以点击【立即购买】按钮进行下单;
  3. 在购物车页面,选择购物车中的商品,进行批量下单。

以上3个入口,下单方式大致相同,却又略有差异。具体如下所示:

  • 1,2两种方式是单个商品的购买。
  • 3是批量商品下单或单个商品下单,可以自由选择。
  • 1是默认商品参数进行下单,2是可以自由选择商品参数进行下单。

所以在不同是入口进行下单,要进行细微的调整。但是在跳转的下单页面,又可以进行统一。

同样立即购买功能,和添加购物车功能一样,需要用户的信息,需要登录才可以。

 

商品下单流程图

 

在易购商城系统中,商品下单流程图,如下所示:

[回馈]ASP.NET Core MVC开发实战之商城系统(六)

 

订单管理功能开发

 

1. 数据表创建

 

订单表【EB_Purchase】,主要保存用户的订单信息,包括订单ID,商品ID,用户ID,物流ID,收货地址,商品备注等信息。具体如下所示:

[回馈]ASP.NET Core MVC开发实战之商城系统(六)

订单表创建表语句如下所示:

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">&hearts;</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">店铺:&nbsp;</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">                                 卖家:&nbsp;                                 <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开发实战之商城系统(六)

订单管理页面

运行程序,点击登录,在登录成功后,在右上角个人名称,点击下拉菜单,选择订单管理,然后打开订单管理页面,如下所示:

[回馈]ASP.NET Core MVC开发实战之商城系统(六)

以上就是ASP.NET Core MVC开发实战之商城系统第六部分内容,后续将继续介绍其他模块,敬请期待。