| | |
| | | <template> |
| | | <view class="edit-profile"> |
| | | <view class="avatar-box"> |
| | | <up-avatar :src="form.avatar" size="80" @click="onChangeAvatar" /> |
| | | <up-avatar :src="form.cover" size="80" @click="onChangeAvatar" /> |
| | | </view> |
| | | |
| | | <up-cell-group :border="false" :customStyle="cellGroupStyle"> |
| | | <up-cell title="名字" isLink @click="editField('nickname')"> |
| | | <up-cell title="名字" isLink @click="editField('名称')"> |
| | | <template #value> |
| | | <view class="cell-value">{{ form.nickname }}</view> |
| | | </template> |
| | | </up-cell> |
| | | <up-cell title="小红书号" isLink @click="editField('xhsId')"> |
| | | <template #value> |
| | | <view class="cell-value">{{ form.xhsId }}</view> |
| | | </template> |
| | | </up-cell> |
| | | <up-cell title="背景图" isLink @click="editField('backgroundImg')"> |
| | | <template #value> |
| | | <view class="cell-value"> |
| | | <image class="bg-img" :src="form.backgroundImg" mode="aspectFill" @click="onChangeBackground" /> |
| | | </view> |
| | | <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('intro')"> |
| | | <up-cell title="简介" isLink @click="editField('简介')"> |
| | | <template #value> |
| | | <view class="cell-value">{{ form.intro }}</view> |
| | | <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="selectBirthday"> |
| | | <template #value> |
| | | <view class="cell-value">{{ form.birthday }}</view> |
| | | <view class="cell-value">{{ form.gender || '未选择' }}</view> |
| | | </template> |
| | | </up-cell> |
| | | <up-cell title="地区" isLink @click="selectRegion"> |
| | | <template #value> |
| | | <view class="cell-value">{{ form.region }}</view> |
| | | </template> |
| | | </up-cell> |
| | | <up-cell title="职业" isLink @click="selectJob"> |
| | | <template #value> |
| | | <view class="cell-value">{{ form.job }}</view> |
| | | </template> |
| | | </up-cell> |
| | | <up-cell title="学校" isLink @click="editField('school')"> |
| | | <template #value> |
| | | <view class="cell-value">{{ form.school }}</view> |
| | | <view class="cell-value">{{ form.address }}</view> |
| | | </template> |
| | | </up-cell> |
| | | </up-cell-group> |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { ref } from 'vue'; |
| | | 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({ |
| | | avatar: 'https://cdn.uviewui.com/uview/album/1.jpg', |
| | | nickname: '小红薯6786F040', |
| | | xhsId: '95619601810', |
| | | backgroundImg: 'https://smart-manager-new.tos-cn-beijing.volces.com/sms/avatar/avatar.png', |
| | | intro: '介绍一下自己', |
| | | gender: '女', |
| | | birthday: '选择生日', |
| | | region: '选择所在的地区', |
| | | job: '选择职业', |
| | | school: '选择学校' |
| | | id: '', |
| | | cover: '', |
| | | name: '', |
| | | description: '', |
| | | gender: '', |
| | | address: '', |
| | | }); |
| | | |
| | | const onPreview = () => { |
| | | $message.showToast('预览功能暂未实现'); |
| | | }; |
| | | |
| | | const onChangeAvatar = () => { |
| | | $message.showToast('更换头像'); |
| | | uni.chooseImage({ |
| | | count: 1, |
| | | success: (res) => { |
| | | form.value.cover = res.tempFilePaths[0]; |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const onChangeBackground = () => { |
| | | $message.showToast('更换背景图'); |
| | | }; |
| | | |
| | | // 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) => { |
| | | $message.showToast(`编辑字段: ${field}`); |
| | | // 创建字段映射关系 |
| | | 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 = () => { |
| | | $message.showToast('选择性别'); |
| | | uni.showActionSheet({ |
| | | itemList: ['男', '女'], |
| | | success: (res) => { |
| | | form.value.gender = res.tapIndex === 0 ? '男' : '女'; |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const selectBirthday = () => { |
| | | $message.showToast('选择生日'); |
| | | }; |
| | | |
| | | |
| | | const selectRegion = () => { |
| | | $message.showToast('选择地区'); |
| | | uni.chooseLocation({ |
| | | success: (res) => { |
| | | form.value.address = res.address; |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const selectJob = () => { |
| | | $message.showToast('选择职业'); |
| | | |
| | | 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('保存用户信息失败') |
| | | } |
| | | }; |
| | | |
| | | const onSave = () => { |
| | | $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> |