在各个页面加入加载超时提示

iwyvi · Sep 4, 2018 · 4360a8b · 4360a8b
1 parent 3d815f4
commit 4360a8b
Show file tree

Hide file tree

Showing 13 changed files with 1,211 additions and 1,163 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "splatoon2-schedules-weapp",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "乌贼日历",
   "main": "dist/app.js",
   "scripts": {

diff --git a/src/components/loader.wpy b/src/components/loader.wpy
@@ -4,6 +4,7 @@
       <view></view>
       <view></view>
     </view>
+    <view wx:if="{{timeout}}" class="loader-hint splatoon">请求超时，请下拉页面刷新</view>
   </view>
 </template>
 <script>
@@ -14,16 +15,28 @@ export default class Loader extends wepy.component {
     inline: {
       type: Boolean,
       default: false
+    },
+    timeout: {
+      type: Boolean,
+      default: false
     }
   }
 
   onLoad() {}
 }
 </script>
 <style>
+.loader-hint {
+  font-size: 28rpx;
+  line-height: 1em;
+  margin-top: 20rpx;
+  color: #ffffff;
+}
 .block-loader {
   width: 100%;
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
   margin-top: 20rpx;
   margin-bottom: 20rpx;
@@ -37,6 +50,7 @@ export default class Loader extends wepy.component {
 }
 .la-ball-spin-rotate {
   display: block;
+  margin-bottom: 25rpx;
   font-size: 0;
   color: #fff;
 }

diff --git a/src/components/timer.wpy b/src/components/timer.wpy
@@ -6,7 +6,10 @@ import wepy from 'wepy'
 
 export default class Timer extends wepy.component {
   data = {
-    timer: null
+    timer: null,
+    delay: 1000 * 60, // timer间隔
+    timeoutTimer: null, // 用于告诉页面是否到超时时间
+    timeoutDelay: 5000
   }
 
   events = {
@@ -18,11 +21,24 @@ export default class Timer extends wepy.component {
     }
   }
 
+  startTimeoutTimer() {
+    this.timeoutTimer = setTimeout(() => {
+      this.$emit('timer-timeout')
+    }, this.timeoutDelay)
+  }
+
+  stopTimeoutTimer() {
+    if (this.timeoutTimer) {
+      clearTimeout(this.timeoutTimer)
+      this.timeoutTimer = null
+    }
+  }
+
   startTimer() {
     if (!this.timer) {
       this.timer = setInterval(() => {
         this.$emit('timer-update')
-      }, 1000 * 60)
+      }, this.delay)
     }
   }
 
@@ -35,10 +51,12 @@ export default class Timer extends wepy.component {
 
   onLoad() {
     this.startTimer()
+    this.startTimeoutTimer()
   }
 
   onUnload() {
     this.stopTimer()
+    this.stopTimeoutTimer()
   }
 }
 </script>
diff --git a/src/pages/index.wpy b/src/pages/index.wpy
@@ -59,17 +59,10 @@
         <text class="splatoon">海産招募中...</text>
       </navigator>
     </view>
-    <loader wx:if="{{!isSplatfestLoaded}}"></loader>
+    <loader wx:if="{{!isSplatfestLoaded}}" :timeout.sync="timeout"></loader>
     <view wx:else class="index-wrap">
       <view wx:if="{{isLatestSplatfestStart && !isLatestSplatfestEnd}}" class="container index-container">
         <splatfest-schedule-card class="index-schedule-card" mode="splatfest" :list.sync="regularList" :splatfest.sync="latestSplatfest" />
-        <!-- <view class="index-schedule-hint">
-          <view class="index-region-picker">
-            <text>当前祭典区域：</text>
-            <region-picker readonly="true"></region-picker>
-          </view>
-          <view>可以在「更多」-「祭典」中修改</view>
-        </view> -->
       </view>
       <view wx:else class="container index-container">
         <regular-card class="index-schedule-card" mode="regular" :list.sync="regularList" />
@@ -89,7 +82,7 @@
         </view>
       </view>
     </view>
-    <timer @timer-update.user="timerUpdate"></timer>
+    <timer @timer-update.user="timerUpdate" @timer-timeout.user="timerTimeout"></timer>
   </view>
 </template>
 
