|
|
|
|
@ -1,22 +1,33 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { getMemberProfileAPI, putMemberProfileAPI } from '@/services/profile'
|
|
|
|
|
import { getMemberProfileAPI, postMemberProfileAPI } from '@/services/profile'
|
|
|
|
|
import { useMemberStore } from '@/stores'
|
|
|
|
|
import type { Gender, ProfileDetail } from '@/types/member'
|
|
|
|
|
import type { Gender } from '@/types/member'
|
|
|
|
|
import { formatDate } from '@/utils'
|
|
|
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
|
|
|
import { computed, ref } from 'vue'
|
|
|
|
|
// 获取屏幕边界到安全区域距离
|
|
|
|
|
const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
|
|
|
const isDev = import.meta.env.DEV
|
|
|
|
|
|
|
|
|
|
const domain = isDev ? 'http://192.168.0.166:8808' : 'http://222.71.165.188:8808'
|
|
|
|
|
|
|
|
|
|
// 获取个人信息，修改个人信息需提供初始值
|
|
|
|
|
const profile = ref({} as ProfileDetail)
|
|
|
|
|
const profile = ref({})
|
|
|
|
|
const headIcon = ref()
|
|
|
|
|
const getMemberProfileData = async () => {
|
|
|
|
|
const res = await getMemberProfileAPI()
|
|
|
|
|
profile.value = res.result
|
|
|
|
|
const obj = res.data
|
|
|
|
|
const avatar = domain + JSON.parse(obj.headIcon).url
|
|
|
|
|
profile.value = {
|
|
|
|
|
avatar,
|
|
|
|
|
gender: obj.gender + '',
|
|
|
|
|
mobilePhone: obj.mobilePhone,
|
|
|
|
|
nickName: obj.nickName,
|
|
|
|
|
birthday: obj.birthday?.slice(0, 10),
|
|
|
|
|
}
|
|
|
|
|
// 同步 Store 的头像和昵称，用于我的页面展示
|
|
|
|
|
memberStore.profile!.avatar = res.result.avatar
|
|
|
|
|
memberStore.profile!.nickname = res.result.nickname
|
|
|
|
|
memberStore.profile!.avatar = avatar
|
|
|
|
|
memberStore.profile!.nickname = obj.nickname
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onLoad(() => {
|
|
|
|
|
@ -26,23 +37,6 @@ onLoad(() => {
|
|
|
|
|
const memberStore = useMemberStore()
|
|
|
|
|
// 修改头像
|
|
|
|
|
const onAvatarChange = () => {
|
|
|
|
|
// 调用拍照/选择图片
|
|
|
|
|
// 选择图片条件编译
|
|
|
|
|
// #ifdef H5 || APP-PLUS
|
|
|
|
|
// 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替
|
|
|
|
|
uni.chooseImage({
|
|
|
|
|
count: 1,
|
|
|
|
|
success: (res) => {
|
|
|
|
|
// 文件路径
|
|
|
|
|
const tempFilePaths = res.tempFilePaths
|
|
|
|
|
// 上传
|
|
|
|
|
uploadFile(tempFilePaths[0])
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
// #endif
|
|
|
|
|
|
|
|
|
|
// #ifdef MP-WEIXIN
|
|
|
|
|
// uni.chooseMedia 仅支持微信小程序端
|
|
|
|
|
uni.chooseMedia({
|
|
|
|
|
// 文件个数
|
|
|
|
|
count: 1,
|
|
|
|
|
@ -55,23 +49,23 @@ const onAvatarChange = () => {
|
|
|
|
|
uploadFile(tempFilePath)
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
// #endif
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 文件上传-兼容小程序端、H5端、App端
|
|
|
|
|
// 文件上传
|
|
|
|
|
const uploadFile = (file: string) => {
|
|
|
|
|
// 文件上传
|
|
|
|
|
uni.uploadFile({
|
|
|
|
|
url: '/member/profile/avatar',
|
|
|
|
|
url: '/file/uploadImg',
|
|
|
|
|
name: 'file',
|
|
|
|
|
filePath: file,
|
|
|
|
|
success: (res) => {
|
|
|
|
|
if (res.statusCode === 200) {
|
|
|
|
|
const avatar = JSON.parse(res.data).result.avatar
|
|
|
|
|
headIcon.value = JSON.stringify(JSON.parse(res.data).data)
|
|
|
|
|
const avatar = JSON.parse(res.data).data.url
|
|
|
|
|
// 个人信息页数据更新
|
|
|
|
|
profile.value.avatar = avatar
|
|
|
|
|
const imgUrl = domain + avatar
|
|
|
|
|
profile.value.avatar = imgUrl
|
|
|
|
|
// Store头像更新
|
|
|
|
|
memberStore.profile!.avatar = avatar
|
|
|
|
|
memberStore.profile!.avatar = imgUrl
|
|
|
|
|
uni.showToast({ icon: 'success', title: '更新成功' })
|
|
|
|
|
} else {
|
|
|
|
|
uni.showToast({ icon: 'error', title: '出现错误' })
|
|
|
|
|
@ -90,29 +84,18 @@ const onBirthdayChange: UniHelper.DatePickerOnChange = (ev) => {
|
|
|
|
|
profile.value.birthday = ev.detail.value
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 修改城市
|
|
|
|
|
let fullLocationCode: [string, string, string] = ['', '', '']
|
|
|
|
|
const onFullLocationChange: UniHelper.RegionPickerOnChange = (ev) => {
|
|
|
|
|
// 修改前端界面
|
|
|
|
|
profile.value.fullLocation = ev.detail.value.join(' ')
|
|
|
|
|
// 提交后端更新
|
|
|
|
|
fullLocationCode = ev.detail.code!
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 点击保存提交表单
|
|
|
|
|
const onSubmit = async () => {
|
|
|
|
|
const { nickname, gender, birthday, profession } = profile.value
|
|
|
|
|
const res = await putMemberProfileAPI({
|
|
|
|
|
const { nickname, gender, birthday } = profile.value
|
|
|
|
|
const params = {
|
|
|
|
|
headIcon: headIcon.value,
|
|
|
|
|
nickname,
|
|
|
|
|
gender,
|
|
|
|
|
birthday,
|
|
|
|
|
profession,
|
|
|
|
|
provinceCode: fullLocationCode[0] || undefined,
|
|
|
|
|
cityCode: fullLocationCode[1] || undefined,
|
|
|
|
|
countyCode: fullLocationCode[2] || undefined,
|
|
|
|
|
})
|
|
|
|
|
birthday: birthday + ' ' + '00:00:01',
|
|
|
|
|
}
|
|
|
|
|
const res = await postMemberProfileAPI(params)
|
|
|
|
|
// 更新Store昵称
|
|
|
|
|
memberStore.profile!.nickname = res.result.nickname
|
|
|
|
|
memberStore.profile!.nickname = nickname
|
|
|
|
|
uni.showToast({ icon: 'success', title: '保存成功' })
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
uni.navigateBack()
|
|
|
|
|
@ -140,7 +123,7 @@ const onSubmit = async () => {
|
|
|
|
|
<view class="form-content">
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<text class="label">账号</text>
|
|
|
|
|
<text class="account placeholder">{{ profile?.account }}</text>
|
|
|
|
|
<text class="account placeholder">{{ profile?.mobilePhone }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<text class="label">昵称</text>
|
|
|
|
|
@ -150,11 +133,11 @@ const onSubmit = async () => {
|
|
|
|
|
<text class="label">性别</text>
|
|
|
|
|
<radio-group @change="onGenderChange">
|
|
|
|
|
<label class="radio">
|
|
|
|
|
<radio value="男" color="#3775F6" :checked="profile?.gender === '男'" />
|
|
|
|
|
<radio value="1" color="#3271E5" :checked="profile?.gender === '男'" />
|
|
|
|
|
男
|
|
|
|
|
</label>
|
|
|
|
|
<label class="radio">
|
|
|
|
|
<radio value="女" color="#3775F6" :checked="profile?.gender === '女'" />
|
|
|
|
|
<radio value="2" color="#3271E5" :checked="profile?.gender === '女'" />
|
|
|
|
|
女
|
|
|
|
|
</label>
|
|
|
|
|
</radio-group>
|
|
|
|
|
@ -173,25 +156,6 @@ const onSubmit = async () => {
|
|
|
|
|
<view class="placeholder" v-else>请选择日期</view>
|
|
|
|
|
</picker>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- 只有微信小程序端内置了省市区数据 -->
|
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<text class="label">城市</text>
|
|
|
|
|
<picker
|
|
|
|
|
@change="onFullLocationChange"
|
|
|
|
|
mode="region"
|
|
|
|
|
class="picker"
|
|
|
|
|
:value="profile?.fullLocation?.split(' ')"
|
|
|
|
|
>
|
|
|
|
|
<view v-if="profile?.fullLocation">{{ profile.fullLocation }}</view>
|
|
|
|
|
<view class="placeholder" v-else>请选择城市</view>
|
|
|
|
|
</picker>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- #endif -->
|
|
|
|
|
<view class="form-item">
|
|
|
|
|
<text class="label">职业</text>
|
|
|
|
|
<input class="input" type="text" placeholder="请填写职业" v-model="profile.profession" />
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- 提交按钮 -->
|
|
|
|
|
<button @tap="onSubmit" class="form-button">保 存</button>
|
|
|
|
|
@ -208,7 +172,7 @@ page {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
|
|
|
|
|
background: linear-gradient(158deg, #51B6FF -10%, #3775F6 129%);
|
|
|
|
|
background-size: auto 420rpx;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
@ -328,4 +292,5 @@ page {
|
|
|
|
|
background: linear-gradient(158deg, #51B6FF -10%, #3775F6 129%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</style>import type { parse } from 'path'
|
|
|
|
|
|
|
|
|
|
|
王文杰
8 months ago