一.界面展示

确认订单页面

确认订单页面相关逻辑见 golang gin框架] 30.Gin 商城项目- 购物车商品确认页面以及收货地址的增删改查
点击 '去支付'按钮逻辑:
(1).判断用户是否存在地址,不存在则新增并设置为默认地址
(2).点击'去支付',请求提交订单执行结算操作:
订单执行结算操作步骤:
1).防止重复提交订单
2).获取用户信息 ,获取用户的收货地址信息
3).获取购买商品的信息
4).把订单信息放在订单表，把商品信息放在订单商品表
5).删除购物车里面的选中数据
6).跳转到支付页面

去支付页面

展示支付商品相关数据:
订单数据,订单详情数据

二.代码展示

数据表

增加订单数据表,订单商品数据表


-- ----------------------------
-- Table structure for order
-- ----------------------------
DROP TABLE IF EXISTS `order`;
CREATE TABLE `order`  (
  `id` int(0) NOT NULL AUTO_INCREMENT,
  `uid` int(0) NULL DEFAULT NULL,
  `order_id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `all_price` decimal(10, 2) NULL DEFAULT NULL,
  `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `phone` varchar(11) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `address` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `zipcode` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `pay_status` tinyint(1) NULL DEFAULT NULL,
  `pay_type` tinyint(1) NULL DEFAULT NULL,
  `order_status` tinyint(1) NULL DEFAULT NULL,
  `add_time` int(0) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 62 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Table structure for order_item
-- ----------------------------
DROP TABLE IF EXISTS `order_item`;
CREATE TABLE `order_item`  (
  `id` int(0) NOT NULL AUTO_INCREMENT,
  `order_id` int(0) NULL DEFAULT NULL,
  `uid` int(0) NULL DEFAULT NULL,
  `product_title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `product_id` int(0) NULL DEFAULT NULL,
  `product_img` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `product_price` decimal(10, 2) NULL DEFAULT NULL,
  `product_num` int(0) NULL DEFAULT NULL,
  `goods_version` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `goods_color` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,
  `add_time` int(0) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 83 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

数据模型

order.go

package models

//订单表相关结构体

type Order struct {
    Id          int
    OrderId     string        //订单号
    Uid         int  //用户id
    AllPrice    float64  //订单总价
    Phone       string  //收货人手机号
    Name        string  //收货人姓名
    Address     string  //收货地址
    PayStatus   int // 支付状态： 0 表示未支付, 1 已经支付
    PayType     int // 支付类型： 0 alipay, 1 wechat
    OrderStatus int // 订单状态： 0 已下单 ,1 已付款,2 已配货,3、发货, 4 交易成功, 5 退货, 6 取消
    AddTime     int  //订单生成时间
}

func (Order) TableName() string {
    return "order"
}

orderItem.go

package models

//订单商品数据相关结构体

type OrderItem struct {
    Id           int
    OrderId      int    //订单号
    Uid          int  //用户id
    ProductTitle string  //商品名称
    ProductId    int  //商品id
    ProductImg   string //商品图片
    ProductPrice float64  //商品单价
    ProductNum   int  //购买数量
    GoodsVersion string  //商品版本
    GoodsColor   string  //商品颜色
    AddTime      int  //增加订单商品时间
}

func (OrderItem) TableName() string {
    return "order_item"
}

路由

增加以下路由到routers/frontendRouters.go中

//购物车:确认选中商品页面:增加一个中间件:判断用户权限
defaultRouters.GET("/buy/checkout", middlewares.InitUserAuthMiddleware, frontend.BuyController{}.Checkout)
//提交订单执行结算
defaultRouters.POST("/buy/doCheckout", middlewares.InitUserAuthMiddleware, frontend.BuyController{}.DoCheckout)
//支付:去结支付页面
defaultRouters.GET("/buy/pay", middlewares.InitUserAuthMiddleware, frontend.BuyController{}.Pay)

tools.go工具类

增加获取订单编号的方法

//生成随机数
func GetRandomNum() string {
    var str string
    for i := 0; i < 4; i++ {
        current := rand.Intn(10)
        str += strconv.Itoa(current)
    }
    return str
}

// 获取订单编号
func GetOrderId() string {
    // 2022020312233
    temp := "20060102150405"
    return time.Now().Format(temp) + GetRandomNum()
}

控制器方法代码

在controllers/BuyControllers.go中完善以及增加相关方法:
完善方法:
确认订单页面方法-Checkout:
生成签名: 进入'订单结算页面'时,防止重复提交订单

增加方法:
提交订单执行结算方法-DoCheckout:
1.防止重复提交订单
2.获取用户信息 ,获取用户的收货地址信息
3.获取购买商品的信息
4.把订单信息放在订单表，把商品信息放在订单商品表
5.删除购物车里面的选中数据
6.跳转到支付页面

支付(去支付页面)方法-Pay:
获取订单相关信息,并渲染到对应的html页面

package frontend

//购买商品相关控制器

import (
    "fmt"
    "github.com/gin-contrib/sessions"
    "github.com/gin-gonic/gin"
    "goshop/models"
    "net/http"
)

type BuyController struct {
    BaseController
}

//确认订单页面
func (con BuyController) Checkout(c *gin.Context) {
    //获取购物车中选择的商品
    cartList := []models.Cart{}
    models.Cookie.Get(c, "cartList", &cartList)
    //选中的商品
    orderList := []models.Cart{}
    //总价格
    var allPrice float64
    //总数量
    var allNum int
    //循环购物车,并获取选中的商品信息
    for i := 0; i < len(cartList); i++ {
        if cartList[i].Checked {
            allPrice += cartList[i].Price * float64(cartList[i].Num)
            orderList = append(orderList, cartList[i])
            allNum += cartList[i].Num
        }
    }

    //获取当前用户的收货地址
    //获取用户
    user := models.User{}
    models.Cookie.Get(c, "user", &user)
    addressList := []models.Address{}
    fmt.Println(user)
    //通过用户id获取收货地址列表
    models.DB.Where("uid = ?", user.Id).Order("id desc").Find(&addressList)

    //生成签名: 进入'订单结算页面'时,防止重复提交订单
    orderSign := models.Md5(models.GetRandomNum())
    session := sessions.Default(c)
    session.Set("orderSign", orderSign)
    session.Save()

    //判断orderList数据是否存在
    if len(orderList) == 0 {  //不存在,则跳转到购物车页面
        c.Redirect(http.StatusFound, "/cart")
        return
    }

    con.Render(c, "frontend/buy/checkout.html", gin.H{
        "orderList": orderList,
        "allPrice":    allPrice,
        "allNum":      allNum,
        "addressList": addressList,
        "orderSign":   orderSign,
    })
}

/*
提交订单执行结算
   1.防止重复提交订单
   2.获取用户信息 ,获取用户的收货地址信息
   3.获取购买商品的信息
   4.把订单信息放在订单表，把商品信息放在订单商品表
   5.删除购物车里面的选中数据
   6.跳转到支付页面
*/
func (con BuyController) DoCheckout(c *gin.Context) {
    //1.防止重复提交订单
    //获取签名
    orderSignClient := c.PostForm("orderSign")
    session := sessions.Default(c)
    //获取session中保存的签名
    orderSignSession := session.Get("orderSign")
    //进行类型断言,转换成string类型
    orderSignServer, ok := orderSignSession.(string)
    if !ok {  //转换失败或者没有签名,则跳转到 '购物车' 页面
        c.Redirect(http.StatusFound, "/cart")
        return
    }
    //判断传入的签名和session中保存的签名是否一致,一致:说明是上一步传过来的,不一致:说明不是上一步传过来的,跳转到购物车页面
    if orderSignClient != orderSignServer {
        c.Redirect(http.StatusFound, "/cart")
        return
    }
    //判断完毕后,删除签名
    session.Delete("orderSign")
    session.Save()

    // 2.获取用户信息,获取用户的收货地址信息
    user := models.User{}
    models.Cookie.Get(c, "user", &user)
    //定义用户默认收货地址结构体
    addressResult := []models.Address{}
    models.DB.Where("uid = ? AND default_address = 1", user.Id).Find(&addressResult)
    //判断是否存在默认收货地址,如果不存在,则跳转到'确认订单'页面
    if len(addressResult) == 0 {
        c.Redirect(http.StatusFound, "/buy/checkout")
        return
    }

    // 3.获取购买商品的信息:可以从cookie中获取,如果创建了购物车数据表,也可以从购物车数据表中获取
    //目前从cookie中获取选中的商品
    cartList := []models.Cart{}
    models.Cookie.Get(c, "cartList", &cartList)
    //定义选中商品结构体
    orderList := []models.Cart{}
    var allPrice float64
    //循环购物车中商品,把选中的商品放入orderList结构体中
    for i := 0; i < len(cartList); i++ {
        if cartList[i].Checked {
            allPrice += cartList[i].Price * float64(cartList[i].Num)
            orderList = append(orderList, cartList[i])
        }
    }
    // 4.把订单信息放在订单表，把商品信息放在商品表
    order := models.Order{
        OrderId:     models.GetOrderId(),
        Uid:         user.Id,
        AllPrice:    allPrice,
        Phone:       addressResult[0].Phone,
        Name:        addressResult[0].Name,
        Address:     addressResult[0].Address,
        PayStatus:   0,
        PayType:     0,
        OrderStatus: 0,
        AddTime:     int(models.GetUnix()),
    }

    err := models.DB.Create(&order).Error

    //增加数据成功以后可以通过order.Id
    if err == nil {
        // 把商品信息放在商品订单表
        for i := 0; i < len(orderList); i++ {
            orderItem := models.OrderItem{
                OrderId:      order.Id,
                Uid:          user.Id,
                ProductTitle: orderList[i].Title,
                ProductId:    orderList[i].Id,
                ProductImg:   orderList[i].GoodsImg,
                ProductPrice: orderList[i].Price,
                ProductNum:   orderList[i].Num,
                GoodsVersion: orderList[i].GoodsVersion,
                GoodsColor:   orderList[i].GoodsColor,
            }
            models.DB.Create(&orderItem)
        }
    }

    // 5.删除购物车里面的选中数据
    noSelectCartList := []models.Cart{}
    for i := 0; i < len(cartList); i++ {
        if !cartList[i].Checked {
            noSelectCartList = append(noSelectCartList, cartList[i])
        }
    }
    models.Cookie.Set(c, "cartList", noSelectCartList)

    //跳转到'去支付'页面
    c.Redirect(http.StatusFound, "/buy/pay?orderId="+models.String(order.Id))
}

//支付:去支付页面
func (con BuyController) Pay(c *gin.Context) {
    //获取订单id
    orderId, err := models.Int(c.Query("orderId"))
    if err != nil {  // 订单id类型错误
        c.Redirect(http.StatusFound, "/cart")
    }
    //获取用户信息
    user := models.User{}
    models.Cookie.Get(c, "user", &user)
    //获取订单信息
    order := models.Order{}
    models.DB.Where("id = ?", orderId).Find(&order)
    if order.Uid != user.Id { //订单信息错误
        c.Redirect(http.StatusFound, "/cart")
        return
    }
    //获取订单对应的商品
    orderItems := []models.OrderItem{}
    models.DB.Where("order_id = ?", orderId).Find(&orderItems)

    //渲染页面
    con.Render(c, "frontend/buy/pay.html", gin.H{
        "order":      order,
        "orderItems": orderItems,
    })
}

html以及js代码

确认订单页面html-frontend/buy/checkout.html

判断用户是否存在地址,不存在则新增并设置为默认地址

{{ define "frontend/buy/checkout.html" }}

{{ template "frontend/public/page_header.html" .}}
<!--end header -->
<link rel="stylesheet" href="/static/frontend/css/checkout.css" />
<link rel="stylesheet" href="/static/frontend/css/bootstrap.css" />
<script src="/static/frontend/js/bootstrap.js"></script>
<script src="/static/frontend/js/checkout.js"></script>
<!-- start banner_x -->
<div class="banner_x center clearfix mt20">
    <a href="/" target="_blank">
        <div class="logo fl"></div>
    </a>
    <div class="wdgwc fl ml40">确认订单 </div>
</div>

<form action="/buy/doCheckout" method="post" id="checkoutForm">
    <input type="hidden" name="orderSign" value="{{.orderSign}}">
    <div class="checkout-box">
        <div class="section section-address">
            <div class="section-header clearfix">
                <h3 class="title">收货地址</h3>

                <div class="more">
                </div>

                <div class="mitv-tips hide" style="margin-left: 0;border: none;" id="J_bigproPostTip"></div>

            </div>
            <div class="section-body clearfix" id="J_addressList">
                <!-- addresslist begin -->

                <div id="addressList">


                    {{range $key,$value := .addressList}}
                    <div class="address-item J_addressItem {{if eq $value.DefaultAddress 1}}selected{{end}}"
                        data-id="{{$value.Id}}">
                        <dl>
                            <dt><em class="uname">{{$value.Name}}</em> </dt>
                            <dd class="utel">{{$value.Phone}}</dd>
                            <dd class="uaddress">{{$value.Address}} </dd>
                        </dl>
                        <div class="actions">
                            <a href="javascript:void(0);" data-id="{{$value.Id}}" class="modify addressModify">修改</a>
                        </div>
                    </div>
                    {{end}}

                </div>


                <!-- addresslist end -->
                <div class="address-item address-item-new" id="J_newAddress" data-toggle="modal"
                    data-target="#addAddressModal">
                    <i class="iconfont">+</i> 添加新地址
                </div>
            </div>
        </div>

        <div class="section section-goods">
            <div class="section-header clearfix">
                <h3 class="title">商品及优惠券</h3>
                <div class="more">
                    <a href="/cart" data-stat-id="4b8666e26639b521">返回购物车<i class="iconfont">></i></a>
                </div>
            </div>
            <div class="section-body">
                <ul class="goods-list" id="J_goodsList">

                    {{range $key,$value := .orderList}}
                    <li class="clearfix">
                        <div class="col col-img">
                            <img src="{{$value.GoodsImg | FormatImg}}" width="30" height="30" />
                        </div>
                        <div class="col col-name">
                            <a href="#" target="_blank">
                                {{$value.Title}}--{{$value.GoodsColor}} {{$value.GoodsVersion}}
                            </a>
                        </div>

                        <div class="col col-price">
                            {{$value.Price}}元 x {{$value.Num}} </div>
                        <div class="col col-status">
                            &nbsp;
                        </div>
                        <div class="col col-total">
                            {{Mul $value.Price $value.Num}}元
                        </div>
                    </li>
                    {{end}}

                </ul>
            </div>
        </div>

        <div class="section section-options section-payment clearfix hide">
            <div class="section-header">
                <h3 class="title">支付方式</h3>
            </div>
            <div class="section-body clearfix">
                <ul class="J_optionList options ">
                    <li data-type="pay" class="J_option selected" data-value="1">
                        在线支付 <span>
                            （支持微信支付、支付宝、银联、财付通、小米钱包等） </span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="section section-options section-shipment clearfix">
            <div class="section-header">
                <h3 class="title">配送方式</h3>
            </div>
            <div class="section-body clearfix">
                <ul class="clearfix J_optionList options ">
                    <li data-type="shipment" class="J_option selected" data-amount="0" data-value="2">
                        包邮 </li>
                </ul>

                <div class="service-self-tip" id="J_serviceSelfTip" style="display: none;"></div>
            </div>
        </div>

        <div class="section section-options section-time clearfix hide" style="display: block;">
            <div class="section-header">
                <h3 class="title">配送时间</h3>
            </div>
            <div class="section-body clearfix">
                <ul class="J_optionList options options-list clearfix">
                    <!-- besttime start -->
                    <li data-type="time" class="J_option selected" data-value="1">
                        不限送货时间：<span>周一至周日</span> </li>
                    <li data-type="time" class="J_option " data-value="2">
                        工作日送货：<span>周一至周五</span> </li>
                    <li data-type="time" class="J_option " data-value="3">
                        双休日、假日送货：<span>周六至周日</span> </li>
                    <!-- besttime end -->
                </ul>
            </div>
        </div>

        <div class="section section-options section-invoice clearfix">
            <div class="section-header">
                <h3 class="title">发票</h3>
            </div>
            <div class="section-body clearfix">
                <div class="invoice-result">
                    <span id="J_invoiceDesc">电子发票</span>
                    <span id="J_invoiceTitle">个人</span>
                    <span>商品明细</span>
                    <a href="#J_modalInvoiceInfo" data-toggle="modal" id="J_invoiceModify" data-stat-id="67efe13c31710c36"
                        onclick="_msq.push(['trackEvent', '50d1f382fadafb8b-67efe13c31710c36', '#J_modalInvoiceInfo', 'pcpid', '']);">修改
                        &gt;</a>
                </div>
            </div>
        </div>

        <div class="section section-count clearfix">

            <div class="money-box" id="J_moneyBox">
                <ul>
                    <li class="clearfix">
                        <label>商品件数：</label>
                        <span class="val">{{.allNum}}件</span>
                    </li>
                    <li class="clearfix">
                        <label>商品总价：</label>
                        <span class="val">{{.allPrice}}元</span>
                    </li>
                    <li class="clearfix">
                        <label>活动优惠：</label>
                        <span class="val">-0元</span>
                    </li>
                    <li class="clearfix">
                        <label>优惠券抵扣：</label>
                        <span class="val"><i id="J_couponVal">-0</i>元</span>
                    </li>
                    <li class="clearfix">
                        <label>运费：</label>
                        <span class="val"><i data-id="J_postageVal">0</i>元</span>
                    </li>
                    <li class="clearfix total-price">
                        <label>应付总额：</label>
                        <span class="val"><em data-id="J_totalPrice">{{.allPrice}}</em>元</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="section-bar clearfix">
            <div class="fl">
                <div class="seleced-address hide" id="J_confirmAddress">
                </div>
                <div class="big-pro-tip hide J_confirmBigProTip"></div>
            </div>
            <div class="fr">            
                <input type="submit" class="btn btn-primary" value="去支付">
            </div>
        </div>


    </div>

</form>
<!-- 收货地址增加 -->
<div class="modal fade" id="addAddressModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">增加收货地址</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" name="name" id="add_name" class="form-control" placeholder="姓名">

                </div>
                <div class="form-group">
                    <input type="text" name="phone" id="add_phone" class="form-control" placeholder="电话">
                </div>

                <div class="form-group">
                    <textarea name="address" id="add_address" class="form-control" cols="78" rows="4"
                        placeholder="详细地址"></textarea>
                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-primary" id="addAddress">增加</button>

                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- 收货地址修改 -->
<div class="modal fade" id="editAddressModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">修改收货地址</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="hidden" name="id" id="edit_id" />
                    <input type="text" name="name" id="edit_name" class="form-control" placeholder="姓名">

                </div>
                <div class="form-group">
                    <input type="text" name="phone" id="edit_phone" class="form-control" placeholder="电话">
                </div>

                <div class="form-group">
                    <textarea name="address" id="edit_address" class="form-control" cols="78" rows="4"
                        placeholder="详细地址"></textarea>
                </div>

            </div>

            <div class="modal-footer">

                <button type="btton" class="btn btn-primary" id="editAddress">修改</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!-- footer -->
{{ template "frontend/public/page_footer.html" .}}
</body>
</html>
{{end}}

确认订单js

增加提交判断方法onSubmit: 是否存在默认收货地址; 在app中引入,其他js见 golang gin框架] 30.Gin 商城项目- 购物车商品确认页面以及收货地址的增删改查,代码如下

init: function () {
    this.addAddress();
    this.changeDefaultAddress();
    this.editAddress();
    this.onSubmit();
        },
onSubmit: function () {
            $("#checkoutForm").submit(function () {
                //判断收货地址是否选中
                var addressCount = $("#addressList .address-item.selected").length;
                if (addressCount > 0) {
                    return true;
                }
                alert('请选择收货地址');
                return false;
            })
        },

去支付页面html

在templates/frontend/buy下增加pay.html页面,展示订单相关信息

{{ define "frontend/buy/pay.html" }}
{{ template "frontend/public/page_header.html" .}}
<!--end header -->
<link rel="stylesheet" href="/static/frontend/css/pay.css" />
<script src="/static/frontend/js/bootstrap.js"></script>
<!-- start banner_x -->
<div class="banner_x center clearfix">
    <a href="/" target="_blank">
        <div class="logo fl"></div>
    </a>
    <div class="wdgwc fl ml40">支付页面 </div>
</div>
<div class="page-main">
    <div class="checkout-box">
        <div class="section section-order">
            <div class="order-info clearfix">
                <div class="fl">
                    <h2 class="title">订单提交成功！去付款咯～</h2>
                    <p class="order-time" id="J_deliverDesc"></p>
                    <p class="order-time">请在<span class="pay-time-tip">47小时59分</span>内完成支付, 超时后将取消订单</p>
                    <p class="post-info" id="J_postInfo">
                        收货信息： {{.order.Name}} &nbsp;&nbsp;{{.order.Phone}} &nbsp;&nbsp; {{.order.Address}} </p>
                </div>
                <div class="fr">
                    <p class="total">
                        应付总额：<span class="money"><em>{{.order.AllPrice}}</em>元</span>
                    </p>
                    <br>
                    <br>
                    <a href="javascript:void(0);" class="show-detail" id="J_showDetail" data-stat-id="db85b2885a2fdc53">订单详情</a>
                </div>
            </div>
            <i class="iconfont icon-right">√</i>
            <div class="order-detail">
                <ul>
                    <li class="clearfix">
                        <div class="label">订单号：</div>
                        <div class="content">
                            <span class="order-num">{{.order.OrderId}}</span>
                        </div>
                    </li>
                    <li class="clearfix">
                        <div class="label">收货信息：</div>
                        <div class="content">
                            收货信息： {{.order.Name}} &nbsp;&nbsp;{{.order.Phone}} &nbsp;&nbsp; {{.order.Address}} </div>
                    </li>
                    <li class="clearfix">
                        <div class="label">商品：</div>
                        <div class="content">
                            {{range $key,$value:=.orderItems}}
                                <p>{{$value.ProductTitle}} {{$value.GoodsVersion}} {{$value.GoodsColor}}  数量：{{$value.ProductNum}} 价格：{{$value.ProductPrice}}</p>                            
                            {{end}}
                        </div>
                    </li>
                    <li class="clearfix hide">
                        <div class="label">配送时间：</div>
                        <div class="content">
                            不限送货时间 </div>
                    </li>
                    <li class="clearfix">
                        <div class="label">发票信息：</div>
                        <div class="content">
                            电子发票 个人 </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="section section-payment">
            <div class="cash-title" id="J_cashTitle">
                选择以下支付方式付款
            </div>
            <div class="payment-box ">
                
                <div class="payment-body">
                    <ul class="clearfix payment-list J_paymentList J_linksign-customize">
                        <li id="J_weixin" data-stat-id="4971b7cf6ccf0faf" onclick="_msq.push(['trackEvent', 'f1542ececd0b6bc5-4971b7cf6ccf0faf', '', 'pcpid', '']);"><img src="//c1.mifile.cn/f/i/16/pay/weixinpay0701.png" alt="微信支付" style="margin-left: 0;"></li>
                        <li class="J_bank" data-stat-id="4971b7cf6ccf0faf" onclick="_msq.push(['trackEvent', 'f1542ececd0b6bc5-4971b7cf6ccf0faf', '', 'pcpid', '']);"><input type="radio" name="payOnlineBank" id="alipay" value="alipay"> <img src="//s01.mifile.cn/i/banklogo/payOnline_zfb.png?ver2015" alt="支付宝" style="margin-left: 0;"></li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function(){
            $(".show-detail").click(function(){
                $(".order-detail").slideToggle();
            })
    })
</script>

<!-- footer -->
{{ template "frontend/public/page_footer.html" .}}
</body>
</html>

{{end}}