pet-front/pages/login/wxUserInfo.vue

<template>
	<view class="login">
		<view class="logo">
            <image class="logo-img" :src="configList?.applet_info?.paramValueImage" mode="aspectFill"></image>
            <image class="d" :src="configList?.logo_icon?.paramValueImage" mode="aspectFill"></image>
			
			
			<view class="title">
				申请获取你的头像、昵称
			</view>
        </view>

		<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<view class="line">
				<view >
					头像
				</view>
				<view >
					<image :src="userInfoForm.headImage" v-if="userInfoForm.headImage"
						style="width: 60rpx;height: 60rpx;border-radius: 50%;" mode=""></image>

					<!-- <image src="../static/auth/headImage.png" v-else style="width: 50rpx;height: 50rpx;" mode=""></image> -->
				</view>
			</view>
		</button>
		<view class="line">
			<view >
				昵称
			</view>
			<view >
				<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName"
					v-model="userInfoForm.nickName" />
			</view>
		</view>
		<view class="line">
			<view >
				手机号
			</view>

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

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

		<view class="btn" @click="submit">
			确认
		</view>
		<!-- 客服组件 -->
		<CustomerService />
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		computed,
		onMounted
	} from 'vue'
	import {
		ossUpload
	} from "@/utils/oss-upload/oss/index.js"
	import {
		getPhoneNumber
	} from "@/api/system/user.js"
	import {
		updateUserInfo
	} from "@/api/user/user.js"
	import {
		useStore
	} from 'vuex'
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	const instance = getCurrentInstance()

	const store = useStore()

	const userInfoForm = ref({
		headImage: '',
		nickName: '',
		phone: '',
	})
	
	const configList = computed(() => {
		return store.getters.configList
	})
	
	const userInfo = computed(() => {
		return store.getters.userInfo
	})

	onShow(() => {
		// 可以在这里添加 onShow 的逻辑
	})

	onLoad(() => {
		userInfoForm.value.phone = userInfo.value?.userTelephone || ''
		userInfoForm.value.nickName = userInfo.value?.userName || ''
		userInfoForm.value.headImage = configList.value?.applet_info?.paramValueImage || ''
	})

	const onChooseAvatar = (res) => {
		ossUpload(res.target.avatarUrl)
			.then(url => {
				userInfoForm.value.headImage = url
			})
	}

	const getPhone = async (e) => {
		let result = await getPhoneNumber({
			code: e.detail.code
		})
		result = JSON.parse(result.msg);
		userInfoForm.value.phone = result.phone_info.phoneNumber;
	}

	const submit = () => {
		uni.createSelectorQuery().in(instance.proxy)
			.select("#nickName")
			.fields({
				properties: ["value"],
			})
			.exec((res) => {
				console.log(res)
				const nickName = res?.[0]?.value
				userInfoForm.value.nickName = nickName

				if (!userInfoForm.value.headImage) {
					return uni.showToast({
						title: '请选择头像',
						icon: "none"
					})
				} else if (!userInfoForm.value.nickName) {
					return uni.showToast({
						title: '请填写昵称',
						icon: "none"
					})
				} else if (!userInfoForm.value.phone) {
					return uni.showToast({
						title: '请填写手机号',
						icon: "none"
					})
				}
				updateUserInfo({
					userId: store.state.user.userInfo.userId,
					userImage: userInfoForm.value.headImage,
					userName: userInfoForm.value.nickName,
					userTelephone: userInfoForm.value.phone
				}).then(res => {
					if (res.code == 200) {
						store.dispatch("getUserInfo")
						uni.switchTab({
							url: "/pages/workbenchManage/index"
						})
					}
				})
			})
	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #fff;
		
		.title{
			margin-top: 60rpx;
		}

		.logo {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 504rpx;
			width: 100%;
			background: linear-gradient(360deg, #FFFFFF 0%, #FFBF60 99%);
			
			.logo-img {
				width: 180rpx;
				height: 180rpx;
			}
			
			.d {
				width: 200rpx;
				height: 80rpx;
				margin-top: 20rpx;
			}

			margin-bottom: 20rpx;
		}

		.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;
			background-color: #FFFFFF;
		}

		.btn {
			background: #FFBF60;
			// background: $uni-color;
			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;
			color: #fff;
			width: 200rpx;
			height: 60rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			background-color: #FFBF60;
		}
	}
</style>