From f11313797b957779760b067ddd2624238a7a84c9 Mon Sep 17 00:00:00 2001
From: zchengo <1933757688@qq.com>
Date: Sat, 24 Dec 2022 22:27:55 +0800
Subject: [PATCH] perf: page style

---
 web/src/views/Home.vue      | 41 +++++++++++++------------------------
 web/src/views/Subscribe.vue | 18 ++++++++++------
 2 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 2774029..baa9c83 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -40,23 +40,23 @@
             <template #title>
               <div
                 style="display: flex;align-items: center;justify-content:space-between;flex-direction: row;padding: 10px 0;">
-                <a-avatar @click="toMine" class="avatar" :size="50">U</a-avatar>
-                <div
-                  style="display: flex;align-items:flex-start;flex-direction: column;margin: 0 10px;font-weight: normal;">
+                <a-avatar class="avatar" :size="55">U</a-avatar>
+                <div style="display: flex;align-items:flex-start;flex-direction: column;margin-left: 10px;font-weight: normal;">
                   <span>{{ user.email }}</span>
-                  <sapn style="font-size: 12px;color: #476FFF;"><crown-two-tone style="font-size:15px;"
-                      two-tone-color="#476FFF" />&nbsp;{{ user.versionText }}</sapn>
+                  <a-tag v-if="user.version == 1" color="green"><template #icon><crown-filled /></template>基础版</a-tag>
+                  <a-tag v-if="user.version == 2" color="blue"><template #icon><crown-filled /></template>专业版</a-tag>
+                  <a-tag v-if="user.version == 3" color="orange"><template #icon><crown-filled /></template>高级版</a-tag>
                 </div>
               </div>
             </template>
             <template #content>
-              <div style="display: flex;align-items: center;justify-content:space-between;flex-direction: row;">
+              <div style="display: flex;align-items: center;justify-content: center;flex-direction: row;">
                 <a-button type="text" style="color: #476FFF;" @click="onDelete">注销账号</a-button>
                 <a-divider type="vertical" />
                 <a-button type="text" @click="onLogout">退出登录</a-button>
               </div>
             </template>
-            <a-avatar @click="popoverVisible = true" class="avatar" :size="28">U</a-avatar>
+            <a-avatar @click="onUserAvatar" class="avatar" :size="28">U</a-avatar>
           </a-popover>
         </div>
         <!-- 注销账号弹出框 -->
@@ -95,7 +95,7 @@ import { getUserInfo, getVerifyCode, userDelete } from '../api/user';
 import { DashboardOutlined, SmileOutlined, MehOutlined, ShoppingOutlined } from '@ant-design/icons-vue';
 import { CrownOutlined, MenuUnfoldOutlined, MenuFoldOutlined, QuestionCircleFilled } from '@ant-design/icons-vue';
 import { SmileFilled, BellFilled } from '@ant-design/icons-vue';
-import { ExclamationCircleOutlined, CrownTwoTone } from '@ant-design/icons-vue';
+import { ExclamationCircleOutlined, CrownFilled } from '@ant-design/icons-vue';
 
 export default {
   components: {
@@ -110,7 +110,7 @@ export default {
     SmileFilled,
     BellFilled,
     ExclamationCircleOutlined,
-    CrownTwoTone,
+    CrownFilled,
   },
   setup() {
     // 菜单选项
@@ -184,32 +184,19 @@ export default {
 
     // 初始化数据
     onBeforeMount(() => {
-      userInfo()
       store.selectedKeys = 'dashboard'
       router.push('dashboard')
     })
 
-    // 获取用户信息
-    const userInfo = () => {
+    // 点击用户头像
+    const onUserAvatar = () => {
       getUserInfo().then((res) => {
         if (res.data.code == 0) {
           user.name = res.data.data.name
           user.email = res.data.data.email
-          switch (res.data.data.version) {
-            case 1:
-              user.versionText = '基础版'
-              break;
-            case 2:
-              user.versionText = '专业版'
-              break;
-            case 3:
-              user.versionText = '高级版'
-              break;
-            default:
-              user.versionText = ''
-              break;
-          }
+          user.version = res.data.data.version
         }
+        popoverVisible = true
       })
     }
 
@@ -284,7 +271,7 @@ export default {
       loading,
       disabled,
       buttonText,
-      userInfo,
+      onUserAvatar,
       onDelete,
       onLogout,
       onGetCode,
diff --git a/web/src/views/Subscribe.vue b/web/src/views/Subscribe.vue
index 937d0fb..4599993 100644
--- a/web/src/views/Subscribe.vue
+++ b/web/src/views/Subscribe.vue
@@ -4,7 +4,7 @@
             show-icon /><br />
         <a-row :gutter="30">
             <a-col :span="8">
-                <a-card :class="version == 1 ? 'selected-free-card' : 'card'" :bordered="false">
+                <a-card :class="activedClass[0]" :bordered="false">
                     <span class="member-tag" style="color: #33B9FE;">基础版</span>
                     <h2 class="title">免费
                         <check-circle-filled v-if="ver == 1" class="icon" />
@@ -19,7 +19,7 @@
                 </a-card>
             </a-col>
             <a-col :span="8">
-                <a-card :class="version == 2 ? 'selected-card' : 'card'" :bordered="false">
+                <a-card :class="activedClass[1]" :bordered="false">
                     <span class="member-tag" style="color: #3788FF;">专业版</span>
                     <h2 class="title">按月付费，每月18元</h2>
                     <div class="content">能力不设限，新功能优先体验</div><br />
@@ -35,7 +35,7 @@
                 </a-card>
             </a-col>
             <a-col :span="8">
-                <a-card :class="version == 3 ? 'selected-card' : 'card'" :bordered="false">
+                <a-card :class="activedClass[2]" :bordered="false">
                     <span class="member-tag" style="color: #3788FF;">高级版</span>
                     <h2 class="title">按年付费，每年198元</h2>
                     <div class="content">能力不设限，新功能优先体验</div><br />
@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import { ref, onBeforeMount } from 'vue';
+import { ref, reactive, onBeforeMount } from 'vue';
 import { CheckCircleFilled } from '@ant-design/icons-vue';
 import { subscribePay, getSubscribeInfo } from '../api/subscribe';
 import { useRouter } from 'vue-router'
@@ -74,7 +74,7 @@ export default {
         const payUrl = ref()
         const visible = ref(false)
         const disabled = ref(false)
-        const active = ref(30)
+        const activedClass = reactive(['card', 'card', 'card'])
 
         const payResult = ref(false)
         const title = ref('')
@@ -110,6 +110,12 @@ export default {
                     if (res.data.data.version !== 1) {
                         disabled.value = true
                     }
+                    if (res.data.data.version == 1) {
+                        activedClass[0] = 'selected-free-card'
+                    }
+                    if (res.data.data.version == 2 || res.data.data.version == 3) {
+                        activedClass[res.data.data.version-1] = 'selected-card'
+                    }
                 }
             })
         }
@@ -123,7 +129,7 @@ export default {
             disabled,
             payResult,
             title,
-            active,
+            activedClass,
             buttonText,
             isClick,
             subscribeInfo,