[回馈]ASP.NET Core MVC开发实战之商城系统(六)
经过一段时间的准备，新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始，在之前的文章中，讲解了商城系统的整体功能设计，页面布局设计，环境搭建，系统配置，及首页【商品类型，banner条，友情链接，降价促销，新品爆款】，商品列表页面，商品详情，购物车等功能的开发，今天继续讲解订单管理功能开发，仅供学习分享使用，如有不足之处，还请指正。
订单管理功能说明
在商城系统中，当用户需要购买商品时，就会进行下单。购买的入口有很多，比如：
- 首页或商品列表页面，看到商品缩略图，可以点击【立即购买】按钮进行下单；
- 在商品详情页面，查看商品的详细参数后，也可以点击【立即购买】按钮进行下单；
- 在购物车页面，选择购物车中的商品，进行批量下单。
以上3个入口，下单方式大致相同，却又略有差异。具体如下所示：
- 1,2两种方式是单个商品的购买。
- 3是批量商品下单或单个商品下单，可以自由选择。
- 1是默认商品参数进行下单，2是可以自由选择商品参数进行下单。
所以在不同是入口进行下单，要进行细微的调整。但是在跳转的下单页面，又可以进行统一。
同样立即购买功能，和添加购物车功能一样，需要用户的信息，需要登录才可以。
商品下单流程图
在易购商城系统中，商品下单流程图，如下所示：
订单管理功能开发
1. 数据表创建
订单表【EB_Purchase】，主要保存用户的订单信息，包括订单ID，商品ID，用户ID，物流ID，收货地址，商品备注等信息。具体如下所示：
订单表创建表语句如下所示：
CREATE TABLE [dbo].[EB_Purchase](
[Id] [bigint] IDENTITY(1,1) NOT NULL,
[ProductId] [bigint] NULL,
[CustomerId] [bigint] NULL,
[BuyCount] [int] NULL,
[TotalPrice] [money] NULL,
[LogisticsId] [bigint] NULL,
[Status] [int] NULL,
[Remark] [varchar](200) NULL,
[RecvAddr] [varchar](300) NULL,
[CreateTime] [datetime] NOT NULL,
[CreateUser] [varchar](50) NULL,
[LastEditTime] [datetime] NULL,
[LastEditUser] [varchar](50) NULL
) ON [PRIMARY]
2. 订单表实体模型创建
实体模型和数据库表字段保持一致，便于进行数据映射，具体如下所示：
using SqlSugar;
namespace EasyBuyShop.Models
{
[SugarTable("EB_Purchase")]
public class Purchase : EntityModel
{
public long ProductId { get; set; }
public long CustomerId { get; set; }
public int BuyCount { get; set; }
public decimal TotalPrice { get; set; }
public long LogisticsId { get; set; }
/// <summary>
/// 收件地址ID
/// </summary>
public string RecvAddr { get; set; }
/// <summary>
/// 订单状态
/// </summary>
public int Status { get; set; }
public string Remark { get; set; }
}
}
3. 数据处理层DAL
数据处理层DAL，主要进行订单的查询，插入等操作。如下所示：
using EasyBuyShop.Models;
using EasyBuyShop.Utils;
namespace EasyBuyShop.DAL
{
public class PurchaseDal : BaseDal
{
/// <summary>
/// 获取当前用户的订单列表
/// </summary>
/// <param name="userId"></param>
/// <returns></returns>
public List<Purchase> GetPurchases(long userId)
{
try
{
using (var db = this.GetDb(BaseDal.ConnStr))
{
return db.Queryable<Purchase>().Where(r => r.CustomerId == userId).ToList();
}
}
catch (Exception ex)
{
LogHelper.Fatal(ex.Message);
return new List<Purchase>();
}
}
}
}
4. 控制器获取
控制器主要包括订单管理【如：查询，删除等操作】，下单购买功能，根据上述分析，不同的入口单独进行处理。如下所示：
using EasyBuyShop.DAL;
using EasyBuyShop.Models;
using Microsoft.AspNetCore.Mvc;
namespace EasyBuyShop.Controllers
{
public class PurchaseController : Controller
{
public IActionResult Index()
{
var username = HttpContext.Session.GetString("username");
var realName = HttpContext.Session.GetString("realname");
var userId = HttpContext.Session.GetInt32("userid");
ViewData["Username"] = username;
ViewData["RealName"] = realName;
var purchaseDal = new PurchaseDal();
var purchases = purchaseDal.GetPurchases(userId.Value);
var products=new List<Product>();
var shops = new List<Shop>();
if (purchases != null && purchases.Count() > 0)
{
var productDal = new ProductDal();
var pIds = purchases.Select(x => x.ProductId).ToList();
products = productDal.GetProductListByIds(pIds);
if (products != null && products.Count() > 0)
{
var shopDal = new ShopDal();
shops = shopDal.GetShops(products.Select(r => r.ShopId).ToList());
}
}
ViewData["Shops"] = shops;
ViewData["ProductList"] = products;
ViewData["Purchases"] = purchases;
return View();
}
/// <summary>
/// 首页或商品列表快捷下单
/// </summary>
/// <param name="productId"></param>
/// <returns></returns>
[HttpGet]
public IActionResult Buy(int productId)
{
Msg msg = new Msg();
var userId = HttpContext.Session.GetInt32("userid");
var userName = HttpContext.Session.GetString("username");
var realName = HttpContext.Session.GetString("realname");
ViewData["Username"] = userName;
ViewData["RealName"] = realName;
if (userId == null)
{
msg.code = -1;
msg.message = "尚未登录";
return Redirect("/Auth/Login");
}
var shopDal = new ShopDal();
var productDal = new ProductDal();
var addrDal = new AddrDal();
var product = productDal.GetProduct(productId);
var shop = shopDal.GetShopById(product.ShopId);
var addrs = addrDal.GetAddrByUserId((long)userId);
List<Product> products = new List<Product>() { product };
List<Shop> shops = new List<Shop>() { shop };
Dictionary<string, string> productConfigs = new Dictionary<string, string>();
ViewData["Products"] = products;
ViewData["Shops"] = shops;
ViewData["Addrs"] = addrs;
ViewData["ProductConfigs"] = productConfigs;
return View();
}
/// <summary>
/// 确认下单
/// </summary>
/// <returns></returns>
[HttpPost]
public IActionResult Buy()
{
Msg msg = new Msg();
var userId = HttpContext.Session.GetInt32("userid");
var userName = HttpContext.Session.GetString("username");
if (userId == null)
{
msg.code = -1;
msg.message = "尚未登录";
return Redirect("/Auth/Login");
}
var addr = Request.Form["addr"];
var productIds = Request.Form["productId"].ToList();
foreach (var productId in productIds)
{
var remark = Request.Form[$"textarea_{productId}"];
var quantity = Request.Form[$"quantity_{productId}"];
var productDal = new ProductDal();
var product = productDal.GetProduct(long.Parse(productId));
if (product != null)
{
var pruchaseDal = new PurchaseDal();
var purchase = new Purchase();
purchase.ProductId = long.Parse(productId);
purchase.CustomerId = userId.Value;
purchase.BuyCount = int.Parse(quantity);
purchase.TotalPrice = product.PreferentialPrice * int.Parse(quantity);
purchase.LogisticsId = 0;//物流ID,下单时为空，商家发货后制定
purchase.Remark = remark;
purchase.Status = 0;
purchase.RecvAddr = addr;
purchase.CreateUser = userName;
purchase.CreateTime = DateTime.Now;
purchase.LastEditUser = userName;
purchase.LastEditTime = DateTime.Now;
int id = pruchaseDal.InsertT<Purchase>(purchase);
if (id > 0)
{
msg.code = 0;
msg.message = "成功";
}
else
{
msg.code = -1;
msg.message = "购买失败";
break;
}
}
else
{
msg.code = -1;
msg.message = "商品不存在";
break;
}
}
if (msg.code < 0)
{
ViewData["Msg"] = msg;
return View();
}
else
{
return Redirect("/Purchase/Index");
}
}
/// <summary>
/// 从详情页面下单
/// </summary>
/// <returns></returns>
[HttpPost]
public IActionResult BuyWithForm()
{
Msg msg = new Msg();
var userId = HttpContext.Session.GetInt32("userid");
var userName = HttpContext.Session.GetString("username");
if (userId == null)
{
msg.code = -1;
msg.message = "尚未登录";
return Json(msg);
}
var productId = long.Parse(Request.Form["productId"]);
var quantity = int.Parse(Request.Form["quantity"]);
var color = Request.Form["color"];
var size = Request.Form["size"];
var remark = $"颜色：{color},大小：{size}";
var productDal = new ProductDal();
var product = productDal.GetProduct(productId);
var shopDal = new ShopDal();
var addrDal = new AddrDal();
var shop = shopDal.GetShopById(product.ShopId);
var addrs = addrDal.GetAddrByUserId((long)userId);
List<Product> products = new List<Product>() { product };
List<Shop> shops = new List<Shop>() { shop };
Dictionary<string, string> productConfigs = new Dictionary<string, string>();
productConfigs.Add($"remark_{productId}", remark);
productConfigs.Add($"quantity_{productId}", quantity.ToString());
ViewData["Products"] = products;
ViewData["Shops"] = shops;
ViewData["Addrs"] = addrs;
ViewData["ProductConfigs"] = productConfigs;
return View("/Views/Purchase/Buy.cshtml");
}
/// <summary>
/// 从购物车下单
/// </summary>
/// <returns></returns>
[HttpPost]
public IActionResult BuyWithCart()
{
Msg msg = new Msg();
var userId = HttpContext.Session.GetInt32("userid");
var userName = HttpContext.Session.GetString("username");
if (userId == null)
{
msg.code = -1;
msg.message = "尚未登录";
return Json(msg);
}
var cartIds = Request.Form["chkCart"];
if (string.IsNullOrEmpty(cartIds))
{
msg.code = -1;
msg.message = "没有选择任何商品";
return Json(msg);
}
var cartIdArr = cartIds.ToString().Split(',');
if(cartIdArr!=null && cartIdArr.Length > 0)
{
var cartDal = new CartDal();
var productDal = new ProductDal();
var shopDal = new ShopDal();
var addrDal = new AddrDal();
List<Product> products = new List<Product>();
List<Shop> shops = new List<Shop>();
Dictionary<string, string> productConfigs = new Dictionary<string, string>();
foreach (var cartId in cartIdArr)
{
var cart = cartDal.GetCart(long.Parse( cartId));
var product = productDal.GetProduct(cart.ProductId);
if (product != null)
{
products.Add(product);
}
var shop = shopDal.GetShopById(product.ShopId);
if (shop != null)
{
shops.Add(shop);
}
productConfigs.Add($"remark_{cart.ProductId}", cart.Remark);
productConfigs.Add($"quantity_{cart.ProductId}", cart.Quantity.ToString());
}
var addrs = addrDal.GetAddrByUserId((long)userId);
ViewData["Products"] = products;
ViewData["Shops"] = shops;
ViewData["Addrs"] = addrs;
ViewData["ProductConfigs"] = productConfigs;
return View("/Views/Purchase/Buy.cshtml");
}
else
{
return View("/Views/Cart/Index");
}
}
}
}
5. 视图层展示
订单相关功能主要有两个页面，一个下单页面，一个订单管理页面。
下单页面主要功能是展示商品列表，下单按钮，以及用户的选择，备注，价格等信息。如下所示：
<div class="container">
<form method="post" action="/Purchase/Buy">
@{
var addrs = ViewData["Addrs"] as List<Address>;
addrs = addrs.OrderByDescending(r => r.IsDefault).ToList();
var defaultAddr = addrs.FirstOrDefault(r => r.IsDefault);
var productConfigs = ViewData["ProductConfigs"] as Dictionary<string, string>;
var total = 0M;
}
<div data-halo-id="addressPC_1" data-halo-type="address">
<div class="order-address OneRow" id="addressPC_1">
<div class="header-wrapper border-bottom">
<h2 class="header-title">
确认收货地址
<a class="header-operation" rel="noopener noreferrer" target="_blank" href="//member1.taobao.com/member/fresh/deliver_address.htm">管理收货地址</a>
</h2>
</div>
<div class="address-tips-top"></div>
<input type="hidden" name="addr" id="addr" value="@($"{defaultAddr.ToString()} ({defaultAddr.Name} 收) {defaultAddr.Phone}")" />
<div class="address-list">
@{
for (int i = 0; i < addrs.Count; i++)
{
var addr = addrs[i];
if (addr.IsDefault)
{
<div class="addr-item-wrapper OneRow addr-selected addr-default">
<div class="inner-infos">
<div class="content-container">
<div class="selected-description">
<i class="marker">♥</i>
<span class="marker-tip">寄送至</span>
</div>
<label dir="ltr" aria-checked="true" class="next-radio-wrapper address-contents checked ">
<span class="next-radio checked" onclick="javascript:CheckAddr(this);">
<span class="next-radio-inner press"></span>
<input role="radio" tabindex="0" type="radio" aria-checked="true" class="next-radio-input" checked="">
</span>
<span class="next-radio-label">
<span class="provinceName">@addr.Province </span>
<span class="cityName">@addr.City </span>
<span class="areaName">@addr.District </span>
<span class="townName">@addr.Street </span>
<span class="addressDetail">@addr.Detail </span>
<span class="reciver">（@(addr.Name) 收）</span>
<span class="mobile">@addr.Phone </span>
<span class="default-tip">默认地址</span>
</span>
</label>
<a class="set-default" title="设置当前地址为默认">设置为默认收货地址</a>
</div>
<a title="修改地址" class="modify-operation">修改本地址</a>
</div>
<div class="curMarker"></div>
</div>
}
else
{
<div class="addr-item-wrapper OneRow addr-not-default">
<div class="inner-infos">
<div class="content-container">
<label dir="ltr" aria-checked="false" class="next-radio-wrapper address-contents ">
<span class="next-radio" onclick="javascript:CheckAddr(this);">
<span class="next-radio-inner unpress"></span>
<input role="radio" tabindex="0" type="radio" aria-checked="false" class="next-radio-input">
</span>
<span class="next-radio-label">
<span class="provinceName">@addr.Province </span>
<span class="cityName">@addr.City </span>
<span class="areaName">@addr.District </span>
<span class="townName">@addr.Street </span>
<span class="addressDetail">@addr.Detail </span>
<span class="reciver">（@(addr.Name) 收）</span>
<span class="mobile">@addr.Phone </span>
<span class="default-tip">默认地址</span>
</span>
</label>
<a class="set-default" title="设置当前地址为默认">设置为默认收货地址</a>
</div>
</div>
<div class="curMarker"></div>
</div>
}
}
}
</div>
<div class="address-tips OneRow"></div>
<div class="operations">
<a class="operation OneRow" style="font-size:12px;">使用其它地址</a>
</div>
</div>
</div>
<div data-halo-id="orderDesc_orderDesc_1" data-halo-type="itemHeader">
<div class="item-headers" id="orderDesc_orderDesc_1">
<div class="header-wrapper ">
<h2 class="header-title">确认订单信息</h2>
</div>
<div class="item-headers-wrap item-headers-column-6">
<div class="item-headers-content item-headers-0">店铺宝贝</div>
<div class="item-headers-content item-headers-1">商品属性</div>
<div class="item-headers-content item-headers-2">单价</div>
<div class="item-headers-content item-headers-3">数量</div>
<div class="item-headers-content item-headers-4">优惠方式</div>
<div class="item-headers-content item-headers-5">小计</div>
</div>
</div>
</div>
@{
var products = ViewData["Products"] as List<Product>;
var shops = ViewData["Shops"] as List<Shop>;
for (int i = 0; i < products.Count; i++)
{
var product = products[i];
var quantity_key = $"quantity_{product.Id}";
var remark_key = $"remark_{product.Id}";
var quantity = 1;
var remark = "";
if (productConfigs != null || productConfigs.Count > 0)
{
if (productConfigs.ContainsKey(quantity_key))
{
quantity = int.Parse(productConfigs[quantity_key]);
}
if (productConfigs.ContainsKey(remark_key))
{
remark = productConfigs[remark_key];
}
}
var shop = shops.FirstOrDefault(r => r.Id == product.ShopId);
total += (product.PreferentialPrice * quantity);
<input type="hidden" name="productId" value="@(product.Id)" />
<div id="@(product.Id)" data="[object Object]" extension="[object Object]" class="dinamicx-card-group" style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-content: flex-start; flex-shrink: 0;">
<div data-halo-id="seller_a805f2fc129a1c05fb8a632a8777f2d2" data-halo-type="seller">
<div class="order-orderInfo" id="seller_a805f2fc129a1c05fb8a632a8777f2d2" style="font-size:12px;">
<span class="shop-name">店铺: </span>
<a href="/Shop/Index?id=@(product.ShopId)" target="_blank" rel="noopener noreferrer" title="" class="order-link shop-url">@(shop.Description)</a>
<span class="shop-seller">
卖家:
<a href="##" target="_blank" rel="noopener noreferrer" title="@(shop.Description)" class="order-link shop-url">@(shop.Name)</a>
</span>
<span class="ww-light ww-large" data-encode="true" data-nick="@(shop.Name)" data-display="inline" data-icon="large">
<a href="" target="_blank" class="ww-inline ww-online" title=""><span></span></a>
</span>
</div>
</div>
<div data-halo-id="item_187bb8c6f1e163c55f64eb56fef0eacc" data-halo-type="flex">
<div id="item_187bb8c6f1e163c55f64eb56fef0eacc" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; margin: 0px; padding: 0px; background-color: rgb(251, 252, 255); border-bottom: 1px dotted rgb(221, 221, 221);">
<div style="padding: 0px;">
<div data-halo-id="itemInfoPC_187bb8c6f1e163c55f64eb56fef0eacc" data-halo-type="itemRow">
<div id="itemInfoPC_187bb8c6f1e163c55f64eb56fef0eacc" class="item-row">
<div class="order-itemInfo">
<div class="info-detail info-cell">
<a href="/Product/Detail/@(product.Id)" target="_blank" rel="noopener noreferrer" class="order-link info-cell">
<img class="info-img" src="@(product.ImageUrl)">
</a>
<div class="info-cell info-msg">
<a href="/Product/Detail/@(product.Id)" target="_blank" rel="noopener noreferrer" class="order-link info-title">@(product.Name)</a>
<div class="info-icon-list">
<div>
<a href="##" target="_blank" rel="noopener noreferrer" title="如实描述 - 消费者保障服务，卖家承诺商品如实描述" class="order-link icon-main">
<img src="~/imgs/others/quanyi.png">
</a>
<a target="_blank" rel="noopener noreferrer" title="7天无理由退货" class="order-link icon-main"><img></a>
</div>
</div>
</div>
</div>
<div class="info-sku info-cell">
<p>
<span class="hd">基础风格：@(product.BasicStyle)</span>
</p>
<p>
<span class="bd">商品类型：@(product.ProductStyle)</span>
</p>
</div>
<div class="info-price info-cell">@(Math.Round(product.Price, 2))</div>
</div>
<div class="order-quantity">
<div class="quantity-inner">
<p><input type="text" name="quantity_@(product.Id)" id="quantity_@(product.Id)" value="@(quantity)" style="width:40px; border:1px solid lightblue" onchange="javascript:confirmTotalPrice(@(product.Id));" /></p>
</div>
</div>
<div class="item-row__select"><p class="item-row__text">@(product.Preferential > 0 ? Math.Round(product.Preferential * 100, 2).ToString() + "%" : "无优惠")</p></div>
<div class="item-row__price">
<div class="label item-row__price-item">
<input type="hidden" value="@(Math.Round(product.PreferentialPrice,2))" id="preferentitalprice_@(product.Id)" />
<span style="font-weight: bold; font-style: normal; text-decoration: none; color: rgb(255, 68, 0); font-size: 14px; min-width: 100px;" id="item-row__price-item_@(product.Id)" name="item_row_price">@(Math.Round(product.PreferentialPrice * quantity, 2))</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-halo-type="flex">
<div style="display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; margin: 0px; padding: 0px; background-color: rgb(242, 247, 255); border-bottom: 1px dotted rgb(128, 178, 255);">
<div style="padding: 0px; border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="flex">
<div style="display: grid; grid-template-columns: 1fr 1fr; margin: 0px;">
<div style="padding: 0px; border-right: 1px solid rgb(255, 255, 255); border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="flex">
<div style="display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; margin: -5px 0px; padding: 0px;">
<div style="padding: 5px; border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="textArea">
<div class="textarea">
<label class="textarea__title">
<div>给卖家留言：</div>
</label>
<div class="textarea__wrapper">
<span class="next-input next-input-textarea textarea__input">
<textarea placeholder="选填，请先和商家协商一致，付款后商家可见" id="textarea_@(product.Id)" name="textarea_@(product.Id)" maxlength="200" data-real="true" rows="1">@(remark)</textarea>
<span class="next-input-control"><span class="next-input-len">0/200</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="padding: 0px; border-right: 1px solid rgb(255, 255, 255); border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="flex">
<div style="display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; margin: -5px 0px; padding: 0px;">
<div style="padding: 5px; border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="deliveryMethod">
<div class="delivery-method">
<div class="delivery-select">
<span class="delivery-title">运送方式：</span>
<div class="delivery-box">
<span class="single-method">
<label class="title-text">普通配送</label>
<label class="delivery-type"></label>
<span>快递￥10.00</span>
</span>
<div class="appoint-container"></div>
</div>
</div><span class="select-price" style="color: rgb(255, 80, 0);">10.00</span>
</div>
</div>
</div>
<div style="padding: 5px; border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="postageInsurance">
<div class="order-postageInsurance">
<div class="user-title">运费险：</div>
<div class="user-operate">
<label class="next-checkbox-wrapper ins-checkbox ">
<span class="next-checkbox">
<span class="next-checkbox-inner"><i class="next-icon next-icon-select next-xs"></i></span>
<input type="checkbox" aria-checked="false" class="next-checkbox-input">
</span>
<span class="next-checkbox-label">
<span class="trigger">运费险</span>
<div class="user-content">退换货可赔付10元</div>
</span>
</label>
<span class="widget-tips-box">
<img src="~/imgs/others/msg.png" class="wtip-icon">
<div class="wtip-msg-box wtip-msg-right">
<div class="wtip-arrow-icon"></div>
<div class="">退换货可赔付10元</div>
</div>
</span>
<a href="##" target="_blank" class="ins-question widget-tips-question">
<img class="ins-question-icon" src="~/imgs/others/ask.png">
</a>
</div>
<div class="user-price">0.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div style="padding: 0px; border-top: 1px solid rgb(255, 255, 255);">
<div data-halo-type="flex">
<div style="display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; margin: 0px; padding: 10px 0px;">
<div style="padding: 0px;">
<div data-halo-type="label">
<div class="label ">
<span class="label__header" style="font-weight: normal; font-style: normal; text-decoration: none; font-size: 14px; min-width: 100px; margin-right: 10px;">店铺合计(含运费)</span>
<span style="font-weight: bold; font-style: normal; text-decoration: none; color: rgb(255, 68, 0); font-size: 14px; min-width: 100px;" id="total_price1">￥@(Math.Round(product.PreferentialPrice * quantity, 2))</span>
</div>
</div>
</div>
<div style="padding: 0px;">
<div data-halo-type="descriptionGroup"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
}
}
<div data-halo-id="realPayPC_1" data-halo-type="realPay">
<div class="realpay order-payInfo" id="realPayPC_1">
<div class="box">
<div class="box__wrapper">
<div class="box__shadow">
<div>
<span class="realpay--title">实付款：</span>
<span class="realpay--price-symbol">¥</span>
<span class="realpay--price" style="color: rgb(255, 80, 0);" id="total_price2">@(Math.Round(total, 2))</span>
</div>
<div class="order-confirmAddr">
<div class="confirmAddr-addr">
<span class="confirmAddr-title">寄送至：</span>
<span class="confirmAddr-addr-bd">@defaultAddr.ToString();</span>
</div>
<div class="confirmAddr-addr-user">
<span class="confirmAddr-title">收货人：</span>
<span class="confirmAddr-addr-bd">@defaultAddr.Name @defaultAddr.Phone</span>
</div>
</div>
<div class="order-confirm-eticket"></div>
</div>
</div>
</div>
</div>
</div>
<div data-halo-id="submitOrderPC_1" data-halo-type="submitOrder">
<div class="submitOrder-container" id="submitOrderPC_1">
<div class="wrapper">
<a class="go-back" target="_self" role="button" title="返回购物车" href="//cart.taobao.com/cart.htm">返回购物车</a>
<input type="submit" title="提交订单" class="go-btn" style="background-color: rgb(255, 80, 0);border-width:0px;margin-top:5px;" value="提交订单"></input>
</div>
<div class="base-msg">若价格变动，请在提交订单后联系卖家改价，并查看已买到的宝贝</div>
</div>
</div>
</form>
</div>
<script src="~/js/shop.js"></script>订单管理页面
订单管理页面，主要查看已经购买过从商品信息。如下所示：
@{
var purchases = ViewData["Purchases"] as List<Purchase>;
var products = ViewData["ProductList"] as List<Product>;
var shops = ViewData["Shops"] as List<Shop>;
}
<div id="tp-bought-root" class="index-mod__root___3ZrD7">
<div class="tabs-mod__container___ICzlj nav-mod__tabs___1D0ZI">
<div class="tabs-mod__main___74ZLv">
<div class="tabs-mod__tab___3vuhD tabs-mod__selected___2DHDY">
<span class="nav-mod__tab___1PnZ4">
<span class="nav-mod__text___3O7jT">所有订单</span>
<span class="nav-mod__count___hc9IJ"></span>
</span>
<span class="tabs-mod__sep___waJNr">|</span>
</div>
<div class="tabs-mod__tab___3vuhD">
<span class="nav-mod__tab___1PnZ4">
<span class="nav-mod__text___3O7jT">待付款</span>
<span class="nav-mod__count___hc9IJ"></span>
</span>
<span class="tabs-mod__sep___waJNr">|</span>
</div>
<div class="tabs-mod__tab___3vuhD">
<span class="nav-mod__tab___1PnZ4">
<span class="nav-mod__text___3O7jT">待发货</span>
<span class="nav-mod__count___hc9IJ"></span>
</span>
<span class="tabs-mod__sep___waJNr">|</span>
</div>
<div class="tabs-mod__tab___3vuhD">
<span class="nav-mod__tab___1PnZ4">
<span class="nav-mod__text___3O7jT">待收货</span>
<span class="nav-mod__count___hc9IJ"></span>
</span>
<span class="tabs-mod__sep___waJNr">|</span>
</div>
<div class="tabs-mod__tab___3vuhD">
<span class="nav-mod__tab___1PnZ4">
<span class="nav-mod__text___3O7jT">待评价</span>
<span class="nav-mod__count___hc9IJ"></span>
</span>
<span class="tabs-mod__sep___waJNr">|</span>
</div>
<div class="tabs-mod__tab___3vuhD">
<span class="nav-mod__tab___1PnZ4 nav-mod__small___2yzl8">
<span class="nav-mod__text___3O7jT">分阶段</span>
<span class="nav-mod__count___hc9IJ"></span>
</span>
</div>
</div>
<div class="tabs-mod__minors___3PnBm">
<div class="tabs-mod__tab___3vuhD">
<span id="recycleTab" class="nav-mod__tab___1PnZ4 nav-mod__recycle___2c0Pl">
<img class="nav-mod__img___3LK9B" src="~/imgs/TB1G5QqIFXXXXbvXFXXcmA2.FXX-11-12.png" alt="订单回收站">
<span class="nav-mod__text___3O7jT">订单回收站</span>
</span>
</div>
</div>
</div>
<div class="index-mod__ems-ad___3fP6L js-ems-ad">
<div data-reactid=".0.1.0">
<div data-reactid=".0.1.0.0">
<span></span>
</div>
</div>
</div>
<form class="container">
<div class="search-mod__simple-part___3YVUs">
<input type="text" placeholder="输入商品标题或订单号进行搜索" class="search-mod__order-search-input___29Ui1">
<button type="submit" class="search-mod__order-search-button___1q3E0">订单搜索</button>
<button type="button" class="search-mod__more-button___nbIba">
<span>更多筛选条件</span>
<img src="~/imgs/TB1jK1dIVXXXXXzXVXXXXXXXXXX.png">
</button>
</div>
<div class="more-part" style="display: none;" data-reactid=".0.2.1">
<div class="row-mod__row___1aPep search-mod__row___1iPN4">
<div class="search-mod__col___3ytvL search-mod__col1___-AZN4">
<label>
<span class="search-mod__label-text___1aQSY">订单类型</span>
<span class="field-select-mod__select___xOMpt trade-select search-mod__select-input___35Np6 rc-select rc-select-enabled">
<span class="rc-select-selection rc-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<span class="rc-select-selection__rendered">
<span>全部</span>
</span>
<span class="rc-select-arrow" tabindex="-1" style="outline:none;">
<b></b>
</span>
</span>
</span>
</label>
</div><div class="search-mod__col___3ytvL search-mod__col2___24ptm">
<span class="search-mod__label-text___1aQSY">成交时间</span>
<input class="field-input-mod__input___Iwb6D search-mod__select-input___35Np6" placeholder="请选择时间范围起始" type="text">
<span class="search-mod__sep___3Np13">-</span>
<input class="field-input-mod__input___Iwb6D search-mod__select-input___35Np6" placeholder="请选择时间范围结束" type="text">
</div>
<div class="search-mod__col___3ytvL search-mod__col3___2W40T">
<label class="search-mod__last-field___3cUFK">
<span class="search-mod__label-text___1aQSY">卖家昵称</span>
<input class="field-input-mod__input___Iwb6D search-mod__select-input___35Np6" type="text">
</label>
</div>
</div>
<div class="row-mod__row___1aPep search-mod__row___1iPN4">
<div class="search-mod__col___3ytvL search-mod__col1___-AZN4">
<label>
<span class="search-mod__label-text___1aQSY">评价状态</span>
<span class="field-select-mod__select___xOMpt trade-select search-mod__select-input___35Np6 rc-select rc-select-enabled">
<span class="rc-select-selection rc-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<span class="rc-select-selection__rendered">
<span>全部</span>
</span>
<span class="rc-select-arrow" tabindex="-1" style="outline:none;">
<b></b>
</span>
</span>
</span>
</label>
</div>
<div class="search-mod__col___3ytvL search-mod__col2___24ptm">
<label data-reactid=".0.2.1.1.1.0">
<span class="search-mod__label-text___1aQSY" data-reactid=".0.2.1.1.1.0.0">交易状态</span>
<span class="field-select-mod__select___xOMpt trade-select search-mod__select-input___35Np6 rc-select rc-select-enabled">
<span class="rc-select-selection rc-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<span class="rc-select-selection__rendered">
<span>全部</span>
</span>
<span class="rc-select-arrow" tabindex="-1" style="outline:none;">
<b></b>
</span>
</span>
</span>
</label>
</div>
<div class="search-mod__col___3ytvL search-mod__col3___2W40T">
<label class="search-mod__last-field___3cUFK">
<span class="search-mod__label-text___1aQSY">售后服务</span>
<span class="field-select-mod__select___xOMpt trade-select search-mod__select-input___35Np6 rc-select rc-select-enabled">
<span class="rc-select-selection rc-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<span class="rc-select-selection__rendered">
<span>全部</span>
</span>
<span class="rc-select-arrow" tabindex="-1" style="outline:none;">
<b></b>
</span>
</span>
</span>
</label>
</div>
</div>
</div>
</form>
<span id="nav_anchor" style="visibility:hidden;height:0;"></span>
<table class="bought-table-mod__table___AnaXt table-head-mod__table___17eFg">
<colgroup data-reactid=".0.4.0">
<col class="bought-table-mod__col1___3U5RK">
<col class="bought-table-mod__col2___224Oh">
<col class="bought-table-mod__col3___J0oe0">
<col class="bought-table-mod__col4___XvKTC">
<col class="bought-table-mod__col5___2kktP">
<col class="bought-table-mod__col6___1KqCQ">
<col class="bought-table-mod__col7___PpB_p">
</colgroup>
<tbody data-reactid=".0.4.1">
<tr data-reactid=".0.4.1.0">
<th>宝贝</th>
<th>单价</th>
<th>数量</th>
<th>商品操作</th>
<th>实付款</th>
<th>
<span class="field-select-mod__select___xOMpt trade-select table-head-mod__status___SBEwU rc-select rc-select-enabled">
<span class="rc-select-selection rc-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<span class="rc-select-selection__rendered">
<span>交易状态</span>
</span>
<span class="rc-select-arrow" tabindex="-1" style="outline:none;">
<b></b>
</span>
</span>
</span>
</th>
<th>交易操作</th>
</tr>
</tbody>
</table>
<div class="row-mod__row___1aPep js-actions-row-top">
<div style="float:left;">
<div class="batch-mod__container___sK68S"></div>
</div>
<div style="float:right;">
<div class="simple-pagination-mod__container___1pC5p">
<button class="button-mod__button___2HDif button-mod__default___2pRKd button-mod__small___1a8rc simple-pagination-mod__prev___pJnpC" disabled="">上一页</button>
<button class="button-mod__button___2HDif button-mod__default___2pRKd button-mod__small___1a8rc">下一页</button>
</div>
</div>
</div>
@if (purchases != null && purchases.Count > 0)
{
foreach (var purchase in purchases)
{
var product = products.FirstOrDefault(r => r.Id == purchase.ProductId);
var shop = shops.FirstOrDefault(r => r.Id == product.ShopId);
<div class="index-mod__order-container___1ur4- js-order-container">
<div class="bought-wrapper-mod__trade-order___2lrzV bought-wrapper-mod__closed___3pIh6">
<table class="bought-table-mod__table___AnaXt bought-wrapper-mod__table___3xFFM">
<colgroup>
<col class="bought-table-mod__col1___3U5RK">
<col class="bought-table-mod__col2___224Oh">
<col class="bought-table-mod__col3___J0oe0">
<col class="bought-table-mod__col4___XvKTC">
<col class="bought-table-mod__col5___2kktP">
<col class="bought-table-mod__col6___1KqCQ">
<col class="bought-table-mod__col7___PpB_p">
</colgroup>
<tbody class="bought-wrapper-mod__head___2vnqo">
<tr>
<td class="bought-wrapper-mod__head-info-cell___29cDO">
<label class="bought-wrapper-mod__checkbox-label___3Va60">
<span class="bought-wrapper-mod__checkbox___11anQ">
<input type="checkbox" disabled="">
</span>
<span class="bought-wrapper-mod__create-time___yNWVS">@(purchase.CreateTime.ToString("yyyy-MM-dd"))</span>
</label>
<span>
<span>订单号</span>
<span>: </span>
<span>@purchase.Id</span>
</span>
</td>
<td colspan="2" class="bought-wrapper-mod__seller-container___3dAK3">
<span class="seller-mod__container___zFAFV">
<a href="" class="seller-mod__name___2IlQm" title="@shop.Name" target="_blank" rel="noopener noreferrer">@shop.Name</a>
</span>
</td>
<td>
<span id="webww1">
<span class="ww-light ww-large" data-display="inline" data-nick="@shop.Name" data-tnick="@shop.Name"><a href="" target="_blank" class="ww-inline ww-online" title=""><span></span></a></span>
</span>
</td>
<td colspan="3" class="bought-wrapper-mod__thead-operations-container___2LwDA">
<span></span>
<a href="" class="bought-wrapper-mod__th-operation___yRtHm" title="编辑标记信息，仅自己可见" target="_blank" rel="noopener noreferrer" id="flag">
<i style="height:17px;width:1px;padding-left:17px;overflow:hidden;vertical-align:middle;font-size:0px;display:inline-block;background:url(/imgs/TB1heyGFVXXXXXpXXXXR3Ey7pXX-550-260.png) no-repeat -176px -176px;"></i>
</a>
<a href="###" class="bought-wrapper-mod__th-operation___yRtHm always-visible" title="删除订单" target="_blank" rel="noopener noreferrer" action="a7" data="[object Object]" id="delOrder">
<i style="height:17px;width:1px;padding-left:17px;overflow:hidden;vertical-align:middle;font-size:0px;display:inline-block;visibility:visible;background:url(/imgs/TB1heyGFVXXXXXpXXXXR3Ey7pXX-550-260.png) no-repeat -239px -176px;"></i>
</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="sol-mod__no-br___36X3g">
<div class="ml-mod__container___2DOxT production-mod__production___123Ax suborder-mod__production___3WebF">
<div class="ml-mod__media___2sZrj" style="width:80px;">
<a href="/Product/Detail/@(product.Id)" class="production-mod__pic___G8alD" target="_blank" rel="noopener noreferrer">
<img src="@(product.ImageUrl)">
<span> </span>
</a>
</div>
<div style="margin-left:90px;">
<p>
<a href="/Product/Detail/@(product.Id)" target="_blank" rel="noopener noreferrer">
<span> </span>
<span style="line-height:16px;">@product.Name</span>
<span> </span>
</a>
<span></span>
<span></span>
<span></span>
</p>
<p>
<a href="/Rule/Real" title="正品保证" type="3" style="margin-right:8px;" target="_blank">
<img src="~/imgs/T1SyeXFpliXXaSQP_X-16-16.png">
</a>
<a href="/Rule/XiaoBao" title="如实描述" type="3" style="margin-right:8px;" target="_blank"><img src="~/imgs/TB1PDB6IVXXXXaVaXXXXXXXXXXX.png"></a>
</p>
</div>
</div>
</td>
<td class="sol-mod__no-br___36X3g">
<div class="price-mod__price___3_8Zs">
<p>
<span>￥</span>
<span>@(Math.Round(product.PreferentialPrice, 2))</span>
</p>
</div>
</td>
<td class="sol-mod__no-br___36X3g">
<div>
<p>@(purchase.BuyCount)</p>
</div>
</td>
<td>
<div>
<p style="margin-bottom:3px;">
<span class="text-mod__link___1rXmw text-mod__hover___1TDrR" action="a3">申请售后</span>
</p>
</div>
</td>
<td class="">
<div>
<div class="price-mod__price___3_8Zs">
<p>
<strong>
<span>￥</span>
<span>@(purchase.TotalPrice)</span>
</strong>
</p>
</div>
<p style="color:#6c6c6c;font-family:verdana;">
<span></span>
<span></span>
<span></span>
<span></span>
</p>
<div style="font-family:verdana;">
<div></div>
</div>
<span></span>
</div>
</td>
<td class="">
<div>
<p style="margin-bottom:3px;"><span class="text-mod__link___1rXmw">购买成功</span></p>
<div>
<p style="margin-bottom:3px;">
<a href="" class="text-mod__link___1rXmw text-mod__hover___1TDrR" target="_blank" rel="noopener noreferrer" id="viewDetail">订单详情</a>
</p>
</div>
</div>
</td>
<td class="">
<div>
<p style="margin-bottom:3px;">
<a href="" class="text-mod__link___1rXmw text-mod__hover___1TDrR" target="_blank" rel="noopener noreferrer">追加评论</a>
</p>
<p style="margin-bottom:3px;">
<span class="text-mod__link___1rXmw text-mod__hover___1TDrR" action="a1">再次购买</span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
}
}
else
{
<div class="index-mod__empty-list___3CaW2 js-empty-list">
<img class="index-mod__empty-list-img___3kyoO" src="~/imgs/avif/noorder.avif">
<span data-reactid=".0.7.1">没有符合条件的宝贝，请尝试其他搜索条件。</span>
</div>
}
<div class="row-mod__row___1aPep js-actions-row-bottom">
<div style="float:left;">
<div class="batch-mod__container___sK68S"></div>
</div>
<div style="float:right;">
<ul class="pagination " unselectable="unselectable">
<li title="上一页" class="pagination-disabled pagination-prev"><a></a></li>
<li title="1" class="pagination-item pagination-item-1 pagination-item-active"><a>1</a></li>
<li title="2" class="pagination-item pagination-item-2"><a>2</a></li>
<li title="3" class="pagination-item pagination-item-3"><a>3</a></li>
<li title="4" class="pagination-item pagination-item-4"><a>4</a></li>
<li title="下一页" class="pagination-next"><a></a></li>
<noscript></noscript>
</ul>
</div>
</div>
<div class="loading-mod__loading___3nGTY loading-mod__hidden___1tIoI">
<div class="loading-mod__bg___2ylNX loading-mod__q___3pSfD"></div>
<div class="loading-mod__bg___2ylNX loading-mod__z___3Le9C">
</div>
</div>
</div>
下单及订单管理展示
运行程序，点击登录，在登录成功后，选择商品点击【立即购买】或者购物车页面点击【购买】，然后跳转到下单页面，如下所示：
订单管理页面
运行程序，点击登录，在登录成功后，在右上角个人名称，点击下拉菜单，选择订单管理，然后打开订单管理页面，如下所示：
以上就是ASP.NET Core MVC开发实战之商城系统第六部分内容，后续将继续介绍其他模块，敬请期待。
作者：老码识途
出处：http://www.cnblogs.com/hsiang/
本文版权归作者和博客园共有，写文不易，支持原创，欢迎转载【点赞】，转载请保留此段声明，且在文章页面明显位置给出原文连接，谢谢。
关注个人公众号，定时同步更新技术及职场文章
