<!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/order/settlement.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 我的采美 -->
<div id="settlement">
    <div class="navLayout" >
         <div class="crumbs">
            <span>我的店铺</span>
            <span>&gt;</span>
            <span>品牌管理</span>
        </div>
        <div class="wrap clear">
             <!--左侧面包屑-->
            <template th:replace="supplier-center/components/tableft"></template>
            <div class="right">
                <div class="head-top">
                    <form action="">
                        <div class='order-border'><span>订单编号：</span><input type="text" v-model="params.shopOrderNo"  placeholder="请输入商品货号"> </div>
                        <div class='order-border'><span>买家名称：</span><input type="text" v-model="params.userName"  placeholder="请输入买家名称"> </div>
                        <div>
                            结算状态：
                            <select name="" id="settlement-status" class="state" @change="getstatus($event)">
                                <option value="">所有</option>
                                <option value="1">待结算</option>
                                <option value="2">部分结算</option>
                                <option value="3">已结算</option>
                            </select>
                            </div>
                            <div id="newBtn">
                                <div class="query-btn" @click="serchBtn">查询</div>
                            </div>
                    </form>
                </div>
                <div class="main-content">
                    <ul class="main-title">
                        <li class="samewidth">订单编号</li>
                        <li class="samewidth">下单时间</li>
                        <li class="samewidth">买家</li>
                        <li>商品信息</li>
                        <li>结算状态</li>
                        <li>总结算金额</li>
                        <li>已结算金额</li>
                    </ul>
                    <div class="mentlist" v-if="list.length>0">
                     <div v-for="res in list">
                        <ul v-for="item in res.orderProductList">
                            <li class="samewidth"><a :href="'/supplier/order/detail.html?shopOrderID='+res.shopOrderID">{{item.shopOrderNo}}</a></li>
                            <li class="samewidth">{{res.orderTime}}</li>
                            <li class="samewidth">{{res.name}}</li>
                            <li>{{item.name}}</li>
                            <li>
                                <span v-if="res.payStatus==1||res.payStatus==null" class="status-red">待结算</span>
                                <span v-if="res.payStatus==2" class="status-yellow">部分结算</span>
                                <span v-if="res.payStatus==3" class="status-blue">已结算</span>
                            </li>
                            <li>¥ {{res.shouldPayShopAmount ?res.shouldPayShopAmount.toFixed(2) :'0.00'}}</li>
                            <li>¥ {{res.payedShopAmount ?res.payedShopAmount.toFixed(2) :'0.00'}}</li>
                        </ul>
                        </div>
                    </div>
                    <div v-else class="air">
                        <img src="/img/order/air.png"/>
                    </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/order/settlement.js(v=${version})}"></script>
</body>
</html>
