經過一段時間的準備，新的一期【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開發實戰之商城系統第六部分內容，後續將繼續介紹其他模塊，敬請期待。