弹窗形式展示积分

src/plugins/curtain/components/point.vue

@@ -0,0 +1,41 @@
+<!-- 展示积分 -->
+<template>
+  <v-app>
+    <v-dialog
+      v-model="dialog"
+      max-width="400"
+      :persistent="persistent || false"
+    >
+      <div class="white-bgc pa-5" style="border-radius: 2px;">
+        <template v-if="list?.length">
+          <div class="d-flex align-center" v-for="(item, index) in list" :key="'curtainPoint' + index">
+            <span style="color: darkorange; font-size: 44px;" class="mdi mdi-database-check-outline ml-2 mr-2"></span>
+            <div style="color: darkorange;" class="mt-4">{{ item }}</div>
+          </div>
+        </template>
+        <div v-else class="d-flex align-center">
+          <span style="color: darkorange; font-size: 44px;" class="mdi mdi-database-check-outline ml-2 mr-2"></span>
+          <div style="color: darkorange;" class="mt-4">{{message}}</div>
+        </div>
+      </div>
+      <div class="text-center mt-3">
+        <span style="color: white; font-size: 28px;" class="mdi mdi-close-circle-outline cursor-pointer" @click="dialog = false"></span>
+      </div>
+    </v-dialog>
+  </v-app>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+defineOptions({name: 'curtain-point'})
+defineProps({
+  message: String, // 单条数据，也可以用list['']
+  list: Array, // 多条数据一起展示传list
+  persistent: Boolean, // false: 点击遮罩层关闭dialog
+})
+
+const dialog = ref(true)
+
+</script>
+<style lang="scss" scoped>
+</style>

src/plugins/curtain/index.js

@@ -0,0 +1,31 @@
+import { createApp } from 'vue'
+import point from './components/point.vue'
+import vuetify from '@/plugins/vuetify'
+// Curtain('point', { message: '暂未开发，敬请期待！' })
+
+const toastMessage  = (type, options)  => {
+  const componentName = type === 'point' ? point : null
+  const rootNode = document.createElement("div")
+  document.querySelector('.v-application').appendChild(rootNode)
+  const app = createApp(componentName, options)
+  app.use(vuetify)
+  app.mount(rootNode)
+  const { timeout } = options || {}
+  if ((timeout - 0)) {
+    setTimeout(() => {
+        app.unmount()
+        rootNode.remove()
+    }, (timeout-0))
+  }
+}
+
+// toastMessage.point = (options) => {
+//   toastMessage('point', options)
+// }
+
+// 注册插件app.use()会自动执行install函数
+toastMessage.install = (app) => {
+  app.config.globalProperties.Curtain = toastMessage
+}
+
+export default toastMessage

src/utils/prefixUrl.js

@@ -1,4 +1,6 @@
-import Snackbar from '@/plugins/snackbar'
+// import Snackbar from '@/plugins/snackbar'
+import Curtain from '@/plugins/curtain'
+
 
 const prefixList = ['/app-api', '/admin-api']
 export const getSuffixAfterPrefix = (str) => {
@@ -18,18 +20,23 @@ export const getSuffixAfterPrefix = (str) => {
 
 
 // 展示积分
-export function showNextAction (list, currentIndex = 0) {
-  if (currentIndex < list.length) {
-    const action = list[currentIndex]
-    if (action.match) {
-      Snackbar.point(`恭喜您${action.title}获得${action.point}积分`)
-      setTimeout(() => {
-        showNextAction(list, currentIndex + 1)
-      }, 3000)
-    } else {
-      setTimeout(() => {
-        showNextAction(list, currentIndex + 1)
-      }, 0)
-    }
-  }
+export function showNextAction (list) { // , currentIndex = 0
+  const arr = list.reduce((newArr, action) => {
+    if (action.match) newArr.push(`+${action.point}  恭喜您【${action.title}】获得${action.point}积分`)
+    return newArr
+  }, [])
+  if (arr?.length) Curtain('point', { list: arr })
+  // if (currentIndex < list.length) {
+  //   const action = list[currentIndex]
+  //   if (action.match) {
+  //     Snackbar.point(`+${action.point}  恭喜您${action.title}获得${action.point}积分`)
+  //     setTimeout(() => {
+  //       showNextAction(list, currentIndex + 1)
+  //     }, 3000)
+  //   } else {
+  //     setTimeout(() => {
+  //       showNextAction(list, currentIndex + 1)
+  //     }, 0)
+  //   }
+  // }
 }