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.
401 lines
8.4 KiB
401 lines
8.4 KiB
<template>
|
|
<view class="profile-container">
|
|
|
|
<!-- 基本资料 -->
|
|
<view class="section">
|
|
<view class="section-title">
|
|
<!-- 小竖线 -->
|
|
<view class="vertical-line"></view>
|
|
<view>
|
|
<text class="title-text">基本资料</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 头像 -->
|
|
<view class="avatar-section">
|
|
<button
|
|
class="avatar-button"
|
|
open-type="chooseAvatar"
|
|
@chooseavatar="onChooseAvatar"
|
|
>
|
|
<image
|
|
class="avatar"
|
|
:src="userInfo.headImage || '/static/待上传头像.png'"
|
|
mode="aspectFill"
|
|
></image>
|
|
</button>
|
|
<text class="avatar-tip">点击更换头像</text>
|
|
</view>
|
|
|
|
<!-- 昵称 -->
|
|
<view class="info-item">
|
|
<text class="label">真实姓名</text>
|
|
<view class="value-container">
|
|
<input
|
|
class="nickname-input"
|
|
v-model="userInfo.name"
|
|
placeholder="请输入"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">昵称</text>
|
|
<view class="value-container">
|
|
<input
|
|
class="nickname-input"
|
|
v-model="userInfo.nickName"
|
|
placeholder="请输入"
|
|
type="nickname"
|
|
@blur="onNicknameBlur"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 手机号 -->
|
|
<view class="info-item">
|
|
<text class="label">手机号</text>
|
|
<view class="value-container">
|
|
<input
|
|
class="phone-input"
|
|
v-model="userInfo.phone"
|
|
placeholder="请输入"
|
|
type="number"
|
|
maxlength="11"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 宿集区选择器 -->
|
|
<view class="info-item">
|
|
<text class="label">宿集区</text>
|
|
<view class="value-container">
|
|
|
|
<view class="picker-display" @click="showPicker">
|
|
<text class="picker-text" :class="{placeholder: !userInfo.area}">{{ userInfo.area || '请选择宿集区' }}</text>
|
|
<!-- <text class="picker-arrow">></text> -->
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="label">地址</text>
|
|
<view class="value-container">
|
|
<input
|
|
class="address-input"
|
|
v-model="userInfo.address"
|
|
:placeholder="configParamText('config_rubric')"
|
|
type="text"
|
|
maxlength="11"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 保存按钮 -->
|
|
<view class="save-section">
|
|
<button class="save-button" @click="saveProfile">
|
|
保存
|
|
</button>
|
|
</view>
|
|
<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'MyProfile',
|
|
data() {
|
|
return {
|
|
userInfo: {
|
|
headImage: '',
|
|
nickName: '',
|
|
phone: '',
|
|
address: '',
|
|
area: '',
|
|
name: ''
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
columns() {
|
|
return [[...this.$store.state.areaList?.map(item => item.title)]] || [[]]
|
|
}
|
|
},
|
|
methods: {
|
|
showPicker(){
|
|
this.$refs.picker.open()
|
|
},
|
|
confirm(e){
|
|
console.log('我是地区列表',this.columns);
|
|
|
|
// this.selectedAreaText = e.detail.value[0]
|
|
this.userInfo.area = e.value[0]
|
|
},
|
|
// 返回上一页
|
|
goBack() {
|
|
uni.navigateBack();
|
|
},
|
|
|
|
|
|
// 选择微信头像
|
|
async onChooseAvatar(e) {
|
|
console.log('选择头像回调', e);
|
|
if (e.detail.avatarUrl) {
|
|
const file = {
|
|
path: e.detail.avatarUrl
|
|
}
|
|
const res = await this.$utils.uploadImage(file)
|
|
this.userInfo.headImage = res.url
|
|
|
|
uni.showToast({
|
|
title: '头像更新成功',
|
|
icon: 'success'
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: '头像选择失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
|
|
// 昵称输入失焦验证
|
|
onNicknameBlur() {
|
|
if (!this.userInfo.nickName.trim()) {
|
|
uni.showToast({
|
|
title: '请输入昵称',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
|
|
// 保存资料
|
|
async saveProfile() {
|
|
// 验证昵称
|
|
if (!this.userInfo.nickName.trim()) {
|
|
uni.showToast({
|
|
title: '请输入昵称',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 验证手机号（如果填写了）
|
|
if (this.userInfo.phone && !/^1[3-9]\d{9}$/.test(this.userInfo.phone)) {
|
|
uni.showToast({
|
|
title: '请输入正确的手机号',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
|
|
const res = await this.$api.user.updateUser({
|
|
nickName: this.userInfo.nickName,
|
|
phone: this.userInfo.phone,
|
|
headImage: this.userInfo.headImage,
|
|
address: this.userInfo.address,
|
|
name: this.userInfo.name,
|
|
area: this.userInfo.area
|
|
})
|
|
if (res.code === 200) {
|
|
uni.showToast({
|
|
title: `${res.message}`,
|
|
icon: 'success'
|
|
});
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1000);
|
|
}
|
|
},
|
|
|
|
// 获取个人信息
|
|
async getUserInfo() {
|
|
const res = await this.$api.user.queryUser()
|
|
this.userInfo = {...this.userInfo, ...res.result}
|
|
}
|
|
},
|
|
onLoad() {
|
|
if (uni.getStorageSync('token')) {
|
|
this.getUserInfo();
|
|
}else {
|
|
uni.redirectTo({
|
|
url: '/subPages/login/login'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.profile-container {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.vertical-line {
|
|
width: 9rpx;
|
|
height: 33rpx;
|
|
background-color: #1488DB;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
// 自定义导航栏
|
|
.custom-navbar {
|
|
background: linear-gradient(90deg, #1488db 0%, #1488db 100%);
|
|
padding-top: var(--status-bar-height, 44rpx);
|
|
|
|
.navbar-content {
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
|
|
.navbar-left {
|
|
.back-icon {
|
|
font-size: 40rpx;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.navbar-title {
|
|
font-size: 36rpx;
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.navbar-right {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
|
|
.more-icon,
|
|
.settings-icon {
|
|
font-size: 32rpx;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.section {
|
|
margin: 20rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
.title-text {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 40rpx 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
.avatar-button {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
margin-bottom: 20rpx;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
|
|
.avatar {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 80rpx;
|
|
border: 4rpx dashed #cccccc;
|
|
}
|
|
}
|
|
|
|
.avatar-tip {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.label {
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
width: 120rpx;
|
|
}
|
|
|
|
.value-container {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
.nickname-input,
|
|
.phone-input,
|
|
.address-input {
|
|
width: 100%;
|
|
text-align: right;
|
|
font-size: 30rpx;
|
|
color: #666666;
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
|
|
&::placeholder {
|
|
color: #cccccc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.save-section {
|
|
padding: 40rpx 20rpx;
|
|
|
|
.save-button {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background-color: #1488db;
|
|
border-radius: 44rpx;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|