From 0bef9b53af7b56833aef100a5cb9cce6078c6424 Mon Sep 17 00:00:00 2001
From: chaos-zhu <ggchaos1022@gmail.com>
Date: Sun, 22 Dec 2024 22:42:00 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E5=89=8D=E7=AB=AF=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=BF=80=E6=B4=BBplus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/top-bar.vue                |  6 +-
 .../views/setting/components/user-plus.vue    | 56 ++++++++++++++++++-
 web/src/views/setting/index.vue               |  5 --
 3 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/web/src/components/top-bar.vue b/web/src/components/top-bar.vue
index 07d3f57..b0defd2 100644
--- a/web/src/components/top-bar.vue
+++ b/web/src/components/top-bar.vue
@@ -106,10 +106,9 @@
 <script setup>
 import { ref, getCurrentInstance, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
-import { User, Sunny, Moon, Fold, CircleCheckFilled, Star, StarFilled, Promotion } from '@element-plus/icons-vue'
+import { User, Sunny, Moon, Fold } from '@element-plus/icons-vue'
 import packageJson from '../../package.json'
 import MenuList from './menuList.vue'
-import { handlePlusSupport } from '@/utils'
 
 const { proxy: { $router, $store, $api, $message } } = getCurrentInstance()
 const router = useRouter()
@@ -119,12 +118,10 @@ const currentVersion = ref(`v${ packageJson.version }`)
 const latestVersion = ref(null)
 const menuCollapse = ref(false)
 const discount = ref(false)
-const discountContent = ref('')
 
 const isNew = computed(() => latestVersion.value && latestVersion.value !== currentVersion.value)
 const user = computed(() => $store.user)
 const title = computed(() => $store.title)
-const plusInfo = computed(() => $store.plusInfo)
 const isPlusActive = computed(() => $store.isPlusActive)
 
 const isDark = computed({
@@ -196,7 +193,6 @@ const getPlusDiscount = async () => {
   const { data } = await $api.getPlusDiscount()
   if (data?.discount) {
     discount.value = data.discount
-    discountContent.value = data.content
   }
 }
 
diff --git a/web/src/views/setting/components/user-plus.vue b/web/src/views/setting/components/user-plus.vue
index c091e65..ed43725 100644
--- a/web/src/views/setting/components/user-plus.vue
+++ b/web/src/views/setting/components/user-plus.vue
@@ -20,11 +20,23 @@
       />
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" :loading="loading" @click="handleUpdate">立即激活</el-button>
-      <el-button type="success" @click="handlePlusSupport">购买Plus</el-button>
+      <div class="form_footer">
+        <el-button type="primary" :loading="loading" @click="handleUpdate">立即激活</el-button>
+        <el-button type="success" @click="handlePlusSupport">
+          购买Plus
+          <el-icon class="el-icon--right"><TopRight /></el-icon>
+        </el-button>
+        <span v-if="!isPlusActive && discount" class="discount_wrapper" @click="handlePlusSupport">
+          <img
+            class="discount_badge"
+            src="@/assets/discount.png"
+            alt="Discount"
+          >
+          <span class="discount_content">{{ discountContent }}</span>
+        </span>
+      </div>
     </el-form-item>
   </el-form>
-
   <!-- Plus 激活状态信息 -->
   <div v-if="isPlusActive" class="plus_status">
     <div class="status_header">
@@ -64,6 +76,7 @@
 <script setup>
 import { ref, reactive, onMounted, getCurrentInstance, computed } from 'vue'
 import { ElMessageBox } from 'element-plus'
+import { TopRight } from '@element-plus/icons-vue'
 import { handlePlusSupport } from '@/utils'
 import PlusTable from '@/components/plus-table.vue'
 
@@ -78,6 +91,8 @@ const formData = reactive({
 const rules = reactive({
   key: { required: true, message: '输入Plus Key', trigger: 'change' }
 })
+const discount = ref(false)
+const discountContent = ref('')
 
 const plusInfo = computed(() => $store.plusInfo)
 const isPlusActive = computed(() => $store.isPlusActive)
@@ -124,8 +139,17 @@ const getPlusConf = async () => {
   }
 }
 
+const getPlusDiscount = async () => {
+  const { data } = await $api.getPlusDiscount()
+  if (data?.discount) {
+    discount.value = data.discount
+    discountContent.value = data.content
+  }
+}
+
 onMounted(() => {
   getPlusConf()
+  getPlusDiscount()
 })
 </script>
 
@@ -134,6 +158,32 @@ onMounted(() => {
   width: 500px;
 }
 
+.form_footer {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  margin-bottom: 15px;
+  .discount_wrapper {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    .discount_badge {
+      margin: 0 5px 0 10px;
+      width: 22px;
+      color: white;
+      font-size: 12px;
+    }
+    .discount_content {
+      font-size: 12px;
+      line-height: 1.3;
+      color: #ff4806;
+      text-decoration: underline;
+    }
+  }
+}
+
 .plus_status {
   margin-bottom: 15px;
 
diff --git a/web/src/views/setting/index.vue b/web/src/views/setting/index.vue
index eac1ca3..420832f 100644
--- a/web/src/views/setting/index.vue
+++ b/web/src/views/setting/index.vue
@@ -24,13 +24,11 @@
 import { watch, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import GlobalNotify from './components/global-notify.vue'
-// import EmailList from './components/email-list.vue'
 import Record from './components/record.vue'
 import User from './components/user.vue'
 import NotifyConfig from './components/notify-config.vue'
 import UserPlus from './components/user-plus.vue'
 
-// tabkey
 const route = useRoute()
 const router = useRouter()
 
@@ -47,9 +45,6 @@ watch(() => tabKey.value, (newVal) => {
   router.push({ query: { tabKey: newVal } })
 })
 
-const handleTabClick = (tab) => {
-  router.push({ query: { tabKey: tab.props.name } })
-}
 </script>
 
 <style lang="scss" scoped>