medicine-xcx/pagesA/my_other_list/healthInfo/index.vue

<template>
	<view class="health-info">
		<!-- <view class="health-info-header font-30 text-black font-weight-bold m-b-40">健康信息</view> -->
		<view class="health-info-form">
			<view class="health-info-form-item" v-for="(item, index) in healthInfo" :key="index">
				<view class="flex align-center justify-between">
					<text class="font-32">{{ item.name }}</text>
					<u-radio-group v-model="item.value">
						<u-radio 
							@change="radioChange(radioItem, item, index)"
							active-color="#01aeea"
							v-for="(radioItem, radioIndex) in item.radios" :key="radioIndex" 
							:name="radioItem.name"
							:disabled="radioItem.disabled"
						>
							{{radioItem.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view v-if="item.isChild && item.showChild">
					<view class="flex align-center flex-wrap m-b-20">
						<view 
							v-for="(subItem, subIndex) in item.child.otherList"
							@click="otherChange(item, subItem, subIndex)"
							:key="subIndex"
							:class="{'health-info-form-item-tag--active': subItem.checked}"
							class="font-30 health-info-form-item-tag flex align-center justify-center font-24 m-r-16 m-t-26"
						>
							{{ subItem.name }}
						</view>
					</view>
					<view>
						<text class="font-30 text-black">其他</text>
						<view class="health-info-form-item-textarea position-relative m-t-6 p-16">
							<u-input
								v-model="item.child.otherVal" 
								type="textarea" 
								placeholder="请补充您的过敏药物" 
								:height="120" 
								auto-height
								maxlength="200"
							/>
							<view class="position-absolute health-info-form-item-textarea-num">
								{{ `${item.child.otherVal.length?item.child.otherVal.length:0}/${textareaMaxlen}`}}
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="health-info-footer position-fixed flex align-center justify-center">
			<u-button class="font-32" type="primary" shape="circle" @click="confirm">确定</u-button>
		</view>
	</view>
</template>

<script>
	
	export default {
		data () {
			return {
				textareaMaxlen: 200,
				healthInfo: [
					{
						name: '过往病史',
						value: '',
						isChild: true,
						showChild: false,
						radios: [
							{name: '有', disabled: false, value: '1'},
							{name: '无', disabled: false, value: '2'},
						],
						child: {
							otherVal: '',
							select: [],
							otherList: []
						}
					},
					{
						name: '药物过敏史',
						value: '',
						isChild: true,
						showChild: false,
						radios: [
							{name: '有', disabled: false, value: '1'},
							{name: '无', disabled: false, value: '2'},
						],
						child: {
							otherVal: '',
							select: [],
							otherList: []
						}
					},
					{
						name: '食物/接触过敏史',
						value: '',
						isChild: true,
						showChild: false,
						radios: [
							{name: '有', disabled: false, value: '1'},
							{name: '无', disabled: false, value: '2'},
						],
						child: {
							otherVal: '',
							select: [],
							otherList: []
						}
					},
					{
						name: '家族遗传病史',
						value: '',
						isChild: true,
						showChild: false,
						radios: [
							{name: '有', disabled: false, value: '1'},
							{name: '无', disabled: false, value: '2'},
						],
						child: {
							otherVal: '',
							select: [],
							otherList: []
						}
					},
					{
						name: '抽烟',
						value: '',
						isChild: false,
						showChild: false,
						radios: [
							{name: '有', disabled: false, value: '1'},
							{name: '无', disabled: false, value: '2'},
						],
						child: {
							otherVal: '',
							select: [],
							otherList: []
						}
					},
					
					{
						name: '饮酒',
						value: '',
						isChild: false,
						showChild: false,
						radios: [
							{name: '有', disabled: false, value: '1'},
							{name: '无', disabled: false, value: '2'},
						],
						child: {
							otherVal: '',
							select: [],
							otherList: []
						}
					},
					{
						name: '妊娠哺乳',
						value: '',
						isChild: false,
						showChild: false,
						radios: [
							{name: '有', disabled: false, value: '1'},
							{name: '无', disabled: false, value: '2'},
						],
						child: {
							otherVal: '',
							select: [],
							otherList: []
						}
					},
					
				],
				form: {}
			}
			
		},
		onLoad(options) {
			if(options.form){
				this.form = JSON.parse(options.form);
				console.log(this.form,"接受参数2")
				if(this.form.Id !== '') {
					this.editInfo(this.form);
				}
			}
			this.getAllergyList();
		},
		methods: {
			// 获取药品过敏信息列表
			getAllergyList(){
				this.$api('getAllergyList').then(res => {
					let {code, result, message} = res;
					if(code == 200) {
						console.log(result)
						result.forEach(item => {
							this.healthInfo.forEach(item2 =>{
								if(item2.name == item.name) {
									item.list.forEach(item3 => {
											item2.child.otherList.push({ name: item3.name, checked: false})
									})
								}
							})
						});
						
						if(this.form.Id !== '') {
							// 设置选中的标签
							this.selectOtherList(this.form);
						}
					}else{
						this.$Toast(message);
					}
				}).catch(err => {
					this.$Toast(err.message)
				})
			},
			radioChange(radioItem, item, index) {
				item.showChild = radioItem.value == 1 ? true : false
				// if()
			},
			otherChange(item, subItem, idx) {
				console.log(item, subItem, idx,111111111)
				item.child.otherList.forEach((obj, index) => {
						 if(index === idx){
							 console.log(obj.checked)
							 obj.checked = !obj.checked
							 if(obj.checked) {
								 item.child.select.push(obj.name);
							 }else{
								 const newOtherVal = [...new Set(item.child.select)].filter(item => item !== obj.name)
								 item.child.select = newOtherVal
							 }
						 }
						// obj[idx].checked = !obj[idx].checked;
						// if(obj[idx].checked){
						// 	// 添加
						// 	item.select.push(obj[idx].name);
						// }else {
						// 	// 删除
						// 	const newOtherVal = [...new Set(select)].filter(item => item !==obj[idx].name)
						// 	item.select = newOtherVal;
						// }
				// console.log(item);
						// obj.checked = index === idx ? true : false
				})
				// item.child.otherList.splict(idx, 1, { ...subItem, checked: true})
				console.log(subItem, idx)
			},
			
			// 修改信息
			editInfo(data) {
				// 过往病史是否有1有
				this.healthInfo[0].showChild = data.pastMedicalHistoryIs == 0? false: true;
				this.healthInfo[0].value= this.healthInfo[0].showChild? '有': '无'
				this.healthInfo[1].showChild = data.drugAllergyIs ==0? false: true;
				this.healthInfo[1].value= this.healthInfo[1].showChild? '有': '无'
				this.healthInfo[2].showChild = data.contactAllergy == 0? false: true;
				this.healthInfo[2].value= this.healthInfo[2].showChild? '有': '无'
				this.healthInfo[3].showChild = data.hereditaryDisease == 0? false: true;
				this.healthInfo[3].value= this.healthInfo[3].showChild? '有': '无'
				this.healthInfo[4].showChild = data.smoke == 0? false: true;
				this.healthInfo[4].value= this.healthInfo[4].showChild? '有': '无'
				// 过往病史其他
				this.healthInfo[0].child.otherVal = data.pastMedicalHistoryOther ;
				// 	1药物过敏史
				// 药物过敏史其他
				this.healthInfo[1].child.otherVal = data.other;
				
				// 食物接触过敏史1有
				// 食物接触过敏史其他
				this.healthInfo[2].child.otherVal = data.contactAllergyOther;
				
				// 家族遗传病史1有
				
				// 家族遗传病其他
				this.healthInfo[3].child.otherVal = data.hereditaryDiseaseOther ;
				// 吸烟
				// 过往病史标签 药物过敏史标签 食物接触过敏史标签  家族遗传病标签
				this.healthInfo[0].child.select = (data.pastMedicalHistoryLabel && data.pastMedicalHistoryLabel !== '')?data.pastMedicalHistoryLabel.split(',') : [];
				this.healthInfo[1].child.select= (data.drugAllergyLabel && data.drugAllergyLabel !== '')? data.drugAllergyLabel.split(',') : [];
				this.healthInfo[2].child.select = (data.contactAllergyLabel && data.contactAllergyLabel !== '')? data.contactAllergyLabel.split(',') : [];
				this.healthInfo[3].child.select= (data.hereditaryDiseaseLabel && data.hereditaryDiseaseLabel !== '')? data.hereditaryDiseaseLabel.split(',') : [];
			},
			// 修改信息 选中的标签
			selectOtherList(data){
				// 过往病史标签 药物过敏史标签 食物接触过敏史标签  家族遗传病标签
				// debugger
				for(let i= 0; i<= this.healthInfo.length-1; i++){
					this.healthInfo[i].child.otherList.forEach(item => {
						this.healthInfo[i].child.select.forEach(item2 =>{
							if(item.name == item2) {
								item.checked = true;
							}
						})
					})
				} 
				
			},
			
			// 处理选中的信息
			getUserSelectInfo () {
				// 过往病史是否有1有
				let pastMedicalHistoryIs,pastMedicalHistoryLabel,pastMedicalHistoryOther;
				this.healthInfo[0].showChild ? pastMedicalHistoryIs = 1: pastMedicalHistoryIs = 0
				// 过往病史标签
				pastMedicalHistoryLabel = this.healthInfo[0].child.select.toString();
				// 过往病史其他
				pastMedicalHistoryOther = this.healthInfo[0].child.otherVal;
				pastMedicalHistoryLabel = pastMedicalHistoryLabel + pastMedicalHistoryOther
				// 	1药物过敏史
				let drugAllergyIs,drugAllergyLabel,other;
				this.healthInfo[1].showChild ? drugAllergyIs = 1: drugAllergyIs = 0
				// 药物过敏史标签
				drugAllergyLabel = this.healthInfo[1].child.select.toString();
				// 药物过敏史其他
				other = this.healthInfo[1].child.otherVal;
				drugAllergyLabel = drugAllergyLabel + other
				
				// 食物接触过敏史1有
				let contactAllergy,contactAllergyLabel,contactAllergyOther;
				this.healthInfo[2].showChild ? contactAllergy = 1: contactAllergy = 0
				// 食物接触过敏史标签
				contactAllergyLabel = this.healthInfo[2].child.select.toString();
				// 食物接触过敏史其他
				contactAllergyOther = this.healthInfo[2].child.otherVal;
				
				contactAllergyLabel = contactAllergyLabel + contactAllergyOther
				
				// 家族遗传病史1有
				let hereditaryDisease,hereditaryDiseaseLabel,hereditaryDiseaseOther;
				this.healthInfo[3].showChild ? hereditaryDisease = 1: hereditaryDisease = 0
				// 家族遗传病标签
				hereditaryDiseaseLabel = this.healthInfo[3].child.select.toString();
				// 家族遗传病其他
				hereditaryDiseaseOther = this.healthInfo[3].child.otherVal;
			
				hereditaryDiseaseLabel = hereditaryDiseaseLabel + hereditaryDiseaseOther
				
				 let smoke; 
				 this.healthInfo[4].showChild ? smoke = 1: smoke = 0
				
				return {
					pastMedicalHistoryIs,pastMedicalHistoryLabel,
					drugAllergyIs,drugAllergyLabel,
					contactAllergy,contactAllergyLabel,
					hereditaryDisease,hereditaryDiseaseLabel,
					smoke
				}
				 
			},
			isRules(item) {
				if(this.healthInfo[0].showChild && item.pastMedicalHistoryLabel=='') { 
					  return '请补充过往病史信息或选择往病史信息标签' 
				}
				if(this.healthInfo[1].showChild && item.drugAllergyLabel=='') {
					 return '请补充药物过敏史信息或选择药物过敏史标签' 
				}
				if(this.healthInfo[2].showChild && item.contactAllergyLabel=='') {
					 return '请补充食物接触过敏史信息或选择食物接触过敏史标签' 
				}
				if(this.healthInfo[3].showChild && item.hereditaryDiseaseLabel=='') {
					 return '请补充家族遗传病信息或选择家族遗传病标签' 
				}
				return false
			},
			confirm () {
				console.log(this.healthInfo)
				// 处理选中的信息
				const userSelectInfo = this.getUserSelectInfo();
				if(this.isRules(userSelectInfo)) {
					this.$Toast(this.isRules(userSelectInfo));
					return
				}
				const params = {
					...userSelectInfo,
					birthday: this.form.time,
					cardId: this.form.idCard,
					cardName: this.form.type,
					cardType: this.form.cardType,
					cardPhoto: this.form.idPhoto,
					cardPic: this.form.idPhotoImage,
					labelValue: this.form.relationship,
					name: this.form.name,
					phone: this.form.phone,
					sex: this.form.sex == '男'?1: 2,
					height: this.form.height,
					weight: this.form.weight,
					defaultIs: 0
				};
				if(this.form.Id !== '') {
					params.id = this.form.Id
				}
				
				// 将空的删除掉
				params.pastMedicalHistoryIs == '0'?	delete params.pastMedicalHistoryLabel:''
				params.drugAllergyIs == '0'?	delete params.drugAllergyLabel:''
				params.contactAllergy == '0'?	delete params.contactAllergyLabel:''
				params.hereditaryDisease == '0'?	delete params.hereditaryDiseaseLabel:''
				
				// 添加用药人
				this.$api('addDrugUser',params).then(res => {
					let {code, result, message} = res;
					if(code == 200) {
						if(this.form.typeName == 'noPrescription') {
							//  从无处方 -> 预约流程
							const medicineMan = JSON.stringify(result)
							setTimeout(()=> {
								this.$tools.navigateTo({
									url: `/pagesC/subscribe/confirmSubscribe?addressId=${params.Id}&medicineMan=${medicineMan}&goodsId=${params.goodsId}&num=${params.num}&price=${params.price}&goodSkuParam=${params.goodSkuParam}&prescriptionId=${params.prescriptionId}`
								})
							},1500)
						}else {
							// 修改 添加
							console.log(result);
							if(this.form.Id !== ''){
								this.$Toast('修改成功');
								setTimeout(()=> {
									// 修改 和 新增
									uni.navigateBack({
										delta: 3
									})
								},1500)
							}else{
								this.$Toast(result);
								setTimeout(()=> {
									// 修改 和 新增
									uni.navigateBack({
										delta: 3
									})
								},1500)
							}
						}
					}else {
						this.$Toast(message);
					}
				}).catch(err => {
					this.$Toast(err.message);
				})
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-input__textarea{
		background-color: rgba(245,245,245,1) !important;
	}
	.health-info-form-item-textarea{
		background-color: rgba(245,245,245,1) !important;
	}
	/deep/ .u-input__input{
		font-size: 30rpx !important;
	}
	.health-info {
		padding: 20rpx 40rpx 160rpx;
		&-form {
			&-item {
				padding: 20rpx 0;
				border-bottom: 2rpx solid #d2d2d2;
				
				&-tag {
					padding: 0 15rpx;
					height: 50rpx;
					background: #E2E2E2;
					color: #1d1d1d;
					border-radius: 24rpx;
					&--active {
						background: #baebfc;
						color: #01aeea;
					}
				}
				
				&-textarea {
					background-color: #E2E2E2;
					border-radius: 10rpx;
					&-num {
						right: 26rpx;
						bottom: 4rpx;
						font-size: 24rpx;
						color: #b8b8b8;
					}
				}
			}
		}
		
		&-footer {
			z-index: 1;
			height: 120rpx;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			/deep/.u-btn {
				width: 660rpx;
				height: 80rpx;
			}
		}
	}
</style>