恢复原生toast，loading修改为自定义组件

src/App.vue

@@ -4,15 +4,6 @@ export default {
         pageConfig: {},
     },
     onLaunch: function () {
-        let that = this;
-        for (let method of ["navigateTo", "redirectTo", "reLaunch", "switchTab", "navigateBack"]) {
-            uni.addInterceptor(method, {
-                success() {
-                    that.$store.commit("toast/show", false);
-                    that.$store.commit("toast/title", "");
-                },
-            });
-        }
         let pageConfig = this.$storage.get("system_config");
         if (!pageConfig) {
             const { windowWidth, windowHeight, statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();

src/components/layout/layout.vue

@@ -31,13 +31,13 @@
         <view class="page-footer"></view>
         <!-- 组件 -->
         <auth-login-box />
-        <widget-toast />
+        <widget-loading />
     </view>
 </template>
 
 <script>
 import AuthLoginBox from "@/components/auth/login-box";
-import WidgetToast from "@/components/widgets/toast";
+import WidgetLoading from "@/components/widgets/loading/loading";
 import { mapGetters } from "vuex";
 export default {
     name: "component-layout",
@@ -50,7 +50,7 @@ export default {
     },
     components: {
         AuthLoginBox,
-        WidgetToast,
+        WidgetLoading,
     },
     props: {
         minHeight: {

src/components/widgets/loading/loading.vue

@@ -0,0 +1,67 @@
+<template>
+    <view v-show="show" class="components-widgets-loading">
+        <image class="icon" :src="require('./loading.png')" mode="scaleToFill" />
+        <text class="text">{{ title }}</text>
+    </view>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+    name: "components-widgets-loading",
+    data() {
+        return {};
+    },
+    computed: {
+        ...mapState({
+            show: (state) => state.loading.show,
+            title: (state) => state.loading.title,
+        }),
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+@keyframes Loading {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+.components-widgets-loading {
+    z-index: 25;
+    position: fixed;
+    top: 50%;
+    left: 0;
+    right: 0;
+    width: 270rpx;
+    margin: 0 auto;
+    transform: translateY(-50%);
+    background-color: #646464;
+    box-sizing: border-box;
+    padding: 20rpx;
+    border-radius: 10rpx;
+    opacity: 0.9;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .icon {
+        width: 90rpx;
+        height: 90rpx;
+        flex-shrink: 0;
+        animation: Loading 1s infinite linear;
+    }
+    .text {
+        color: #ffffff;
+        font-size: 28rpx;
+        margin-top: 20rpx;
+    }
+}
+</style>

src/components/widgets/toast.vue

@@ -1,50 +0,0 @@
-<template>
-    <view v-show="show" class="components-widgets-toast">
-        <view class="toast">
-            {{ title }}
-        </view>
-    </view>
-</template>
-
-<script>
-import { mapState } from "vuex";
-export default {
-    name: "components-widgets-toast",
-    data() {
-        return {};
-    },
-    computed: {
-        ...mapState({
-            show: (state) => state.toast.show,
-            title: (state) => state.toast.title,
-        }),
-    },
-    components: {},
-    created() {},
-    mounted() {},
-    destroyed() {},
-    methods: {},
-};
-</script>
-
-<style lang="less" scoped>
-.components-widgets-toast {
-    z-index: 25;
-    position: fixed;
-    top: 50%;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    text-align: center;
-    max-width: 400rpx;
-    .toast {
-        display: inline-block;
-        font-size: 28rpx;
-        color: #ffffff;
-        background-color: #575757;
-        box-sizing: border-box;
-        padding: 20rpx;
-        border-radius: 10rpx;
-    }
-}
-</style>

src/core/libs/loading.js

@@ -0,0 +1,13 @@
+import $store from '@/store/index'
+export default {
+    show(title) {
+        $store.commit('loading/show', true);
+        if (title) {
+            $store.commit('loading/title', title);
+        }
+    },
+    hide() {
+        $store.commit('loading/show', false);
+        $store.commit('loading/title', "");
+    }
+}

src/core/libs/utils.js

@@ -1,5 +1,4 @@
 import $storage from '@/core/storage'
-import $store from '@/store/index'
 
 function time() {
     return parseInt(Math.round(new Date() / 1000));
@@ -191,20 +190,22 @@ function toPage(url, options, type) {
 }
 
 let toastTimer;
-function toast(title, duration) {
-    uni.hideLoading();
+function toast(title, options) {
+    if (typeof options === "undefined") {
+        options = {};
+    }
     return new Promise((resolve, reject) => {
-        if (typeof duration === "undefined") {
-            duration = 1500;
+        if (!options.duration) {
+            options.duration = 1500;
         }
-        $store.commit('toast/show', true);
-        $store.commit('toast/title', title);
+        uni.showToast({
+            ...{ title: title, icon: "none" },
+            ...options
+        });
         clearTimeout(toastTimer);
         toastTimer = setTimeout(() => {
-            $store.commit('toast/show', false);
-            $store.commit('toast/title', "");
             resolve();
-        }, duration);
+        }, options.duration);
     })
 }
 

src/core/request.js

@@ -32,9 +32,7 @@ const request = async (args) => {
         throw "登录态失效";
     }
 
-    (rule.showLoading) && uni.showLoading({
-        title: "加载中"
-    });
+    (rule.showLoading) && prototype.$loading.show('加载中');
 
     const contentType = (args.contentType) ? args.contentType : 'application/json';
 
@@ -51,7 +49,7 @@ const request = async (args) => {
         }
     });
 
-    (rule.showLoading) && uni.hideLoading();
+    (rule.showLoading) && prototype.$loading.hide();
 
     if (error || response.statusCode != 200) {
         prototype.$utils.toast('网络错误');

src/core/upload.js

@@ -24,9 +24,7 @@ let upload = async (args) => {
         throw "找不到API：" + args.api;
     }
 
-    (rule.showLoading) && uni.showLoading({
-        title: "上传中"
-    });
+    (rule.showLoading) && prototype.$loading.show('上传中');
 
     let [error, response] = await uni.uploadFile({
         url: prototype.$config.root + rule.url,
@@ -35,7 +33,8 @@ let upload = async (args) => {
         formData: args.data || {},
     });
 
-    (rule.showLoading) && uni.hideLoading();
+    (rule.showLoading) && prototype.$loading.hide();
+
     if (error || response.statusCode != 200) {
         prototype.$utils.toast('网络错误');
         throw "网络错误";

src/main.js

@@ -5,6 +5,7 @@ import store from "./store/index"
 import storage from './core/storage'
 import request from './core/request'
 import upload from './core/upload'
+import loading from './core/libs/loading'
 import test from './core/libs/test'
 import event from './core/libs/event'
 import utils from './core/libs/utils'
@@ -18,6 +19,7 @@ Vue.use({
         Vue.prototype.$storage = storage
         Vue.prototype.$request = request
         Vue.prototype.$upload = upload
+        Vue.prototype.$loading = loading
         Vue.prototype.$test = test
         Vue.prototype.$event = event
         Vue.prototype.$utils = utils

src/store/index.js

@@ -5,7 +5,7 @@ import system from "@/store/modules/system"
 import user from "@/store/modules/user"
 import service from "@/store/modules/service"
 import cart from "@/store/modules/cart"
-import toast from "@/store/modules/toast"
+import loading from "@/store/modules/loading"
 
 Vue.use(Vuex)
 export default new Vuex.Store({
@@ -14,6 +14,6 @@ export default new Vuex.Store({
         user,
         service,
         cart,
-        toast,
+        loading,
     }
 })

src/store/modules/loading.js

@@ -11,7 +11,7 @@ export default {
         },
         title(state, data) {
             state.title = data;
-        }
+        },
     },
     actions: {}
 }