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

<!-- 我的采美 -->
<div id="deliveryRecode">
    <div class="navLayout" v-cloak="">
        <div class="crumbs" v-if="isPC">
            <span>我的交易</span>
            <span>&gt;</span>
            <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="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="record-product">
                    <div class="protitle">发货记录</div>

                   <template v-if="results.length>0">
                    <div class="product" v-for="r in results">
                        <ul class="product-title">
                            <li>商品信息</li>
                            <li>购买数量</li>
                            <li>已发数量</li>
                            <li>未发数量</li>
                            <li>本次发货</li>
                        </ul>
                        <ul class="product-info">
                            <li v-for="order in r.logisticsRecordList">
                                <div class="product-img">
                                    <img :src="order.image"/>
                                    <h3>{{order.productName}}</h3>
                                </div>
                                <div>{{order.buyNum}}</div>
                                <div>{{order.shipmentsNum}}</div>
                                <div>{{order.notShippedNum}}</div>
                                <div>{{order.num}}</div>
                            </li>
                            <p class="record-time">发货时间：{{r.deliveryTime}}</p>
                            <div class="img-remark">
                                <span>图片备注：</span>
                                <ul v-if="r.remarkImages!=null" id="uploadGoodsImages">
                                    <li v-for="cmImg in r.remarkImages" >
                                        <img :src="cmImg" @click="bigImage">
                                    </li>
                                </ul>
                                <span v-else style="color: #22272e">暂无图片备注</span>
                            </div>
                            <p class="remark">文字备注：
                                <span v-if="r.remark!=''&&r.remark!=null">{{r.remark}}</span>
                                <span v-else>暂无备注</span>
                            </p>
                        </ul>
                        <div class="record-button">
                            <button class="view-logistics" type="button" @click="seelogistic(r.id,r.shopOrderID)">查看物流
                            </button>
                            <button class="add-logistics" type="button" @click="addlogistic(r.id,r.shopOrderID)">添加物流
                            </button>
                            <button class="cancellation-logistics" type="button" v-if="r.mailer == 1"
                                    @click="Revoke(r.id,r.shopOrderID)">撤销发货
                            </button>
                        </div>
                    </div>
                    </template>
                    <template v-else>
                       <div class="no-delivery-record">
                            <img src="/img/order/icon-recod.svg">
                            <p>此订单还没有发货记录，快去<span>补充</span>它吧</p>
                        </div>
                    </template>
                </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/center.js(v=${version})}"></script>
<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/record.js(v=${version})}"></script>
</body>
</html>
