<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>