pet-front/pages/login/wxUserInfo.vue

<template>
	<view class="login">
		<!-- <view class="logo">
			<image :src="configList.logo_image" mode=""></image>
		</view> -->
		<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="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="">
				昵称
			</view>
			<view class="">
				<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName"
					v-model="userInfoForm.nickName" />
			</view>
		</view>
		<view class="line">
			<view class="">
				手机号
			</view>

			<view class="" v-if="userInfoForm.phone">
				<input placeholder="请输入手机号" style="text-align: right;" disabled v-model="userInfoForm.phone" />
			</view>

			<view class="" v-else>
				<button class="getPhoneNumber" open-type="getPhoneNumber" @getphonenumber="getPhone">
					获取电话号码
				</button>
			</view>
		</view>



		<view class="btn" @click="submit">
			确认
		</view>
	</view>
</template>

<script>
	import {
		ossUpload
	} from "@/utils/oss-upload/oss/index.js"
	import {
		getPhoneNumber
	} from "@/api/system/user.js"
	import {
		updateUserInfo
	} from "@/api/user/user.js"
	export default {
		data() {
			return {
				userInfo: {
					phone: "",
					nickName: "",
					headImage: ""
				},
				userInfoForm: {
					headImage: '',
					nickName: '',
					phone: '',
				}
			};
		},
		onShow() {},
		onLoad() {
			this.userInfoForm.phone = this.userInfo.phone || ''
			this.userInfoForm.nickName = this.userInfo.nickName || ''
			this.userInfoForm.headImage = this.userInfo.headImage || ''
		},
		computed: {},
		methods: {
			onChooseAvatar(res) {
				let self = this
				ossUpload(res.target.avatarUrl)
					.then(url => {
						self.userInfoForm.headImage = url
					})
			},
			async getPhone(e) {
				let result = await getPhoneNumber({
					code: e.detail.code
				})
				result = JSON.parse(result.msg);
				this.userInfoForm.phone = result.phone_info.phoneNumber;
			},
			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 (!this.userInfoForm.headImage) {
							return uni.showToast({
								title: '请选择头像',
								icon: "none"
							})
						} else if (!this.userInfoForm.nickName) {
							return uni.showToast({
								title: '请填写昵称',
								icon: "none"
							})
						} else if (!this.userInfoForm.phone) {
							return uni.showToast({
								title: '请填写手机号',
								icon: "none"
							})
						}

						// 获取用户Id
						const baseUserInfo = JSON.parse(uni.getStorageSync("baseInfo"));

						updateUserInfo({
							userId: baseUserInfo.userId,
							userImage: self.userInfoForm.headImage,
							userName: self.userInfoForm.nickName,
							userTelephone: self.userInfoForm.phone
						}).then(res => {
							if (res.code == 200) {
								uni.switchTab({
									url: "/pages/workbenchManage/index"
								})
							}
						})
					})

			},
		}
	}
</script>

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

		.logo {
			height: 140rpx;
			width: 140rpx;

			image {
				height: 140rpx;
				width: 140rpx;
				border-radius: 30rpx;
			}

			margin-bottom: 20rpx;
		}

		.title {
			line-height: 45rpx;
			font-weight: 900;
		}

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

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

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

		.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;
		}
	}
</style>