修改为自定义toast轻提示

src/components/layout/layout.vue

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

src/components/widgets/toast.vue

@@ -0,0 +1,51 @@
+<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;
+    transform: translateY(-50%);
+    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/utils.js

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

src/store/index.js

@@ -5,6 +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"
 
 Vue.use(Vuex)
 export default new Vuex.Store({
@@ -13,5 +14,6 @@ export default new Vuex.Store({
         user,
         service,
         cart,
+        toast,
     }
 })

src/store/modules/toast.js

@@ -0,0 +1,17 @@
+export default {
+    namespaced: true,
+    state: {
+        show: false,
+        title: "",
+    },
+    getters: {},
+    mutations: {
+        show(state, data) {
+            state.show = data;
+        },
+        title(state, data) {
+            state.title = data;
+        }
+    },
+    actions: {}
+}