universal-wechat-uniapp-241007/pages_order/auth/wxUserInfo.vue

<template>
	<view class="login">
		
		<!-- <view class="title">
			瑶都万能墙
		</view>
		<view class="title">
			申请获取你的头像、昵称
		</view> -->

		<!-- <button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<view class="line">
				<view class="">
					头像
				</view>
				<view class="">
					<image :src="form.headImage" v-if="form.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="">
				昵称
			</view>
			<view class="">
				<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName"
					v-model="form.nickName" />
			</view>
		</view> -->
		
		<view class="bg1"></view>
		
		<view class="title">
			定制自己的形象
		</view>
		
		
		<view
		v-if="back"
		@click="$utils.navigateBack"
		style="position: absolute;top: 120rpx;left: 20rpx;">
			<uv-icon
			size="30rpx"
			color="#000"
			name="arrow-left"></uv-icon>
		</view>
		
		<button class="chooseAvatar" 
		open-type="chooseAvatar" 
		@chooseavatar="onChooseAvatar">
			<image :src="form.headImage"
			mode="aspectFill"></image>
		</button>
		
		<input type="nickname" 
		placeholder="给自己起一个响亮的名字" 
		class="nickname" id="nickName"
		v-model="form.nickName" />
		
		<view class="sexSelect">
			<view 
			@click="sexClick(item)"
			v-for="(item, index) in sexList"
			:key="index"
			:style="{color : form.sex == item.value ? item.actColor : '#333'}">
				<uv-icon
				size="30rpx"
				:color="form.sex == item.value ? item.actColor : '#333'"
				:name="item.icon"></uv-icon>
				{{ item.value }}
			</view>
		</view>
		
		<view class="address"
		@click="$refs.datetimePicker.open()">
			您出生于{{ $dayjs(form.yearDate).format("YYYY") }}年
		</view>
		
		<view class="address"
		@click="$refs.picker.open()">
			{{ form.address || '请选择居住地址'}}
		</view>
		
		<view class="line">
			<view class="">
				手机号
			</view>
			
			<view class=""
			v-if="form.phone">
				<input placeholder="请输入手机号" style="text-align: right;"
				disabled
				v-model="form.phone" />
			</view>
			
			<view class=""
			v-else>
				<button
				class="getPhoneNumber"
				open-type="getPhoneNumber" 
				@getphonenumber="getPhone">
					获取电话号码
				</button>
			</view>
		</view>
		
		<uv-datetime-picker 
		ref="datetimePicker" 
		v-model="form.yearDate" 
		mode="year"
		:minDate="minDate" 
		:maxDate="maxDate">
		</uv-datetime-picker>
		
		<uv-picker ref="picker" 
		:columns="columns"
		keyName="name"
		@confirm="confirmAddress"></uv-picker>
		
		<view class="btn" @click="submit">
			确认
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import mixinsSex from '@/mixins/sex.js'
	export default {
		mixins : [mixinsSex],
		data() {
			return {
				form: {
					headImage: '',
					nickName: '',
					sex : '男',
					yearDate : this.$dayjs().add(-18, 'y').valueOf(),//默认满18岁
					address : '',
					phone : '',
				},
				maxDate : this.$dayjs().valueOf(),
				minDate : this.$dayjs().add(-100, 'y').valueOf(),
				// sex : [
				// 	{
				// 		value : '男',
				// 		icon : 'man',
				// 		actColor : '#5baaff',
				// 	},
				// 	{
				// 		value : '女',
				// 		icon : 'woman',
				// 		actColor : '#ff50b3',
				// 	},
				// ],
				columns : [],
				back : '',
			};
		},
		computed: {
			...mapState(['cityList', 'userInfo']),
		},
		onLoad({back}) {
			this.back = back
			// this.$nextTick(() => {
			// 	this.form.headImage = this.userInfo.headImage || this.form.headImage
			// 	this.form.nickName = this.userInfo.nickName || this.form.nickName
			// 	this.form.sex = this.userInfo.sex || this.form.sex
			// 	this.form.yearDate = this.userInfo.yearDate || this.form.yearDate
			// 	this.form.address = this.userInfo.address || this.form.address
			// })
		},
		onShow() {
			this.getCityList()
			this.getUserInfo()
		},
		computed: {},
		methods: {
			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.form.phone = phoneObj.phone_info.phoneNumber
						}else{
							uni.showModal({
								title: phoneObj.errmsg
							})
						}
						console.log(phoneObj);
					}
				})
			},
			onChooseAvatar(res) {
				let self = this
				self.$Oss.ossUpload(res.target.avatarUrl)
				.then(url => {
					self.form.headImage = url
				})
			},
			sexClick(item){
				this.form.sex = item.value
			},
			confirmAddress(e){
				this.form.address = e.value[0].name
			},
			// 获取城市
			getCityList(){
				this.$api('getCityList', res => {
					if(res.code == 200){
						this.columns = [
							res.result
						]
					}
				})
			},
			getUserInfo(){
				this.$api('getInfo', res => {
					if(res.code == 200){
						
						this.form.headImage = res.result.headImage || this.form.headImage
						
						this.form.nickName = res.result.nickName || this.form.nickName
						
						this.form.sex = res.result.sex || this.form.sex
						
						this.form.phone = res.result.phone || this.form.phone
						
						this.form.yearDate = res.result.yearDate && 
						this.$dayjs(res.result.yearDate + '-01-01').valueOf() || this.form.yearDate
						
						this.form.address = res.result.address || this.form.address
					}
				})
			},
			submit() {
				let self = this

				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: '请填写昵称',
								address: '请选择居住地址',
								phone: '请获取手机号',
							})) {
							return
						}
						
						let data = {
							...self.form,
							yearDate : this.$dayjs(self.form.yearDate).format("YYYY")
						}
						
						self.$api('updateInfo', data, res => {
							if (res.code == 200) {
								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;
		overflow: hidden;
		
		
		.bg1{
			width: 700rpx;
			height: 700rpx;
			border-radius: 50%;
			background-color: #ffc0b333;
			position: absolute;
			right: -300rpx;
			top: -300rpx;
		}

		.title {
			line-height: 45rpx;
			font-weight: 900;
			padding-bottom: 100rpx;
			font-size: 40rpx;
		}

		.chooseAvatar {
			width: 100%;
			padding: 0 !important;
			margin: 0 !important;
			border: none;
			background-color: #fff !important;
			width: 220rpx;
			height: 220rpx;
			border-radius: 50%;
			image{
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				box-shadow: 0 0 10rpx 10rpx #00000012;
				margin: 10rpx;
			}
		}
		.chooseAvatar::after{
			border: none;
			padding: 0 !important;
			margin: 0 !important;
		}
		
		.nickname{
			background-color: #f7f7f7;
			width: 600rpx;
			height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
			margin-top: 30rpx;
		}
		
		
		.line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #f7f7f7;
			width: 600rpx;
			height: 80rpx;
			padding: 0 30rpx;
			margin: 0 auto;
			border-radius: 40rpx;
			margin-top: 30rpx;
			box-sizing: border-box;
			.getPhoneNumber{
				// all: unset;
				display: flex;
				justify-content: center;
				align-items: center;
				// background: $uni-linear-gradient-btn-color;
				background: $uni-color;
				color: #fff;
				width: 200rpx;
				height: 60rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
			}
		}
		
		.sexSelect{
			background-color: #f7f7f7;
			width: 600rpx;
			height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			line-height: 80rpx;
			overflow: hidden;
			&>view{
				flex: 1;
				display: flex;
				justify-content: center;
				align-content: center;
				height: 100%;
			}
			&>view:nth-child(1){
				border-right: 1px solid #000;
			}
		}
		
		.address{
			background-color: #f7f7f7;
			width: 600rpx;
			height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
			margin-top: 30rpx;
			line-height: 80rpx;
			color: #555;
		}

		.btn {
			// background: $uni-linear-gradient-btn-color;
			background: $uni-color;
			color: #fff;
			width: 80%;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 15rpx;
			margin-top: 10vh;
		}
	}
</style>