139 lines
3.8 KiB
Vue
139 lines
3.8 KiB
Vue
<script setup>
|
||
import { reactive } from 'vue'
|
||
import { useAuthUser } from '@/composables/useAuthUser'
|
||
import PopupBox from '../components/popup-box.vue'
|
||
import { chooseImage } from '@/utils/media.js'
|
||
import { uploadSingleFile } from '@/utils/uploadFile'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { navigateTo } from '../../../utils/router'
|
||
|
||
const { updateUserInfo } = useUserStore()
|
||
|
||
const itemList = [
|
||
{ title: '我的二维码', key: '1', value: '' },
|
||
// { title: 'ID', key: '2', value: 'userId' },
|
||
{ title: '昵称', key: '3', value: 'userName' },
|
||
{ title: '性别', key: '4', value: 'sex' },
|
||
{ title: '手机号码', key: '5', value: 'mobile' },
|
||
{ title: '个性签名', key: '6', value: 'perSignature' }
|
||
]
|
||
/** 可修改的 key */
|
||
const MODIFY_KEY = ['3', '4', '6']
|
||
|
||
const { userInfo } = useAuthUser()
|
||
|
||
const popupData = reactive({
|
||
show: false,
|
||
title: '修改信息',
|
||
name: '',
|
||
key: '',
|
||
value: ''
|
||
})
|
||
const formData = reactive({
|
||
avatar: '',
|
||
userName: '',
|
||
sex: '',
|
||
perSignature: ''
|
||
})
|
||
const upInfo = (key, value) => {
|
||
if (key === '1') {
|
||
navigateTo('/pages/my-index/qr-code/index')
|
||
return
|
||
}
|
||
if (MODIFY_KEY.includes(key)) {
|
||
const titleData = {
|
||
3: '昵称',
|
||
4: '性别',
|
||
6: '个性签名'
|
||
}[key]
|
||
popupData.value = value
|
||
popupData.key = key
|
||
popupData.title = titleData
|
||
popupData.name = userInfo.value[value]
|
||
popupData.show = true
|
||
return
|
||
}
|
||
}
|
||
|
||
const editAvatar = async () => {
|
||
const paths = await chooseImage({ count: 1 })
|
||
const url = await uploadSingleFile(paths[0], {
|
||
url: '/api/common/admin/upload/up/single'
|
||
})
|
||
formData.avatar = url
|
||
updateUserInfo({ avatar: url })
|
||
}
|
||
|
||
const onConfirm = () => {
|
||
if (MODIFY_KEY.includes(popupData.key)) {
|
||
if (popupData.name === userInfo.value[popupData.value]) return
|
||
if (popupData.name === '') return
|
||
updateUserInfo({ [popupData.value]: popupData.name })
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<nav-bar isTopBg isPlaceholder title="个人中心"></nav-bar>
|
||
<view class="personal-center">
|
||
<view class="public-card" @click="editAvatar">
|
||
<view class="left-img">
|
||
<image
|
||
v-if="userInfo.avatar"
|
||
:src="userInfo.avatar"
|
||
mode="aspectFill"
|
||
class="avatar"
|
||
></image>
|
||
<uni-icons v-else type="contact-filled" size="60"></uni-icons>
|
||
</view>
|
||
<view class="right-box">
|
||
<text class="value">换头像</text>
|
||
<uni-icons type="right" size="16" color="#999999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
v-for="(item, index) in itemList"
|
||
:key="index"
|
||
class="public-card"
|
||
@click="upInfo(item.key, item.value)"
|
||
>
|
||
<view class="left-box">
|
||
<text>{{ item.title }}</text>
|
||
<text v-if="item.key === '6'" class="text">
|
||
{{ userInfo[item.value] || '这个人很懒，什么也没有' }}
|
||
</text>
|
||
</view>
|
||
<view class="right-box">
|
||
<view v-if="!['1', '6'].includes(item.key)" class="value">
|
||
<text v-if="item.key === '4'">
|
||
{{
|
||
userInfo[item.value] === '2'
|
||
? '未设置'
|
||
: userInfo[item.value] === '0'
|
||
? '男'
|
||
: '女'
|
||
}}
|
||
</text>
|
||
<text v-else>{{ item.value ? userInfo[item.value] : '' }}</text>
|
||
</view>
|
||
<uni-icons type="right" size="16" color="#999999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<popup-box
|
||
v-model="popupData.show"
|
||
v-model:name="popupData.name"
|
||
:isSex="popupData.key === '4'"
|
||
:title="popupData.title"
|
||
@confirm="onConfirm"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../styles/index.scss';
|
||
.personal-center {
|
||
padding: 32rpx 24rpx;
|
||
}
|
||
</style>
|