web3-202226701037/chexnet-master-MP/pages/my/family/family_info/family_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="title" 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 type="text" style="width: 60%;" v-model="family.name" 
							placeholder-style="color: #cccccc; font-size: 24px; font-weight: 100;" placeholder="请输入昵称" 
							@click="$content_check.checkLogin" :disabled="$content_check.isDisabled"
							@blur="inputBindBlur('name')"
						/>
						<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 style="margin-bottom: -20upx;"><!-- 关系 -->
					<view class="title">关系</view>
					<uv-gap height="10" ></uv-gap>
					
					<view class="flex justify-between">
						<input maxlength=10 type="text" style="width: 60%;" v-model="family.relationship" 
							placeholder-style="color: #cccccc; font-size: 24px; font-weight: 100;" placeholder="请输入成员关系" 
							@click="$content_check.checkLogin" :disabled="$content_check.isDisabled"
							@blur="inputBindBlur('relationship')"
						/>
						<image src="@/static/img/family.png" style="background-color: #fff;width: 15vw;height: 15vw;margin: 0 30px 15px;"></image>
					</view>
				</view>
				<uv-divider customStyle="margin: 0 0"></uv-divider>
				
				<uv-gap height="20" ></uv-gap>
				
				<view><!-- 性别 -->
					<view>
						<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 style="margin-bottom: -20upx;"><!-- 年龄 -->
					<view class="title">年龄</view>
					<uv-gap height="10" ></uv-gap>
					<input maxlength=3 type="number" v-model="family.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">{{button_text}}</uv-button>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
			if ('id' in options) {
				let id = JSON.parse(decodeURIComponent(options.id));
				this.family.id = id;
				this.family = uni.getStorageSync("family_list")[id];
				this.gender = this.family.gender === 0 ? '男' : '女';
			}
			else{
				let title = '新增成员';
				let button_text = '新增';
				uni.setNavigationBarTitle({title});
				this.title = title;
				this.button_text = button_text;
				
				let family_list = uni.getStorageSync('family_list');
				if(!family_list || Object.keys(family_list).length == 0) this.family.id = 1;
				else{
					let keys = Object.keys(family_list);
					this.family.id = Number(keys[keys.length - 1]) + 1;
				}
			}
		},
		data() {
			return {
				title: '成员资料',
				button_text: '保存',
				
				family:{
					id: null,
					name: '',
					relationship: '',
					gender: '',
					age: '',
				},
				gender: '',
				columns: [['男','女']],
			}
		},
		methods: {
			inputBindBlur(type){
				this.$content_check.textCheck(this.family[type], this, 'family.' + type);
			},
			changegender() {
				this.$refs.picker.open();
			},
			confirm(e) {
				this.family.gender = e['indexs'][0];
				this.gender = this.family.gender === 0 ? '男' : '女';
			},
			async update(){
				if(this.family.name.length == 0){
					console.log("用户名无效");
					uni.showToast({duration:1500,icon:"none",title: '请输入用户名'});
					return ;
				}
				
				//用户名必须由1到20个字符组成，并且只能包含字母、数字、汉字。
				const regex = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$/;
				const isValid = regex.test(this.family.name);
				if (!isValid) {
					console.log("用户名无效");
					uni.showToast({duration:1500,icon:"none",title: '用户名只能包含字母和数字'});
					return ;
				}
				console.log("用户名有效");
				
				let isCheck = await this.$content_check.textCheck(this.family.name, this, 'family.name');
				console.log('isCheck: ',isCheck);
				if(isCheck !== true) return ;
				
				isCheck = await this.$content_check.textCheck(this.family.relationship, this, 'family.relationship');
				console.log('isCheck: ',isCheck);
				if(isCheck !== true) return ;
				
				let family_list = uni.getStorageSync('family_list');
				if(!family_list || Object.keys(family_list).length == 0) family_list = {};
				
				family_list[this.family.id] = this.family;

				console.log('family_list: ',family_list);
				
				uni.setStorageSync('family_list', family_list);
				
				uni.showToast({duration:1000,icon:'success',title: '保存成功 !'});
				setTimeout(() => uni.navigateBack(), 1300);
			}
		}
	}
</script>

<style>
	page {
		height: 100vh;
	}
	.top-back{
		height: 30px;
		background-color: #1678ff;
		color: #fff;
		margin-bottom: -40px;
	}
	
	.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>