graduation_project/pages/healthService/healthService.vue

<template>
	<view class="container" style="min-height:100vh">
		<view class="header" @click="handleBack">
			<image class="header-back-img" src="../../imgs/back.png"></image>	
			{{ registerType == 1 ? '失能老年人医养结合和健康服务登记' : '高龄老人医养结合服务登记'}}
			<view></view>
		</view>
		<view class="view-step">
			<view>
				<image src="../../imgs/icon_wanc.png"  class="step-img"></image>
				<p style="color:#3D3D3D">信息</p>
			</view>
			<h1></h1>
			<view>
				<image src="../../imgs/icon_moren.png"  class="step-img"></image>
				<p>评估</p>
			</view>
			<h1></h1>
			<view>
				<image src="../../imgs/icon_moren.png"  class="step-img"></image>
				<p>筛查</p>
			</view>
			<h1></h1>
			<view>
				<image src="../../imgs/icon_moren.png"  class="step-img"></image>
				<p>登记</p>
			</view>
			<h1></h1>
			<view>
				<image src="../../imgs/icon_moren.png"  class="step-img"></image>
				<p>确认</p>
			</view>
		</view>
		<view style="flex: 1; position: relative;margin-top: 20px;">
			<scroll-view class="view-scroll" scroll-y="true" :lower-threshold="50" scroll-with-animation >
				<view class="view-form">
					<p class="view-title" style="margin-bottom: 0;">老人信息</p>
					<u-form :model="form" :rules="rules" ref="uForm"  label-width="100">
						<u-form-item class="view-form-item" label="姓名" prop="name">
							<u-input class='form-item-input' v-model="form.name"  placeholder="请填写"/>
						</u-form-item>
						<u-form-item class="view-form-item" label="身份证号" prop="idCard">
							<u-input class='form-item-input' v-model="form.idCard"  placeholder="请填写"/>
						</u-form-item>
						<u-form-item class="view-form-item" label="联系方式" prop="phone">
							<u-input class='form-item-input' v-model="form.phone"  placeholder="请填写"/>
						</u-form-item>
						<u-form-item class="view-form-item" label="家庭住址" prop="address">
							<u-input class='form-item-input' v-model="form.address" placeholder="请填写"/>
						</u-form-item>
						<p style="color: #303133;font-size: 15px;line-height: 52px;">照片</p>
						<view class="uploat_img">
							<view class="uploat_img-ul">
								<!-- <view class="uploat_img-li" v-for="(item,index) in form.imgList" :key="index">
									<image src="../../del.png" mode="" class="img-li-del" @click="handleImgDel(index, 1)"></image>
								</view> -->
								<u-upload
									@afterRead="afterRead"
									name="1">
									<image v-if="form.pic" :src="imgurl + form.pic" style="max-width: 80px;max-height: 80px;" ></image>	
								</u-upload>
							</view>
						</view>
					</u-form>
				</view>
				<view class="view-form">
					<p class="view-title" style="margin-bottom: 0;">老人信息</p>
					<u-form :model="form" :rules="rules" ref="uForm1"  label-width="100">
						<u-form-item class="view-form-item" label="监护人姓名" prop="guardianName">
							<u-input class='form-item-input' v-model="form.guardianName"  placeholder="请填写"/>
						</u-form-item>
						<u-form-item class="view-form-item" label="身份证号" prop="guardianIdcard">
							<u-input class='form-item-input' v-model="form.guardianIdcard"  placeholder="请填写"/>
						</u-form-item>
						<u-form-item class="view-form-item" label="联系方式" prop="guardianPhone">
							<u-input class='form-item-input' v-model="form.guardianPhone"  placeholder="请填写"/>
						</u-form-item>
						<u-form-item class="view-form-item" label="家庭住址" prop="guardianAddress">
							<u-input class='form-item-input' v-model="form.guardianAddress" placeholder="请填写"/>
						</u-form-item>
					</u-form>
				</view>
			</scroll-view>
		</view>
		<view class="view-modal-but" @click="handleSubmit">下一步</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template> 

