massage-front/pages_order/auth/wxUserInfo.vue

<template>
	<view class="login">
		
		<view class="logo">
			<image :src="configList.config_app_logo" mode=""></image>
			<view class="text">
				{{ configList.config_app_name }}
			</view>
		</view>

		<view class="title">
			申请获取你的头像、昵称
		</view>

		<view class="form">
			<view class="form-item">
				<view class="label">
					头像
				</view>
				<view class="content">
					<button class="btn-avatar" :plain="true" :hairline="false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						
						<image :src="userInfoForm.headImage" v-if="userInfoForm.headImage" class="avatar"
							mode=""></image>

						<view v-else class="avatar" style="background-color: #C7C7C7; border-radius: 50%;">
							<uv-icon name="account-fill" color="#ffffff" size="70rpx"></uv-icon>
						</view>
						
					</button>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					昵称
				</view>
				<view class="content">
					<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName"
						placeholder-class="uni-placeholder"
						v-model="userInfoForm.nickName" 
					/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					手机号
				</view>
				
				<!-- #ifdef MP-WEIXIN -->
				<view class="content">
					<input v-if="userInfoForm.phone" 
						placeholder-class="uni-placeholder"
						placeholder="请输入手机号" 
						style="text-align: right;"
						disabled
						v-model="userInfoForm.phone" 
					/>
					<view v-else>
						<button
						 :plain="true" :hairline="false"
							class="btn-phone"
							open-type="getPhoneNumber" 
							@getphonenumber="getPhone"
						>
							获取电话号码
						</button>
					</view>
				</view>
				<!-- #endif -->
				
				
				<!-- #ifdef H5 -->
				<view class="content">
					<input
						placeholder-class="uni-placeholder"
						placeholder="请输入手机号" 
						style="text-align: right;"
						v-model="userInfoForm.phone" 
					/>
				</view>
				<!-- #endif -->
			</view>
		</view>
		
		<view class="btn" @click="submit">
			确认
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfoForm: {
					headImage: '',
					nickName: '',
					phone: '',
				}
			};
		},
		onShow() {},
		onLoad() {
			this.userInfoForm.nickName = this.userInfo.nickName || ''
			this.userInfoForm.headImage = this.userInfo.headImage || ''
		},
		computed: {},
		methods: {
			onChooseAvatar(res) {
				this.$Oss.ossUpload(res.target.avatarUrl)
				.then(url => {
					this.userInfoForm.headImage = url
				})
			},
			getPhone(e){
				this.$api('bindPhone', {
					phoneCode : 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
							})
						}
					}
				})
			},
			validatePhone(phone) {

					// let fixedLindReg = /(\d{3,4}-)?\d{7,8}$/g // 常见座机格式
					let mobileReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/g // 中国大陆手机号

					// if (fixedLindReg.test(phone)) {
					// 	return true
					// }

					if (mobileReg.test(phone)) {
						return true
					}

					uni.showToast({
						title: '请填写正确手机号',
						icon: "none"
					})

					return false
			},
			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: '请填写手机号',
							})) {
							return
						}
						
						if (!this.validatePhone(self.userInfoForm.phone)) {
							return
						}
						
						self.$api('updateInfo', {
							headImage : self.userInfoForm.headImage,
							nickName : self.userInfoForm.nickName,
							phone : self.userInfoForm.phone,
						}, res => {
							if (res.code == 200) {
								uni.reLaunch({
									url:'/pages/index/index'
								})
							}
						})
					})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 100vh;
		flex-direction: column;
		position: relative;

		background: $uni-fg-color;
		
		.logo{
			margin-top: 334rpx;
			width: 320rpx;
			image{
				height: 150rpx;
				width: 320rpx;
			}
			.text{
				margin-top: 90rpx;
				font-size: 38rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #000000;
			}
		}

		.title {
			margin-top: 48rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #000000;
		}

		.form {
			margin-top: 45rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.form-item {
				width: 85%;
				display: flex;
				align-items: baseline;
				padding: 11rpx 23rpx;

				position: relative;

				&::after {
					position: absolute;
					bottom: 0;
					left: 0;
					content: " ";
					width: 100%;
					height: 1rpx;
					border-top: 1px solid rgba(112, 112, 112, 0.35);
					transform: scaleY(.5);
				}

				.label {
					width: 90rpx;
					font-size: 30rpx;
					font-family: SimSun, SimSun-Regular;
					font-weight: 400;
					text-align: left;
					color: #000000;
				}

				.content {
					flex: 1;
					text-align: right;
				}
			}

			.form-item + .form-item {
				margin-top: 50rpx;
			}

			.btn-avatar {
				background: transparent;
				border: none;
				border-radius: none;
				box-shadow: none;
				padding: 0;
				margin: 0;
				font-size: 0;
				text-align: right;
			}

			.avatar {
				display: inline-block;
				width: 70rpx;
				height: 70rpx;
				margin-right: 63rpx;
			}

			.btn-phone {
				border: none;
				border-radius: 0;
				padding: 7rpx;
				margin: 0;
				text-align: right;
				color: #C7C7C7;
				font-size: 30rpx;
				line-height: 1;
			}

		}

		.btn {
			text-align: center;
			margin-top: 155rpx;
				
			width: 80%;
			height: 100rpx;
			border-radius: 50rpx;
			background-image: linear-gradient(to right, #84A73F, #D8FF8F);
			color: #fff;
			
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			border: none;
		}
	}
</style>