179crm_user_app/pages_health/addDoc.vue

<template>
	<view class="content">
		<view class="inner">
			<view class="form-box">
				<text class="form-title">身体信息</text>
				<view class="form-item">
					<text class="label">身高<text class="color-price">*</text></text>
					<input maxlength="10" class="input-width" type="digit" v-model="form.height" placeholder="请输入身高"
						placeholder-class="form-input" />
					<text class="unit">cm</text>
				</view>
				<view class="form-item">
					<text class="label">体重<text class="color-price">*</text></text>
					<input maxlength="10" class="input-width" type="digit" v-model="form.weight" placeholder="请输入体重"
						placeholder-class="form-input" />
					<text class="unit">kg</text>
				</view>
				<view class="form-item">
					<text class="label">腰围<text class="color-price">*</text></text>
					<input maxlength="10" class="input-width" type="digit" v-model="form.waistCircumference"
						placeholder="请输入腰围" placeholder-class="form-input" />
					<text class="unit">cm</text>
				</view>
				<view class="form-item">
					<text class="label">臀围<text class="color-price">*</text></text>
					<input maxlength="10" class="input-width" type="digit" v-model="form.hipCircumference"
						placeholder="请输入臀围" placeholder-class="form-input" />
					<text class="unit">cm</text>
				</view>


			</view>
			<view class="form-box">
				<text class="form-title">疾病史</text>
				<view class="form-item">
					<text class="label">高血糖</text>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio @click="hyperglycemiaChange(0)" value="0" :checked="form.hyperglycemia==0"
								style="margin-right: 16upx;" />
							<text class="sex-text">无</text>
						</label>
						<label style="margin-right: 50upx;">
							<radio @click="hyperglycemiaChange(1)" value="1" :checked="form.hyperglycemia==1"
								style="margin-right: 16upx;" />
							<text class="sex-text">轻微</text>
						</label>
						<label>
							<radio @click="hyperglycemiaChange(2)" value="2" :checked="form.hyperglycemia==2"
								style="margin-right: 16upx;" />
							<text class="sex-text">严重</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">测量值</text>
					<input maxlength="10" class="input-width" type="digit" v-model="form.hyperglycemiaValue"
						placeholder="请输入测量值" placeholder-class="form-input" />
					<text class="unit">mmol/L</text>
				</view>
				<view class="form-item">
					<text class="label">高血压</text>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio @click="hypertensionChange(0)" value="0" :checked="form.hypertension==0"
								style="margin-right: 16upx;" />
							<text class="sex-text">无</text>
						</label>
						<label style="margin-right: 50upx;">
							<radio @click="hypertensionChange(1)" value="1" :checked="form.hypertension==1"
								style="margin-right: 16upx;" />
							<text class="sex-text">轻微</text>
						</label>
						<label>
							<radio @click="hypertensionChange(2)" value="2" :checked="form.hypertension==2"
								style="margin-right: 16upx;" />
							<text class="sex-text">严重</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">收缩压</text>
					<input maxlength="10" class="input-width" type="digit" v-model="form.systolicPressure"
						placeholder="请输入测量值" placeholder-class="form-input" />
					<text class="unit">mmHg</text>
				</view>
				<view class="form-item">
					<text class="label">舒张压</text>
					<input maxlength="10" class="input-width" type="digit" v-model="form.diastolicPressure"
						placeholder="请输入测量值" placeholder-class="form-input" />
					<text class="unit">mmHg</text>
				</view>
				<view class="form-item">
					<text class="label">高血脂</text>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio @click="hyperlipidemiaChange(0)" value="0" :checked="form.hyperlipidemia==0"
								style="margin-right: 16upx;" />
							<text class="sex-text">无</text>
						</label>
						<label style="margin-right: 50upx;">
							<radio @click="hyperlipidemiaChange(1)" value="1" :checked="form.hyperlipidemia==1"
								style="margin-right: 16upx;" />
							<text class="sex-text">轻微</text>
						</label>
						<label>
							<radio @click="hyperlipidemiaChange(2)" value="2" :checked="form.hyperlipidemia==2"
								style="margin-right: 16upx;" />
							<text class="sex-text">严重</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">高尿酸</text>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio @click="hyperuricemiaChange(0)" value="0" :checked="form.hyperuricemia==0"
								style="margin-right: 16upx;" />
							<text class="sex-text">无</text>
						</label>
						<label style="margin-right: 50upx;">
							<radio @click="hyperuricemiaChange(1)" value="1" :checked="form.hyperuricemia==1"
								style="margin-right: 16upx;" />
							<text class="sex-text">轻微</text>
						</label>
						<label>
							<radio @click="hyperuricemiaChange(2)" value="2" :checked="form.hyperuricemia==2"
								style="margin-right: 16upx;" />
							<text class="sex-text">严重</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">测量值</text>
					<input maxlength="10" class="input-width" type="digit" v-model="form.hyperuricemiaValue"
						placeholder="请输入测量值" placeholder-class="form-input" />
					<text class="unit">μmol/L</text>
				</view>
				<view class="form-item">
					<text class="label">高体重</text>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio @click="bodyWeightStatusChange(0)" value="0" :checked="form.bodyWeightStatus==0"
								style="margin-right: 16upx;" />
							<text class="sex-text">正常</text>
						</label>
						<label style="margin-right: 50upx;">
							<radio @click="bodyWeightStatusChange(1)" value="1" :checked="form.bodyWeightStatus==1"
								style="margin-right: 16upx;" />
							<text class="sex-text">偏瘦</text>
						</label>
						<label>
							<radio @click="bodyWeightStatusChange(2)" value="2" :checked="form.bodyWeightStatus==2"
								style="margin-right: 16upx;" />
							<text class="sex-text">偏重</text>
						</label>
					</radio-group>
				</view>

			</view>
			<view class="form-box">
				<text class="form-title">其他病史</text>
				<view class="form-item wrap">
					<view class="form-item-tag mb16" v-for="(item, index) in tags" :key="index"
						@click="tagsClick(item)">
						<view :class="checkedItems.includes(item.dictValue)?'tag active':'tag'">
							{{item.dictLabel}}
						</view>
					</view>
					<!-- 其他选项 -->
					<view class="form-item-tag" @click="toggleOther">
						<view :class="otherSelected ? 'tag active' : 'tag'">
							+ 其他
						</view>
					</view>
				</view>
				<view class="form-item" v-if="otherSelected">
					<text class="label">其他病史</text>
					<input class="input-width" type="text" v-model="symptom" placeholder="请输入病史"
						placeholder-class="form-input" />
				</view>
			</view>
			<view class="form-box">
				<text class="form-title">症状史</text>
				<view class="form-item wrap">
					<view class="form-item-tag mb16" v-for="(item, index) in cates" :key="index"
						@click="catesClick(item)">
						<view :class="checkedItems2.includes(item.dictValue)?'tag active':'tag'">
							{{item.dictLabel}}
						</view>
					</view>
					<!-- 其他选项 -->
					<view class="form-item-tag" @click="toggleOther2">
						<view :class="otherSelected2 ? 'tag active' : 'tag'">
							+ 其他
						</view>
					</view>
				</view>
