H5：我的订单列表改为better-scroll

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

@@ -10,9 +10,7 @@
         </li>
       </ul>
     </div>
-    <div class="af-list">
-      <router-view></router-view>
-    </div>
+    <router-view/>
   </div>
 </template>
 <script>
@@ -78,10 +76,5 @@ export default {
       }
     }
   }
-
-  .af-list {
-    min-height: 100vh;
-    padding-bottom: 50px;
-  }
 }
 </style>

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

@@ -0,0 +1,287 @@
+<template>
+  <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">{{ ['待支付订单', '已支付订单', '全部退款订单', '部分退款订单', '已取消订单'][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>
+          <!--order_pay_type: 1微信2支付宝3现场支付4美团支付5赠送-->
+          <i
+            :class="'icon-' + ['', 'wx', 'alipay', 'pos', 'meituan', 'zengsong'][item.order_pay_type]"
+            class="icon"></i>
+          <div class="btn-box">
+            <div
+              v-if="item.order_status === 0"
+              class="btn-defaule"
+              @click="cancel(item.id, index)">取消
+            </div>
+            <div
+              v-if="item.order_status === 0"
+              class="btn-primary"
+              @click="pay">支付
+            </div>
+            <div
+              v-if="item.order_status !== 0"
+              class="btn-primary"
+              @click="goDetail(item.id)">查看订单
+            </div>
+          </div>
+        </div>
+      </div>
+    </List>
+  </PullRefresh>
+</template>
+<script>
+import { List, PullRefresh, Dialog, Toast } from 'vant'
+import { apiOrderList, apiOrderCancel } from './api/api'
+
+export default {
+  components: {
+    List,
+    PullRefresh,
+    [Dialog.Component.name]: Dialog.Component
+  },
+  data () {
+    return {
+      isLoading: false,
+      loading: false,
+      finished: false,
+      isRefresh: false, // 是否下拉刷新
+      isFetchLock: false, // 接口调用加锁
+      pagenum: 0,
+      pagesize: 20,
+      list: []
+    }
+  },
+  activated () {
+    if (!this.$route.meta.isUseCache) {
+      this.isLoading = false
+      this.loading = false
+      this.finished = false
+      this.isRefresh = false
+      this.isFetchLock = false
+      this.pagenum = 0
+      this.pagesize = 20
+      this.list = []
+    } else {
+      setTimeout(() => {
+        const numScrollTop = this.$route.meta.numScrollTop || 0
+        window.scrollTo(0, numScrollTop)
+      }, 500)
+    }
+    this.$route.meta.isUseCache = false
+  },
+  methods: {
+    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)
+      })
+    },
+    pay () {
+      // 暂时不用做
+    },
+    goDetail (id) {
+      this.$router.push({
+        path: '/orderDetail',
+        query: {
+          id: id
+        }
+      })
+    },
+    onRefresh () {
+      this.pagenum = 0
+      this.pagesize = 20
+      this.finished = false
+      this.isRefresh = true
+      this.getList()
+    },
+    onLoad () {
+      this.getList()
+    },
+    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 = []
+          }
+
+          // 没有数据返回了
+          if (Array.isArray(list) && !list.length) {
+            this.finished = true
+          }
+
+          if (Array.isArray(list) && list.length) {
+            // 总页数小于等于1页时
+            if (list.length < this.pagesize) {
+              this.finished = true
+            }
+            this.list = this.list.concat(list)
+          }
+        } else {
+          Toast(msg)
+        }
+        // 加载状态结束
+        this.loading = false
+        this.isLoading = false
+        this.isFetchLock = false
+      } catch (err) {
+        this.isFetchLock = false
+      }
+    }
+  },
+  beforeRouteLeave (to, form, next) {
+    if (['Mine', 'OrderDetail'].findIndex(item => item === to.name) > -1) {
+      form.meta.isUseCache = true
+      form.meta.numScrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
+    }
+    next()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.list-item {
+  width: 355px;
+  background: #ffffff;
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  border: 1px solid #f2f2f2;
+  margin: 10px 10px 0;
+
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 16px 8px;
+    border-bottom: 1px solid #f2f2f2;
+
+    .left {
+      color: #1f1e1e;
+      font-size: 16px;
+    }
+
+    .right {
+      color: #ccc6c6;
+      font-size: 14px;
+    }
+  }
+
+  .content {
+    position: relative;
+    padding: 9px 16px 12px;
+
+    .icon {
+      position: absolute;
+      width: 21px;
+      height: 21px;
+      top: 15px;
+      right: 17px;
+      background: url("./image/icon-alipay.png") 0 0 no-repeat;
+      background-size: cover;
+    }
+
+    .icon-wx {
+      background: url("./image/icon-wx.png") 0 0 no-repeat;
+      background-size: cover;
+    }
+
+    .icon-pos {
+      background: url("./image/icon-pos.png") 0 0 no-repeat;
+      background-size: cover;
+    }
+
+    .icon-meituan {
+      background: url("./image/icon-meituan.png") 0 0 no-repeat;
+      background-size: cover;
+    }
+
+    .icon-zengsong {
+      background: url("./image/icon-zengsong.png") 0 0 no-repeat;
+      background-size: cover;
+    }
+
+    .amount {
+      font-size: 24px;
+      font-weight: 500;
+      color: #d32323;
+    }
+
+    .time {
+      color: #736f6f;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+
+    .btn-box {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-top: 16px;
+
+      > div {
+        padding: 4px 19px 3px;
+        font-size: 12px;
+        border-radius: 12px;
+        margin-left: 10px;
+      }
+
+      .btn-primary {
+        background: #d32323;
+        color: #fff;
+      }
+
+      .btn-defaule {
+        background: #ffffff;
+        border: 1px solid #f2f2f2;
+      }
+    }
+  }
+}
+
+.color-orange {
+  color: #e55e10 !important;
+}
+</style>

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

@@ -1,14 +1,8 @@
 <template>
-  <PullRefresh
-    v-model="isLoading"
-    @refresh="onRefresh">
-    <List
-      v-model="loading"
-      :finished="finished"
-      error-text="出错了"
-      finished-text="没有更多了"
-      @load="onLoad">
-      <div
+  <div ref="afBS"
+       class="better-scroll">
+    <ul>
+      <li
         v-for="(item, index) in list"
         :key="index"
         class="list-item">
@@ -46,47 +40,39 @@
             </div>
           </div>
         </div>
-      </div>
-    </List>
-  </PullRefresh>
+      </li>
+    </ul>
+  </div>
 </template>
 <script>
-import { List, PullRefresh, Dialog, Toast } from 'vant'
+import BScroll from 'better-scroll'
+import { Dialog, Toast } from 'vant'
 import { apiOrderList, apiOrderCancel } from './api/api'
 
 export default {
-  components: {
-    List,
-    PullRefresh,
-    [Dialog.Component.name]: Dialog.Component
-  },
   data () {
     return {
-      isLoading: false,
-      loading: false,
-      finished: false,
+      finished: false, // 所有数据是否加载完
       isRefresh: false, // 是否下拉刷新
       isFetchLock: false, // 接口调用加锁
       pagenum: 0,
       pagesize: 20,
-      list: []
+      list: [],
+      scroll: null
     }
   },
   activated () {
     if (!this.$route.meta.isUseCache) {
-      this.isLoading = false
-      this.loading = false
       this.finished = false
       this.isRefresh = false
       this.isFetchLock = false
       this.pagenum = 0
       this.pagesize = 20
       this.list = []
+      this.scroll = null
+      this.getList()
     } else {
-      setTimeout(() => {
-        const numScrollTop = this.$route.meta.numScrollTop || 0
-        window.scrollTo(0, numScrollTop)
-      }, 500)
+
     }
     this.$route.meta.isUseCache = false
   },
@@ -127,9 +113,6 @@ export default {
       this.isRefresh = true
       this.getList()
     },
-    onLoad () {
-      this.getList()
-    },
     async getList () {
       if (this.finished) {
         return
@@ -160,29 +143,69 @@ export default {
               this.finished = true
             }
             this.list = this.list.concat(list)
+
+            this.$nextTick(() => {
+              if (!this.scroll) {
+                this.scroll = new BScroll(this.$refs.afBS, {
+                  click: true,
+                  pullDownRefresh: {
+                    threshold: 50,
+                    stop: 20
+                  },
+                  pullUpLoad: {
+                    threshold: -20
+                  },
+                  scrollbar: true
+                })
+
+                this.scroll.on('pullingDown', () => {
+                  this.onRefresh()
+                })
+
+                this.scroll.on('pullingUp', () => {
+                  this.getList()
+                })
+              } else {
+                this.scroll.refresh()
+                this.scroll.finishPullDown()
+                this.scroll.finishPullUp()
+              }
+            })
           }
         } else {
           Toast(msg)
         }
-        // 加载状态结束
-        this.loading = false
-        this.isLoading = false
         this.isFetchLock = false
       } catch (err) {
         this.isFetchLock = false
       }
     }
   },
+  beforeDestroy () {
+    this.scroll && this.scroll.destroy()
+  },
   beforeRouteLeave (to, form, next) {
     if (['Mine', 'OrderDetail'].findIndex(item => item === to.name) > -1) {
       form.meta.isUseCache = true
-      form.meta.numScrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
     }
     next()
   }
 }
 </script>
 <style lang="scss" scoped>
+.better-scroll {
+  position: absolute;
+  left: 0;
+  top: 43px;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+
+  ul {
+    padding-bottom: 50px;
+  }
+}
+
 .list-item {
   width: 355px;
   background: #ffffff;