添加订单详情

.env.production

@@ -2,4 +2,4 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = 'https://mall.wayn.ltd/mobile-api'
+VUE_APP_BASE_API = '/mobile-api'

src/api/order.js

@@ -15,11 +15,10 @@ export function statusCount() {
   })
 }
 
-export function orderDetail(data) {
+export function orderDetail(orderSn) {
   return request({
-    url: '/order/info',
-    method: 'post',
-    data
+    url: `/order/detail/${orderSn}`,
+    method: 'get'
   })
 }
 
@@ -80,3 +79,4 @@ export function orderConfirm(orderId) {
     method: 'post'
   })
 }
+

src/router/index.js

@@ -247,7 +247,7 @@ const routes = [
   },
   // 订单详情
   {
-    path: '/order/detail/:goodsId',
+    path: '/order/detail/:orderSn',
     name: 'OrderDetail',
     props: true,
     component: () => import('@/views/order/detail'),

src/views/order/detail/index.vue

@@ -1,11 +1,40 @@
 <template>
-  <div>order detail</div>
+  <div class="order_detail">
+    <nav-bar :title="$route.meta.title">
+      <span style="color: #333">
+        <svg-icon icon-class="share" :width="15" :height="15" />
+      </span>
+    </nav-bar>
+    <div>
+      <div>orderSn: {{ orderInfo.orderSn }}</div>
+    </div>
+  </div>
 </template>
 <script>
+import { orderDetail } from '@/api/order'
+
 export default {
+  props: {
+    orderSn: {
+      type: String,
+      default: ''
+    }
+  },
   data() {
     return {
-
+      orderInfo: []
+    }
+  },
+  mounted() {
+    console.log(this.orderSn)
+    this.orderDetail()
+  },
+  methods: {
+    orderDetail() {
+      orderDetail(this.orderSn).then(res => {
+        debugger
+        this.orderInfo = res.map.order
+      })
     }
   }
 }

src/views/order/list/index.vue

@@ -34,7 +34,12 @@
               v-if="orderListEmptyShow"
               description="您还没有相关订单"
             />
-            <div v-for="(el, i) in orderList" :key="i" class="order-item">
+            <div
+              v-for="(el, i) in orderList"
+              :key="i"
+              class="order-item"
+              @click="toOrderDetail(el.orderSn)"
+            >
               <div class="order-title">
                 <div class="order-sn">订单编号: {{ el.orderSn }}</div>
                 <div class="order-staus">{{ el.orderStatusText }}</div>
@@ -84,20 +89,20 @@
                   round
                   size="small"
                   type="danger"
+                  plain
                   @click.stop="toPay(el.orderSn, el.actualPrice)"
                 >去支付</van-button>
                 <van-button
                   v-if="el.handleOption.refund"
                   round
                   size="small"
-                  type="danger"
                   @click.stop="refundOrder(el.id)"
-                >退款</van-button>
+                >退款/售后</van-button>
                 <van-button
                   v-if="el.handleOption.confirm"
                   round
+                  plain
                   size="small"
-                  type="danger"
                   @click.stop="confirmOrder(el.id)"
                 >确认收货</van-button>
                 <van-button
@@ -159,7 +164,7 @@ export default {
     // 下拉刷新
     onRefresh() {
       this.refreshing = true
-      this.pageNum = 1
+      this.page = 0
       this.getOrderList(true)
     },
     getOrderList(init) {
@@ -240,9 +245,10 @@ export default {
       this.orderList = []
       this.getOrderList(true)
     },
-    toOrderDetail(id) {
+    toOrderDetail(orderSn) {
+      debugger
       this.$router.push({
-        path: `/detail/${id}`
+        path: `/order/detail/${orderSn}`
       })
     }
   }
@@ -270,7 +276,7 @@ export default {
     .order-title {
       display: flex;
       justify-content: space-between;
-      padding: 15px 10px;
+      padding: 25px 20px;
       .order-sn {
         text-align: left;
       }
@@ -292,6 +298,7 @@ export default {
       padding: 10px;
       .van-button {
         margin-left: 10px;
+        min-width: 70px;
       }
     }
   }

vue.config.js

@@ -10,7 +10,7 @@ function resolve(dir) {
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
-  publicPath: '/',
+  publicPath: '/mall',
   outputDir: 'dist',
   assetsDir: 'static',
   lintOnSave: process.env.NODE_ENV === 'development',