improve: 前台-订单挂起/悬浮

src/components/order/fiveOrders.vue

@@ -14,8 +14,8 @@
           >最近查看或操作过的5条订单</view
         ></view
       >
-      <view class="loading-view" v-if="!loaded">
-        <u-loading mode="flower"></u-loading>
+      <view class="none-view" v-if="orderList.length <= 0">
+        <NoOrder text="当前暂无查看记录" />
       </view>
       <view class="content-view" v-else>
         <view v-for="item in orderList" :key="item.orderId">
@@ -28,6 +28,13 @@
           >
           </OrderCell>
         </view>
+        <view class="bottom-tip">
+          <u-loadmore
+            :status="nomore"
+            font-size="26"
+            color="#999999"
+          ></u-loadmore>
+        </view>
       </view>
     </view>
   </u-popup>
@@ -35,10 +42,12 @@
 
 <script>
 import OrderCell from '@/components/order/index.vue'
+import NoOrder from '@/components/order/noOrder.vue'
 
 export default {
   components: {
     OrderCell,
+    NoOrder,
   },
   props: {
     visible: {
@@ -48,44 +57,43 @@ export default {
   },
   data() {
     return {
-      orderList: [],
+      // orderList: [],
       show: false,
       loaded: false,
     }
   },
-  computed: {},
+  computed: {
+    orderList() {
+      return this.vuex_last_five_orders.filter((item) => item) || []
+    },
+  },
   watch: {
     visible(val) {
       this.show = val
-      if (val) {
-        this.getOrderList()
-      }
     },
   },
   created() {
-    console.log('-----------created----------')
     this.show = this.visible
   },
   methods: {
-    getOrderList() {
-      this.loaded = false
-      var param = {
-        pageNumber: 1,
-        pageSize: 5,
-        keyword: '',
-        type: 'zuijinlianxi',
-      }
-      this.$u.api.listOrder(param).then((res) => {
-        if (res.code == 200) {
-          this.orderList = res.data.list || []
-        } else {
-          console.log(res.message, '获取订单数量失败！')
-        }
-        this.loaded = true
-      })
-    },
+    // getOrderList() {
+    //   this.loaded = false
+    //   var param = {
+    //     pageNumber: 1,
+    //     pageSize: 5,
+    //     keyword: '',
+    //     type: 'zuijinlianxi',
+    //   }
+    //   this.$u.api.listOrder(param).then((res) => {
+    //     if (res.code == 200) {
+    //       this.orderList = res.data.list || []
+    //     } else {
+    //       console.log(res.message, '获取订单数量失败！')
+    //     }
+    //     this.loaded = true
+    //   })
+    // },
     handleClose() {
-      console.log('----------handleClose-------------')
       this.$emit('update:visible', false)
       this.$emit('close')
     },
@@ -105,7 +113,7 @@ export default {
 <style lang="scss" scoped>
 .pop-view {
   // padding: 30rpx;
-  height: 900rpx;
+  max-height: 900rpx;
   display: flex;
   flex-direction: column;
   .head-view {
@@ -121,17 +129,16 @@ export default {
       margin-top: 10rpx;
     }
   }
-  .loading-view {
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .none-view {
+    margin-top: 30rpx;
+    margin-bottom: 50rpx;
   }
   .content-view {
     height: 100%;
     overflow: auto;
+    .bottom-tip {
+      margin-bottom: 30rpx;
+    }
   }
 }
 </style>

src/components/order/index.vue

@@ -405,6 +405,7 @@ export default {
         this.type,
         this.showCountTime ? 'show' : ''
       )
+      this.storeOparation()
     },
     handleClickCell() {
       var func = 'click'
@@ -419,6 +420,23 @@ export default {
         this.type,
         this.showCountTime ? 'show' : ''
       )
+      this.storeOparation()
+    },
+    storeOparation() {
+      if (!this.isSimple) {
+        var array = [...this.vuex_last_five_orders] || []
+        var i = 0
+        for (var item of array) {
+          if (item && item.orderId == this.orderData.orderId) {
+            // 需要替换，跳出for循环
+            break
+          }
+          i++
+        }
+        array[i] = this.orderData // 用this.orderData替换或新增进this.vuex_last_five_orders
+
+        this.$u.vuex('vuex_last_five_orders', array.slice(-5))
+      }
     },
     handleChange(timestamp) {
       if (this.timeout) this.$refs['order-count-down'].seconds += 2

src/pages/index/index.vue

@@ -107,7 +107,6 @@
           :type.sync="buttonType"
           icon="dingdan-button.png"
           text="最近查看"
-          :loading="!loadedOrder"
           clickedType="hidden"
           :show.sync="showApplyButton"
           @click="visible = true"
@@ -153,7 +152,7 @@ export default {
       search: {
         token: '',
         pageNumber: 0,
-        pageSize: 100,
+        pageSize: 15,
       },
       waitInit: false, // 当token为空时，等待自动登录结束
       triggered: true,

src/pages/index/order.vue

@@ -340,12 +340,10 @@ export default {
             var count = 0
             for (var items of this.list) {
               for (var item of items) {
-                console.log(this.curNow, i, this.countKeys[i])
                 item.total = res.data[this.countKeys[i]] || 0
                 if (j == 0) {
                   // 待处理数量加起来
                   count += item.total
-                  console.log('count', item)
                 }
                 i++
               }

src/store/index.js

@@ -12,7 +12,7 @@ try {
 }
 
 // 需要永久存储，且下次APP启动需要取出的，在state中的变量名
-let saveStateKeys = ['vuex_user', 'vuex_wx_uid', 'vuex_token', 'vuex_cache', 'uploadTask', 'vuex_superuser'];
+let saveStateKeys = ['vuex_user', 'vuex_wx_uid', 'vuex_token', 'vuex_cache', 'uploadTask', 'vuex_superuser', 'vuex_last_five_orders'];
 
 // 保存变量到本地存储中
 const saveLifeData = function(key, value) {
@@ -34,6 +34,7 @@ const store = new Vuex.Store({
 		vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
 		vuex_cache: lifeData.vuex_cache ? lifeData.vuex_cache : {},
 		vuex_superuser: lifeData.vuex_superuser || false,
+		vuex_last_five_orders: lifeData.vuex_last_five_orders ? lifeData.vuex_last_five_orders : [],
 		vuex_version: '1.0.1',
 		vuex_config: {},
 		// 入驻信息