loading组件

app.js

@@ -103,5 +103,21 @@ App({
     userInfo: null,
     appCode:'HSAY_SHARE_COUPON',
     typeSwitchObj : {"C":'现金券',"D":"折扣券"}
+  },
+  showLoading() {
+    const page = this.getComponent("#Page")
+    if (page) {
+      page.setValue("showLoading", true)
+    }
+  },
+  hideLoading() {
+    const page = this.getComponent("#Page")
+    if (page) {
+      page.setValue("showLoading", false)
+    }
+  },
+  getComponent(id) {
+    const page = getCurrentPages()[getCurrentPages().length - 1]
+    return page.selectComponent(id)
   }
 })

app.json

@@ -28,6 +28,9 @@
     "navigationBarTitleText": "Weixin",
     "navigationBarTextStyle": "black"
   },
+  "usingComponents": {
+    "page" : "components/page/index"
+  },
   "style": "v2",
   "sitemapLocation": "sitemap.json",
   "tabBar": {

components/loading/index.js

@@ -0,0 +1,23 @@
+// components/loading/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

components/loading/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/loading/index.wxml

@@ -0,0 +1,4 @@
+<!--components/loading/index.wxml-->
+<view class="loading">
+  <image class="aniamtion loading-image" src="../../images/loading.gif" />
+</view>

components/loading/index.wxss

@@ -0,0 +1,39 @@
+/* components/loading/index.wxss */
+.loading {
+    width: 228rpx;
+    height: 220rpx;
+    position: fixed;
+    left: calc(100vw / 2 - 228rpx / 2);
+    top: calc(100vh / 2 - 220rpx / 2);
+    z-index: 20000;
+}
+
+.loading-image {
+    width: 100%;
+    height: 100%;
+}
+
+.aniamtion {
+    animation: mymove 2s infinite;
+    animation-direction: alternate;
+    animation-timing-function: ease-in;
+    /* //infinite属性是表示无限循环的意思，没有这个属性的话动画只执行一次。 */
+  }
+
+  @keyframes mymove {
+      0% {
+          transform: scale(1);
+      }
+      25% {
+          transform: scale(0.7);
+      }
+      50% {
+          transform: scale(0.5);
+      }
+      75% {
+          transform: scale(0.7);
+      }
+      100% {
+          transform: scale(1);
+      }
+  }

components/page/index.js

@@ -0,0 +1,27 @@
+// components/page/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        showLoading: false
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        setValue(k, v) {
+            this.setData({
+                [k]: v
+            })
+        }
+    }
+})

components/page/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "loading": "../loading/index"
+    }
+}

components/page/index.wxml

@@ -0,0 +1,5 @@
+<!--components/page/index.wxml-->
+<view>
+<slot></slot>
+<loading wx:if="{{showLoading}}"></loading>
+</view>

components/page/index.wxss

@@ -0,0 +1 @@
+/* components/page/index.wxss */

pages/welfareMall/index/index.wxml

@@ -1,4 +1,4 @@
-<view class="{{grayTheme?'page':''}}">
+<page id="Page" class="{{grayTheme?'page':''}}">
   <view class='swiper_box'>
     <swiper class="swiper" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{currentSwiper}}" bindanimationfinish="swiperChange">
       <block wx:for="{{bannerList}}" wx:key="unique">
@@ -62,4 +62,4 @@
     </view>
   </view> -->
   </view>
-</view>
+</page>

utils/request.js

@@ -100,7 +100,7 @@ class request {
    */
   static requestAll(url, data, header, method, notUseLoading) {
       if (!notUseLoading) {
-        wx.showLoading()
+        getApp().showLoading()
       }
       return new Promise((resolve, reject) => {
           wx.request({
@@ -109,7 +109,6 @@ class request {
               header: header,
               method: method,
               success: (res => {
-                  wx.hideLoading()
                   if (res?.data.code === 200) {
                       //200: 服务端业务处理正常结束
                       resolve(res?.data)
@@ -134,7 +133,10 @@ class request {
                     title: '网络异常请稍后',
                   })
                   reject(res)
-              })
+              }),
+              complete: _ => {
+                getApp().hideLoading()
+              }
           })
       })
   }