<template>
|
<view class="edit-profile">
|
<view class="avatar-box">
|
<up-avatar :src="form.cover" size="80" @click="onChangeAvatar" />
|
</view>
|
|
<up-cell-group :border="false" :customStyle="cellGroupStyle">
|
<up-cell title="名字" isLink @click="editField('名称')">
|
<template #value>
|
<view class="cell-value">{{ form.name }}</view>
|
</template>
|
</up-cell>
|
</up-cell-group>
|
|
<up-cell-group :border="false" :customStyle="cellGroupStyle">
|
<up-cell title="简介" isLink @click="editField('简介')">
|
<template #value>
|
<view class="cell-value">{{ form.description }}</view>
|
</template>
|
</up-cell>
|
</up-cell-group>
|
|
<up-cell-group :border="false" :customStyle="cellGroupStyle">
|
<up-cell title="性别" isLink @click="selectGender">
|
<template #value>
|
<view class="cell-value">{{ form.gender || '未选择' }}</view>
|
</template>
|
</up-cell>
|
<up-cell title="地区" isLink @click="selectRegion">
|
<template #value>
|
<view class="cell-value">{{ form.address }}</view>
|
</template>
|
</up-cell>
|
</up-cell-group>
|
|
<view class="save-btn">
|
<up-button type="primary" shape="circle" text="保存" @click="onSave" />
|
</view>
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { ref,onMounted } from 'vue';
|
import { useGlobal } from '@/composables/useGlobal'
|
import { useUserStore } from '@/store/user'
|
const { $http, $message, $store } = useGlobal()
|
|
const cellGroupStyle = 'background-color: #ffffff; margin-bottom: 20rpx; border-radius: 16rpx;'
|
const userStore = useUserStore()
|
const form = ref({
|
id: '',
|
cover: '',
|
name: '',
|
description: '',
|
gender: '',
|
address: '',
|
});
|
|
|
const onChangeAvatar = () => {
|
uni.chooseImage({
|
count: 1,
|
success: (res) => {
|
form.value.cover = res.tempFilePaths[0];
|
}
|
});
|
};
|
|
// const editField = (field: string) => {
|
// uni.showModal({
|
// title: `编辑${field}`,
|
// content: '',
|
// placeholderText: `请输入${field}`,
|
// editable: true,
|
// success: (res) => {
|
// if (res.confirm && res.content) {
|
// form.value[field] = res.content;
|
// }
|
// },
|
// });
|
// };
|
const editField = (field: string) => {
|
// 创建字段映射关系
|
const fieldMap: Record<string, keyof typeof form.value> = {
|
'名称': 'name',
|
'简介': 'description'
|
};
|
|
const fieldName = fieldMap[field];
|
if (!fieldName) {
|
$message.showToast('不支持的字段');
|
return;
|
}
|
|
uni.showModal({
|
title: `编辑${field}`,
|
content: form.value[fieldName], // 显示当前值
|
placeholderText: `请输入${field}`,
|
editable: true,
|
success: (res) => {
|
if (res.confirm && res.content) {
|
form.value[fieldName] = res.content;
|
}
|
},
|
});
|
};
|
|
|
const selectGender = () => {
|
uni.showActionSheet({
|
itemList: ['男', '女'],
|
success: (res) => {
|
form.value.gender = res.tapIndex === 0 ? '男' : '女';
|
}
|
});
|
};
|
|
|
|
const selectRegion = () => {
|
uni.chooseLocation({
|
success: (res) => {
|
form.value.address = res.address;
|
}
|
});
|
};
|
|
|
const onSave = async () => {
|
try {
|
// 构造请求体，排除 id 字段
|
const updatedUserInfo = {
|
id: form.value.id,
|
cover: form.value.cover,
|
description: form.value.description,
|
name: form.value.name,
|
gender: form.value.gender,
|
address: form.value.address,
|
};
|
// 调用后端 API 更新用户信息
|
const {code, data} = await $http.request('post', '/api/customer/addOrUpdate', {
|
data: updatedUserInfo
|
});
|
|
if (code === 0) {
|
$message.showToast('资料已保存');
|
|
// 更新 store 中的用户信息
|
await userStore.getCurrentInfo();
|
} else {
|
$message.showToast('保存失败：' + (data?.msg || '未知错误'));
|
}
|
} catch (error) {
|
console.error('保存用户信息失败', error)
|
$message.showToast('保存用户信息失败')
|
}
|
};
|
|
|
onMounted(async () => {
|
// 正确获取store实例
|
if (!userStore.userInfo) {
|
await userStore.getCurrentInfo();
|
}
|
const userInfo = userStore.userInfo?.customerDTO;
|
console.log("开始处理用户数据")
|
if (userInfo) {
|
form.value = {
|
id: userInfo.id,
|
cover: userInfo.cover || 'https://cdn.uviewui.com/uview/album/1.jpg',
|
name: userInfo.name || '影游四方',
|
description: userInfo.description || '介绍一下自己',
|
gender: userInfo.gender || '女',
|
address: userInfo.address || '选择所在的地区'
|
};
|
}
|
|
})
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
.cell-value {
|
// text-align: center;
|
text-align: left;
|
width: 60%;
|
}
|
|
.edit-profile {
|
background-color: #f7f7f7;
|
min-height: 100vh;
|
padding: 20rpx;
|
|
.avatar-box {
|
display: flex;
|
justify-content: center;
|
// margin: 40rpx 0;
|
}
|
|
.bg-img {
|
width: 120rpx;
|
height: 80rpx;
|
border-radius: 12rpx;
|
}
|
|
.save-btn {
|
padding: 40rpx;
|
}
|
}
|
</style>
|