<script> 
import config from '@/common/config'
import {queryById,queryAdd,queryUpd,upload} from '@/common/api.js';
	export default {
		data() {
			return { 
				imgurl:config.baseUrl,
				fileList:[],
				rules: {
					name:[{
							required: true,
							message: '请输入姓名',
							trigger: ['blur']
					}],
					age:[{
							required: true,
							message: '请输入年龄',
							trigger: ['blur']
					}],
					idCard:[{
							required: true,
							message: '请输入身份证号',
							trigger: ['blur']
						},{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								let regs = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
								if (!regs.test(this.form.idCard)) {
								  return false
								}else{
									return true
								}
							},
							message: '身份证号格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						},
					],
					guardianIdcard:[{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								let regs = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
								if (!regs.test(this.form.guardianIdcard) && this.form.guardianIdcard) {
								  return false
								}else{
									return true
								}
							},
							message: '身份证号格式不正确',
							required: true,
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						},
					],
					phone:[{
							required: true,
							message: '请输入联系方式',
							trigger: ['blur']
						},{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								let regs = /^1[3-9]\d{9}$/;
								if (!regs.test(this.form.phone)) {
								  return false
								}else{
									return true
								}
							},
							message: '格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					guardianPhone:[{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								let regs = /^1[3-9]\d{9}$/;
								if (!regs.test(this.form.guardianPhone) && this.form.guardianPhone) {
								  return false
								}else{
									return true
								}
							},
							message: '格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					phone:[{
							required: true,
							message: '请输入联系方式',
							trigger: ['blur']
						},{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								let regs = /^1[3-9]\d{9}$/;
								if (!regs.test(this.form.phone)) {
								  return false
								}else{
									return true
								}
							},
							message: '格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					
				},
				modalShow: false,
				token: uni.getStorageSync('userToken'),
				action: config.baseUrl + '/upload',
				guardianForm:{},
				form:{
					imgList:[],
				},
				patientId:0, // 患者ID
				patientData:{}, //患者详情
				registerType:1
			}
		},
		methods: {
			// 新增图片
			async afterRead(event) {
				console.log()
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(lists)
				let fileListLen = this.fileList.length
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl + '/common/upload', // 仅为示例，非真实的接口地址
						header : { Authorization: `Bearer ${this.token}` },
						filePath: url,
						name: 'file',
						success: (res) => {
							res = JSON.parse(res.data)
							if(res.code == 200){
								this.form.pic = res.fileName
								this.fileList =  [
									{
										url: config.baseUrl + res.fileName,
									}
								]
								console.log(this.fileList)
							}else{
								this.$refs.uToast.show({
									type: 'error',
									icon: false,
									message: "上传失败",
								})
							}
						}
					});
				})
			},
			// 通过ID查询患者详情
			async getQueryById(){
				this.fileList = []
				const res = await queryById({id:this.patientId})
				if(res.code == 200){
					let { id,name,sex,age,idCard,phone,address,guardianName, guardianIdcard, guardianPhone, guardianAddress,pic} = res.data
					this.form = {
						id, name, sex, age, idCard, phone, address,
						guardianName, guardianIdcard, guardianPhone, guardianAddress,
						pic: pic || ''
					}
					if(this.form.pic){
						this.fileList =  [
							{
								url: config.baseUrl + this.form.pic,
							}
						]
					}
				}
			},
			// 删除图片
			handleImgDel(_index, _type) {
			  this.form.imgList.splice(_index, 1);
			},
			// 提交信息
			handleSubmit(){
				this.$refs.uForm.validate().then(async formRes =>{
					const res = await queryUpd(this.form)
					if(res.code == 200){
						// this.$refs.uToast.show({
						// 	type: 'success',
						// 	icon: false,
						// 	message: "提交成功",
						// })
						uni.navigateTo({ url: `/pages/healthService/healthService2?elderlyId=${this.patientId}&djType=${this.registerType}` });
					}
				})
			},
			// 选中某个单选框时，由radio时触发
			radioChange(_item,row) {
				_item.options.forEach(i=>{
					i.disabled = false
				})
				row.disabled = true
				// 循环计算分值
				let sum = 0
				this.testList.forEach(i =>{
					i.options.forEach(j =>{
						if(j.disabled){
							sum += j.score
							console.log('sum',sum)
						}
					})
				})
				
				this.form.codeList.SHZLNLPG = sum
			},
			handleShow(){
				this.modalShow = true
				console.log(this.modalShow)
			},
			// 返回上一步
			handleBack(){
				uni.navigateBack({
					delta: 1, 
				});
			},
		},
		created() {
			
		},
		async mounted (){
		},
		onLoad(data) {
			let {id,type} = data
			this.patientId = id
			this.registerType = type
			console.log(this.registerType)
			this.getQueryById()
		},
	}
