novel-front-app/pages_order/auth/Modifyinformation.vue

<template>
	<view class="modify-info-page">
		<navbar title="修改信息" leftClick @leftClick="$utils.navigateBack" />

		<view class="header">
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="chooseAvatar" 
			class="share"
			@chooseavatar="onChooseAvatar">
				<view class="avatar-upload">
					<uv-avatar :src="userInfoForm.headImage" size="88" shape="circle" class="avatar-main" />
					<view class="avatar-upload-btn">
						<uv-icon name="camera-fill" size="28" color="#fff" />
					</view>
				</view>
			</button>
			<!-- #endif -->
			
			<!-- #ifdef H5 -->
			<view class="avatar-upload">
				<uv-avatar :src="userInfoForm.headImage" size="88" shape="circle" class="avatar-main" />
				<uv-upload :fileList="fileList" :maxCount="1" width="48rpx" height="48rpx" 
					@afterRead="afterRead" @delete="deleteImage">
					<view class="avatar-upload-btn">
						<uv-icon name="camera-fill" size="28" color="#fff" />
					</view>
				</uv-upload>
			</view>
			<!-- #endif -->
		</view>
		<view class="card">
			<view class="card-title">个人信息</view>
			<view class="form-item">
				<view class="form-label"><text class="star">*</text> 昵称</view>
				<view class="form-value">
					<input type="nickname" placeholder="请输入昵称" id="nickName" 
					v-model="userInfoForm.nickName" />
				</view>
			</view>
			<view class="divider"></view>
			<view class="form-item">
				<view class="form-label"><text class="star">*</text> 个性签名</view>
				<view class="form-value">
					<input placeholder="请输入个性签名" v-model="userInfoForm.details" />
				</view>
			</view>
			<view class="divider"></view>
		</view>
		
		<!-- #ifdef MP-WEIXIN -->
		<button
		class="share"
		open-type="getPhoneNumber" @getphonenumber="getPhone">
			<view class="card">
				<view class="card-title">手机号</view>
				<view class="form-item">
					<view class="form-label"><text class="star">*</text> 手机号</view>
					<view class="form-value">{{ userInfoForm.phone }}</view>
				</view>
				<view class="divider"></view>
			</view>
		</button>
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
		<view class="card">
			<view class="card-title">手机号</view>
			<view class="form-item">
				<view class="form-label"><text class="star">*</text> 手机号</view>
				<view class="form-value">
					<input placeholder="请输入手机号" v-model="userInfoForm.phone" />
				</view>
			</view>
			<view class="divider"></view>
		</view>
		<!-- #endif -->
		
		<view class="footer">
			<uv-button type="primary" text="确认" shape="circle" size="large" @click="submit"
				customStyle="width:100%;height:44px;font-size:18px;background:#0a226b;" />
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				avatarUrl: '',
				fileList: [],
				showUpload: false,
				userInfoForm: {
					headImage: '',
					nickName: '',
					phone: '',
					details: '',
				},
			}
		},
		onLoad() {
			this.userInfoForm.phone = this.userInfo.phone || ''
			this.userInfoForm.nickName = this.userInfo.nickName || ''
			this.userInfoForm.headImage = this.userInfo.headImage || ''
			this.userInfoForm.details = this.userInfo.details || ''
		},
		methods: {
			// #ifdef MP-WEIXIN
			onChooseAvatar(res) {
				this.$Oss.ossUpload(res.target.avatarUrl)
				.then(url => {
					this.userInfoForm.headImage = url
				})
			},
			getPhone(e) {
				this.$api('bindPhone', {
					code: e.detail.code
				}, res => {
					if (res.code == 200) {
						let phoneObj = JSON.parse(res.result)
						if (phoneObj.errmsg == 'ok') {
							this.userInfoForm.phone = phoneObj.phone_info.phoneNumber
						} else {
							// uni.showModal({
							// 	title: phoneObj.errmsg
							// })
						}
					}
				})
			},
			// #endif
			
			// #ifdef H5
			deleteImage(e){
				this.fileList.splice(e.index, 1)
				this.userInfoForm.headImage = ''
			},
			afterRead(e){
				let self = this
				// e.file.forEach(file => {
					self.$Oss.ossUpload(e.file.url).then(url => {
						self.userInfoForm.headImage = url
						// self.fileList = [{
						// 	url
						// }]
					})
				// })
			},
			// #endif
			submit() {
				let self = this

				uni.createSelectorQuery().in(this)
					.select("#nickName")
					.fields({
						properties: ["value"],
					})
					.exec((res) => {
						const nickName = res?.[0]?.value
						self.userInfoForm.nickName = nickName

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

						// #ifdef H5
						// H5端需要验证手机号格式
						if (!self.$utils.verificationPhone(self.userInfoForm.phone)) {
							uni.showToast({
								title: '请输入正确的手机号格式',
								icon: 'none'
							})
							return
						}
						// #endif

						self.$api('updateInfo', {
							avatarUrl: self.userInfoForm.headImage,
							nickName: self.userInfoForm.nickName,
							phone: self.userInfoForm.phone,
							details: self.userInfoForm.details,
						}, res => {
							if (res.code == 200) {
								// uni.reLaunch({
								// 	url: '/pages/index/index'
								// })
								
								this.$store.commit('getUserInfo')
								
								uni.showToast({
									title: '修改成功',
									icon: 'none',
									success() {
										uni.navigateBack(-1)
									}
								})
								
							}
						})
					})

			},
		}
	}
</script>

<style scoped>
	.modify-info-page {
		min-height: 100vh;
		background: #f8f8f8;
		display: flex;
		flex-direction: column;
	}

	.back-arrow-fix {
		position: absolute;
		top: 60rpx;
		left: 32rpx;
		z-index: 1000;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 120rpx;
		margin-bottom: 24rpx;
		position: relative;
	}

	.avatar-upload {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 120rpx;
		height: 120rpx;
	}

	.avatar-main {
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}

	.avatar-upload-btn {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 48rpx;
		height: 48rpx;
		background: #0a226b;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
		border: 2rpx solid #fff;
	}

	.card {
		background: #fff;
		border-radius: 24rpx;
		margin: 0 24rpx 32rpx 24rpx;
		padding: 32rpx 28rpx 8rpx 28rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
		text-align: left;
	}

	.card-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #222;
		margin-bottom: 18rpx;
		margin-top: 18rpx;
	}

	.form-item {
		margin-bottom: 8rpx;
		margin-top: 18rpx;
	}

	.form-label {
		font-size: 22rpx;
		color: #888;
		margin-bottom: 4rpx;
		display: flex;
		align-items: center;

	}

	.star {
		color: #f44;
		font-size: 22rpx;
		margin-right: 4rpx;
		margin-top: 18rpx;
	}

	.form-value {
		font-size: 26rpx;
		color: #222;
		font-weight: 500;
		margin-bottom: 2rpx;
	}

	.divider {
		height: 1px;
		background: #f0f0f0;
		margin: 8rpx 0 8rpx 0;

	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 90rpx;
		margin: 0 24rpx;
	}
</style>