init

components/loadingAll/loadingAll.vue

@@ -0,0 +1,40 @@
+<template>
+  <view v-show="loadingShow">
+    <view class="request-loading-view">
+      <!-- <view class="loading-view"><view class="loading"></view></view> -->
+	  <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/all-loading.gif"></image>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  computed: {
+    //计算属性判断vuex中的显示状态
+    loadingShow() {
+      return this.$store.state.requestLoading;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.request-loading-view {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  image {
+	width: 415rpx;
+	height: 609rpx;
+  }
+}
+</style>

config/request.js

@@ -1,7 +1,7 @@
 import * as db from "./db.js";
 import { baseUrl } from "./config.js";
 import { User } from "@/config/api.js";
-import { modal } from "@/config/util.js";
+import store from "../store/index.js";
 const showError = (error) => {
   let errorMsg = "";
   switch (error.status) {
@@ -53,15 +53,14 @@ const showError = (error) => {
     },
   });
 };
+
 // get请求
 export const getHttp = (url, data, status = 1) => {
   // 获取用户token和用户信息
   let token = db.get("access_token");
   let authHeader = token || "";
   if (status) {
-    uni.showLoading({
-      title: "加载中",
-    });
+    store.commit("requestShowLoading");
   }
   return new Promise((resolve, reject) => {
     uni.request({
@@ -74,7 +73,7 @@ export const getHttp = (url, data, status = 1) => {
       },
       method: "GET",
       success: (res) => {
-        status && uni.hideLoading();
+        status && store.commit("requestHideLoading");
         // 408 token失效
         if (res.data.Ret === 408) {
           refreshToken(getHttp, url, data, resolve);
@@ -90,14 +89,14 @@ export const getHttp = (url, data, status = 1) => {
         resolve(res.data);
       },
       fail: (error) => {
-        status && uni.hideLoading();
+        status && store.commit("requestHideLoading");
         if (error && error.response) {
           showError(error.response);
         }
       },
       complete: () => {
         setTimeout(() => {
-          status && uni.hideLoading();
+          status && store.commit("requestHideLoading");
         }, 250);
       },
     });
@@ -108,24 +107,20 @@ export const postHttp = (url, data, status = 1) => {
   // 获取用户token和用户信息
   let token = db.get("access_token");
   let authHeader = token || "";
-
   if (status) {
-    uni.showLoading({
-      title: "加载中",
-    });
+    store.commit("requestShowLoading");
   }
   return new Promise((resolve, reject) => {
     uni.request({
       url: baseUrl + url,
       data: data,
       header: {
-        // 'Accept': 'application/json',
         "Content-Type": "application/json",
         Authorization: authHeader,
       },
       method: "POST",
       success: (res) => {
-        status && uni.hideLoading();
+        status && store.commit("requestHideLoading");
         // 408 token失效
         if (res.data.Ret === 408) {
           refreshToken(postHttp, url, data, resolve);
@@ -141,14 +136,14 @@ export const postHttp = (url, data, status = 1) => {
         resolve(res.data);
       },
       fail: (error) => {
-        status && uni.hideLoading();
+        status && store.commit("requestHideLoading");
         if (error && error.response) {
           showError(error.response);
         }
       },
       complete: () => {
         setTimeout(() => {
-          status && uni.hideLoading();
+          status && store.commit("requestHideLoading");
         }, 250);
       },
     });

main.js

@@ -1,21 +1,27 @@
-import Vue from 'vue'
-import App from './App'
-import store from './store'
-import * as Db from './config/db.js';//缓存操作
-import * as Util from './config/util.js';//通用方法
+import Vue from "vue";
+import App from "./App";
+import store from "./store";
+import * as Db from "./config/db.js"; //缓存操作
+import * as Util from "./config/util.js"; //通用方法
 import uView from "uview-ui";
-import indexMixin from './mixin'
+import indexMixin from "./mixin";
+import Loading from "./components/loadingAll/loadingAll.vue";
 Vue.use(uView);
 
-Vue.config.productionTip = false
+//请求加载组件
+
+//组件挂载到全局，方便每个页面使用
+Vue.component("Loading", Loading);
+
+Vue.config.productionTip = false;
 Vue.prototype.$store = store;
 Vue.prototype.$db = Db;
 Vue.prototype.$util = Util;
 Vue.prototype.$global = App.globalData;
-App.mpType = 'app'
-Vue.mixin(indexMixin)
+App.mpType = "app";
+Vue.mixin(indexMixin);
 const app = new Vue({
-   ...App,
-	store
-})
-app.$mount()
+  ...App,
+  store,
+});
+app.$mount();

pages/index/index.vue

@@ -88,6 +88,7 @@
         <image @click.stop="goSecretDetail(3)" mode="widthFix" style="height: 120rpx; width: 120rpx" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/week_summary.png"> </image>
       </template>
     </suspenButton>
+    <Loading />
   </page-meta>
 </template>
 

store/index.js

@@ -1,7 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import { checkToken, User } from "@/config/api.js";
-import { set } from "@/config/db.js"; //缓存操作
 import audioBg from "./modules/audioBg";
 import videoPlay from "./modules/videoPlay";
 Vue.use(Vuex);
@@ -12,6 +11,7 @@ const store = new Vuex.Store({
     isBind: "",
     pageRouterReport: "", //报告详情的路径
     pageRouterActivity: "", //活动详情的路径
+    requestLoading: false, //加载等待是否显示
   },
   mutations: {
     globalData(state, payload) {
@@ -24,6 +24,15 @@ const store = new Vuex.Store({
     setRouterActivity(state, payload) {
       state.pageRouterActivity = payload;
     },
+
+    //显示请求加载动画
+    requestShowLoading(state) {
+      state.requestLoading = true;
+    },
+    //隐藏请求加载动画
+    requestHideLoading(state) {
+      state.requestLoading = false;
+    },
   },
   actions: {
     checkHandle(context, navigateUrl = "") {