</script>

<style lang="scss">
	.view-title{
		font-size: 16px;
		color: #FF981F;
		margin-bottom: 10px;
	}
	.view-modal-but{
		height: 45px;
		background: #FF981F;
		border-radius: 23px;
		font-size: 15px;
		color: #FFFFFF;
		line-height: 45px;
		text-align: center;
		margin-top: 14px;
		font-size: 15px;
color: #FFFFFF;
	}
	.view-modal-ul{
		.view-modal-li{
			
		}
	}
	.li-options-item{
		margin-bottom: 10px;
		span{
			font-size: 15px;
			color: #555555;
		}
	}
	.view-modal{
		.view-modal-h1{
			font-size: 20px;
			color: #3D3D3D;
			text-align: center;
		}
		.modal-li-p{
			font-size: 17px;
			color: #3D3D3D;
			margin-bottom: 20px;
		}
		.view-modal-p{
			font-size: 12px;
			color: #999999;
			margin: 10px 0;
		}
	}
	.view-form1{
		margin-top: 20px;
		.view-form-li1{
			p{
				flex:1
			}
			.form-li-right{
				view{
					width: 100%;
					text-align: right;
					color:#FF981F;
					line-height: 52px;
					
				}
				.li-right-unit{
					font-size: 16px;
				}
			}
		}
	}
	.view-form{
		padding: 14px;
		background: #fff;
		border-radius: 10px;
		margin-bottom: 10px;
		.view-form-title{ 
			font-size: 16px;
			color:#FF981F;
			margin-bottom: 10px;
		}
		.view-form-ul{
			.view-form-li{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #E2E2E2;
				.form-li-right{
					flex: 1;
					display: flex;
					align-items: center;
					.form-li-input{
						flex: 1;
						border: none;
						text-align: right;
						height: 40px;
					}
				}
				p{
					font-size: 18px;
					width: 120px;
				}
			}
			// .view-form-li:last-child{
			// 	border: none;
			// }
		}
	}
	.uploat_img{
		// padding: 14px 0 0 22px;
		background: #fff;
		border-radius: 8px;
		// margin-bottom: 10px ;
		.uploat_img-ul{
			display: flex;
			flex-wrap: wrap;
			.uploat_img-li{
				width: 90px !important;
				height: 90px !important;
				border-radius: 10px !important;
				border: 1px dashed #CACACA;
				margin-right: 18px;
				margin-bottom: 14px;
				position: relative;
				.img-li-del{
					position: absolute;
					top: 4px;
					right: 4px;
					width: 14px;
					height: 14px;
				}
			}
		}
		
		p{
			font-size: 16px;
			color:#FF981F;
			margin-bottom: 10px;
		}
	}
	
	.header{
		font-size: 16px;
		color: #3D3D3D;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.header-back-img{
			width: 18px;
			height: 18px;
		}
		view{
			width: 20px;
		}
	}
	.container{
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 46px 16px 20px 16px;
		background: linear-gradient(130deg,#ffe8cc 8%,#fcfcfc,#fcfcfc,#fcfcfc);
	}
</style>
<style>
	.u-modal__button-group__wrapper{
		display: none !important;
	}
	.view-scroll {
	  height: 100%;
	  position: absolute;
	}
	.u-radio-group--row{
		flex-wrap: wrap;
	}
	
</style>