<!-- 其他症状输入框（选中"其他"时显示） -->
			<view class="form-item" v-if="otherSelected2">
				<text class="label">其他症状</text>
				<input class="input-width" type="text" v-model="symptom2" placeholder="请输入症状"
					placeholder-class="form-input" />
			</view>
			</view>
			
		</view>
		<view class="btn-box">
			<view class="sub-btn" @click="submit()">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		getDoc,
		addDoc,
		updateDoc
	} from '@/api/healthUser.js'
	import {
		getDictByKey
	} from '@/api/common.js'
	export default {
		data() {
			return {
				type: null,
				patientId: null,
				symptom: null,
				symptom2: null,
				famaleurl: "/static/images/health/female_profile.png",
				maleurl: "/static/images/health/my_heads.png",
				// 存储所有选中的症状值
				checkedItems: [],
				checkedItems2: [],
				text: [],
				text2: [],
				// 其他选项是否选中
				otherSelected: false,
				otherSelected2: false,
				// 其他症状输入内容
				tags: [
					// 	{
					// 	name: '心脏病',
					// 	checked:true,
					// 	id: 1
					// },
					// {
					// 	name: '脑梗死',
					// 		checked:false,
					// 	id: 2
					// },{
					// 	name: '肾病',
					// 		checked:false,
					// 	id: 3
					// },{
					// 	name: '脂肪肝',
					// 		checked:false,
					// 	id: 4
					// },
				],
				cates: [],
				form: {
					"height": null,
					"weight": null,
					"waistCircumference": null,
					"hipCircumference": null,
					"hyperglycemia": 0,
					"hyperglycemiaValue": null,
					"hypertension": 0,
					"systolicPressure": null,
					"diastolicPressure": null,
					"hyperlipidemia": 0,
					"hyperuricemia": 0,
					"hyperuricemiaValue": null,
					"bodyWeightStatus": 0,
					"otherMedicalHistory": null,
					"symptomHistory": null,
				}

			};
		},
		onLoad(options) {
			
			this.companyUserId = options.companyUserId;
			this.form.userId =options.userId;
			this.form.companyUserId = options.companyUserId;
			// console.log(this.type)
			// if (this.type == 'edit') {
				
			// }
			this.getDoc();
			this.getDictByKey('other_medical_history')
			this.getDictByKey('medical_history')
		},
		methods: {
			sexChange(type) {
				this.form.sex = type
			},
			//血糖
			hyperglycemiaChange(e) {
				this.form.hyperglycemia = e
			},
			//血压
			hypertensionChange(e) {
				this.form.hypertension = e
			},
			//血脂
			hyperlipidemiaChange(e) {
				this.form.hyperlipidemia = e
			},
			//尿酸
			hyperuricemiaChange(e) {
				this.form.hyperuricemia = e
			},
			bodyWeightStatusChange(e) {
				this.form.bodyWeightStatus = e
			},
			tagsClick(item) {
				const index = this.checkedItems.indexOf(item.dictValue);
				if (index > -1) {
					// 如果已选中则移除
					this.checkedItems.splice(index, 1);
				} else {
					// 如果未选中则添加
					this.checkedItems.push(item.dictValue);
					this.text.push(item.dictLabel)
				}
			},
			catesClick(item) {
				const index = this.checkedItems2.indexOf(item.dictValue);
				if (index > -1) {
					// 如果已选中则移除
					this.checkedItems2.splice(index, 1);
				} else {
					// 如果未选中则添加
					this.checkedItems2.push(item.dictValue);
					this.text2.push(item.dictLabel)
				}
			},
			// 切换其他选项
			toggleOther() {
				this.otherSelected = !this.otherSelected;
				// 清空其他症状输入
				if (!this.otherSelected) {
					this.symptom = null;
				}
				},
				toggleOther2() {
						this.otherSelected2 = !this.otherSelected2;
						// 清空其他症状输入
						if (!this.otherSelected2) {
							this.symptom2 = null;
						}
					},
					getDictByKey(key) {
						var data = {
							key: key
						}
						getDictByKey(data).then(
							res => {
								if (res.code == 200) {
									if (key == "other_medical_history") {
										this.tags = res.data;
									}
									if (key == "medical_history") {
										this.cates = res.data;
									}
								}
							},
							err => {}
						);

					},
					getDoc() {
						var data = {
							userId: this.form.userId
						};
						getDoc(data).then(
							res => {
								if (res.code == 200) {
									if(res.data==null){
										this.type='add'
									}else{
										this.type='edit'
										this.form = res.data;
									}
								} else {
									uni.showToast({
										title: res.msg,
									});
								}
							},
							rej => {}
						);
					},
					submit() {
						if (this.form.height == null) {
							uni.showToast({
								icon: 'none',
								title: "身高不能为空",
							});
							return;
						}
						if (this.form.weight == null) {
							uni.showToast({
								icon: 'none',
								title: "体重不能为空",
							});
							return;
						}
						if (this.form.waistCircumference == null) {
							uni.showToast({
								icon: 'none',
								title: "腰围不能为空",
							});
							return;
						}
						if (this.form.hipCircumference == null) {
							uni.showToast({
								icon: 'none',
								title: "臀围不能为空",
							});
							return;
						}
						// console.log(this.text,'---')
			this.form.otherMedicalHistory = this.utils.joinWithSymptom(this.text, this.symptom)
			this.form.symptomHistory = this.utils.joinWithSymptom(this.text2, this.symptom2)
						if (this.type == "add") {
							this.addDoc()
						} else if (this.type == "edit") {
							this.editDoc()
						}

					},
					editDoc() {
						updateDoc(this.form).then(
							res => {
								if (res.code == 200) {
									uni.showToast({
										icon: 'success',
										title: "操作成功",
									});
									setTimeout(function() {
										uni.$emit('refreshHealthFiles');
										uni.navigateBack({
											delta: 1
										})
									}, 500);
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg,
									});
								}
							},
							rej => {}
						);
					},
					addDoc() {
						addDoc(this.form).then(
							res => {
								if (res.code == 200) {
									uni.showToast({
										icon: 'success',
										title: "操作成功",
									});
									setTimeout(function() {
										uni.$emit('refreshHealthFiles');
										uni.navigateBack({
											delta: 1
										})
									}, 500);
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg,
									});
								}
							},
							rej => {}
						);
					},
					// 出生日期选择
					bindDateChange: function(e) {
						this.form.birthdate = e.target.value
					},
			}
		}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.inner {
			// height: calc(100% - 120upx);
			padding: 20upx;

			.form-box {
				padding: 0 30upx;
				background: #FFFFFF;
				border-radius: 16upx;
				margin-bottom: 20upx;

				.form-title {
					font-family: PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: #222426;
					text-align: left;
					padding: 30rpx 0;
					display: block;
				}

				.form-item {
					padding: 30upx 0;
					display: flex;
					align-items: flex-start;
					border-bottom: 1px solid #F1F1F1;

					&:last-child {
						border-bottom: none;
					}

					.label {
						width: 150upx;
						text-align: left;
						font-size: 32upx;
						line-height: 44upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						flex-shrink: 0;
					}

					input {
						text-align: left;
					}

					.unit {
						width: 150upx;
						text-align: right;
						font-size: 32upx;
						line-height: 44upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						flex-shrink: 0;
					}

					.form-input {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						text-align: left;
					}

					.form-item-tag {
						margin-right: 16rpx;

						.tag {
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							border: 2rpx solid #ECECEC;
							display: flex;
							align-items: center;
							padding: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;

							&.active {
								background: #F0FAFF;
								border: 2rpx solid #008FD3;
								color: #008FD3;
							}
						}



					}
				}
			}
		}

		.btn-box {
			height: 120upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: center;

			// position: fixed;
			// width: 90%;
			// bottom: 0;
			// left: 50%;
			// transform: translate(-50%,-50%);
			// background: #FFFFFF;
			.sub-btn {
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #008FD3;
				border-radius: 44upx;
				margin-bottom: 40upx;
			}
		}
	}
</style>