H5:订座记录列表改为better-scroll

htmldev/dashboard/src/views/place/reserve/index.vue

@@ -1,103 +1,117 @@
 <template>
-  <div class="af-reserve">
-    <van-pull-refresh
-      v-model="isLoading"
-      @refresh="onRefresh">
-      <van-list
-        v-model="loading"
-        :finished="finished"
-        finished-text="没有更多了"
-        error-text="出错了"
-        @load="onLoad"
-        class="content">
-        <ul>
-          <li
-            v-for="(item, idx) in reserveList"
-            :key="item.id">
-            <p class="status-wrap">
-              <span>{{ item.order_pre_time }}</span>
-              <span
-                :class="{'col-D32323': item.order_status === 1 }">{{
-                  ['待支付', '已支付', '已退款', '部分退款', '已取消'][item.order_status]
-                }}</span>
-            </p>
-            <p class="place-name">{{ item.place_name }}</p>
-            <p class="outlet">{{ item.bar_name }}</p>
-            <div class="payment">
-              <p class="number">订位人数：{{ item.order_user_num }}</p>
-              <p class="amount">
-                <span>合计：{{ item.order_pay_price | fen2Yuan }}</span>
-                <img src="./image/ic_Alipay_nor@2x.png" alt="" v-show="item.order_pay_type === 2">
-                <img src="./image/ic_WeChat_nor@2x.png" alt="" v-show="item.order_pay_type === 1">
-              </p>
-            </div>
-            <p class="create-at">订单创建时间：{{ item.created_at }}</p>
-            <div class="btn-wrap">
-              <van-button
-                class="pay"
-                type="danger"
-                v-if="item.order_status === 0">支付
-              </van-button>
-              <van-button
-                class="cancel"
-                type="default"
-                :disabled="booLock"
-                @click="funRefund(item,idx)"
-                v-if="item.order_status === 1">退款
-              </van-button>
-              <van-button
-                class="check-code"
-                type="danger"
-                @click="funJump(item)"
-                v-if="item.order_status === 1">我的订座二维码
-              </van-button>
-            </div>
-          </li>
-        </ul>
-      </van-list>
-    </van-pull-refresh>
+  <div ref="afBS"
+       class="better-scroll">
+    <ul>
+      <li
+        :class="{'static': isRefresh}"
+        class="pulldown-wrapper">
+        <van-loading
+          v-show="isRefresh"
+          size="24px"
+          type="spinner">加载中...
+        </van-loading>
+        <div
+          v-show="!isRefresh"
+          class="van-loading">
+          <span
+            class="van-loading__text">下拉刷新</span>
+        </div>
+      </li>
+      <li
+        v-for="(item, idx) in reserveList"
+        :key="item.id"
+        class="list-item">
+        <p class="status-wrap">
+          <span>{{ item.order_pre_time }}</span>
+          <span
+            :class="{'col-D32323': item.order_status === 1 }">{{
+              ['待支付', '已支付', '已退款', '部分退款', '已取消'][item.order_status]
+            }}</span>
+        </p>
+        <p class="place-name">{{ item.place_name }}</p>
+        <p class="outlet">{{ item.bar_name }}</p>
+        <div class="payment">
+          <p class="number">订位人数：{{ item.order_user_num }}</p>
+          <p class="amount">
+            <span>合计：{{ item.order_pay_price | fen2Yuan }}</span>
+            <img v-show="item.order_pay_type === 2" alt="" src="./image/ic_Alipay_nor@2x.png">
+            <img v-show="item.order_pay_type === 1" alt="" src="./image/ic_WeChat_nor@2x.png">
+          </p>
+        </div>
+        <p class="create-at">订单创建时间：{{ item.created_at }}</p>
+        <div class="btn-wrap">
+          <van-button
+            v-if="item.order_status === 0"
+            class="pay"
+            type="danger">支付
+          </van-button>
+          <van-button
+            v-if="item.order_status === 1"
+            :disabled="booLock"
+            class="cancel"
+            type="default"
+            @click="funRefund(item,idx)">退款
+          </van-button>
+          <van-button
+            v-if="item.order_status === 1"
+            class="check-code"
+            type="danger"
+            @click="funJump(item)">我的订座二维码
+          </van-button>
+        </div>
+      </li>
+      <li class="pullup-wrapper">
+        <van-loading
+          v-show="!finished"
+          size="24px"
+          type="spinner">加载中...
+        </van-loading>
+        <div
+          v-show="finished"
+          class="van-loading">
+          <span
+            class="van-loading__text">没有更多了</span>
+        </div>
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
+import BScroll from 'better-scroll'
 import { apiReserveList, apiRefund } from './api'
