fission-star-applet-250304/pages_order/auth/wxUserInfo.vue

<template>
	<view class="page flex flex-column">
			
		<image class="logo" :src="userInfo.headImage" mode=""></image>

		<view class="title">
			{{ userInfo.nickName }}
		</view>

		<view class="desc">
			申请获取你的头像、昵称
		</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>
						
						<image src="../static/auth/avatar.png" v-else class="avatar"
							mode=""></image>

						</button>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					昵称
				</view>
				<view class="content">
					<input 
					 	id="nickName"
						type="nickname" 
						placeholder="请输入昵称" 
						style="text-align: right;"
						placeholder-class="auth-placeholder"
						v-model="userInfoForm.nickName" 
					/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					微信号
				</view>
				<view class="content">
					<input 
					 	id="wxCode"
						type="wxCode" 
						placeholder="请输入微信号" 
						style="text-align: right;"
						placeholder-class="auth-placeholder"
						v-model="userInfoForm.wxCode" 
					/>
				</view>
			</view>
		</view>
		
		
		<button
			:plain="true" :hairline="false"
			class="btn"
			open-type="getPhoneNumber" 
			@getphonenumber="getPhone"
		>
			获取电话号码
		</button>
		<button
			:plain="true" :hairline="false"
			class="btn btn-confirm"
			@click="submit"
		>
			确认
		</button>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'

	export default {
		data() {
			return {
				userInfoForm: {
					headImage: '',
					nickName: '',
					phone : '',
					wxCode : '',
				}
			};
		},
		computed: {
			...mapState(['userInfo']),
		},
		onShow() {},
		onLoad() {
			this.userInfoForm.phone = this.userInfo.phone || ''
			this.userInfoForm.nickName = this.userInfo.nickName || ''
			this.userInfoForm.headImage = this.userInfo.headImage || ''
			this.userInfoForm.wxCode = this.userInfo.wxCode || ''
		},
		computed: {},
		methods: {
			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
							})
						}
						console.log(phoneObj);
					}
				})
			},
			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: '请填写手机号',
								wxCode: '请填写微信号',
							})) {
							return
						}
						
						self.$api('updateInfo', {
							headImage : self.userInfoForm.headImage,
							nickName : self.userInfoForm.nickName,
							phone : self.userInfoForm.phone,
							wxCode : self.userInfoForm.wxCode,
						}, res => {
							if (res.code == 200) {
								uni.reLaunch({
									url:'/pages/index/index'
								})
							}
						})
					})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: $uni-fg-color;
		position: relative;
		width: 100vw;
		height: 100vh;
		padding-top: calc(#{$navbar-height} + var(--status-bar-height) + 20rpx);
		padding-left: 60rpx;
		padding-right: 60rpx;
		box-sizing: border-box;
		justify-content: flex-start;
	}

	.logo {
		width: 148rpx;
		height: 148rpx;
		margin-top: 96rpx;
	}

	.title {
		color: #333333;
		font-size: 32rpx;
		font-weight: 900;
		margin-top: 20rpx;
	}
	
	.desc {
		color: #474747;
		font-size: 28rpx;
		margin-top: 40rpx;
	}

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

		box-sizing: border-box;

		.form-item {
			width: 100%;
			min-height: 136rpx;
			border-bottom: 1rpx solid #E8E8E8;

			display: flex;
			align-items: center;
			justify-content: center;

			&:first-child {
				border-top: 1rpx solid #E8E8E8;
			}

			.label {
				width: 110rpx;
				font-size: 36rpx;
				font-weight: 500;
				text-align: left;
				color: #474747;
			}

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

		.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: 96rpx;
			height: 96rpx;
		}

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

	}
	
	.auth-placeholder {
		color: #7C7C7C;
		font-size: 26rpx;
	}

	
	.btn {
		width: 100%;
		height: auto;
		border-radius: 45rpx;
		color: #07C160;
		border-color: #07C160;
		padding: 25rpx 0;
		box-sizing: border-box;
		font-size: 28rpx;
		line-height: 1;
		margin: 0;

		&-confirm {
			background-color: #07C160;
			color: #FFFFFF;
		}

		& + & {
			margin-top: 34rpx;
		}
	}
</style>