wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 优化个人中心账户管理功能

Browse Source
This commit is contained in:
wangqiao
2025-09-11 21:21:56 +08:00
parent b0b50ed960
commit fec929bf06
7 changed files with 119 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pages/personal-Center/index.vue
View File

@ -15,7 +15,7 @@
</div>
</nuxt-link>
<nuxt-link to="/personal-Center/personal-profile" class="flex items-center justify-between py-[14px]">
<!-- <nuxt-link to="/personal-Center/personal-profile" class="flex items-center justify-between py-[14px]">
<div class="flex items-center pl-[20px]">
<img v-if="!route.path.startsWith('/personal-Center/personal-profile')" src="~/assets/images/user_zl.png" alt="" srcset="" class="h-[16px]" />
<img v-else src="~/assets/images/个人资料 (1).png" alt="" srcset="" class="h-[16px]" />
@ -34,6 +34,16 @@
<div class="pr-[20px]">
<el-icon><ArrowRight /></el-icon>
</div>
</nuxt-link> -->
<nuxt-link to="/personal-Center/account-management" class="flex items-center justify-between py-[14px]">
<div class="flex items-center pl-[20px]">
<img v-if="!route.path.startsWith('/personal-Center/account-management')" src="~/assets/images/account.png" alt="" srcset="" class="h-[20px]" />
<img v-else src="~/assets/images/账户安全.png" alt="" srcset="" class="h-[20px]" />
<span class="ml-[14px]">账户管理</span>
</div>
<div class="pr-[20px]">
<el-icon><ArrowRight /></el-icon>
</div>
</nuxt-link>
<nuxt-link to="/personal-Center/resource-center" class="flex items-center justify-between py-[14px]">
<div class="flex items-center pl-[20px]">

26
pages/personal-Center/index/account-bind.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div class="box-border w-auto border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px mt-10px">
<div class="flex flex-col justify-center text-[14px] text-[#333333] font-normal">
<div class="mt-[6px] flex items-center">
<img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
<div class="ml-[19px] w-50px">手机号</div>
<div class="ml-[100px] flex items-center"><div class="w-[90px]">手机号码：</div><div class="w-[180px]">xxx</div></div>
<div class="btn">绑定</div>
</div>
<div class="mt-[30px] flex items-center">
<img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
<div class="ml-[19px] w-50px">QQ</div>
<div class="ml-[100px] flex items-center"><div class="w-[90px]">QQ昵称：</div><div class="w-[180px]">xxx</div></div>
<div class="btn">绑定</div>
</div>
<div class="mt-[30px] flex items-center">
<img src="~/assets/images/weixin-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
<div class="ml-[19px] w-50px">微信</div>
<div class="ml-[95px] flex items-center"><div class="w-[90px]">微信昵称：</div><div class="w-[180px]">xxx</div></div>
<div class="btn">绑定</div>
</div>
</div>
</div>
</template>
<script setup lang="ts"></script>

18
pages/personal-Center/index/account-logout.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div class="box-border w-auto border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px mt-10px">
<el-button type="danger" @click="handleClick">注销账号</el-button>
</div>
</template>
<script setup lang="ts">
const handleClick = () => {
console.log('注销账号')
ElMessageBox.confirm('确定注销账号吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
console.log('注销账号')
})
}
</script>

18
pages/personal-Center/index/account-management.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div class="box-border w-913px border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px">
<el-tabs v-model="activeName" class="demo-tabs">
<el-tab-pane label="个人资料" name="个人资料">
<PersonalProfile />
</el-tab-pane>
<el-tab-pane label="账户安全" name="账户安全">
<AccountSecurityV2 />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script lang="ts" setup>
import AccountSecurityV2 from './account-security-v2.vue'
import PersonalProfile from './personal-profile.vue'
const activeName = ref('个人资料')
</script>

37
pages/personal-Center/index/account-security-v2.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<KlTabBar v-model="type" :data="tabBar" />
<div v-if="type === '修改密码'">
<AccountSecurity />
</div>
<div v-else-if="type === '账号绑定'">
<AccountBind />
</div>
<div v-else-if="type === '账号注销'">
<AccountLogout />
</div>
</template>
<script lang="ts" setup>
import KlTabBar from '~/components/kl-tab-bar/v2/index.vue'
import AccountSecurity from './account-security.vue'
import AccountBind from './account-bind.vue'
import AccountLogout from './account-logout.vue'
const tabBar = ref([
{
label: '修改密码',
value: '修改密码',
},
{
label: '账号绑定',
value: '账号绑定',
},
{
label: '账号注销',
value: '账号注销',
},
])
const type = ref('修改密码')
</script>
<style lang="scss" scoped></style>

10
pages/personal-Center/index/account-security.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="box-border w-913px border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px">
<el-tabs v-model="activeName" class="demo-tabs">
<el-tab-pane label="修改密码" name="修改密码">
<div class="box-border w-auto border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px mt-10px">
<!-- <el-tabs v-model="activeName" class="demo-tabs"> -->
<!-- <el-tab-pane label="修改密码" name="修改密码"> -->
<el-form ref="formRef" :model="form" label-width="120px" class="profile-form" autocomplete="off">
<el-form-item
label="手机号"
@ -46,9 +46,9 @@
<el-button type="primary" class="h-37px w-121px line-height-37px" @click="handleSave">保存</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<!-- </el-tab-pane> -->
<!-- <el-tab-pane label="登录设备管理" name="登录设备管理"> </el-tab-pane> -->
</el-tabs>
<!-- </el-tabs> -->
</div>
</template>

8
pages/personal-Center/index/personal-profile.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="box-border h-[782px] w-[913px] border border-[#EEEEEE] rounded-[6px] border-solid bg-[#FFFFFF] px-[30px] py-[21px]">
<div class="flex items-center justify-between border-b-[1px] border-b-[#eeeeee] border-b-solid pb-[18px]">
<div class="box-border h-[682px] w-[913px] border border-[#EEEEEE] rounded-[6px] border-solid bg-[#FFFFFF] px-[30px] py-[21px]">
<!-- <div class="flex items-center justify-between border-b-[1px] border-b-[#eeeeee] border-b-solid pb-[18px]">
<div class="text-[16px] text-[#333333] font-normal">个人资料</div>
<div class="flex items-center">
<!-- <img src="~/assets/images/fans.png" alt="" srcset="" /> -->
<img src="~/assets/images/fans.png" alt="" srcset="" />
<span class="ml-[8px] text-[14px] text-[#333333] font-normal"></span>
</div>
</div>
</div> -->
<div class="user-profile-container">
<div class="avatar-section">
<el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleAvatarChange">