打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

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

订单管理功能说明



在商城系统中,当用户需要购买商品时,就会进行下单。购买商品的入口有很多,比如:
  1. 首页或商品列表页面,看到商品缩略图,可以点击【立即购买】按钮进行下单;
  2. 在商品详情页面,查看商品的详细参数后,也可以点击【立即购买】按钮进行下单;
  3. 在购物车页面,选择购物车中的商品,进行批量下单。
以上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">&hearts;</i>                                                <span class="marker-tip">寄送至</span>                                            </div>                                            <label dir="ltr" aria-checked="true" class="next-radio-wrapper address-contents checked ">                                                <span class="next-radio checked" onclick="javascript:CheckAddr(this);">                                                    <span class="next-radio-inner press"></span>                                                    <input role="radio" tabindex="0" type="radio" aria-checked="true" class="next-radio-input" checked="">                                                </span>                                                <span class="next-radio-label">                                                    <span class="provinceName">@addr.Province </span>                                                    <span class="cityName">@addr.City </span>                                                    <span class="areaName">@addr.District </span>                                                    <span class="townName">@addr.Street </span>                                                    <span class="addressDetail">@addr.Detail </span>                                                    <span class="reciver">(@(addr.Name) 收)</span>                                                    <span class="mobile">@addr.Phone </span>                                                    <span class="default-tip">默认地址</span>                                                </span>                                            </label>                                            <a class="set-default" title="设置当前地址为默认">设置为默认收货地址</a>                                        </div>                                        <a title="修改地址" class="modify-operation">修改本地址</a>                                    </div>                                    <div class="curMarker"></div>                                </div>                            }                            else                            {                                <div class="addr-item-wrapper OneRow addr-not-default">                                    <div class="inner-infos">                                        <div class="content-container">                                            <label dir="ltr" aria-checked="false" class="next-radio-wrapper address-contents ">                                                <span class="next-radio" onclick="javascript:CheckAddr(this);">                                                    <span class="next-radio-inner unpress"></span>                                                    <input role="radio" tabindex="0" type="radio" aria-checked="false" class="next-radio-input">                                                </span>                                                <span class="next-radio-label">                                                    <span class="provinceName">@addr.Province </span>                                                    <span class="cityName">@addr.City </span>                                                    <span class="areaName">@addr.District </span>                                                    <span class="townName">@addr.Street </span>                                                    <span class="addressDetail">@addr.Detail </span>                                                    <span class="reciver">(@(addr.Name) 收)</span>                                                    <span class="mobile">@addr.Phone </span>                                                    <span class="default-tip">默认地址</span>                                                </span>                                            </label>                                            <a class="set-default" title="设置当前地址为默认">设置为默认收货地址</a>                                        </div>                                    </div>                                    <div class="curMarker"></div>                                </div>                            }                        }                    }                </div>                <div class="address-tips OneRow"></div>                <div class="operations">                    <a class="operation OneRow" style="font-size:12px;">使用其它地址</a>                </div>            </div>        </div>
<div data-halo-id="orderDesc_orderDesc_1" data-halo-type="itemHeader"> <div class="item-headers" id="orderDesc_orderDesc_1"> <div class="header-wrapper "> <h2 class="header-title">确认订单信息</h2> </div> <div class="item-headers-wrap item-headers-column-6"> <div class="item-headers-content item-headers-0">店铺宝贝</div> <div class="item-headers-content item-headers-1">商品属性</div> <div class="item-headers-content item-headers-2">单价</div> <div class="item-headers-content item-headers-3">数量</div> <div class="item-headers-content item-headers-4">优惠方式</div> <div class="item-headers-content item-headers-5">小计</div> </div> </div> </div> @{ var products = ViewData["Products"] as List<Product>; var shops = ViewData["Shops"] as List<Shop>; for (int i = 0; i < products.Count; i++) { var product = products[i]; var quantity_key = $"quantity_{product.Id}"; var remark_key = $"remark_{product.Id}"; var quantity = 1; var remark = ""; if (productConfigs != null || productConfigs.Count > 0) { if (productConfigs.ContainsKey(quantity_key)) { quantity = int.Parse(productConfigs[quantity_key]);
} if (productConfigs.ContainsKey(remark_key)) { remark = productConfigs[remark_key];
} } var shop = shops.FirstOrDefault(r => r.Id == product.ShopId); total += (product.PreferentialPrice * quantity); <input type="hidden" name="productId" value="@(product.Id)" /> <div id="@(product.Id)" data="[object Object]" extension="[object Object]" class="dinamicx-card-group" style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-content: flex-start; flex-shrink: 0;"> <div data-halo-id="seller_a805f2fc129a1c05fb8a632a8777f2d2" data-halo-type="seller"> <div class="order-orderInfo" id="seller_a805f2fc129a1c05fb8a632a8777f2d2" style="font-size:12px;"> <span class="shop-name">店铺:&nbsp;</span> <a href="/Shop/Index?id=@(product.ShopId)" target="_blank" rel="noopener noreferrer" title="" class="order-link shop-url">@(shop.Description)</a> <span class="shop-seller"> 卖家:&nbsp; <a href="##" target="_blank" rel="noopener noreferrer" title="@(shop.Description)" class="order-link shop-url">@(shop.Name)</a> </span> <span class="ww-light ww-large" data-encode="true" data-nick="@(shop.Name)" data-display="inline" data-icon="large"> <a href="" target="_blank" class="ww-inline ww-online" title=""><span></span></a> </span> </div> </div> <div data-halo-id="item_187bb8c6f1e163c55f64eb56fef0eacc" data-halo-type="flex"> <div id="item_187bb8c6f1e163c55f64eb56fef0eacc" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; margin: 0px; padding: 0px; background-color: rgb(251, 252, 255); border-bottom: 1px dotted rgb(221, 221, 221);"> <div style="padding: 0px;"> <div data-halo-id="itemInfoPC_187bb8c6f1e163c55f64eb56fef0eacc" data-halo-type="itemRow"> <div id="itemInfoPC_187bb8c6f1e163c55f64eb56fef0eacc" class="item-row"> <div class="order-itemInfo"> <div class="info-detail info-cell"> <a href="/Product/Detail/@(product.Id)" target="_blank" rel="noopener noreferrer" class="order-link info-cell"> <img class="info-img" src="@(product.ImageUrl)"> </a> <div class="info-cell info-msg"> <a href="/Product/Detail/@(product.Id)" target="_blank" rel="noopener noreferrer" class="order-link info-title">@(product.Name)</a> <div class="info-icon-list"> <div> <a href="##" target="_blank" rel="noopener noreferrer" title="如实描述 - 消费者保障服务,卖家承诺商品如实描述" class="order-link icon-main"> <img src="~/imgs/others/quanyi.png"> </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>


本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Ext消息提示框,显示几秒后自动消失
express+socket.io实现一个简易聊天窗
Core篇——初探Core的认证,授权机制
相思引
vue--自定义指令进行验证(1)
JQUERY 多行动画改变高度
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服