web3-202226701037/chexnet-master-MP/pages/my/user_info/user_info.vue

<template>
	<view>
		<view class="top-back"></view>
		<view class="content">
			<view class="margin-top" >
				<uv-gap height="10" ></uv-gap>
				
				<!-- <p style="font-size: 25px;">个人信息</p> -->
				<uv-divider class="head-text" text="个人资料" textSize="26" textColor="#000"></uv-divider>
				
				<uv-gap height="10" ></uv-gap>
				
				<view class="margin-top"><!-- 昵称 -->
					<view class="title">昵称</view>
					<uv-gap height="10" ></uv-gap>
					
					<view class="flex justify-between">
						<input maxlength=20 class="" type="nickname" style="width: 60%;" v-model="user.name" placeholder-style="color: #cccccc; font-size: 24px; font-weight: 100;" placeholder="请输入昵称" />
						<image src="@/static/img/user.png" style="background-color: #fff;width: 15vw;height: 15vw;margin: 0 30px 5px;"></image>
					</view>
				</view>
				<uv-divider customStyle="margin: 0 0"></uv-divider>
				
				<uv-gap height="20" ></uv-gap>
				
				<view><!-- 性别 -->
					<view class="">
						<view class="title">性别</view>
						<uv-gap height="10" ></uv-gap>
						<view class="flex justify-between">
							<input placeholder="请选择性别" disabled="disabled" style="width: 60%;" name="input" v-model="gender" placeholder-style="color: #cccccc; font-size: 24px; font-weight: 100;" @click="changegender"></input>
							<image @click="confirm({'indexs': [0]})" src="@/static/img/man.png" style="background-color: #fff;width: 15vw;height: 15vw;"></image>
							<image @click="confirm({'indexs': [1]})" src="@/static/img/woman.png" style="background-color: #fff;width: 15vw;height: 15vw;"></image>
						</view>
					</view>
					<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
				</view>
				<uv-divider customStyle="margin: 0 0"></uv-divider>
				
				<uv-gap height="20" ></uv-gap>
				
				<view class="" style="margin-bottom: -20upx;"><!-- 年龄 -->
					<view class="title">年龄</view>
					<uv-gap height="10" ></uv-gap>
					<input class="weui-input" type="number" v-model="user.age" placeholder-style="color: #cccccc; font-size: 24px; font-weight: 100;" placeholder="请输入年龄" />
				</view>
				<uv-divider customStyle="margin: 0 0"></uv-divider>
				
				<uv-gap height="10" ></uv-gap>
				
			</view>	
			<uv-modal width=260 ref="modal" title="请将信息填写完整"  @confirm="confirm"></uv-modal>				
		</view>
		
		<uv-button @click="update()" customStyle="position: fixed; bottom: 40px;width: calc(100vw - 60px);margin: 0 30px" shape="circle" size="large" color="#1678ff">保存</uv-button>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.user.name = uni.getStorageSync("name");
			this.$user_api.user_get().then(res => {
				this.user = this.$util.removeNullValues(res);
				this.gender = this.user.gender === 0 ? '男' : '女';
				uni.setStorageSync("name",res.name);
				uni.setStorageSync("user",this.user);
			});
		},
		onPullDownRefresh(){
			this.user.name = uni.getStorageSync("name");
			this.$user_api.user_get().then(res => {
				this.user = this.$util.removeNullValues(res);
				this.gender = this.user.gender === 0 ? '男' : '女';
				uni.setStorageSync("name",res.name);
				uni.setStorageSync("user",this.user);
			});
			setTimeout(() => {uni.stopPullDownRefresh();}, 1000);
		},
		data() {
			return {
				user:{
					name: '',
					gender: '',
					age: '',
				},
				gender: '',
				columns: [['男','女']],
				request: 1,
			}
		},
		methods: {	
			changegender() {
				this.$refs.picker.open();
			},
			confirm(e) {
				this.user.gender = e['indexs'][0];
				this.gender = this.user.gender === 0 ? '男' : '女';
			},
			update(){
				if(this.user.name.length > 0){
					//用户名必须由1到20个字符组成，并且只能包含字母和数字。
					const regex = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$/;
					const isValid = regex.test(this.user.name);
					
					if (isValid) {
						console.log("用户名有效");
						
						if(this.request){
							let user = uni.getStorageSync("user");
							
							if(!this.$util.ObjectEqual(user,this.user)){
								this.request = 0;
								uni.showLoading({title: '加载中...'});
								console.log('this.user: ',this.user);
								this.$user_api.user_update(this.$util.removeNullValues(this.user))
									.then((res) => {
										this.request = 1;
										uni.hideLoading();
										uni.showToast({duration:1000,icon:'success',title: '保存成功 !'});
										
									}).catch((err) => {  
										this.request = 1;
										uni.hideLoading();
										uni.showToast({icon:"error",title: '保存失败 !'});
									});
							}
							else{
								console.log("信息未改变");
								uni.showToast({duration:1500,icon:"error",title: '信息未发生改变'});
							}
						}
					} else {
						console.log("用户名无效");
						uni.showToast({duration:1500,icon:"none",title: '用户名只能包含字母和数字'});
					}
				}
				else{
					uni.showToast({duration:1500,icon:"none",title: '请输入用户名'});
				}
			}
		}
	}
</script>

<style>
	page {
		height: 100vh;
	}
	.top-back{
		height: 25px;
		background-color: #1678ff;
		color: #fff;
		margin-bottom: -5vh;
	}
	.top-back p{
		height: 7.5vh;
		display: flex; /* 使用flex布局来实现居中 */
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		font-size: 20px;
		letter-spacing: 10px;
		margin-left: 10px;
		font-weight: 600;
	}
	
	.head-text{
		letter-spacing: 5px;
		font-weight: 600;
	}
	.title{
		letter-spacing: 2px;
		color: #8c92ad;
		font-size: 18px;
	}
	input {
		letter-spacing: 1px;
	    width: 100%;
		height: 8vh;
	    padding-bottom: 5px;
	    font-size: 24px;
		font-weight: 600;
		font-weight: 400;
		color: #000;
	    outline: none; /* 移除聚焦时的默认边框 */
	}
	.content {
	  padding: 0 35px;
	  border-radius: 25px;
	  border: none;
	  background-color: #ffffff;
	}
	.content image:active {
		transform: translateY(2px) translateX(2px);
	}

</style>