@@ -151,7 +144,8 @@ export default class Index extends wepy.page {
     isSplatfestLoaded: false,
     latestSplatfest: {},
     isLatestSplatfestEnd: true, // 最近的祭典是否已经结束
-    isLatestSplatfestStart: false // 最近的祭典是否开始
+    isLatestSplatfestStart: false, // 最近的祭典是否开始
+    timeout: false
   }
 
   watch = {
@@ -171,6 +165,10 @@ export default class Index extends wepy.page {
   methods = {
     timerUpdate() {
       this.startUpdate()
+    },
+    timerTimeout() {
+      this.timeout = true
+      this.$apply()
     }
   }
 
@@ -207,7 +205,9 @@ export default class Index extends wepy.page {
         this.isLatestSplatfestStart = false
       }
     }
-    this.isSplatfestLoaded = true
+    if (this.splatfest.updatedAt) {
+      this.isSplatfestLoaded = true // 确保祭奠成功加载
+    }
     this.$apply()
     this.updateLogo()
   }

diff --git a/src/pages/salmonrun.wpy b/src/pages/salmonrun.wpy
@@ -5,7 +5,7 @@
         <image class="salmonrun-logo" mode="widthFix" src="../assets/img/salmon-run.png"></image>
         <text class="splatoon">Salmon Run</text>
       </view>
-      <loader wx:if="{{listWithDetail.length===0}}"></loader>
+      <loader wx:if="{{listWithDetail.length===0}}" :timeout.sync="timeout"></loader>
       <view wx:else>
         <view class="salmonrun-block">
           <view class="salmonrun-block-status splatoon">{{firstStatus}}</view>
@@ -65,7 +65,7 @@
         </view>
       </view>
     </view>
-    <timer @timer-update.user="timerUpdate"></timer>
+    <timer @timer-update.user="timerUpdate" @timer-timeout.user="timerTimeout"></timer>
   </view>
 </template>
 <script>
