From c15cccd44f205b8087a77d394bc5e648cefc298d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TOP=E7=B3=AF=E7=B1=B3?= <1130395124@qq.com>
Date: Sat, 8 Apr 2023 00:10:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BA=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89toast=E8=BD=BB=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/layout.vue |  5 +--
 src/components/widgets/toast.vue | 59 ++++++++++++++++++++++++++++++++
 src/core/libs/utils.js           | 21 ++++++------
 src/store/index.js               |  4 ++-
 src/store/modules/toast.js       | 17 +++++++++
 5 files changed, 92 insertions(+), 14 deletions(-)
 create mode 100644 src/components/widgets/toast.vue
 create mode 100644 src/store/modules/toast.js

diff --git a/src/components/layout/layout.vue b/src/components/layout/layout.vue
index c04daa8..4089b61 100644
--- a/src/components/layout/layout.vue
+++ b/src/components/layout/layout.vue
@@ -31,12 +31,13 @@
         <view class="page-footer"></view>
         <!-- 组件 -->
         <auth-login-box />
+        <widget-toast />
     </view>
 </template>
 
 <script>
 import AuthLoginBox from "@/components/auth/login-box";
-import { mapGetters, mapState } from "vuex";
+import WidgetToast from "@/components/widgets/toast";
 export default {
     name: "component-layout",
     data() {
@@ -48,6 +49,7 @@ export default {
     },
     components: {
         AuthLoginBox,
+        WidgetToast,
     },
     props: {
         minHeight: {
@@ -83,7 +85,6 @@ export default {
             default: true,
         },
     },
-    computed: {},
     mounted() {
         const { statusBarHeight, headerHeight } = getApp().globalData.pageConfig;
         // #ifndef H5
diff --git a/src/components/widgets/toast.vue b/src/components/widgets/toast.vue
new file mode 100644
index 0000000..8dd0a8c
--- /dev/null
+++ b/src/components/widgets/toast.vue
@@ -0,0 +1,59 @@
+<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>
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 0.9;
+    }
+}
+.components-widgets-toast {
+    z-index: 25;
+    position: fixed;
+    top: 50%;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    text-align: center;
+    max-width: 400rpx;
+    animation: fadeIn 0.35s forwards;
+    .toast {
+        display: inline-block;
+        font-size: 28rpx;
+        color: #ffffff;
+        background-color: #575757;
+        box-sizing: border-box;
+        padding: 20rpx;
+        border-radius: 10rpx;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/core/libs/utils.js b/src/core/libs/utils.js
index 5fceba1..92100c7 100644
--- a/src/core/libs/utils.js
+++ b/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) {
-    if (typeof options === "undefined") {
-        options = {};
-    }
+function toast(title, duration) {
+    uni.hideLoading();
     return new Promise((resolve, reject) => {
-        if (!options.duration) {
-            options.duration = 1500;
+        if (typeof duration === "undefined") {
+            duration = 1500;
         }
-        uni.showToast({
-            ...{ title: title, icon: "none" },
-            ...options
-        });
+        $store.commit('toast/show', true);
+        $store.commit('toast/title', title);
         clearTimeout(toastTimer);
         toastTimer = setTimeout(() => {
+            $store.commit('toast/show', false);
+            $store.commit('toast/title', "");
             resolve();
-        }, options.duration);
+        }, duration);
     })
 }
 
diff --git a/src/store/index.js b/src/store/index.js
index c222601..423a057 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,12 +4,14 @@ import Vuex from 'vuex'
 import user from "@/store/modules/user"
 import system from "@/store/modules/system"
 import order from "@/store/modules/order"
+import toast from "@/store/modules/toast"
 
 Vue.use(Vuex)
 export default new Vuex.Store({
     modules: {
         user,
         system,
-        order
+        order,
+        toast,
     }
 })
diff --git a/src/store/modules/toast.js b/src/store/modules/toast.js
new file mode 100644
index 0000000..9e3d923
--- /dev/null
+++ b/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: {}
+}
\ No newline at end of file