<template>
  <div>
    <div class="no-result" v-if="!list.length">
      <div class="content">
        <img src="~@/assets/logistics.png">
        <div class="text">您还没有物流信息哦~</div>
        <span class="link" @click="goIndex">返回首页</span>
      </div>
    </div>

    <div v-else-if="list.length && list[0] != 0">
      <h1 class="logistics-title">我的快递</h1>
      <ol class="logistics-list">
        <li class="item" v-for="item in list">
          <div class="item-header">
            <h2>{{item.goods_title}}</h2>
          </div>
          <div class="item-content">
            <div class="dl">
              <div class="dt">收件地址:</div>
              <div class="dd">
                <template v-if="item.receive_name">{{item.receive_name}}</template>
                <template v-if="item.receive_mobile">{{item.receive_mobile}}</template>
                <template v-if="item.receive_address">{{item.receive_address}}</template>
              </div>
            </div>
            <div class="dl">
              <div class="dt">物流信息:</div>
              <div class="dd" style="color: #666666">
                <template v-if="item.status == 0">
                  待发货
                </template>
                <template v-if="item.status == 1">
                  {{item.express_name}} <span class="link" @click="search(item.express_no)">{{item.express_no}}</span>
                </template>
              </div>
            </div>
          </div>
        </li>

      </ol>
    </div>

  </div>
</template>

<script>
  import {getLogisticsApi, getwechatParam} from "../service/api";
  import shareUrl from '../assets/share.png'
  import {Toast} from 'vant';

  export default {
    name: "order",
    data() {
      return {
        list: [0],
      }
    },
    filters: {

    },
    mounted() {
      this.initPage()
    },
    methods: {
      search(data){
        window.location=`https://m.baidu.com/from=1013755s/s?word=${data}&sa=tb&ts=2790568&t_kt=0&ie=utf-8&rsv_t=cbe2F%252FT5T3MIzkRl%252Fg8ZUw%252FEPHZmn2wHIrB8cLvgNlEKyyDqUNPrTyDEEDjkAb8&rsv_pq=11793168499026332712&ss=110000000001&tj=1&rqlang=zh&rsv_sug4=4111&inputT=3178&oq=快递单号查询`
        // window.location='https://m.baidu.com/from=1013755s/s?word=806454448534420146&sa=tb&ts=2790568&t_kt=0&ie=utf-8&rsv_t=cbe2F%252FT5T3MIzkRl%252Fg8ZUw%252FEPHZmn2wHIrB8cLvgNlEKyyDqUNPrTyDEEDjkAb8&rsv_pq=11793168499026332712&ss=110000000001&tj=1&rqlang=zh&rsv_sug4=4111&inputT=3178&oq=快递单号查询'
      },

      goIndex() {
        window.location = window.location.origin
      },

      initPage() {
        Toast.loading({
          mask: false,
          message: "加载中..."
        });
        getLogisticsApi().then(res => {
          this.list = res;
          Toast.clear();
        })
      },
    }
  }
</script>

<style lang="less">
  @import "../util/public";

  .no-result {
    height: 95vh;
    line-height: 40*@toVw;
    color: #999;
    font-size: 16*@toVw;
    text-align: center;
    display: flex;
    .content {
      align-items: center;
      justify-content: center;
      .text {
        margin-bottom: 86*@toVw;
        font-size:14*@toVw;
        color:rgba(102,102,102,1);
        line-height:20*@toVw;
      }
      img {
        display: block;
        margin: 0 auto 10*@toVw;
        width: 300*@toVw;
      }
      .link {
        display: block;
        width:112*@toVw;
        height:38*@toVw;
        background:rgba(64,169,255,1);
        border-radius:25*@toVw;
        font-size:15*@toVw;
        color:rgba(255,255,255,1);
        line-height: 38*@toVw;
      }
    }
  }

  .logistics-title {
    padding: 14*@toVw 15*@toVw 10*@toVw;
    height:21*@toVw;
    font-size:15*@toVw;
    /*font-weight: normal;*/
    font-weight: bold;
    color:rgba(51,51,51,1);
    line-height:21*@toVw;
  }

  .logistics-list {
    padding: 0 15*@toVw;

    .item {
      margin-bottom: 10*@toVw;
      padding: 15*@toVw;
      background:rgba(255,255,255,1);
      box-shadow:0*@toVw 2*@toVw 6*@toVw 0*@toVw rgba(0,0,0,0.15);
      border-radius:18*@toVw;

      .item-header {
        padding-bottom: 10*@toVw;
        //border-bottom: solid 1*@toVw #E2E2E2;
        border-bottom: solid 0.55*@toVw #E2E2E2;
        h2 {
          line-height:20*@toVw;
          font-size:14*@toVw;
          color:rgba(51,51,51,1);
          font-weight: normal;
          & + h2 {
            margin-top: 4*@toVw;

          }
        }
      }
      .item-content {
        padding-top: 10*@toVw;
        .dl {
          /*display: flex;*/
          /*justify-content: flex-start;*/
          /*align-items: flex-start;*/
          overflow: hidden;
          font-size:13*@toVw;
          color:rgba(153,153,153,1);
          line-height:18*@toVw;
          & + .dl {
            margin-top: 10*@toVw;
          }
          .dt {
            float: left;
            /*flex-shrink: 0;*/
            /*flex-grow: 0;*/
          }
          .dd {
            margin-left: 5em;
            /*flex-grow: 0;*/
            .link {
              color: #40A9FF;
              text-decoration: underline;
            }
          }
        }
      }
    }
  }

</style>