新增 我的快递页面

src/components/logistics.vue

+<template>
+  <div>
+
+    <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">{{item.receive_address}}</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>
+</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: [],
+      }
+    },
+    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=快递单号查询'
+      },
+
+      initPage() {
+        Toast.loading({
+          mask: false,
+          message: "加载中..."
+        });
+        getLogisticsApi().then(res => {
+          this.list = res;
+          Toast.clear();
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="less">
+  @import "../util/public";
+
+  .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.55px #E2E2E2;
+        h2 {
+          height:20*@toVw;
+          font-size:14*@toVw;
+          color:rgba(51,51,51,1);
+          line-height:20*@toVw;
+          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>

src/router/index.js

@@ -477,6 +477,14 @@ const router = new Router({
         noNew: true,
       }
     },
+    {
+      path: '/logistics',
+      name: 'logistics',
+      component: e => require(['@/components/logistics'], e),
+      meta: {
+        noNew: true,
+      }
+    },
     
     {
       path: '*',

src/service/api.js

@@ -362,4 +362,7 @@ export const getYoubangApi = function (json) {
 export const postYoubangApi = function (json) {
   return Vue.prototype.$post(`/api/client/youbang/address/add`, json)
 };
-//
+// 我的快递
+export const getLogisticsApi = function (json) {
+  return Vue.prototype.$fetch(`/api/client/deliver/list`, json)
+};