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

<!-- 我的采美 -->
<div id="logistics">
    <div class="navLayout">
        <div v-if="isPC" class="crumbs">
            <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="order-logistics">
                    <div class="order-list" v-for="item in dataList">
                        <div class="left-img">
                            <img :src="item.image">
                        </div>
                        <div class="right-name">
                            <p class="product-name">{{item.productName}}</p>
                            <p class="product-num">
                                <span class="number">数量：{{item.buyNum}}</span>
                                <span class="Ship">已发货：<span>{{item.shipmentsNum}}</span></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="mainContent">
                    <div class="title">物流信息</div>
                    <div class="logistics-deatil">
                        <div class="title-deatil">物流详情</div>
                         <div class="logsitics-list" v-if="logisticsInfoList.length>0">
                             <div class="goodlist" v-for="(info,index) in logisticsInfoList" :key="index">
                               <p>发货时间：<span>{{info.updateDate}}</span></p>
                               <p v-if="isPC">物流公司：<span>{{info.logisticsCompanyName}}</span></p>
                               <p v-if="isPC">物流单号：<span>{{info.nu}}</span></p>
                               <p v-if="showflag && !(isPC)">物流公司：<span>{{info.logisticsCompanyName}}</span></p>
                               <p v-if="showflag && !(isPC)">物流单号：<span>{{info.nu}}</span></p>
                               <i class="icon mIcon" @click="openpackage(info)" :class="info.showflag?'open1':'open'"></i>
                                 <div class="package-status" v-show="info.showflag">
                                    <div class="status-box">
                                        <ul class="status-list" v-if="isPC">
                                            <li v-for="r in info.routerList">
                                               <div class="status-time-before">{{r.time.substring(0,10)}}</div>
                                                <div class="status-date">{{r.time.substring(20,23)}}</div>
                                                <div class="status-time">{{r.time.substring(10,20)}}</div>
                                                <div class="status-content-before">{{r.desc}}</div>
                                            </li>
                                        </ul>
                                        <ul class="status-list" v-else>
                                            <li  v-for="r in info.routerList">
                                                <div class="status-content-before">{{r.desc}}</div>
                                                <div class="status-time-before">2017-08-17</div>
                                                <div class="status-date">周一</div>
                                                <div class="status-time">14:24:36</div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                             </div>
                         </div>
                         <div v-else class="empty">
                            <img src="/img/order/icon-logsitics.svg">
                           <div class="msg"><p>暂无数据</p></div>
                         </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/center.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/order.service.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/order/logistics.js(v=${version})}"></script>
</body>
</html>
