<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<head>
    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
    <template th:replace="components/head-link"></template>
    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/supplier-center/detail.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 我的采美 -->
<div id="seeDetail">
    <div class="navLayout">
            <div class="crumbs" v-if="isPC">
            <span>我的交易</span>
            <span>&gt;</span>
            <span>我的订单</span>
            <span>&gt;</span>
            <span>发货记录</span>
        </div>
        <div v-else class="wrap_tittle mIcon" @click="opentittle">
            <i class="mIcon open"></i><span style="margin-left: 25px;">我的订单</span>
        </div>
        <div class="wrap clear">
            <!--左侧面包屑-->
            <div v-show="open">
                <template th:replace="supplier-center/components/tableft"></template>
            </div>
            <div class="right">
                <div class="userinfo">
                    <p class="info">
                        <span>买家信息</span>
                        <button type="button" class="comback" @click="history.go(-1)">返回</button>
                    </p>
                    <div class="user">
                        <p>买家名称：<span>{{userInfo.name}}</span></p>
                        <p>收货人：<span>{{userInfo.shouHuoRen}}</span></p>
                        <p>联系方式：<span>{{userInfo.mobile}}</span></p>
                    </div>
                    <p class="address">收货地址：<span>{{userInfo.address}}</span></p>
                </div>
                <div class="product-info">
                    <div class="price">
                        <p class="protitle">商品金额</p>
                        <p class="price-right">结算商品金额：<span class="red">￥{{order.productAmount}}</span></p>
                    </div>
                    <div class="product" >
                        <ul class="product-title">
                            <li>商品信息</li>
                            <li>单价</li>
                            <li>数量（赠品数）</li>
                            <li>总价</li>
                        </ul>
                        <ul class="pro-information">
                            <li v-for="pro in orderList ">
                                <div class="product-img">
                                    <img :src="pro.productImage"/>
                                    <h3>{{pro.aliasName}}</h3>
                                </div>
                                <div>{{pro.price}}</div>
                                <div>{{pro.num}}({{pro.presentNum}})</div>
                                <div>{{pro.totalAmount}}</div>
                            </li>
                        </ul>
                    </div>

                    <div class="order-info">
                      <div class="info-title">订单信息</div>
                      <div class="content">
                          <div class="title-name">
                                <p>订单编号(标识)：{{order.shopOrderNo}}</p>
                           </div>
                          <div class="order-item pay">
                                <p>结算状态：&nbsp;
                                    <span v-if="order.payStatus==1||order.payStatus==null"> 待结算</span>
                                    <span v-if="order.payStatus==2"> 部分结算</span>
                                    <span v-if="order.payStatus==3"> 已结算</span>
                                 </p>
                                 <p>发货状态：&nbsp;
                                    <span v-if="order.sendOutStatus==1">待发货</span>
                                    <span v-if="order.sendOutStatus==null">未发货</span>
                                    <span v-if="order.sendOutStatus==2">部分发货</span>
                                    <span v-if="order.sendOutStatus==3">已发货</span>
                                  </p>
                          </div>
                          <div class="order-item">
                                    <p>商品金额：<span class="red">￥{{order.productAmount.toFixed(2)}}</span> </p>
                                    <p>结算商品金额：<span class="red">￥{{order.shopProductAmount.toFixed(2)}}</span> </p>
                                    <p>结算税费：<span class="red">￥{{order.shopTaxFee.toFixed(2)}}</span> </p>
                                    <p>结算运费：<span class="red">￥{{order.shopPostFee.toFixed(2)}}</span> </p>
                            </div>
                            <div class="order-item">
                                    <p>总结算金额：<span class="red">￥{{order.shouldPayShopAmount.toFixed(2)}}</span> </p>
                                    <p>已结算金额：<span class="red">￥{{order.payedShopAmount.toFixed(2)}}</span> </p>
                             </div>
                         </div>
                    </div>
                    <div class="sett-re">
                        <div>结算记录</div>
                         <div v-if="payflag" v-for="pay in payShopRecord">
                             <p>{{pay.status}}.结算时间{{pay.payTime}}</p>
                             <p>结算金额{{pay.payAmount}}</p>
                         </div>
                    </div>


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

<!-- 引入底部 -->
<template th:replace="components/footer"></template>
<template th:replace="components/foot-link"></template>
<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-center/detail.js(v=${version})}"></script>
</body>
</html>
