popularize-front/pages_login/wxUserInfo.vue

<template>
	<view class="login">
		<view class="logo">
				<image :src="configList.logo_image" mode=""></image>
		</view>
		<view class="title">
			{{ configList.logo_name }}
		</view>
		<view class="title">
			{{$t('pages_login.wxUserInfo.requestInfo')}}
		</view>

		<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<view class="line">
				<view class="">
					{{$t('pages_login.wxUserInfo.avatar')}}
				</view>
				<view class="">
					<image :src="userInfoForm.headImage" v-if="userInfoForm.headImage" style="width: 60rpx;height: 60rpx;"
						mode=""></image>
					<image src="../static/auth/headImage.png" v-else style="width: 50rpx;height: 50rpx;" mode=""></image>
				</view>
			</view>
		</button>
		<view class="line">
			<view class="">
				{{$t('pages_login.wxUserInfo.nickname')}}
			</view>
			<view class="">
				<input type="nickname" :placeholder="$t('pages_login.wxUserInfo.enterNickname')" style="text-align: right;" id="nickName"
					v-model="userInfoForm.nickName" />
			</view>
		</view>
		<view class="line">
			<view class="">
				{{$t('pages_login.wxUserInfo.gender')}}
			</view>
			<view class="">
				<input 
				:placeholder="$t('pages_login.wxUserInfo.selectGender')" 
				disabled
				@click="$refs.sexPicker.open()"
				style="text-align: right;"
				v-model="userInfoForm.sex" />
			</view>
		</view>
		<view class="line">
			<view class="">
				{{$t('pages_login.wxUserInfo.phone')}}
			</view>
			
			<view class=""
			v-if="userInfoForm.phone">
				<input :placeholder="$t('pages_login.wxUserInfo.enterPhone')" style="text-align: right;"
				disabled
				v-model="userInfoForm.phone" />
			</view>
			
			<view class=""
			v-else>
				<button
				class="getPhoneNumber"
				open-type="getPhoneNumber" 
				@getphonenumber="getPhone">
					{{$t('pages_login.wxUserInfo.getPhone')}}
				</button>
			</view>
		</view>
		
		<uv-picker ref="sexPicker" :columns="sexcolumns" @confirm="sexConfirm"></uv-picker>
		
		<view class="btn" @click="submit">
			{{$t('pages_login.wxUserInfo.confirm')}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfoForm: {
					headImage: '',
					nickName: '',
					phone : '',
					sex : '',
				},
				sexcolumns:[
					[this.$t('pages_login.wxUserInfo.male'), this.$t('pages_login.wxUserInfo.female')]
				],
			};
		},
		onShow() {},
		onLoad() {
			// this.userInfoForm.phone = this.userInfo.phone || ''
			// this.userInfoForm.nickName = this.userInfo.nickName || ''
			// this.userInfoForm.headImage = this.userInfo.headImage || ''
			this.getUserInfo()
		},
		computed: {},
		methods: {
			getUserInfo(){
				this.$api('getInfo', res => {
					if(res.code == 200){
						this.userInfoForm.phone = res.result.phone || ''
						this.userInfoForm.nickName = res.result.nickName || ''
						this.userInfoForm.headImage = res.result.headImage || ''
						this.userInfoForm.sex = res.result.sex || ''
					}
				})
			},
			onChooseAvatar(res) {
				let self = this
				self.$Oss.ossUpload(res.target.avatarUrl)
				.then(url => {
					self.userInfoForm.headImage = url
				})
			},
			getPhone(e){
				console.log(e,'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
							})
						}
						console.log(phoneObj);
					}
				})
			},
			sexConfirm(val) {
				this.userInfoForm.sex = val.value[0]
			},
			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: self.$t('pages_login.wxUserInfo.pleaseSelectAvatar'),
								nickName: self.$t('pages_login.wxUserInfo.pleaseEnterNickname'),
								phone: self.$t('pages_login.wxUserInfo.pleaseEnterPhone'),
								sex: self.$t('pages_login.wxUserInfo.pleaseSelectGender'),
							})) {
							return
						}
						
						self.$api('updateInfo', {
							headImage : self.userInfoForm.headImage,
							nickName : self.userInfoForm.nickName,
							phone : self.userInfoForm.phone,
							sex : self.userInfoForm.sex,
						}, res => {
							if (res.code == 200) {
								this.$store.commit('getUserInfo')
								uni.reLaunch({
									url:'/pages/index/index'
								})
							}
						})
					})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #fff;
		.logo{
			height: 140rpx;
			width: 140rpx;
			image{
				height: 140rpx;
				width: 140rpx;
				border-radius: 30rpx;
			}
			margin-bottom: 20rpx;
		}

		.title {
			line-height: 56rpx;
			font-weight: 900;
			font-size: 40rpx;
		}

		.line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 80%;
			border-bottom: 1px solid #00000023;
			padding: 30rpx 0;
			margin: 0 auto;
			font-size: 30rpx;
		}

		.chooseAvatar {
			width: 100%;
			padding: 0;
			margin: 0;
			margin-top: 10vh;
			border: none;
		}

		.btn {
			background: $uni--bg-color-btn;
			color: #fff;
			width: 80%;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 15rpx;
			margin-top: 10vh;
		}
		.getPhoneNumber{
			display: flex;
			justify-content: center;
			align-items: center;
			background: $uni--bg-color-btn;
			color: #fff;
			width: 240rpx;
			height: 60rpx;
			border-radius: 30rpx;
			font-size: 26rpx;
			flex-shrink: 0;
		}
	}
</style>