订单列表和订单详情页初步完善

yudao-ui-app/pages/user/user.vue

@@ -4,7 +4,7 @@
       <view class="user-info" @click="pageRouter('/pages/profile/profile')">
         <u-avatar size="60" shape="square" :src="userInfo.avatar"></u-avatar>
         <view class="info-text">
-          <view class="user-nickname">{{ hasLogin ? userInfo.nickname || ' ' : '匿名用户' }}</view>
+          <view class="user-nickname">{{ hasLogin ? userInfo.nickname || '会员用户' : '匿名用户' }}</view>
           <view class="user-mobile">{{ hasLogin ? userInfo.mobile || ' ' : '登录/注册' }}</view>
         </view>
       </view>
@@ -26,9 +26,9 @@
 
       <view class="order-status-box">
         <u-grid :border="false" :col="orderStatusList.length">
-          <u-grid-item v-for="(item, index) in orderStatusList" :key="index" @click="pageRouter(orderPage, item.state)">
+          <u-grid-item v-for="(item, index) in orderStatusList" :key="index" @click="pageRouter(orderPage, item.status)">
             <u-icon :name="item.icon" :size="32"></u-icon>
-            <text class="grid-title">{{ item.title }}</text>
+            <text class="grid-title">{{ item.name }}</text>
           </u-grid-item>
         </u-grid>
       </view>
@@ -37,8 +37,8 @@
     <u-gap height="10" bgColor="#f3f3f3"></u-gap>
 
     <view class="stat-box">
-      <u-grid :border="false" col="3"
-        ><u-grid-item v-for="(item, index) in statList" :key="index">
+      <u-grid :border="false" col="3">
+        <u-grid-item v-for="(item, index) in statList" :key="index">
           <text class="grid-value">{{ item.value }}</text>
           <text class="grid-title">{{ item.title }}</text>
         </u-grid-item>
@@ -53,21 +53,16 @@
       <u-cell class="fun-item" :border="false" icon="coupon" title="我的优惠券" isLink></u-cell>
       <u-cell class="fun-item" :border="false" icon="map" title="收货地址" @click="pageRouter('/pages/address/list')" isLink></u-cell>
     </u-cell-group>
-
   </view>
 </template>
 
 <script>
+import orderStatus from '@/common/orderStatus'
+
 export default {
   data() {
     return {
-      orderPage: '/pages/order/order',
-      orderStatusList: [
-        { icon: 'red-packet', title: '待付款', state: '0' },
-        { icon: 'car', title: '待发货', state:'20' },
-        { icon: 'order', title: '待收货', state: '30' },
-        { icon: 'integral', title: '已完成', state: '40' }
-      ],
+      orderPage: '/pages/order/list',
       statList: [
         { value: '0', title: '我的收藏' },
         { value: '0', title: '我的消息' },
@@ -76,10 +71,27 @@ export default {
     }
   },
   onLoad() {
-    if (this.hasLogin){
+    if (this.hasLogin) {
       this.$store.dispatch('ObtainUserInfo')
     }
   },
+  computed: {
+    userInfo() {
+      return this.$store.getters.userInfo
+    },
+    hasLogin() {
+      return this.$store.getters.hasLogin
+    },
+    orderStatusList() {
+      let orderStatusList = []
+      for (let status in orderStatus) {
+        if (status !== '40') {
+          orderStatusList.push({ name: orderStatus[status].name, status: status, icon: orderStatus[status].icon })
+        }
+      }
+      return orderStatusList
+    }
+  },
   methods: {
     pageRouter(pageUrl, param) {
       if (!this.hasLogin) {
@@ -87,7 +99,7 @@ export default {
       } else if (pageUrl === this.orderPage) {
         uni.$u.route(this.orderPage, {
           status: param
-        });
+        })
       } else {
         uni.$u.route(pageUrl)
       }
@@ -105,20 +117,11 @@ export default {
         }
       })
     }
-  },
-  computed: {
-    userInfo() {
-      return this.$store.getters.userInfo
-    },
-    hasLogin() {
-      return this.$store.getters.hasLogin
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
 .user-header {
   background-color: #fff;
   @include flex-space-between;
@@ -161,6 +164,7 @@ export default {
     color: #333333;
     font-size: 34rpx;
   }
+
   .see-all {
     height: 40rpx;
     @include flex-right;
@@ -196,5 +200,4 @@ export default {
     border-bottom: $custom-border-style;
   }
 }
-
 </style>