H5：点单订单列表代码优化

htmldev/dashboard/src/views/order/list/index.vue

@@ -1,44 +1,54 @@
 <template>
-  <List
-    v-model="loading"
-    :finished="finished"
-    finished-text="没有更多了"
-    @load="onLoad">
-    <PullRefresh v-model="isLoading" @refresh="onRefresh">
-      <div class="list-item" v-for="(item, index) in list" :key="index">
+  <PullRefresh
+    v-model="isLoading"
+    @refresh="onRefresh">
+    <List
+      v-model="loading"
+      :finished="finished"
+      error-text="出错了"
+      finished-text="没有更多了"
+      @load="onLoad">
+      <div
+        v-for="(item, index) in list"
+        :key="index"
+        class="list-item">
         <div class="title">
-          <span class="left">{{ changeStatus(item.order_status) }}</span>
           <span
-            :class="[
-              'right',
-              { 'color-orange': changeState(item.order_status) == '发生退款' },
-            ]"
-          >{{ changeState(item.order_status) }}</span
-          >
+            class="left">{{ ['待支付订单', '已支付订单', '全部退款订单', '部分退款订单', '已取消订单'][item.order_status] }}</span>
+          <span
+            :class="{'color-orange': item.order_status === 2}"
+            class="right">{{
+              ['待支付', '已支付', '发生退款', '发生退款', '已取消'][item.order_status]
+            }}</span>
         </div>
         <div class="content">
           <p class="amount">￥{{ item.order_price | fen2Yuan }}</p>
           <p class="time">下单时间：{{ item.created_at }}</p>
-          <i :class="['icon', { 'icon-wx': item.order_pay_type == 1 }]"></i>
+          <!--order_pay_type: 支付方式(1微信2支付宝3POS机支付)-->
+          <i
+            :class="'icon-' + ['', 'wx', 'alipay', 'pos'][item.order_pay_type]"
+            class="icon"></i>
           <div class="btn-box">
             <div
-              class="btn-primary"
-              v-if="item.order_status !== 0"
-              @click="goDetail(item.id)"
-            >
-              查看订单
+              v-if="item.order_status === 0"
+              class="btn-defaule"
+              @click="cancel(item.id, index)">取消
             </div>
-            <div class="btn-primary" v-if="item.order_status === 0">支付</div>
             <div
-              class="btn-defaule"
+              class="btn-primary"
               v-if="item.order_status === 0"
-              @click="cancel(item.id)">取消
+              @click="pay">支付
+            </div>
+            <div
+              v-if="item.order_status !== 0"
+              class="btn-primary"
+              @click="goDetail(item.id)">查看订单
             </div>
           </div>
         </div>
       </div>
-    </PullRefresh>
-  </List>
+    </List>
+  </PullRefresh>
 </template>
 <script>
 import { List, PullRefresh, Dialog, Toast } from 'vant'
@@ -52,33 +62,37 @@ export default {
   },
   data () {
     return {
-      loading: false,
-      finished: true,
       isLoading: false,
-      page: 1,
-      page_size: 10,
+      loading: false,
+      finished: false,
+      isRefresh: false, // 是否下拉刷新
+      isFetchLock: false, // 接口调用加锁
+      pagenum: 0,
+      pagesize: 20,
       list: []
     }
   },
-  mounted () {
-    this.getList()
-  },
   methods: {
-    cancel (id) {
-      const _this = this
+    cancel (id, index) {
       Dialog.confirm({
         title: '',
         message: '确定要取消吗'
+      }).then(async () => {
+        try {
+          const { status, msg } = await apiOrderCancel({ id: id })
+          if (status) {
+            // 手动改变订单状态
+            this.$set(this.list[index], 'order_status', 4)
+          } else {
+            Toast(msg)
+          }
+        } catch (err) {}
+      }).catch((err) => {
+        Toast(err)
       })
-        .then(() => {
-          apiOrderCancel({ id: id }).then((res) => {
-            Toast(res.msg)
-            _this.getList()
-          })
-        })
-        .catch((err) => {
-          Toast(err)
-        })
+    },
+    pay () {
+      // 暂时不用做
     },
     goDetail (id) {
       this.$router.push({
@@ -88,59 +102,57 @@ export default {
         }
       })
     },
-    changeStatus (status) {
-      switch (status) {
-        case 0:
-          return '待支付订单'
-        case 1:
-          return '已支付订单'
-        case 2:
-          return '全部退款订单'
-        case 3:
-          return '部分退款订单'
-        case 4:
-          return '已取消订单'
-      }
+    onRefresh () {
+      this.pagenum = 0
+      this.pagesize = 20
+      this.finished = false
+      this.isRefresh = true
+      this.getList()
     },
-    changeState (status) {
-      switch (status) {
-        case 0:
-          return '待支付'
-        case 1:
-          return '订单已支付成功'
-        case 2:
-          return '发生退款'
-        case 3:
-          return '发生退款'
-        case 4:
-          return '已取消'
-      }
+    onLoad () {
+      this.getList()
     },
-    getList () {
-      apiOrderList({ page: this.page, page_size: this.page_size }).then(
-        (res) => {
-          this.isLoading = false
-          if (res.code === 200) {
-            this.list = res.data.list
+    async getList () {
+      if (this.finished) {
+        return
+      }
+      if (this.isFetchLock) {
+        return
+      }
+      this.isFetchLock = true
+      this.pagenum++
+      try {
+        const { status, data, msg } = await apiOrderList({ page: this.pagenum, page_size: this.pagesize })
+        if (status) {
+          const { list } = data
+          // 下拉刷新数据清空
+          if (this.isRefresh) {
+            this.isRefresh = false
+            this.list = []
           }
-        }
-      )
-    },
-    onLoad () {
-      this.page += 1
-      this.finished = false
-      apiOrderList({ page: this.page, page_size: this.page_size }).then(
-        (res) => {
-          if (res.code === 200) {
-            this.list = this.list.concat(res.data.list)
+
+          // 没有数据返回了
+          if (Array.isArray(list) && !list.length) {
             this.finished = true
           }
+
+          if (Array.isArray(list) && list.length) {
+            // 总页数小于等于1页时
+            if (this.pagenum === 1 && list.length < this.pagesize) {
+              this.finished = true
+            }
+            this.list = this.list.concat(list)
+          }
+        } else {
+          Toast(msg)
         }
-      )
-    },
-    onRefresh () {
-      this.page = 1
-      this.getList()
+        // 加载状态结束
+        this.loading = false
+        this.isLoading = false
+        this.isFetchLock = false
+      } catch (err) {
+        this.isFetchLock = false
+      }
     }
   }
 }
@@ -149,7 +161,7 @@ export default {
 .list-item {
   width: 355px;
   background: #ffffff;
-  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.04);
   border-radius: 4px;
   border: 1px solid #f2f2f2;
   margin: 10px 10px 0;
@@ -191,6 +203,11 @@ export default {
       background-size: cover;
     }
 
+    .icon-pos {
+      background: url("./image/icon-pos.png") 0 0 no-repeat;
+      background-size: cover;
+    }
+
     .amount {
       font-size: 24px;
       font-weight: 500;