68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<script setup lang="ts">
|
||
import { deviceDetection, hideTextAtIndex } from "@pureadmin/utils";
|
||
import { useUserInfo } from "../utils/hooks";
|
||
defineOptions({
|
||
name: "AccountSafe"
|
||
});
|
||
|
||
const { handleReset, handlePhone, handleEmail, userInfo } = useUserInfo();
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
:class="[
|
||
'min-w-[180px]',
|
||
deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
|
||
]"
|
||
>
|
||
<h3 class="my-8">账户安全</h3>
|
||
<div class="flex items-center">
|
||
<div class="flex-1">
|
||
<p>账号密码</p>
|
||
<el-text class="mx-1" type="info" />
|
||
</div>
|
||
<el-button type="primary" text @click="handleReset(userInfo)"
|
||
>修改</el-button
|
||
>
|
||
</div>
|
||
<el-divider />
|
||
<div class="flex items-center">
|
||
<div class="flex-1">
|
||
<p>绑定号码</p>
|
||
<el-text class="mx-1" type="info">
|
||
已经绑定手机：{{
|
||
hideTextAtIndex(userInfo.phone, { start: 3, end: 6 })
|
||
}}
|
||
</el-text>
|
||
</div>
|
||
<el-button type="primary" text @click="handlePhone(userInfo)"
|
||
>修改</el-button
|
||
>
|
||
</div>
|
||
<el-divider />
|
||
<div class="flex items-center">
|
||
<div class="flex-1">
|
||
<p>绑定邮箱</p>
|
||
<el-text class="mx-1" type="info"
|
||
>已绑定邮箱：{{
|
||
hideTextAtIndex(userInfo.email, {
|
||
start: 3,
|
||
end: userInfo.email.indexOf("@") - 1
|
||
})
|
||
}}
|
||
</el-text>
|
||
</div>
|
||
<el-button type="primary" text @click="handleEmail(userInfo)"
|
||
>修改</el-button
|
||
>
|
||
</div>
|
||
<el-divider />
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.el-divider--horizontal {
|
||
border-top: 0.1px var(--el-border-color) var(--el-border-style);
|
||
}
|
||
</style>
|