teambuy-front/pages_order/mine/updateUser.vue

<template>
	<view class="profile-page">
		<!-- 头部导航栏 -->
		<navbar title="资料修改" bgColor="#019245" color="#fff" leftClick @leftClick="$utils.navigateBack" />


		<!-- 基本资料区域 -->
		<view class="main-content">
			<view class="section-title">
				<view class="title-indicator"></view>
				<text>基本资料</text>
			</view>

			<!-- 头像选择区域 -->
			<view class="avatar-section">
				<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar-img" :src="form.headImage" mode="aspectFill" />
					<!-- <image class="avatar-img" src="https://img.yzcdn.cn/vant/ipad.png" mode="aspectFill"></image> -->
				</button>
				<text class="avatar-hint">点击更换头像</text>
			</view>

			<!-- 表单区域 -->
			<view class="form-section">
				<view class="form-item">
					<text class="label">昵称</text>
					<input class="input" type="nickname" placeholder="请输入" v-model="form.nickName" id="nickName"
						placeholderStyle="color: #999; text-align: right;" />
				</view>

				<view class="form-item">
					<text class="label">手机号</text>
					<input class="input" type="tel" placeholder="请输入" v-model="form.phone"
						placeholderStyle="color: #999; text-align: right;" />
				</view>
			</view>

			<!-- 保存按钮 -->
			<view class="save-button" @tap="submit">
				<text>保存</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import { mockUserInfo } from '@/static/js/mockUserInfo.js'
import navbar from '@/components/base/navbar.vue'

export default {
	components: {
		navbar
	},
	data() {
		return {
			form: {
				headImage: '',
				nickName: '',
				phone: ''
			},
			back: '',
		}
	},
	computed: {
		...mapState(['userInfo']),
	},
	onLoad({ back }) {
		this.back = back
	},
	onShow() {
		this.getUserInfo()
	},
	methods: {
		onChooseAvatar(res) {
			let self = this
			self.$Oss.ossUpload(res.detail.avatarUrl)
				.then(url => {
					self.form.headImage = url
				})
		},
		getUserInfo() {
			// 使用mock数据
			this.form.headImage = this.userInfo.headImage || this.form.headImage
			this.form.nickName = this.userInfo.nickName || this.form.nickName
			this.form.phone = this.userInfo.phone || this.form.phone
		},
		submit() {
			let self = this

			// 之所以手动获取dom的input值 而不是v-model 是为了保证跨平台安全生效
			uni.createSelectorQuery().in(this)
				.select("#nickName")
				.fields({
					properties: ["value"],
				})
				.exec((res) => {
					const nickName = res?.[0]?.value
					self.form.nickName = nickName

					if (self.$utils.verificationAll(self.form, {
						headImage: '请选择头像',
						nickName: '请填写昵称',
						phone: '请填写手机号'
					})) {
						return
					}

					if (!self.$utils.verificationPhone(self.form.phone)) {
						uni.showToast({
							icon: 'none',
							title: '请填写正确的手机号'
						})
						return
					}

					this.$api('updateUser', {
						...this.form,
					}, res => {
						if (res.code == 200) {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							})
							this.$store.commit('getUserInfo')
							// 返回上一页
							setTimeout(() => {
								this.$utils.navigateBack()
							}, 1500)
						}
					})

				})
		}
	}
}
</script>

<style lang="scss" scoped>
.profile-page {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.nav-bar {
	height: 180rpx;
	background-color: #019245;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	padding-top: 60rpx;
	box-sizing: border-box;
	color: #fff;

	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: 500;
	}

	.right-actions {
		display: flex;
		align-items: center;

		.icon-divider {
			width: 2rpx;
			height: 30rpx;
			background-color: rgba(255, 255, 255, 0.5);
			margin: 0 20rpx;
		}
	}
}

.main-content {
	padding: 30rpx;
}

.section-title {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;

	.title-indicator {
		width: 8rpx;
		height: 32rpx;
		background-color: $uni-color;
		margin-right: 15rpx;
		border-radius: 4rpx;
	}

	text {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}
}

.avatar-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 50rpx 0;

	.chooseAvatar {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		overflow: hidden;
		padding: 0;
		margin: 0;
		background: none;

		&::after {
			border: none;
		}

		.avatar-img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.avatar-hint {
		font-size: 26rpx;
		color: $uni-color-third;
		margin-top: 20rpx;
	}
}

.form-section {
	background-color: #fff;
	border-radius: 30rpx;
	overflow: hidden;
	margin-bottom: 60rpx;

	.form-item {
		display: flex;
		height: 100rpx;
		align-items: center;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		.label {
			width: 150rpx;
			font-size: 30rpx;
			color: $uni-color-third;
		}

		.input {
			flex: 1;
			height: 100%;
			font-size: 30rpx;
			color: #666;
		}
	}
}

.save-button {
	width: 90%;
	margin: 160rpx auto 0;
	height: 100rpx;
	background-color: $uni-color;
	border-radius: 45rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 32rpx;
	box-shadow: 0 6rpx 20rpx rgba(1, 146, 69, 0.3);
}
</style>