经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情,购物车等功能的开发,今天继续讲解订单管理功能开发,仅供学习分享使用,如有不足之处,还请指正。
订单管理功能说明
在商城系统中,当用户需要购买商品时,就会进行下单。购买的入口有很多,比如:
- 首页或商品列表页面,看到商品缩略图,可以点击【立即购买】按钮进行下单;
- 在商品详情页面,查看商品的详细参数后,也可以点击【立即购买】按钮进行下单;
- 在购物车页面,选择购物车中的商品,进行批量下单。
以上3个入口,下单方式大致相同,却又略有差异。具体如下所示:
- 1,2两种方式是单个商品的购买。
- 3是批量商品下单或单个商品下单,可以自由选择。
- 1是默认商品参数进行下单,2是可以自由选择商品参数进行下单。
所以在不同是入口进行下单,要进行细微的调整。但是在跳转的下单页面,又可以进行统一。
同样立即购买功能,和添加购物车功能一样,需要用户的信息,需要登录才可以。
商品下单流程图
在易购商城系统中,商品下单流程图,如下所示:
订单管理功能开发
1. 数据表创建
订单表【EB_Purchase】,主要保存用户的订单信息,包括订单ID,商品ID,用户ID,物流ID,收货地址,商品备注等信息。具体如下所示:
订单表创建表语句如下所示:
CREATETABLE[dbo].[EB_Purchase]([Id][bigint] IDENTITY(1,1)NOTNULL,[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]NOTNULL,[CreateUser][varchar](50)NULL,[LastEditTime][datetime]NULL,[LastEditUser][varchar](50)NULL)ON[PRIMARY]
2. 订单表实体模型创建
实体模型和数据库表字段保持一致,便于进行数据映射,具体如下所示:
usingSqlSugar; namespaceEasyBuyShop.Models{ [SugarTable("EB_Purchase")] publicclassPurchase : EntityModel { publiclongProductId { get; set; } publiclongCustomerId { get; set; } publicintBuyCount { get; set; } publicdecimalTotalPrice { get; set; } publiclongLogisticsId { get; set; } /// <summary>/// 收件地址ID/// </summary>publicstringRecvAddr { get; set; } /// <summary>/// 订单状态/// </summary>publicintStatus { get; set; } publicstringRemark { get; set; } } }
3. 数据处理层DAL
数据处理层DAL,主要进行订单的查询,插入等操作。如下所示:
usingEasyBuyShop.Models; usingEasyBuyShop.Utils; namespaceEasyBuyShop.DAL{ publicclassPurchaseDal : BaseDal { /// <summary>/// 获取当前用户的订单列表/// </summary>/// <param name="userId"></param>/// <returns></returns>publicList<Purchase>GetPurchases(longuserId) { try { using (vardb=this.GetDb(BaseDal.ConnStr)) { returndb.Queryable<Purchase>().Where(r=>r.CustomerId==userId).ToList(); } } catch (Exceptionex) { LogHelper.Fatal(ex.Message); returnnewList<Purchase>(); } } } }
4. 控制器获取
控制器主要包括订单管理【如:查询,删除等操作】,下单购买功能,根据上述分析,不同的入口单独进行处理。如下所示:
usingEasyBuyShop.DAL; usingEasyBuyShop.Models; usingMicrosoft.AspNetCore.Mvc; namespaceEasyBuyShop.Controllers{ publicclassPurchaseController : Controller { publicIActionResultIndex() { varusername=HttpContext.Session.GetString("username"); varrealName=HttpContext.Session.GetString("realname"); varuserId=HttpContext.Session.GetInt32("userid"); ViewData["Username"] =username; ViewData["RealName"] =realName; varpurchaseDal=newPurchaseDal(); varpurchases=purchaseDal.GetPurchases(userId.Value); varproducts=newList<Product>(); varshops=newList<Shop>(); if (purchases!=null&&purchases.Count() >0) { varproductDal=newProductDal(); varpIds=purchases.Select(x=>x.ProductId).ToList(); products=productDal.GetProductListByIds(pIds); if (products!=null&&products.Count() >0) { varshopDal=newShopDal(); shops=shopDal.GetShops(products.Select(r=>r.ShopId).ToList()); } } ViewData["Shops"] =shops; ViewData["ProductList"] =products; ViewData["Purchases"] =purchases; returnView(); } /// <summary>/// 首页或商品列表快捷下单/// </summary>/// <param name="productId"></param>/// <returns></returns> [HttpGet] publicIActionResultBuy(intproductId) { Msgmsg=newMsg(); varuserId=HttpContext.Session.GetInt32("userid"); varuserName=HttpContext.Session.GetString("username"); varrealName=HttpContext.Session.GetString("realname"); ViewData["Username"] =userName; ViewData["RealName"] =realName; if (userId==null) { msg.code=-1; msg.message="尚未登录"; returnRedirect("/Auth/Login"); } varshopDal=newShopDal(); varproductDal=newProductDal(); varaddrDal=newAddrDal(); varproduct=productDal.GetProduct(productId); varshop=shopDal.GetShopById(product.ShopId); varaddrs=addrDal.GetAddrByUserId((long)userId); List<Product>products=newList<Product>() { product }; List<Shop>shops=newList<Shop>() { shop }; Dictionary<string, string>productConfigs=newDictionary<string, string>(); ViewData["Products"] =products; ViewData["Shops"] =shops; ViewData["Addrs"] =addrs; ViewData["ProductConfigs"] =productConfigs; returnView(); } /// <summary>/// 确认下单/// </summary>/// <returns></returns> [HttpPost] publicIActionResultBuy() { Msgmsg=newMsg(); varuserId=HttpContext.Session.GetInt32("userid"); varuserName=HttpContext.Session.GetString("username"); if (userId==null) { msg.code=-1; msg.message="尚未登录"; returnRedirect("/Auth/Login"); } varaddr=Request.Form["addr"]; varproductIds=Request.Form["productId"].ToList(); foreach (varproductIdinproductIds) { varremark=Request.Form[$"textarea_{productId}"]; varquantity=Request.Form[$"quantity_{productId}"]; varproductDal=newProductDal(); varproduct=productDal.GetProduct(long.Parse(productId)); if (product!=null) { varpruchaseDal=newPurchaseDal(); varpurchase=newPurchase(); 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; intid=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; returnView(); } else { returnRedirect("/Purchase/Index"); } } /// <summary>/// 从详情页面下单/// </summary>/// <returns></returns> [HttpPost] publicIActionResultBuyWithForm() { Msgmsg=newMsg(); varuserId=HttpContext.Session.GetInt32("userid"); varuserName=HttpContext.Session.GetString("username"); if (userId==null) { msg.code=-1; msg.message="尚未登录"; returnJson(msg); } varproductId=long.Parse(Request.Form["productId"]); varquantity=int.Parse(Request.Form["quantity"]); varcolor=Request.Form["color"]; varsize=Request.Form["size"]; varremark=$"颜色:{color},大小:{size}"; varproductDal=newProductDal(); varproduct=productDal.GetProduct(productId); varshopDal=newShopDal(); varaddrDal=newAddrDal(); varshop=shopDal.GetShopById(product.ShopId); varaddrs=addrDal.GetAddrByUserId((long)userId); List<Product>products=newList<Product>() { product }; List<Shop>shops=newList<Shop>() { shop }; Dictionary<string, string>productConfigs=newDictionary<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; returnView("/Views/Purchase/Buy.cshtml"); } /// <summary>/// 从购物车下单/// </summary>/// <returns></returns> [HttpPost] publicIActionResultBuyWithCart() { Msgmsg=newMsg(); varuserId=HttpContext.Session.GetInt32("userid"); varuserName=HttpContext.Session.GetString("username"); if (userId==null) { msg.code=-1; msg.message="尚未登录"; returnJson(msg); } varcartIds=Request.Form["chkCart"]; if (string.IsNullOrEmpty(cartIds)) { msg.code=-1; msg.message="没有选择任何商品"; returnJson(msg); } varcartIdArr=cartIds.ToString().Split(','); if(cartIdArr!=null&&cartIdArr.Length>0) { varcartDal=newCartDal(); varproductDal=newProductDal(); varshopDal=newShopDal(); varaddrDal=newAddrDal(); List<Product>products=newList<Product>(); List<Shop>shops=newList<Shop>(); Dictionary<string, string>productConfigs=newDictionary<string, string>(); foreach (varcartIdincartIdArr) { varcart=cartDal.GetCart(long.Parse( cartId)); varproduct=productDal.GetProduct(cart.ProductId); if (product!=null) { products.Add(product); } varshop=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()); } varaddrs=addrDal.GetAddrByUserId((long)userId); ViewData["Products"] =products; ViewData["Shops"] =shops; ViewData["Addrs"] =addrs; ViewData["ProductConfigs"] =productConfigs; returnView("/Views/Purchase/Buy.cshtml"); } else { returnView("/Views/Cart/Index"); } } } }
5. 视图层展示
订单相关功能主要有两个页面,一个下单页面,一个订单管理页面。
下单页面主要功能是展示商品列表,下单按钮,以及用户的选择,备注,价格等信息。如下所示:
<divclass="container"><formmethod="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; } <divdata-halo-id="addressPC_1"data-halo-type="address"><divclass="order-address OneRow"id="addressPC_1"><divclass="header-wrapper border-bottom"><h2class="header-title"> 确认收货地址 <aclass="header-operation"rel="noopener noreferrer"target="_blank"href="//member1.taobao.com/member/fresh/deliver_address.htm">管理收货地址</a></h2></div><divclass="address-tips-top"></div><inputtype="hidden"name="addr"id="addr"value="@($"{defaultAddr.ToString()}({defaultAddr.Name}收){defaultAddr.Phone}")"/><divclass="address-list"> @{ for (int i = 0; i <addrs.Count;i++){varaddr = addrs[i];if(addr.IsDefault){<div class="addr-item-wrapper OneRow addr-selected addr-default"><divclass="inner-infos"><divclass="content-container"><divclass="selected-description"><iclass="marker">♥</i><spanclass="marker-tip">寄送至</span></div><labeldir="ltr"aria-checked="true"class="next-radio-wrapper address-contents checked "><spanclass="next-radio checked"onclick="javascript:CheckAddr(this);"><spanclass="next-radio-inner press"></span><inputrole="radio"tabindex="0"type="radio"aria-checked="true"class="next-radio-input"checked=""></span><spanclass="next-radio-label"><spanclass="provinceName">@addr.Province </span><spanclass="cityName">@addr.City </span><spanclass="areaName">@addr.District </span><spanclass="townName">@addr.Street </span><spanclass="addressDetail">@addr.Detail </span><spanclass="reciver">(@(addr.Name) 收)</span><spanclass="mobile">@addr.Phone </span><spanclass="default-tip">默认地址</span></span></label><aclass="set-default"title="设置当前地址为默认">设置为默认收货地址</a></div><atitle="修改地址"class="modify-operation">修改本地址</a></div><divclass="curMarker"></div></div> } else { <divclass="addr-item-wrapper OneRow addr-not-default"><divclass="inner-infos"><divclass="content-container"><labeldir="ltr"aria-checked="false"class="next-radio-wrapper address-contents "><spanclass="next-radio"onclick="javascript:CheckAddr(this);"><spanclass="next-radio-inner unpress"></span><inputrole="radio"tabindex="0"type="radio"aria-checked="false"class="next-radio-input"></span><spanclass="next-radio-label"><spanclass="provinceName">@addr.Province </span><spanclass="cityName">@addr.City </span><spanclass="areaName">@addr.District </span><spanclass="townName">@addr.Street </span><spanclass="addressDetail">@addr.Detail </span><spanclass="reciver">(@(addr.Name) 收)</span><spanclass="mobile">@addr.Phone </span><spanclass="default-tip">默认地址</span></span></label><aclass="set-default"title="设置当前地址为默认">设置为默认收货地址</a></div></div><divclass="curMarker"></div></div> } } } </div><divclass="address-tips OneRow"></div><divclass="operations"><aclass="operation OneRow"style="font-size:12px;">使用其它地址</a></div></div></div><divdata-halo-id="orderDesc_orderDesc_1"data-halo-type="itemHeader"><divclass="item-headers"id="orderDesc_orderDesc_1"><divclass="header-wrapper "><h2class="header-title">确认订单信息</h2></div><divclass="item-headers-wrap item-headers-column-6"><divclass="item-headers-content item-headers-0">店铺宝贝</div><divclass="item-headers-content item-headers-1">商品属性</div><divclass="item-headers-content item-headers-2">单价</div><divclass="item-headers-content item-headers-3">数量</div><divclass="item-headers-content item-headers-4">优惠方式</div><divclass="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++){varproduct = products[i];varquantity_key = $"quantity_{product.Id}";varremark_key = $"remark_{product.Id}";varquantity = 1;varremark = "";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); <inputtype="hidden"name="productId"value="@(product.Id)"/><divid="@(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;"><divdata-halo-id="seller_a805f2fc129a1c05fb8a632a8777f2d2"data-halo-type="seller"><divclass="order-orderInfo"id="seller_a805f2fc129a1c05fb8a632a8777f2d2"style="font-size:12px;"><spanclass="shop-name">店铺: </span><ahref="/Shop/Index?id=@(product.ShopId)"target="_blank"rel="noopener noreferrer"title=""class="order-link shop-url">@(shop.Description)</a><spanclass="shop-seller"> 卖家: <ahref="##"target="_blank"rel="noopener noreferrer"title="@(shop.Description)"class="order-link shop-url">@(shop.Name)</a></span><spanclass="ww-light ww-large"data-encode="true"data-nick="@(shop.Name)"data-display="inline"data-icon="large"><ahref=""target="_blank"class="ww-inline ww-online"title=""><span></span></a></span></div></div><divdata-halo-id="item_187bb8c6f1e163c55f64eb56fef0eacc"data-halo-type="flex"><divid="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);"><divstyle="padding: 0px;"><divdata-halo-id="itemInfoPC_187bb8c6f1e163c55f64eb56fef0eacc"data-halo-type="itemRow"><divid="itemInfoPC_187bb8c6f1e163c55f64eb56fef0eacc"class="item-row"><divclass="order-itemInfo"><divclass="info-detail info-cell"><ahref="/Product/Detail/@(product.Id)"target="_blank"rel="noopener noreferrer"class="order-link info-cell"><imgclass="info-img"src="@(product.ImageUrl)"></a><divclass="info-cell info-msg"><ahref="/Product/Detail/@(product.Id)"target="_blank"rel="noopener noreferrer"class="order-link info-title">@(product.Name)</a><divclass="info-icon-list"><div><ahref="##"target="_blank"rel="noopener noreferrer"title="如实描述 - 消费者保障服务,卖家承诺商品如实描述"class="order-link icon-main"><imgsrc="~/imgs/others/quanyi.png"></a><atarget="_blank"rel="noopener noreferrer"title="7天无理由退货"class="order-link icon-main"><img></a></div></div></div></div><divclass="info-sku info-cell"><p><spanclass="hd">基础风格:@(product.BasicStyle)</span></p><p><spanclass="bd">商品类型:@(product.ProductStyle)</span></p></div><divclass="info-price info-cell">@(Math.Round(product.Price, 2))</div></div><divclass="order-quantity"><divclass="quantity-inner"><p><inputtype="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><divclass="item-row__select"><pclass="item-row__text">@(product.Preferential > 0 ? Math.Round(product.Preferential * 100, 2).ToString() + "%" : "无优惠")</p></div><divclass="item-row__price"><divclass="label item-row__price-item"><inputtype="hidden"value="@(Math.Round(product.PreferentialPrice,2))"id="preferentitalprice_@(product.Id)"/><spanstyle="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><divdata-halo-type="flex"><divstyle="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);"><divstyle="padding: 0px; border-top: 1px solid rgb(255, 255, 255);"><divdata-halo-type="flex"><divstyle="display: grid; grid-template-columns: 1fr 1fr; margin: 0px;"><divstyle="padding: 0px; border-right: 1px solid rgb(255, 255, 255); border-top: 1px solid rgb(255, 255, 255);"><divdata-halo-type="flex"><divstyle="display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; margin: -5px 0px; padding: 0px;"><divstyle="padding: 5px; border-top: 1px solid rgb(255, 255, 255);"><divdata-halo-type="textArea"><divclass="textarea"><labelclass="textarea__title"><div>给卖家留言:</div></label><divclass="textarea__wrapper"><spanclass="next-input next-input-textarea textarea__input"><textareaplaceholder="选填,请先和商家协商一致,付款后商家可见"id="textarea_@(product.Id)"name="textarea_@(product.Id)"maxlength="200"data-real="true"rows="1">@(remark)</textarea><spanclass="next-input-control"><spanclass="next-input-len">0/200</span></span></span></div></div></div></div></div></div></div><divstyle="padding: 0px; border-right: 1px solid rgb(255, 255, 255); border-top: 1px solid rgb(255, 255, 255);"><divdata-halo-type="flex"><divstyle="display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; margin: -5px 0px; padding: 0px;"><divstyle="padding: 5px; border-top: 1px solid rgb(255, 255, 255);"><divdata-halo-type="deliveryMethod"><divclass="delivery-method"><divclass="delivery-select"><spanclass="delivery-title">运送方式:</span><divclass="delivery-box"><spanclass="single-method"><labelclass="title-text">普通配送</label><labelclass="delivery-type"></label><span>快递¥10.00</span></span><divclass="appoint-container"></div></div></div><spanclass="select-price"style="color: rgb(255, 80, 0);">10.00</span></div></div></div><divstyle="padding: 5px; border-top: 1px solid rgb(255, 255, 255);"><divdata-halo-type="postageInsurance"><divclass="order-postageInsurance"><divclass="user-title">运费险:</div><divclass="user-operate"><labelclass="next-checkbox-wrapper ins-checkbox "><spanclass="next-checkbox"><spanclass="next-checkbox-inner"><iclass="next-icon next-icon-select next-xs"></i></span><inputtype="checkbox"aria-checked="false"class="next-checkbox-input"></span><spanclass="next-checkbox-label"><spanclass="trigger">运费险</span><divclass="user-content">退换货可赔付10元</div></span></label><spanclass="widget-tips-box"><imgsrc="~/imgs/others/msg.png"class="wtip-icon"><divclass="wtip-msg-box wtip-msg-right"><divclass="wtip-arrow-icon"></div><divclass="">退换货可赔付10元</div></div></span><ahref="##"target="_blank"class="ins-question widget-tips-question"><imgclass="ins-question-icon"src="~/imgs/others/ask.png"></a></div><divclass="user-price">0.00</div></div></div></div></div></div></div></div></div></div><divstyle="padding: 0px; border-top: 1px solid rgb(255, 255, 255);"><divdata-halo-type="flex"><divstyle="display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; margin: 0px; padding: 10px 0px;"><divstyle="padding: 0px;"><divdata-halo-type="label"><divclass="label "><spanclass="label__header"style="font-weight: normal; font-style: normal; text-decoration: none; font-size: 14px; min-width: 100px; margin-right: 10px;">店铺合计(含运费)</span><spanstyle="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><divstyle="padding: 0px;"><divdata-halo-type="descriptionGroup"></div></div></div></div></div></div></div></div> } } <divdata-halo-id="realPayPC_1"data-halo-type="realPay"><divclass="realpay order-payInfo"id="realPayPC_1"><divclass="box"><divclass="box__wrapper"><divclass="box__shadow"><div><spanclass="realpay--title">实付款:</span><spanclass="realpay--price-symbol">¥</span><spanclass="realpay--price"style="color: rgb(255, 80, 0);"id="total_price2">@(Math.Round(total, 2))</span></div><divclass="order-confirmAddr"><divclass="confirmAddr-addr"><spanclass="confirmAddr-title">寄送至:</span><spanclass="confirmAddr-addr-bd">@defaultAddr.ToString();</span></div><divclass="confirmAddr-addr-user"><spanclass="confirmAddr-title">收货人:</span><spanclass="confirmAddr-addr-bd">@defaultAddr.Name @defaultAddr.Phone</span></div></div><divclass="order-confirm-eticket"></div></div></div></div></div></div><divdata-halo-id="submitOrderPC_1"data-halo-type="submitOrder"><divclass="submitOrder-container"id="submitOrderPC_1"><divclass="wrapper"><aclass="go-back"target="_self"role="button"title="返回购物车"href="//cart.taobao.com/cart.htm">返回购物车</a><inputtype="submit"title="提交订单"class="go-btn"style="background-color: rgb(255, 80, 0);border-width:0px;margin-top:5px;"value="提交订单"></input></div><divclass="base-msg">若价格变动,请在提交订单后联系卖家改价,并查看已买到的宝贝</div></div></div></form></div><scriptsrc="~/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>; } <divid="tp-bought-root"class="index-mod__root___3ZrD7"><divclass="tabs-mod__container___ICzlj nav-mod__tabs___1D0ZI"><divclass="tabs-mod__main___74ZLv"><divclass="tabs-mod__tab___3vuhD tabs-mod__selected___2DHDY"><spanclass="nav-mod__tab___1PnZ4"><spanclass="nav-mod__text___3O7jT">所有订单</span><spanclass="nav-mod__count___hc9IJ"></span></span><spanclass="tabs-mod__sep___waJNr">|</span></div><divclass="tabs-mod__tab___3vuhD"><spanclass="nav-mod__tab___1PnZ4"><spanclass="nav-mod__text___3O7jT">待付款</span><spanclass="nav-mod__count___hc9IJ"></span></span><spanclass="tabs-mod__sep___waJNr">|</span></div><divclass="tabs-mod__tab___3vuhD"><spanclass="nav-mod__tab___1PnZ4"><spanclass="nav-mod__text___3O7jT">待发货</span><spanclass="nav-mod__count___hc9IJ"></span></span><spanclass="tabs-mod__sep___waJNr">|</span></div><divclass="tabs-mod__tab___3vuhD"><spanclass="nav-mod__tab___1PnZ4"><spanclass="nav-mod__text___3O7jT">待收货</span><spanclass="nav-mod__count___hc9IJ"></span></span><spanclass="tabs-mod__sep___waJNr">|</span></div><divclass="tabs-mod__tab___3vuhD"><spanclass="nav-mod__tab___1PnZ4"><spanclass="nav-mod__text___3O7jT">待评价</span><spanclass="nav-mod__count___hc9IJ"></span></span><spanclass="tabs-mod__sep___waJNr">|</span></div><divclass="tabs-mod__tab___3vuhD"><spanclass="nav-mod__tab___1PnZ4 nav-mod__small___2yzl8"><spanclass="nav-mod__text___3O7jT">分阶段</span><spanclass="nav-mod__count___hc9IJ"></span></span></div></div><divclass="tabs-mod__minors___3PnBm"><divclass="tabs-mod__tab___3vuhD"><spanid="recycleTab"class="nav-mod__tab___1PnZ4 nav-mod__recycle___2c0Pl"><imgclass="nav-mod__img___3LK9B"src="~/imgs/TB1G5QqIFXXXXbvXFXXcmA2.FXX-11-12.png"alt="订单回收站"><spanclass="nav-mod__text___3O7jT">订单回收站</span></span></div></div></div><divclass="index-mod__ems-ad___3fP6L js-ems-ad"><divdata-reactid=".0.1.0"><divdata-reactid=".0.1.0.0"><span></span></div></div></div><formclass="container"><divclass="search-mod__simple-part___3YVUs"><inputtype="text"placeholder="输入商品标题或订单号进行搜索"class="search-mod__order-search-input___29Ui1"><buttontype="submit"class="search-mod__order-search-button___1q3E0">订单搜索</button><buttontype="button"class="search-mod__more-button___nbIba"><span>更多筛选条件</span><imgsrc="~/imgs/TB1jK1dIVXXXXXzXVXXXXXXXXXX.png"></button></div><divclass="more-part"style="display: none;"data-reactid=".0.2.1"><divclass="row-mod__row___1aPep search-mod__row___1iPN4"><divclass="search-mod__col___3ytvL search-mod__col1___-AZN4"><label><spanclass="search-mod__label-text___1aQSY">订单类型</span><spanclass="field-select-mod__select___xOMpt trade-select search-mod__select-input___35Np6 rc-select rc-select-enabled"><spanclass="rc-select-selection rc-select-selection--single"role="combobox"aria-autocomplete="list"aria-haspopup="true"aria-expanded="false"tabindex="0"><spanclass="rc-select-selection__rendered"><span>全部</span></span><spanclass="rc-select-arrow"tabindex="-1"style="outline:none;"><b></b></span></span></span></label></div><divclass="search-mod__col___3ytvL search-mod__col2___24ptm"><spanclass="search-mod__label-text___1aQSY">成交时间</span><inputclass="field-input-mod__input___Iwb6D search-mod__select-input___35Np6"placeholder="请选择时间范围起始"type="text"><spanclass="search-mod__sep___3Np13">-</span><inputclass="field-input-mod__input___Iwb6D search-mod__select-input___35Np6"placeholder="请选择时间范围结束"type="text"></div><divclass="search-mod__col___3ytvL search-mod__col3___2W40T"><labelclass="search-mod__last-field___3cUFK"><spanclass="search-mod__label-text___1aQSY">卖家昵称</span><inputclass="field-input-mod__input___Iwb6D search-mod__select-input___35Np6"type="text"></label></div></div><divclass="row-mod__row___1aPep search-mod__row___1iPN4"><divclass="search-mod__col___3ytvL search-mod__col1___-AZN4"><label><spanclass="search-mod__label-text___1aQSY">评价状态</span><spanclass="field-select-mod__select___xOMpt trade-select search-mod__select-input___35Np6 rc-select rc-select-enabled"><spanclass="rc-select-selection rc-select-selection--single"role="combobox"aria-autocomplete="list"aria-haspopup="true"aria-expanded="false"tabindex="0"><spanclass="rc-select-selection__rendered"><span>全部</span></span><spanclass="rc-select-arrow"tabindex="-1"style="outline:none;"><b></b></span></span></span></label></div><divclass="search-mod__col___3ytvL search-mod__col2___24ptm"><labeldata-reactid=".0.2.1.1.1.0"><spanclass="search-mod__label-text___1aQSY"data-reactid=".0.2.1.1.1.0.0">交易状态</span><spanclass="field-select-mod__select___xOMpt trade-select search-mod__select-input___35Np6 rc-select rc-select-enabled"><spanclass="rc-select-selection rc-select-selection--single"role="combobox"aria-autocomplete="list"aria-haspopup="true"aria-expanded="false"tabindex="0"><spanclass="rc-select-selection__rendered"><span>全部</span></span><spanclass="rc-select-arrow"tabindex="-1"style="outline:none;"><b></b></span></span></span></label></div><divclass="search-mod__col___3ytvL search-mod__col3___2W40T"><labelclass="search-mod__last-field___3cUFK"><spanclass="search-mod__label-text___1aQSY">售后服务</span><spanclass="field-select-mod__select___xOMpt trade-select search-mod__select-input___35Np6 rc-select rc-select-enabled"><spanclass="rc-select-selection rc-select-selection--single"role="combobox"aria-autocomplete="list"aria-haspopup="true"aria-expanded="false"tabindex="0"><spanclass="rc-select-selection__rendered"><span>全部</span></span><spanclass="rc-select-arrow"tabindex="-1"style="outline:none;"><b></b></span></span></span></label></div></div></div></form><spanid="nav_anchor"style="visibility:hidden;height:0;"></span><tableclass="bought-table-mod__table___AnaXt table-head-mod__table___17eFg"><colgroupdata-reactid=".0.4.0"><colclass="bought-table-mod__col1___3U5RK"><colclass="bought-table-mod__col2___224Oh"><colclass="bought-table-mod__col3___J0oe0"><colclass="bought-table-mod__col4___XvKTC"><colclass="bought-table-mod__col5___2kktP"><colclass="bought-table-mod__col6___1KqCQ"><colclass="bought-table-mod__col7___PpB_p"></colgroup><tbodydata-reactid=".0.4.1"><trdata-reactid=".0.4.1.0"><th>宝贝</th><th>单价</th><th>数量</th><th>商品操作</th><th>实付款</th><th><spanclass="field-select-mod__select___xOMpt trade-select table-head-mod__status___SBEwU rc-select rc-select-enabled"><spanclass="rc-select-selection rc-select-selection--single"role="combobox"aria-autocomplete="list"aria-haspopup="true"aria-expanded="false"tabindex="0"><spanclass="rc-select-selection__rendered"><span>交易状态</span></span><spanclass="rc-select-arrow"tabindex="-1"style="outline:none;"><b></b></span></span></span></th><th>交易操作</th></tr></tbody></table><divclass="row-mod__row___1aPep js-actions-row-top"><divstyle="float:left;"><divclass="batch-mod__container___sK68S"></div></div><divstyle="float:right;"><divclass="simple-pagination-mod__container___1pC5p"><buttonclass="button-mod__button___2HDif button-mod__default___2pRKd button-mod__small___1a8rc simple-pagination-mod__prev___pJnpC"disabled="">上一页</button><buttonclass="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); <divclass="index-mod__order-container___1ur4- js-order-container"><divclass="bought-wrapper-mod__trade-order___2lrzV bought-wrapper-mod__closed___3pIh6"><tableclass="bought-table-mod__table___AnaXt bought-wrapper-mod__table___3xFFM"><colgroup><colclass="bought-table-mod__col1___3U5RK"><colclass="bought-table-mod__col2___224Oh"><colclass="bought-table-mod__col3___J0oe0"><colclass="bought-table-mod__col4___XvKTC"><colclass="bought-table-mod__col5___2kktP"><colclass="bought-table-mod__col6___1KqCQ"><colclass="bought-table-mod__col7___PpB_p"></colgroup><tbodyclass="bought-wrapper-mod__head___2vnqo"><tr><tdclass="bought-wrapper-mod__head-info-cell___29cDO"><labelclass="bought-wrapper-mod__checkbox-label___3Va60"><spanclass="bought-wrapper-mod__checkbox___11anQ"><inputtype="checkbox"disabled=""></span><spanclass="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><tdcolspan="2"class="bought-wrapper-mod__seller-container___3dAK3"><spanclass="seller-mod__container___zFAFV"><ahref=""class="seller-mod__name___2IlQm"title="@shop.Name"target="_blank"rel="noopener noreferrer">@shop.Name</a></span></td><td><spanid="webww1"><spanclass="ww-light ww-large"data-display="inline"data-nick="@shop.Name"data-tnick="@shop.Name"><ahref=""target="_blank"class="ww-inline ww-online"title=""><span></span></a></span></span></td><tdcolspan="3"class="bought-wrapper-mod__thead-operations-container___2LwDA"><span></span><ahref=""class="bought-wrapper-mod__th-operation___yRtHm"title="编辑标记信息,仅自己可见"target="_blank"rel="noopener noreferrer"id="flag"><istyle="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><ahref="###"class="bought-wrapper-mod__th-operation___yRtHm always-visible"title="删除订单"target="_blank"rel="noopener noreferrer"action="a7"data="[object Object]"id="delOrder"><istyle="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><tdclass="sol-mod__no-br___36X3g"><divclass="ml-mod__container___2DOxT production-mod__production___123Ax suborder-mod__production___3WebF"><divclass="ml-mod__media___2sZrj"style="width:80px;"><ahref="/Product/Detail/@(product.Id)"class="production-mod__pic___G8alD"target="_blank"rel="noopener noreferrer"><imgsrc="@(product.ImageUrl)"><span></span></a></div><divstyle="margin-left:90px;"><p><ahref="/Product/Detail/@(product.Id)"target="_blank"rel="noopener noreferrer"><span></span><spanstyle="line-height:16px;">@product.Name</span><span></span></a><span></span><span></span><span></span></p><p><ahref="/Rule/Real"title="正品保证"type="3"style="margin-right:8px;"target="_blank"><imgsrc="~/imgs/T1SyeXFpliXXaSQP_X-16-16.png"></a><ahref="/Rule/XiaoBao"title="如实描述"type="3"style="margin-right:8px;"target="_blank"><imgsrc="~/imgs/TB1PDB6IVXXXXaVaXXXXXXXXXXX.png"></a></p></div></div></td><tdclass="sol-mod__no-br___36X3g"><divclass="price-mod__price___3_8Zs"><p><span>¥</span><span>@(Math.Round(product.PreferentialPrice, 2))</span></p></div></td><tdclass="sol-mod__no-br___36X3g"><div><p>@(purchase.BuyCount)</p></div></td><td><div><pstyle="margin-bottom:3px;"><spanclass="text-mod__link___1rXmw text-mod__hover___1TDrR"action="a3">申请售后</span></p></div></td><tdclass=""><div><divclass="price-mod__price___3_8Zs"><p><strong><span>¥</span><span>@(purchase.TotalPrice)</span></strong></p></div><pstyle="color:#6c6c6c;font-family:verdana;"><span></span><span></span><span></span><span></span></p><divstyle="font-family:verdana;"><div></div></div><span></span></div></td><tdclass=""><div><pstyle="margin-bottom:3px;"><spanclass="text-mod__link___1rXmw">购买成功</span></p><div><pstyle="margin-bottom:3px;"><ahref=""class="text-mod__link___1rXmw text-mod__hover___1TDrR"target="_blank"rel="noopener noreferrer"id="viewDetail">订单详情</a></p></div></div></td><tdclass=""><div><pstyle="margin-bottom:3px;"><ahref=""class="text-mod__link___1rXmw text-mod__hover___1TDrR"target="_blank"rel="noopener noreferrer">追加评论</a></p><pstyle="margin-bottom:3px;"><spanclass="text-mod__link___1rXmw text-mod__hover___1TDrR"action="a1">再次购买</span></p></div></td></tr></tbody></table></div></div> } } else { <divclass="index-mod__empty-list___3CaW2 js-empty-list"><imgclass="index-mod__empty-list-img___3kyoO"src="~/imgs/avif/noorder.avif"><spandata-reactid=".0.7.1">没有符合条件的宝贝,请尝试其他搜索条件。</span></div> } <divclass="row-mod__row___1aPep js-actions-row-bottom"><divstyle="float:left;"><divclass="batch-mod__container___sK68S"></div></div><divstyle="float:right;"><ulclass="pagination "unselectable="unselectable"><lititle="上一页"class="pagination-disabled pagination-prev"><a></a></li><lititle="1"class="pagination-item pagination-item-1 pagination-item-active"><a>1</a></li><lititle="2"class="pagination-item pagination-item-2"><a>2</a></li><lititle="3"class="pagination-item pagination-item-3"><a>3</a></li><lititle="4"class="pagination-item pagination-item-4"><a>4</a></li><lititle="下一页"class="pagination-next"><a></a></li><noscript></noscript></ul></div></div><divclass="loading-mod__loading___3nGTY loading-mod__hidden___1tIoI"><divclass="loading-mod__bg___2ylNX loading-mod__q___3pSfD"></div><divclass="loading-mod__bg___2ylNX loading-mod__z___3Le9C"></div></div></div>
下单及订单管理展示
运行程序,点击登录,在登录成功后,选择商品点击【立即购买】或者购物车页面点击【购买】,然后跳转到下单页面,如下所示:
订单管理页面
运行程序,点击登录,在登录成功后,在右上角个人名称,点击下拉菜单,选择订单管理,然后打开订单管理页面,如下所示:
以上就是ASP.NET Core MVC开发实战之商城系统第六部分内容,后续将继续介绍其他模块,敬请期待。