<template>
|
<view class="edit-profile">
|
<view class="avatar-box">
|
<up-avatar :src="form.avatar" size="80" @click="onChangeAvatar" />
|
</view>
|
|
<up-cell-group :border="false" :customStyle="cellGroupStyle">
|
<up-cell title="名字" isLink @click="editField('nickname')">
|
<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>
|
</template>
|
</up-cell>
|
</up-cell-group>
|
|
<up-cell-group :border="false" :customStyle="cellGroupStyle">
|
<up-cell title="简介" isLink @click="editField('intro')">
|
<template #value>
|
<view class="cell-value">{{ form.intro }}</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>
|
</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>
|
</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 } from 'vue';
|
import { useGlobal } from '@/composables/useGlobal'
|
const { $http, $message, $store } = useGlobal()
|
|
const cellGroupStyle = 'background-color: #ffffff; margin-bottom: 20rpx; border-radius: 16rpx;'
|
|
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: '选择学校'
|
});
|
|
const onPreview = () => {
|
$message.showToast('预览功能暂未实现');
|
};
|
|
const onChangeAvatar = () => {
|
$message.showToast('更换头像');
|
};
|
|
const onChangeBackground = () => {
|
$message.showToast('更换背景图');
|
};
|
|
const editField = (field: string) => {
|
$message.showToast(`编辑字段: ${field}`);
|
};
|
|
const selectGender = () => {
|
$message.showToast('选择性别');
|
};
|
|
const selectBirthday = () => {
|
$message.showToast('选择生日');
|
};
|
|
const selectRegion = () => {
|
$message.showToast('选择地区');
|
};
|
|
const selectJob = () => {
|
$message.showToast('选择职业');
|
};
|
|
const onSave = () => {
|
$message.showToast('资料已保存');
|
};
|
</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>
|
