87 lines
2.6 KiB
Vue
87 lines
2.6 KiB
Vue
<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>
|