wangxiaowei/chazhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善页面

Browse Source
This commit is contained in:
wangxiaowei
2025-11-28 19:19:54 +08:00
parent 58211f2430
commit 67c8e8e016
43 changed files with 2722 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/bundle/profile/profile.vue
View File

@ -1,5 +1,6 @@
<route lang="jsonc" type="page">
{
"needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"
@ -9,65 +10,6 @@
<template>
<view class="">
<view class="">
<navbar title="个人信息" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="bg-white rounded-16rpx mt-20rpx mx-30rpx px-30rpx py-32rpx">
<!-- 头像 -->
<view class="flex justify-between items-center mb-54rpx">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">头像</view>
<view class="flex justify-end">
<view class="flex items-center">
<view class="mr-10rpx">
<wd-upload
:file-list="fileList"
:limit="1"
image-mode="scaleToFill"
:action="action">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
</wd-upload>
</view>
<wd-icon name="arrow-right" size="32rpx" color="#C0C4CC" />
</view>
</view>
</view>
<!-- 昵称 -->
<view class="flex justify-between items-center mb-54rpx" @click="showEditNicknamePopup = true">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">昵称</view>
<view class="flex justify-end">
<view class="flex items-center">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">
王小伟
</view>
<view>
<wd-icon name="arrow-right" size="32rpx" color="#C0C4CC" />
</view>
</view>
</view>
</view>
<!-- 修改手机号 -->
<view class="flex justify-between items-center" @click="profile.handleToEditMobile">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">修改手机号</view>
<view class="flex justify-end">
<view class="flex items-center">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">
+86 155****5456
</view>
<view>
<wd-icon name="arrow-right" size="32rpx" color="#C0C4CC" />
</view>
</view>
</view>
</view>
</view>
<view class="bg-white rounded-16rpx mt-144rpx mx-30rpx px-30rpx py-32rpx text-center font-400 text-[#303133] text-30rpx leading-42rpx" @click="showLogoutPopup = true">
退出登录
</view>
<!-- 修改昵称 -->
<wd-popup v-model="showEditNicknamePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pb-56rpx">
@ -96,7 +38,7 @@
<view class="mt-22rpx text-26rpx leading-36rpx text-[#909399] mx-48rpx">昵称限制1-10字符，一个汉字为一个字符</view>
<view class="mx-48rpx h-90rpx leading-90rpx rounded-8rpx text-center mt-112rpx text-[#fff]" :class="nickname ? 'bg-[#4C9F44]' : 'bg-[#A5CFA1]'" @click="profile.handleSaveNickname">保存</view>
<view class="mx-48rpx h-90rpx leading-90rpx rounded-8rpx text-center mt-112rpx text-[#fff]" :class="nickname ? 'bg-[#4C9F44]' : 'bg-[#A5CFA1]'" @click="Profile.handleSaveNickname">保存</view>
</view>
</wd-popup>
@ -105,7 +47,7 @@
<view class="relative pt-54rpx pb-74rpx">
<view class="text-[#303133] text-36rpx leading-46rpx text-center">您确定要退出该账号吗？</view>
<view class="mt-76rpx">
<view class="bg-[#4C9F44] h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center text-[#fff]" @click="profile.handleLogout">
<view class="bg-[#4C9F44] h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center text-[#fff]" @click="Profile.handleLogout">
退出登录
</view>
@ -116,12 +58,75 @@
</view>
</view>
</wd-popup>
<view>
<navbar title="个人信息" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view class="bg-white rounded-16rpx mt-20rpx mx-30rpx px-30rpx py-32rpx">
<!-- 头像 -->
<view class="flex justify-between items-center mb-54rpx">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">头像</view>
<view class="flex justify-end">
<view class="flex items-center">
<view class="mr-10rpx">
<wd-upload
:file-list="fileList"
:limit="1"
image-mode="scaleToFill"
:action="action">
<wd-img width="64rpx" height="64rpx" :src="user.avatar" mode="aspectFill" round />
</wd-upload>
</view>
<wd-icon name="arrow-right" size="32rpx" color="#C0C4CC" />
</view>
</view>
</view>
<!-- 昵称 -->
<view class="flex justify-between items-center mb-54rpx" @click="showEditNicknamePopup = true">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">昵称</view>
<view class="flex justify-end">
<view class="flex items-center">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">
{{ user.nickname }}
</view>
<view>
<wd-icon name="arrow-right" size="32rpx" color="#C0C4CC" />
</view>
</view>
</view>
</view>
<!-- 修改手机号 -->
<view class="flex justify-between items-center" @click="Profile.handleToEditMobile">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">修改手机号</view>
<view class="flex justify-end">
<view class="flex items-center">
<view class="font-400 text-[#303133] text-30rpx leading-42rpx">
+86 {{ maskedMobile }}
</view>
<view>
<wd-icon name="arrow-right" size="32rpx" color="#C0C4CC" />
</view>
</view>
</view>
</view>
</view>
<view class="bg-white rounded-16rpx mt-144rpx mx-30rpx px-30rpx py-32rpx text-center font-400 text-[#303133] text-30rpx leading-42rpx" @click="showLogoutPopup = true">
退出登录
</view>
</view>
</template>
<script lang="ts" setup>
import {toast} from '@/utils/toast'
import { getUserInfo } from '@/api/user'
import type { IUserResult } from '@/api/types/user'
import { useUserStore } from '@/store'
import { router } from '@/utils/tools'
const OSS = inject('OSS')
const showLogoutPopup = ref<boolean>(false) // 是否显示退出登录弹出框
@ -133,14 +138,52 @@
// 修改昵称
const showEditNicknamePopup = ref<boolean>(false) // 是否显示退款详情弹出框
const nickname = ref<string>('') // 昵称
// 用户信息相关
const user = ref<IUserResult>({
id: 0,
sn: 0,
sex: "未知",
account: "",
nickname: "",
real_name: "",
avatar: "",
collect_count: 0,
coupon_count: 0,
create_time: "",
has_auth: false,
has_password: false,
member: 0,
mobile: "",
user_money: "0.00",
version: ""
})
onLoad(() => {
Profile.handleInit()
})
const profile = {
// 图片选择/删除
const Profile = {
/**
* 初始化用户信息
*/
handleInit: () => {
getUserInfo().then(res => {
user.value = res
})
},
/**
* 图片选择/删除
* @param e
*/
handleChange: (e: any) => {
console.log("🚀 ~ e:", e)
},
// 保存昵称
/**
* 保存昵称
*/
handleSaveNickname: () => {
if (!nickname.value) {
toast.info('请输入昵称')
@ -150,18 +193,36 @@
toast.info('昵称修改成功')
},
// 修改手机号
/**
* 修改手机号
*/
handleToEditMobile: () => {
uni.navigateTo({
url: '/pages/login/mobile?type=edit&userId=123' // userId仅做测试使用，实际请传真实用户ID
})
},
// 退出
/**
* 退出
*/
handleLogout: () => {
const userStore = useUserStore()
userStore.logout()
if (!userStore.isLoggedIn) {
toast.info('退出成功')
router.reLaunch('/pages/my/my')
}
}
}
/**
* 掩码处理手机号
*/
const maskedMobile = computed(() => {
if (!user.value.mobile) return ''
// 只处理11位手机号
return user.value.mobile.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
})
</script>
<style lang="scss">