You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
279 lines
5.8 KiB
279 lines
5.8 KiB
<template>
|
|
<view class="profile-page">
|
|
|
|
|
|
<view class="profile-content">
|
|
<!-- 头像上传区域 -->
|
|
<view class="avatar-section">
|
|
<!-- 基本资料标签 -->
|
|
<view class="profile-label">
|
|
<text class="label-text">基本资料</text>
|
|
</view>
|
|
|
|
<view class="avatar-container" @click="uploadAvatar">
|
|
<image
|
|
v-if="userInfo.headImage"
|
|
:src="userInfo.headImage"
|
|
class="avatar-image"
|
|
mode="aspectFill"
|
|
/>
|
|
<view v-else class="avatar-placeholder">
|
|
<image src="@/static/待上传头像.png" class="placeholder-image" mode="aspectFit" />
|
|
</view>
|
|
</view>
|
|
<text class="avatar-tip">点击更换头像</text>
|
|
</view>
|
|
|
|
<!-- 表单区域 -->
|
|
<view class="form-section">
|
|
<!-- 昵称 -->
|
|
<view class="form-item">
|
|
<text class="form-label">昵称</text>
|
|
<uv-input
|
|
v-model="userInfo.nickName"
|
|
placeholder="请输入"
|
|
border="none"
|
|
class="form-input"
|
|
></uv-input>
|
|
</view>
|
|
|
|
<!-- 手机号 -->
|
|
<view class="form-item">
|
|
<text class="form-label">手机号</text>
|
|
<uv-input
|
|
v-model="userInfo.phone"
|
|
placeholder="请输入"
|
|
border="none"
|
|
class="form-input"
|
|
></uv-input>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 保存按钮 -->
|
|
<view class="save-section">
|
|
<uv-button
|
|
type="primary"
|
|
text="保存"
|
|
@click="saveProfile"
|
|
:custom-style="saveButtonStyle"
|
|
></uv-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {
|
|
headImage: '',
|
|
nickName: '',
|
|
phone: ''
|
|
},
|
|
saveButtonStyle: {
|
|
backgroundColor: '#C70019',
|
|
borderRadius: '41rpx',
|
|
height: '94rpx',
|
|
width: '594rpx',
|
|
border: 'none'
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 返回上一页
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
|
|
// 上传头像
|
|
async uploadAvatar() {
|
|
try {
|
|
const result = await this.$utils.chooseAndUpload()
|
|
if (result && result.success) {
|
|
console.log(result);
|
|
|
|
this.userInfo.headImage = result.url
|
|
}
|
|
} catch (error) {
|
|
console.error('头像上传失败:', error)
|
|
uni.showToast({
|
|
title: '头像上传失败',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
|
|
},
|
|
|
|
// 保存资料
|
|
async saveProfile() {
|
|
if (!this.userInfo.nickName.trim()) {
|
|
uni.showToast({
|
|
title: '请输入昵称',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!this.userInfo.phone.trim()) {
|
|
uni.showToast({
|
|
title: '请输入手机号',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
// 简单的手机号验证
|
|
const phoneReg = /^1[3-9]\d{9}$/
|
|
if (!phoneReg.test(this.userInfo.phone)) {
|
|
uni.showToast({
|
|
title: '请输入正确的手机号',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
// TODO: 调用API保存用户信息
|
|
const res = await this.$api.user.updateUser({
|
|
headImage: this.userInfo.headImage,
|
|
nickName: this.userInfo.nickName,
|
|
phone: this.userInfo.phone
|
|
})
|
|
if (res.code === 200) {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
// 延迟返回上一页
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1500)
|
|
}
|
|
},
|
|
|
|
// 获取个人信息
|
|
async getProfile() {
|
|
const res = await this.$api.user.queryUser()
|
|
if (res.code === 200) {
|
|
this.userInfo = res.result
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getProfile()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.profile-page {
|
|
min-height: 100vh;
|
|
// background-color: #f5f5f5;
|
|
}
|
|
|
|
.profile-content {
|
|
padding:45rpx 32rpx;
|
|
}
|
|
|
|
.avatar-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 80rpx;
|
|
position: relative;
|
|
|
|
.profile-label {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 28rpx;
|
|
z-index: 10;
|
|
|
|
.label-text {
|
|
font-size: 30rpx;
|
|
// font-weight: bold;
|
|
color: $primary-text-color;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -16rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 9rpx;
|
|
height: 33rpx;
|
|
background-color: $primary-color;
|
|
border-radius: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-container {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-bottom: 20rpx;
|
|
margin-top: 66rpx;
|
|
|
|
.avatar-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.avatar-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f0f0f0;
|
|
|
|
.placeholder-image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-tip {
|
|
font-size: 28rpx;
|
|
color: $secondary-text-color;
|
|
}
|
|
}
|
|
|
|
.form-section {
|
|
// background-color: #fff;
|
|
// border-radius: 16rpx;
|
|
padding: 0 32rpx;
|
|
margin-bottom: 500rpx;
|
|
|
|
.form-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 40rpx 0;
|
|
border-bottom: 0.5rpx solid #f0f0f0;
|
|
|
|
|
|
|
|
.form-label {
|
|
font-size: 30rpx;
|
|
color: $secondary-text-color;
|
|
width: 120rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.form-input {
|
|
flex: 1;
|
|
margin-left: 40rpx;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.save-section {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style>
|