优化弹窗

src/api/request/httpApi.js

@@ -1,5 +1,6 @@
 import request from './index'
 import { getObjValue } from 'js-fast-way'
+import { apiErrorMessage } from '~com/message/index.js'
 
 //封装的请求
 export const httpApi = async (obj, message = true) => {
@@ -8,7 +9,10 @@ export const httpApi = async (obj, message = true) => {
         request(obj).then(async (response) => {
             resolve(await getResData(response, false))
         }).catch(async (response) => {
-            if (message) window.$message?.error(getMsgVal(response))
+            if (message) {
+                const msg = getMsgVal(response)
+                if (msg) window.$message?.error(msg)
+            }
             resolve(await getResData(response, true))
         })
     })
@@ -49,8 +53,9 @@ const getResData = async (response, error = false) => {
 //获取msg消息内容
 const getMsgVal = (response) => {
     const { code, msg, error_description } = getObjValue(response.data)
-    if (code === 404) {
-        return '服务器异常，请联系管理员！'
+    if (code === 404 || code === 500 || code === 504) {
+        apiErrorMessage()
+        return ''
     } else {
         return msg || error_description || '未知错误'
     }

src/api/request/index.js

@@ -61,7 +61,6 @@ axios.interceptors.response.use(res => {
     }
     return res
 }, error => {
-    window.$message?.error('请求异常！')
     return Promise.reject(new Error(error))
 })
 

src/components/message/index.js

@@ -0,0 +1,44 @@
+import { h } from 'vue'
+import domView from './index.vue'
+
+//删除提醒
+export const delMessageV2 = (cbk) => {
+    window?.$messageBox({
+        center: true,
+        message: () => h(domView, {
+            type: 'delete',
+            title: '确认删除提醒',
+            text: '请谨慎考虑后，确认是否需要删除？',
+        }),
+        customClass: 'hc-message-view-box',
+        showCancelButton: true,
+        confirmButtonText: '确认删除',
+        cancelButtonText: '取消操作',
+        beforeClose: (action, instance, done) => {
+            if (cbk) {
+                cbk(action, instance, done)
+            } else {
+                done()
+            }
+        },
+    })
+}
+
+//请求异常
+export const apiErrorMessage = () => {
+    setTimeout(() => {
+        const doms = document.querySelector('.hc-message-view-box.warning')
+        if (doms) return
+        window?.$messageBox({
+            center: true,
+            message: () => h(domView, {
+                type: 'warning',
+                title: '服务器异常，请稍后重试',
+                text: '服务器异常了，如有需要，请联系管理员！',
+            }),
+            customClass: 'hc-message-view-box warning',
+            showCancelButton: false,
+            confirmButtonText: '关闭',
+        })
+    }, 1000)
+}

src/components/message/index.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="hc-message-box">
+        <div class="hc-lottie-box delete">
+            <HcLottie v-if="isType === 'delete'" type="delete" style="height: 200px" />
+            <HcLottie v-if="isType === 'warning'" type="warning" style="height: 140px" />
+        </div>
+        <div class="title">{{ titles }}</div>
+        <div class="text">{{ text }}</div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { HcLottie } from 'hc-vue3-ui'
+//参数
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'warning',
+    },
+    title: {
+        type: String,
+        default: '',
+    },
+    text: {
+        type: String,
+        default: '',
+    },
+})
+
+//监听
+watch(() => [
+    props.type,
+    props.title,
+    props.text,
+], ([type, title, text]) => {
+    isType.value = type
+    titles.value = title
+    texts.value = text
+})
+
+//变量
+const isType = ref(props.type)
+const titles = ref(props.title)
+const texts = ref(props.text)
+</script>
+
+<style scoped lang="scss">
+.hc-message-box {
+    position: relative;
+    .hc-lottie-box {
+        position: relative;
+        height: 200px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .title {
+        position: relative;
+        font-size: 20px;
+        color: #101010;
+        margin-bottom: 20px;
+    }
+    .text {
+        color: #878a99;
+        font-size: 14px;
+        margin-bottom: 10px;
+    }
+}
+</style>

src/main.js

@@ -40,7 +40,6 @@ async function bootstrap() {
     app.use(ElementPlus, {
         locale: zhCn,
     })
-
     // hc-vue3-ui
     app.use(HcVue3UI)
 

src/styles/app/element.scss

@@ -0,0 +1,8 @@
+.hc-message-view-box {
+    .el-message-box__btns {
+        padding: 15px;
+        .el-button + .el-button {
+            margin-left: 20px;
+        }
+    }
+}

src/views/home/index.vue

@@ -5,7 +5,7 @@
                 <div class="hc-slogan-icon">
                     <img class="logo" :src="ImgText3" alt="">
                 </div>
-                <SearchInput placeholder="请输入您想查找的内容" v-model="searchKey" @input="SearchKeyInput"/>
+                <SearchInput v-model="searchKey" placeholder="请输入您想查找的内容" @input="SearchKeyInput" />
                 <div class="home-link-box">
                     <span>他们都在搜索：</span>
                     <div class="home-link">
@@ -21,20 +21,25 @@
                         <router-link to="/schedule/data">资料进度</router-link>
                     </div>
                 </div>
+
+                <el-button type="danger" @click="delClick">删除提醒</el-button>
+
+                <el-button type="warning" @click="abnormalClick">异常提醒</el-button>
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-import {ref, watch} from "vue";
-import {useAppStore} from "~src/store";
+import { ref, watch } from 'vue'
+import { useAppStore } from '~src/store'
 import SearchInput from '~com/home/SearchInput.vue'
-import ImgText3 from "~src/assets/view/text-3.png";
+import { apiErrorMessage, delMessageV2 } from '~com/message/index.js'
+import ImgText3 from '~src/assets/view/text-3.png'
 
 //变量
 const useAppState = useAppStore()
-const HomeTheme = ref(useAppState.getHomeTheme);
+const HomeTheme = ref(useAppState.getHomeTheme)
 
 //监听
 watch(() => [
@@ -48,6 +53,30 @@ const searchKey = ref('')
 const SearchKeyInput = (value) => {
     searchKey.value = value
 }
+
+//删除提醒
+const delClick = () => {
+    delMessageV2((action, instance, done) => {
+        if (action === 'confirm') {
+            instance.confirmButtonLoading = true
+            instance.confirmButtonText = 'Loading...'
+            setTimeout(() => {
+                done()
+                setTimeout(() => {
+                    instance.confirmButtonLoading = false
+                }, 300)
+            }, 3000)
+        } else {
+            done()
+        }
+    })
+}
+
+
+//删除提醒
+const abnormalClick = () => {
+    apiErrorMessage()
+}
 </script>
 
 <style lang="scss" scoped>