<!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/orderlist.css(v=${version})}" rel="stylesheet" type="text/css">

</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 我的采美 -->
<div id="orderList">
    <div class="navLayout" v-cloak>
        <div v-if="isPC" class="crumbs">
            <span>我的采美</span>
            <span>&gt;</span>
            <span>我的交易</span>
            <span>&gt;</span>
            <span>我的订单</span>
        </div>
        <div class="wrap clear">
            <!--左侧导航-->
            <template th:replace="user-center/components/tableft"></template>

            <div class="right">
                <div class="new-s-item">
                        <form action="">
                            <div class='order-border'><span>订单编号：</span><input type="text" id="order-number" v-model="params.shopOrderNo" class="Buyer" placeholder="请输入商品货号"></div>
                            <div class='order-border'><span>买家名称：</span><input type="text" id="name-buyer" v-model="params.name" class="Buyer" placeholder="请输入买家名称"> </div>
                            <div>
                                结算状态：
                                <select name="" id="settlement-status" class="state" @change="getpayStatus($event)">
                                    <option value="0" v-for="p in pay" :value="p.value">{{p.name}}</option>
                                </select>
                            </div>
                            <div>
                                发货状态：
                                <select name="" id="delivery-status" class="state " @change="getstatus($event)" >
                                    <option  v-for="s in Status" :value="s.value">{{s.name}}</option>
                                </select>
                            </div>
                                <button type="button" class="query-btn" @click="serchBtn">查询</button>
                        </form>

                         <div class="supplier-main order" v-for="(order,index) in results" :key="index">
                            <div class="order-title" >
                                <div class="title-name">
                                    <p>订单编号(标识)：{{order.shopOrderNo}}</p>
                                </div>
                                <div class="title-time">
                                    <p>下单时间：{{order.orderTime}}</p>
                                </div>
                            </div>
                            <div class="order-content">
                                <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 class="order-product" v-for="proitem in order.orderProductList">
                                    <div class="product-img">
                                        <img :src="proitem.productImage"/>
                                    </div>
                                    <div class="product-info">
                                        <h3>{{proitem.name}}</h3>
                                        <p>
                                        <span class="num" >数量：&nbsp;{{proitem.num}}</span>
                                        <span class="num">已发货：&nbsp;{{proitem.shipmentsNum}}</span>
                                        <span class="num" v-if="order.returnedNum!=null&&order.returnedNum!=0">已退/已取消：&nbsp;{{proitem.actualCancelNum}}</span>
                                        </p>
                                        <p >单价：&nbsp;<span>￥{{proitem.price.toFixed(2)}}</span> </p>
                                        <p>合计：&nbsp;<span class="red">￥{{proitem.totalAmount.toFixed(2)}}</span> </p>
                                    </div>

                                </div>
                                <div class="order-botton">
                                   <div>
                                        <a class="btn" href="javascript: void(0);" v-if="order.sendOutStatus!=3" :value="order.shopOrderID" @click="delivery(order.shopOrderID)">发货</a>
                                        <a class="btn" href="javascript: void(0);" @click="record(order.shopOrderID)">发货记录</a>
                                        <a class="btn" href="javascript: void(0);" @click="Checklist(order.shopOrderID)">售货清单</a>
                                        <a class="btn deatil" href="javascript: void(0);" @click="seedetail(order.shopOrderID)" >查看详情</a>
                                   </div>

                                </div>
                            </div>
                             <div class="userinfo" >
                                    <div class="username">
                                         <p>买家名称：<span class="blcak">{{order.userInfo.name}}</span> </p>
                                         <p >收货人：<span class="blcak">{{order.userInfo.shouHuoRen}}</span> </p>
                                         <p >联系方式：<span class="blcak">{{order.userInfo.mobile}}</span> </p>
                                    </div>
                                    <div class="address">
                                        <p >收货地址：&nbsp;&nbsp;<span class="blcak">{{order.userInfo.address}}</span> </p>
                                    </div>
                                </div>
                        </div>
                    </div>
                     <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
                     <div class="pageWrap clear" v-if="isPC && pageTotal>1">
                            <a v-if="params.pageNum>1" class="prev" @click="toPagination(params.pageNum*1-1)" href="javascript:void(0);"></a>
                            <template v-for="n in showPageBtn">
                                <a v-if="n" :class="{'on':(n==params.pageNum)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
                                <span v-else>···</span>
                            </template>
                            <a v-if="params.pageNum<pageTotal" class="next" @click="toPagination(params.pageNum*1+1)" href="javascript:void(0);"></a>
                            <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
                            <span>跳至</span>
                            <input v-model="pageInput" @blur="checkNum()"/>
                            <span>页</span>&nbsp;
                            <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
                   </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/orderlist.js(v=${version})}"></script>
</body>
</html>
