feat:重构模块

src/components/Profile/ProfileAccount.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="profile-account">
+    <div class="item">
+      <i class="fa-brands fa-qq" style="color: #0d9488"></i>
+      <div class="content">
+        <span>绑定QQ</span>
+        <span>当前未绑定微信账号</span>
+      </div>
+      <el-button type="primary" text @click="changeAccount('QQ')">更换绑定</el-button>
+    </div>
+
+    <div class="item">
+      <i class="fa-brands fa-weixin" style="color: #0d9488"></i>
+      <div class="content">
+        <span>绑定微信</span>
+        <span>当前未绑定微信账号</span>
+      </div>
+      <el-button type="primary" text @click="changeAccount('WeChat')">更换绑定</el-button>
+    </div>
+
+    <div class="item">
+      <i class="fa-solid fa-mobile-screen" style="color: #0d9488"></i>
+      <div class="content">
+        <span>绑定手机号</span>
+        <span v-if="userStore.userInfo.phoneNumber">
+          {{ userStore.userInfo.phoneNumber }}
+        </span>
+        <span v-else>当前未绑定手机号</span>
+      </div>
+      <el-button type="primary" text @click="changeAccount('Phone')">更换绑定</el-button>
+    </div>
+
+    <div class="item">
+      <i class="fa-solid fa-envelope" style="color: #0d9488"></i>
+      <div class="content">
+        <span v-if="userStore.userInfo.email">
+          {{ userStore.userInfo.email }}
+        </span>
+        <span v-else>当前未绑定绑定邮箱</span>
+      </div>
+      <el-button type="primary" text @click="changeAccount('EMail')">更换绑定</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useUserStore } from '@/store/user.ts'
+import { IAccountType } from '@/types/auth.ts'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { emailPattern, phonePattern } from '@/utils/element/elRules.ts'
+
+const userStore = useUserStore()
+
+const changeAccount = (type: IAccountType) => {
+  switch (type) {
+    case 'QQ':
+    case 'WeChat':
+      ElMessage.info('该功能暂未上线')
+      break
+    case 'Phone':
+      ElMessageBox.prompt('请输入手机号', '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        inputPattern: phonePattern,
+        inputErrorMessage: '请输入正确的手机格式'
+      })
+        .then(({ value }) => {
+
+        })
+      break
+    case 'EMail':
+      ElMessageBox.prompt('请输入邮箱', '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        inputPattern: emailPattern,
+        inputErrorMessage: '请输入正确的邮箱格式'
+      })
+        .then(({ value }) => {
+
+        })
+      break
+    default:
+      break
+  }
+}
+</script>