-import { PullRefresh, List, Button, Toast, Dialog } from 'vant'
+import { Button, Toast, Dialog, Loading } from 'vant'
 
 export default {
   components: {
-    'van-pull-refresh': PullRefresh,
-    'van-list': List,
+    'van-loading': Loading,
     'van-button': Button
   },
   data () {
     return {
-      reserveList: [],
-      isLoading: false,
-      loading: false,
       finished: false,
       isRefresh: false,
       isFetchLock: false, // 接口调用加锁
       pagenum: 0,
       pagesize: 20,
-      booLock: false
+      reserveList: [],
+      booLock: false,
+      scroll: null
     }
   },
   activated () {
     if (!this.$route.meta.isUseCache) {
-      this.reserveList = []
-      this.isLoading = false
-      this.loading = false
       this.finished = false
       this.isRefresh = false
       this.isFetchLock = false
       this.pagenum = 0
       this.pagesize = 20
+      this.reserveList = []
       this.booLock = false
+      this.scroll = null
+      this.getList()
     } else {
-      setTimeout(() => {
-        const numScrollTop = this.$route.meta.numScrollTop || 0
-        window.scrollTo(0, numScrollTop)
-      }, 500)
+      this.scroll && this.scroll.refresh()
     }
     this.$route.meta.isUseCache = false
   },
@@ -109,9 +123,6 @@ export default {
       this.isRefresh = true
       this.getList()
     },
-    onLoad () {
-      this.getList()
-    },
     /**
      *  请求数据方法
      */
@@ -146,13 +157,38 @@ export default {
               this.finished = true
             }
             this.reserveList = this.reserveList.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.finishPullDown()
+                this.scroll.finishPullUp()
+                this.scroll.refresh()
+              }
+            })
           }
         } else {
           Toast(msg)
         }
-        // 加载状态结束
-        this.loading = false
-        this.isLoading = false
         this.isFetchLock = false
       } catch (err) {
         this.isFetchLock = false
@@ -193,6 +229,9 @@ export default {
       })
     }
   },
+  beforeDestroy () {
+    this.scroll && this.scroll.destroy()
+  },
   beforeRouteLeave (to, form, next) {
     if (['Mine', 'PlaceCheck'].findIndex(item => item === to.name) > -1) {
       form.meta.isUseCache = true
@@ -204,21 +243,26 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.af-reserve {
-  .content {
-    min-height: 100vh;
-    padding-bottom: 30px;
-  }
+.better-scroll {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
 }
 
 ul {
-  li {
+  padding-bottom: 50px;
+
+  .list-item {
     width: 100%;
     padding: 16px 20px 10px;
     margin: 6px auto;
     background: #fff;
 
-    &:nth-of-type(1) {
+    &:nth-of-type(2) {
       margin-top: 0;
     }
   }
@@ -359,4 +403,24 @@ ul {
     }
   }
 }
+
+.pulldown-wrapper {
+  position: absolute;
+  left: 0;
+  top: -43px;
+  width: 100%;
+  text-align: center;
+  margin-bottom: 10px;
+
+  &.static {
+    position: static;
+    left: 0;
+    top: 0;
+  }
+}
+
+.pullup-wrapper {
+  width: 100%;
+  text-align: center;
+}
 </style>