rtdeviceApp/pages/user/userInfo.vue

<template>
	<view class="content">
		<!-- 个人信息 -->
		<view class="blur-bg-2"></view>
		<view class="top-btn">
		
			<view class="back x-c" @click="$navBack()">
				<image src='/static/image/new/icon_back.svg'></image>
				返回
			</view>
			<view class="title x-c">
				<image src='/static/image/new/img_title1.svg'></image>
				<text>信息采集</text>
				<image src='/static/image/new/img_title2.svg'></image>
			</view>
			<view class="index x-c" @click="goIndex">
				<image src='/static/image/new/icon_home.svg'></image>
				首页
			</view>
		</view>
		<view class="userBox">
			<view class="toptitle">
				<view class="tips">首先</view>
				请您填写一些基本信息，这将帮助我为您提供更精准的分析。
			</view>
			<view class="userInfo y-bc">
				<view class="form-item">
					<text class="label">姓名</text>
					<input type="text" v-model="form.username" class="form-input" placeholder="请输入姓名"
						placeholder-class="text-input" :class="{'input-highlight': highlightStatus.username }"
						@focus="setHighlight('username', true)" @blur="setHighlight('username', false)" />
				</view>

				<view class="form-item">
					<text class="label">性别</text>
					<radio-group class="r-box x-f">
						<view class="select x-c" :class="form.sex==1?'active':''" @click="genderChange(1)">
							<image
								:src="form.sex==1?'/static/image/new/icon_manbai.svg':'/static/image/new/icon_man.svg'">
							</image>
							<text>男</text>
						</view>
						<view class="select x-c" :class="form.sex==0?'active':''" @click="genderChange(0)">
							<image
								:src="form.sex==0?'/static/image/new/icon_femalebai.svg':'/static/image/new/icon_female.svg'">
							</image>
							<text>女</text>
						</view>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">手机号</text>
					<input type="number" v-model="form.phone" maxlength="11" class="form-input" placeholder="请输入手机号"
						placeholder-class="text-input" :class="{'input-highlight': highlightStatus.phone }"
						@focus="setHighlight('phone', true)" @blur="setHighlight('phone', false)" />
				</view>
				<view class="form-item">
					<text class="label">身份证号</text>
					<input type="text" v-model="form.idCard" maxlength="18" class="form-input" placeholder="请输入身份证号"
						placeholder-class="text-input" :class="{'input-highlight': highlightStatus.idCard }"
						@focus="setHighlight('idCard', true)" @blur="setHighlight('idCard', false)" />
				</view>
				<view class="form-item">
					<text class="label">年龄</text>
					<input type="number" v-model="form.age" class="form-input" placeholder="请输入年龄"
						placeholder-class="text-input" :class="{'input-highlight': highlightStatus.age }"
						@focus="setHighlight('age', true)" @blur="setHighlight('age', false)" />
				</view>
				<view class="form-item">
					<text class="label">身高(cm)</text>
					<input type="digit" v-model="form.height" class="form-input" placeholder="请输入身高"
						placeholder-class="text-input" :class="{'input-highlight': highlightStatus.height }"
						@focus="setHighlight('height', true)" @blur="setHighlight('height', false)" />

				</view>
				<view class="form-item">
					<text class="label">体重(kg)</text>
					<input type="digit" v-model="form.weight" class="form-input" placeholder="请输入体重"
						placeholder-class="text-input" :class="{'input-highlight': highlightStatus.weight }"
						@focus="setHighlight('weight', true)" @blur="setHighlight('weight', false)" />

				</view>
				<view class="btn-box" @click="onConfirm">提交</view>
			</view>

		</view>
		<CustomToast ref="toast"></CustomToast>
	</view>
</template>