@@ -117,7 +117,8 @@ export default class Salmonrun extends wepy.page {
 
   data = {
     listWithDetail: [],
-    restList: []
+    restList: [],
+    timeout: true
   }
 
   watch = {
@@ -129,6 +130,10 @@ export default class Salmonrun extends wepy.page {
   methods = {
     timerUpdate() {
       this.startUpdateSalmonrun()
+    },
+    timerTimeout() {
+      this.timeout = true
+      this.$apply()
     }
   }
 

diff --git a/src/pages/schedule.wpy b/src/pages/schedule.wpy
@@ -9,7 +9,7 @@
         </view>
         <icon class="schedule-close-icon" @tap="backToIndex" type="clear" size="24" color="#ffffff" />
       </view>
-      <loader wx:if="{{list.length===0 || !isSplatfestLoaded}}"></loader>
+      <loader wx:if="{{list.length===0 || !isSplatfestLoaded}}" :timeout.sync="timeout"></loader>
       <view wx:else>
         <view wx:if="{{computedMode==='splatfest' && latestSplatfest}}" class="schedule-card-block schedule-card-splatfest-block">
           <view class="schedule-card-block-images schedule-card-splatfest-block-images">
@@ -47,7 +47,7 @@
         </view>
       </view>
     </view>
-    <timer @timer-update.user="timerUpdate"></timer>
+    <timer @timer-update.user="timerUpdate" @timer-timeout.user="timerTimeout"></timer>
   </view>
 </template>
 <style lang="less">
@@ -249,7 +249,8 @@ export default class Schedule extends wepy.page {
     isSplatfestLoaded: false,
     latestSplatfest: {},
     isLatestSplatfestEnd: true, // 最近的祭典是否已经结束
-    isLatestSplatfestStart: false // 最近的祭典是否开始
+    isLatestSplatfestStart: false, // 最近的祭典是否开始
+    timeout: false
   }
 
   watch = {
@@ -306,11 +307,16 @@ export default class Schedule extends wepy.page {
     },
     timerUpdate() {
       this.startUpdate()
+    },
+    timerTimeout() {
+      this.timeout = true
+      this.$apply()
     }
   }
 
   loadSchedule() {
-    const mode = this.computedMode === 'splatfest' ? 'regular' : this.computedMode
+    const mode =
+      this.computedMode === 'splatfest' ? 'regular' : this.computedMode
     this.list = this.schedule[mode].list
     this.$apply()
     wx.stopPullDownRefresh()

diff --git a/src/pages/shop.wpy b/src/pages/shop.wpy
@@ -8,7 +8,7 @@
         <text>小程序只展示当前SplatNet中的装备</text>
         <text>购买需要在APP里进行操作</text>
       </view>
-      <loader wx:if="{{list.length===0}}"></loader>
+      <loader wx:if="{{list.length===0}}" :timeout.sync="timeout"></loader>
       <view wx:else>
         <view class="shop-item" wx:for="{{listWithComputedTime}}" wx:key="end_time">
           <view class="item-title">
@@ -68,7 +68,7 @@
         </view>
       </view>
     </view>
-    <timer @timer-update.user="timerUpdate"></timer>
+    <timer @timer-update.user="timerUpdate" @timer-timeout.user="timerTimeout"></timer>
   </view>
 </template>
 <script>
@@ -111,7 +111,8 @@ export default class Shop extends wepy.page {
 
   data = {
     list: [],
-    listWithComputedTime: []
+    listWithComputedTime: [],
+    timeout: false
   }
 
   watch = {
@@ -123,6 +124,10 @@ export default class Shop extends wepy.page {
   methods = {
     timerUpdate() {
       this.startUpdateShop()
+    },
+    timerTimeout() {
+      this.timeout = true
+      this.$apply()
     }
   }
 
@@ -280,7 +285,6 @@ export default class Shop extends wepy.page {
         align-items: center;
         justify-content: center;
         -webkit-mask-size: 1000rpx 1600rpx;
-        mask-size: 1000rpx 1600rpx;
       }
     }
   }

diff --git a/src/pages/splatfest.wpy b/src/pages/splatfest.wpy
@@ -14,7 +14,7 @@
           <region-picker></region-picker>
         </view>
       </view>
-      <loader wx:if="{{list.length===0}}"></loader>
+      <loader wx:if="{{list.length===0}}" :timeout.sync="timeout"></loader>
       <view wx:else class="splatfest-lists">
         <repeat for="{{list}}" key="index">
           <view class="splatfest-card-wrap" @tap="showModal" data-item="{{item}}">
@@ -26,7 +26,7 @@
     <view wx:if="{{isModalShow}}" class="splatfest-modal" @touchmove.stop="disablePageScroll" @tap.stop="closeModal">
       <splatfest-result-card :detail.sync="modalItem"></splatfest-result-card>
     </view>
-    <timer @timer-update.user="timerUpdate"></timer>
+    <timer @timer-update.user="timerUpdate" @timer-timeout.user="timerTimeout"></timer>
   </view>
 </template>
 <script>
@@ -82,7 +82,8 @@ export default class Splatfest extends wepy.page {
   data = {
     list: [],
     isModalShow: false,
-    modalItem: {}
+    modalItem: {},
+    timeout: false
   }
 
   methods = {
@@ -94,7 +95,11 @@ export default class Splatfest extends wepy.page {
     timerUpdate() {
       this.startUpdate()
     },
-    disablePageScroll() {},
+    timerTimeout() {
+      this.timeout = true
+      this.$apply()
+    },
+    disablePageScroll() {}, // 使用空方法来阻止滚动
     showModal($event) {
       if (!this.isModalShow) {
         const targetItem = $event.currentTarget.dataset.item

diff --git a/src/store/reducers/salmonrun.js b/src/store/reducers/salmonrun.js
@@ -21,8 +21,7 @@ const defaultState = {
   },
   updatedAt: 0, // 记录上次加载时间
   activedAt: 0,
-  isError: false,
-  reloadCount: 0
+  isError: false
 }
 
 export default handleActions({

diff --git a/src/store/reducers/schedule.js b/src/store/reducers/schedule.js
@@ -24,8 +24,7 @@ const defaultState = {
   },
   updatedAt: 0, // 记录上次加载时间
   activedAt: 0, // 记录上次调用时间
-  isError: false,
-  reloadCount: 0
+  isError: false
 }
 
 export default handleActions({

diff --git a/src/store/reducers/shop.js b/src/store/reducers/shop.js
@@ -16,8 +16,7 @@ const defaultState = {
   },
   updatedAt: 0, // 记录上次加载时间
   activedAt: 0,
-  isError: false,
-  reloadCount: 0
+  isError: false
 }
 
 export default handleActions({

diff --git a/src/store/reducers/splatfest.js b/src/store/reducers/splatfest.js
@@ -17,8 +17,7 @@ const defaultState = {
   },
   updatedAt: 0,
   activedAt: 0,
-  isError: false,
-  reloadCount: 0
+  isError: false
 }
 
 export default handleActions({