✨ 前端支持激活plus

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
   }
 }
 

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>
+      <div class="form_footer">
-      <el-button type="success" @click="handlePlusSupport">购买Plus</el-button>
+        <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;
 

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>