houserent-front/pages/login/index.vue

<template>
	<view>
		<view class="se-pt-200 se-flex se-flex-h-c se-flex-ff-cw">
			<image class="se-w-150 se-h-150" src="@/static/image/logo.png" mode=""></image>
			<view class="se-flex se-flex-h-c se-fs-34 se-fw-6 se-c-black se-mt-40">
				租房小程序
			</view>
			<view class="se-mt-20 se-fs-26 se-c-black se-flex se-flex-h-c">
				申请获取您的头像、昵称
			</view>
		</view>
		<view class="se-mx-40 se-py-100">
			<view class="se-b-t se-b-b se-flex se-h-140 se-lh-140 se-flex-h-sb">
				<text>头像</text>
				<button class="se-w-100 se-h-100 se-p-0 se-m-0" 
				open-type="chooseAvatar" 
				@chooseavatar="onChooseAvatar">
					<image v-if="imagUrl" class="se-w-100 se-h-100" 
					:src="imagUrl"></image>
					<image v-else class="se-w-100 se-h-100" src="@/static/image/header.png" mode=""></image>
				</button>
				
			</view>
			<view class=" se-b-b se-flex se-h-140 se-lh-140  se-flex-h-sb">
				<text>昵称</text>
				<input type="nickname" placeholder="请输入昵称" v-model="nameUser"
						@blur="bindblur" class="se-h-80 se-lh-80 se-w-320 se-fs-24 se-ta-r" placeholder-class="se-fs-24 se-ta-r"   />
			</view>
			<view class=" se-b-b se-flex se-h-140 se-lh-140  se-flex-h-sb">
				<text>手机号</text>
				<button v-if="phone" class="default-btn se-h-100 se-p-0 se-m-0"  open-type="getPhoneNumber" @getphonenumber="onPhonenumber">{{phone}}</button>
				<button v-else class="se-w-140 se-h-60 se-lh-60 se-fs-20 se-bgc-green se-c-white se-py-0 se-br-30 se-px-20 se-m-0" open-type="getPhoneNumber" @getphonenumber="onPhonenumber">
					获取手机号
				</button>
				
			</view>
		</view>
		<view class="se-mx-40">
			<view @click="onUpdateInfo" class="se-br-40 se-flex-h-c se-h-80 se-lh-80 se-ta-c se-fs-32 se-c-white se-bgc-green">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	import { UpdateInfo,bindPhone } from "@/common/api.js"
	export default {
		name : 'Login',
		data() {
			return {
				nameUser:"",
				imagUrl:"",
				phone:"",
				back:0
			}
		},
		onLoad(options) {
			if(options.back==1){
				this.back = options.back
			}
			
			// 加载用户信息
			this.loadUserInfo()
		},
		onShow() {
			// 页面显示时重新获取最新的用户信息
			this.loadUserInfo()
		},
		methods: {
			// 加载用户信息
			loadUserInfo() {
				// 从Vuex store获取用户信息（如果存在）
				const storeUserInfo = this.$store.state.userInfo || {}
				
				this.imagUrl = storeUserInfo.headImage || ''
				this.nameUser = storeUserInfo.nickName || ''
				this.phone = storeUserInfo.phone || ''
			},
			bindblur(event) {
				this.nameUser = event.target.value
			},
			onChooseAvatar(res) {
				console.log(res);
				let self = this
				self.$Oss.ossUpload(res.target.avatarUrl).then(url => {
					self.imagUrl = url
				})
			},
			onPhonenumber(event){
				let that = this
				var detail = event.detail;
				if(detail.errMsg=='getPhoneNumber:ok'){
					let params={
						code : detail.code,
						encryptedData: detail.encryptedData,
						iv:detail.iv,
					}
					bindPhone(params).then((response) => {
						console.info(response)
						let data = JSON.parse(response.result)
						that.phone = data.phone_info.phoneNumber
					}).catch(error=>{
						
					})
				}
			},
			onUpdateInfo(){
				let that = this
				let params={
					avatarUrl:that.imagUrl,
					nickName:that.nameUser,
					phone:that.phone
				}
				// &&that.phone
				
				if (that.$utils.verificationAll(params, {
						avatarUrl: '请选择头像',
						nickName: '请填写昵称',
						phone: '请填写手机号',
					})) {
					return
				}
				
				UpdateInfo(params).then((response) => {
				// 更新成功后，更新本地存储和Vuex store
				const updatedUserInfo = {
					...uni.getStorageSync('userInfo'),
					headImage: that.imagUrl,
					nickName: that.nameUser,
					phone: that.phone
				}
				
				// 更新本地存储
				uni.setStorageSync('userInfo', updatedUserInfo)
				
				// 更新Vuex store
				if(that.$store) {
					that.$store.state.userInfo = updatedUserInfo
				}
				
				if(this.back==1){
					uni.navigateBack({
						delta:1
					})
				}else{
					uni.switchTab({
						url:"/pages/home/index"
					})
				}
			}).catch((error) =>{
				
			})
				
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.default-btn{
		background-color: #fff;
	}
	.default-btn::after{
		content: "";
		border: none;
	}
</style>