<script>
	import {
		getUserInfoByUserId,
		getUserInfo,addUser
	} from '@/api/user.js';
	import CustomToast from '@/components/CustomToast.vue';
	export default {
		components: { CustomToast },
		data() {
			return {
				form: {
					username: '', // 姓名
					phone: '', // 手机号
					sex: 1, // 性别（1-男，0-女）
					age: '', // 年龄
					height: '', // 身高
					weight: '', // 体重
					idCard:'',
					// previousMedicalHistory: '', // 既往病史
					// habitList: [], //饮食习惯
					// historyOfAllergies: '' //过敏史
				},
				// 每个输入框的高亮状态
				highlightStatus: {
					username: false,
					phone: false,
					idCard: false,
					age: false,
					height: false,
					weight: false
				}
			}
		},
		onLoad(option) {
		},
		onShow() {
		},
		methods: {
			//首页
			goIndex(){
				uni.reLaunch({
					url: '/pages/index/index',
					animationType: 'none',
					animationDuration: 2000
				})
			},
			// 性别切换
			genderChange(sex) {
				this.form.sex = sex;
			},
			// 设置输入框高亮状态
			setHighlight(field, status) {
				this.$set(this.highlightStatus, field, status);
			},
			// 确认提交
			onConfirm() {
				// 表单校验
				if (this.form.username == null || this.form.username == '') {
					this.$refs.toast.showToast({
					  title: "姓名不能为空",
					});
					return
				}
				const phoneReg = /^1[3-9]\d{9}$/;
				      if (!phoneReg.test(this.form.phone)) {
						  this.$refs.toast.showToast({
						    title: "请输入正确的手机号",
						  });
				        return
				      }
					  const idCardReg = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
					       if (!idCardReg.test(this.form.idCard)) {
							 this.$refs.toast.showToast({
							   title: "请输入正确的身份证号",
							 });
					         return
					       }
					 if (this.form.age == null || this.form.age == '') {
						this.$refs.toast.showToast({
						  title: "年龄不能为空",
						});
					 	return
					 }
					 
					 if (this.form.height == null || this.form.height == '') {
						this.$refs.toast.showToast({
						  title: "身高不能为空",
						});
					 	return
						
					 }
					 if (this.form.weight == null || this.form.weight == '') {
						this.$refs.toast.showToast({
						  title: "体重不能为空",
						});
					 	return
					 }
					  console.log('表单提交数据：', this.form);
					  
					  uni.showLoading({
					  	title: "提交中...",
					  	mask: true
					  })
					  addUser(this.form).then(res => {
						  if (res.code == 200) {
							  setTimeout(() => {
							    uni.hideLoading();
							    // this.$refs.toast.showToast({ title: '提交成功', icon: 'success' })
							    // uni.showToast({ title: '提交成功', icon: 'success' });
								uni.setStorageSync('AppToken', res.token);
								uni.setStorageSync('userInfo', JSON.stringify(res.additionalData));
							    uni.navigateTo({
							    	url: '/pages/user/success'
							    });
							    // 重置表单+高亮状态
							    this.form = {
							      username: '',
							      sex: 1,
							      phone: '',
							      idCard: '',
							      age: '',
							      height: '',
							      weight: ''
							    };
							    // 重置高亮状态
							    Object.keys(this.highlightStatus).forEach(key => {
							      this.$set(this.highlightStatus, key, false);
							    });
							  }, 500);
						  }else {
					  			this.$refs.toast.showToast({title: res.msg});
					  		}
					  },rej => {});
			},
		}
	}
</script>


<style scoped lang="scss">
	page {
		background: #fff;
		font-size: 16px
	}

	.content {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #D8F6EF;
		padding: 28px;
		display: flex;
		flex-direction: column;
		.blur-bg-2 {
		   width: 350px;
		   height: 350px;
		   background: #FFFDCC;
		   // opacity: 0.47;
		   filter: blur(200px);
		   position: absolute;
		   z-index: 1;
		   top: 60px;
		   right: calc(0px - 107px); 
		   pointer-events: none
		}
	}

	.top-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
z-index:2;
		.back {
			width: 140px;
			height: 48px;
			background: rgba(255, 255, 255, 0.64);
			border-radius: 45px 45px 45px 45px;
			border: 2px solid #FFFFFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22px;
			color: #327E6F;

			image {
				margin-right: 4px;
				width: 24px;
				height: 24px;
			}
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36px;
			color: #327E6F;
			line-height: 54px;

			text {
				margin: 0 14px;
			}

			image {

				width: 153px;
				height: 25px;
			}
		}

		.index {
			width: 140px;
			height: 48px;
			background: rgba(255, 255, 255, 0.64);
			border-radius: 55px 55px 55px 55px;
			border: 2px solid #FFFFFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22px;
			color: #327E6F;

			image {
				margin-right: 4px;
				width: 24px;
				height: 24px;
			}
		}
	}

	.userBox {
		flex: 1;
		margin-top: 28px;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 24px 24px 24px 24px;
		padding: 27px 40px;
        z-index: 9;
		.toptitle {
			display: flex;
			align-items: center;
			width: 100%;
			height: 66px;
			background: rgba(55, 195, 160, 0.17);
			border-radius: 12px 12px 12px 12px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 22px;
			color: #0C4035;
			line-height: 66px;
			padding: 0 22px;

			.tips {
				width: 56px;
				height: 28px;
				margin-right: 14px;
				line-height: 28px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 19px;
				color: #FFFFFF;
				text-align: center;
				background: linear-gradient(95deg, #3DDAB3 0%, #50D7E0 100%);
				border-radius: 5px 5px 5px 5px;
			}
		}

		.form-item {
			display: flex;
			align-items: center;
			margin-top: 32px;

			.label {
				width: 150px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24px;
				color: #333333;
			}

			.r-box {
				width: 460px;

				.select {
					width: 128px;
					height: 48px;
					border-radius: 44px 44px 44px 44px;
					border: 2px solid #37C3A0;
					margin-right: 30px;

					text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24px;
						color: #37C3A0;
						line-height: 48px;
						margin-left: 12px;
					}

					image {
						width: 24px;
						height: 24px;
					}

					&.active {
						background: #37C3A0;

						text {
							color: #FFFFFF;
						}
					}
				}
			}

			.form-input {
				width: 460px;
				height: 60px;
				padding: 7px 22px;
				box-sizing: border-box;
				background: #FFFFFF;
				box-shadow: 0px 2px 12px 0px rgba(86, 162, 143, 0.12);
				border-radius: 62px 62px 62px 62px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24px;
				&.input-highlight {
				 box-shadow: 0px 2px 12px 0px rgba(86,162,143,0.12);
				 border: 2px solid #37C3A0;
				}
			}

			.text-input {
				color: #B1B1B1;
			}
		}

		.btn-box {
			margin-top: 50px;
			margin-bottom: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 360px;
			height: 68px;
			background: #37C3A0;
			border-radius: 121px 121px 121px 121px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28px;
			color: #FFFFFF;
		}
	}
</style>