siyu_app/pages/user/healthRecords/edit.vue

<template>
	<view class="container">
		<view class="container-body">
			<!-- 问卷 -->
			<view class="listbox multiplebox" v-for="(item,index) in list" :key="index">
				<view class="listbox-titlebox">
					<text>{{index + 1}}.</text>
					<view class="listbox-titletag" v-if="item.type == 2">多选</view>
					<text class="listbox-title">{{item.name}}</text>
				</view>
				<!-- 多选 -->
				<view class="listbox-option" v-if="item.type == 2">
					<view v-for="(option,i) in item.question" :key="i" class="listbox-option-flex">
						<view
							@click="handleMultiple(item,index,option)"
							:class="item.value.indexOf(option.name) === -1 ? 'listbox-option-item' : 'listbox-option-item option-active'">
							{{option.name}}
						</view>
						<view class="otherinput" v-if="option.isWrite == 1 && item.value.indexOf(option.name) !== -1" @click="handleEdit(index,i)">
							{{option.writeVal || '请输入相关描述'}}
						</view>
					</view>
				</view>
				<!-- 单选 -->
				<view style="margin-top: 20rpx;" v-if="item.type == 1">
					<view class="listbox-choose" v-for="(option,i) in item.question" :key="i" @click="handleChoose(item,option)" >
						<image class="choose-icon" v-if="item.value == option.name"
							src="@/static/image/healthRecords/choose_icon.png" mode="aspectFill"></image>
						<image class="choose-icon" v-if="item.value != option.name"
							src="@/static/image/healthRecords/choose_no_icon.png" mode="aspectFill"></image>
						<text style="flex-shrink: 0;">{{option.name}}</text>
						<view class="choose-input" v-if="option.isWrite == 1 && item.value == option.name" @click.stop="handleEdit(index,i)">
							{{option.writeVal || '请输入相关描述'}}
						</view>
					</view>
				</view>
				<!-- 饮食调查 -->
				<view class="dietary-survey" v-if="item.type == 3">
					<view class="dietary-survey-item" v-for="(option,i) in item.question" :key="i"
						@click="handleChoose(item,option)">
						<view class="dietary-survey-iteml" v-if="option.name !== '每周多少次'">
							<view :class="item.value == option.name ? 'dietary-survey-active':''">{{i+1}}</view>
							<text>{{option.name}}</text>
						</view>
						<view class="dietary-survey-input" v-if="item.name == '平时应酬' && option.name === '每周多少次' && option.writeVal">
							每周{{option.writeVal || '--'}}次
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup">
			<view class="popbox">
				<view class="popbox-title" v-if="list&&list.length>0">{{chooseIndex+1}}.{{list[chooseIndex].name}}</view>
				<view class="popbox-desc" v-if="list&&list.length>0">选项：{{list[chooseIndex].question[chooseItemIdx].name}}</view>
				<view class="uni-textarea-wrapper">
					<textarea class="textarea" placeholder-style="font-size: 28rpx;" :focus="focus" placeholder="请输入相关描述" :value="writeVal" @input="handleinput"/>
					<view class="popbox-confirm-btn" v-if="this.formType!='dietList' && this.formType!='sleepList'&&this.formType!='sportList'" @click="popSubmit">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- footer -->
		<view class="footer" v-if="this.formType!='dietList' && this.formType!='sleepList'&&this.formType!='sportList'">
			<button class="footer-btn" :loading="btnLoading" :disabled="btnLoading" @click="handelSubmit">确认</button>
		</view>
	</view>
</template>

<script>
	import {
		HealthData,
		healthHistoryTempList,
		editRecord,
		myRecord,
		HealthLife
	} from "@/api/healthRecords.js"
	export default {
		data() {
			return {
				focus: false,
				chooseIndex: 0,
				chooseItemIdx: 0,
				writeVal: "",
				btnLoading: false,
				id: undefined,
				formType: "",
				title: "",
				user: {},
				list: [],
				// 饮食调查
				dietList: [
					{
						name: "三餐规律",
						type: 3,
						value: "",
						question: [
							{
								name: "非常规律",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "比较规律",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "没有规律",
								value: 3,
								isWrite: 0,
								writeVal: ""
							}
						],
					},{
						name: "就餐习惯",
						type: 3,
						value: "",
						question: [
							{
								name: "暴饮暴食",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "压力大经常进食",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "就外就餐多",
								value: 3,
								isWrite: 0,
								writeVal: ""
							},{
								name: "夜宵",
								value: 4,
								isWrite: 0,
								writeVal: ""
							},{
								name: "不吃早餐",
								value: 5,
								isWrite: 0,
								writeVal: ""
							}
						],
					},{
						name: "进食速度",
						type: 3,
						value: "",
						question: [
							{
								name: "大约20-30分钟",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "大约10-20分钟",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "大约5-10分钟",
								value: 3,
								isWrite: 0,
								writeVal: ""
							}
						],
					},{
						name: "酒类",
						type: 3,
						value: "",
						question: [
							{
								name: "从不喝酒",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "每天",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "大于3次/周",
								value: 3,
								isWrite: 0,
								writeVal: ""
							},{
								name: "小于3次/周",
								value: 4,
								isWrite: 0,
								writeVal: ""
							}
						],
					},{
						name: "平时应酬",
						type: 3,
						value: "",
						question: [
							{
								name: "多",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "一般",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "少",
								value: 3,
								isWrite: 0,
								writeVal: ""
							},{
								name: "每周多少次",
								value: 3,
								isWrite: 1,
								writeVal: ""
							}
						],
					},{
						name: "喝水量",
						type: 3,
						value: "",
						question: [
							{
								name: "低于1000ml",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "1000ml-1500ml",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "1500ml-1700ml",
								value: 3,
								isWrite: 0,
								writeVal: ""
							},{
								name: "1700ml以上",
								value: 4,
								isWrite: 0,
								writeVal: ""
							}
						],
					},{
						name: "您每天吃的食物种类多吗？",
						type: 3,
						value: "",
						question: [
							{
								name: "种类非常多，12种以上",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "一般6-10种",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "种类较少3-5种",
								value: 3,
								isWrite: 0,
								writeVal: ""
							},{
								name: "种类比较固定",
								value: 4,
								isWrite: 0,
								writeVal: ""
							}
						],
					},{
						name: "您是否有抽烟习惯？",
						type: 3,
						value: "",
						question: [
							{
								name: "是",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "无",
								value: 2,
								isWrite: 0,
								writeVal: ""
							}
						],
					},
				],
				sleepList: [
					{
						name: "睡眠状况",
						type: 3,
						value: "",
						question: [
							{
								name: "很差",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "差",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "一般",
								value: 3,
								isWrite: 0,
								writeVal: ""
							},{
								name: "良好",
								value: 4,
								isWrite: 0,
								writeVal: ""
							}
						],
					},{
						name: "睡眠时间",
						type: 3,
						value: "",
						question: [
							{
								name: "＜6小时",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "6-8小时",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "9-10小时",
								value: 3,
								isWrite: 0,
								writeVal: ""
							},{
								name: "＞10小时",
								value: 4,
								isWrite: 0,
								writeVal: ""
							}
						],
					},{
						name: "经常熬夜吗？",
						type: 3,
						value: "",
						question: [
							{
								name: "经常",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "偶尔",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "很少",
								value: 3,
								isWrite: 0,
								writeVal: ""
							},{
								name: "无",
								value: 4,
								isWrite: 0,
								writeVal: ""
							}
						],
					},
				],
				sportList: [
					{
						name: "日常运动量",
						type: 3,
						value: "",
						question: [
							{
								name: "久坐不动",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "轻度运动(3000-6000步)",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "中度运动(6000-10000步)",
								value: 3,
								isWrite: 0,
								writeVal: ""
							},{
								name: "大量运动(一万步以上)",
								value: 4,
								isWrite: 0,
								writeVal: ""
							}
						],
					},{
						name: "日常是否有运动？",
						type: 2,
						value: "",
						question: [
							{
								name: "无",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "散步",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "跑步",
								value: 3,
								isWrite: 0,
								writeVal: ""
							},{
								name: "自行车",
								value: 4,
								isWrite: 0,
								writeVal: ""
							},{
								name: "舞蹈或太极拳",
								value: 5,
								isWrite: 0,
								writeVal: ""
							},{
								name: "上下楼梯",
								value: 6,
								isWrite: 0,
								writeVal: ""
							},{
								name: "球类",
								value: 7,
								isWrite: 0,
								writeVal: ""
							},{
								name: "游泳",
								value: 8,
								isWrite: 0,
								writeVal: ""
							},{
								name: "其他",
								value: 9,
								isWrite: 1,
								writeVal: ""
							}
						],
					},{
						name: "您平均每周锻炼次数？",
						type: 3,
						value: "",
						question: [
							{
								name: "≤2次",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "3-5次",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "≥5次",
								value: 3,
								isWrite: 0,
								writeVal: ""
							}
						],
					},{
						name: "平均每次锻炼时间是多少分钟？",
						type: 3,
						value: "",
						question: [
							{
								name: "≤20",
								value: 1,
								isWrite: 0,
								writeVal: ""
							},{
								name: "20-40",
								value: 2,
								isWrite: 0,
								writeVal: ""
							},{
								name: "41-60",
								value: 3,
								isWrite: 0,
								writeVal: ""
							},{
								name: "＞60",
								value: 3,
								isWrite: 0,
								writeVal: ""
							}
						],
					}
				]
			}
		},
		onLoad(option) {
			this.id = option.id
			this.formType = option.formType
			const formTypeOption = {
				"healthHistory": "填写疾病史",
				"symptomHistory": "填写症状史",
				"familyHistory": "填写家族史",
				"drugHistory": "填写用药史",
				"allergyHistory": "填写过敏史",
				"dietList": "饮食",
				"sleepList": "睡眠情况",
				"sportList": "运动",
			}
			this.title = formTypeOption[this.formType] || ""
			uni.setNavigationBarTitle({
				title: this.title || "",
			});
		},
		onShow() {
			this.user = {}
			if (!this.$isLogin()) {
				this.$showLoginPage();
			} else {
				this.user = this.$getUserInfo();
				if(this.formType=="dietList" || this.formType=="sleepList"||this.formType=="sportList") {
					//this.getHealthLife()
				} else {
					this.getMyRecord()
				}
			}
		},
		methods: {
			handleEdit(index,i) {
				this.chooseIndex = index
				this.chooseItemIdx = i
				this.focus = true
				this.writeVal = this.list[index].question[i].writeVal
				this.$refs.popup.open("bottom")
			},
			close() {
				this.focus = false
				this.$refs.popup.close()
			},
			// 输入
			handleinput(e) {
				this.writeVal = e.detail.value
			},
			popSubmit() {
				this.list[this.chooseIndex].question[this.chooseItemIdx].writeVal = this.writeVal
				this.close()
			},
			// 健康生活回显
			getHealthLife() {
				const param = {
					type: this.formType=="dietList" ? 1 : this.formType=="sleepList" ? 2 :this.formType=="sportList" ? 3 : undefined,
					userId: this.user.userId
				}
				HealthLife(param).then(res => {
						if (res.code == 200 && res.data) {
							this.list = JSON.parse(res.data.formJson)
						}
					},
					rej => {}
				)
			},
			// 健康档案回显
			getMyRecord() {
				myRecord().then(res => {
						if (res.code == 200 && res.data) {
							if(this.formType) {
								this.list = res.data[this.formType] ? JSON.parse(res.data[this.formType]) : []
							}
						}
					},
					rej => {}
				)
			},
			// 单选
			handleChoose(item,option) {
				if(this.formType=="dietList" || this.formType=="sleepList"||this.formType=="sportList") return
				if(item.name == '平时应酬' && option.name === '每周多少次') return
				item.value = option.name
			},
			// 多选
			handleMultiple(item, index, option) {
				if(this.formType=="dietList" || this.formType=="sleepList"||this.formType=="sportList") return
				const arry = item.value ? item.value.split(',') : []
				if (arry.indexOf(option.name) === -1) {
					arry.push(option.name)
					item.value = arry.join(',')
				} else {
					arry.splice(arry.indexOf(option.name), 1)
					item.value = arry.join(',')
				}
			},
			// 提交健康档案
			handelSubmit() {
				for (let i = 0; i < this.list.length; i++) {
					// 检查当前项的字段是否有值
					if (!this.list[i].value) {
						uni.showToast({
							title: "请检查健康档案是否填写完整",
							icon: "none"
						})
						return
					}
				}
				const arry = this.list.map((item, index) => ({
					id: index + 1,
					name: item.name,
					sort: item.sort,
					type: item.type,
					value: item.value,
					questionType: item.questionType,
					question: item.question.map(it=>({
						...it,
						writeVal: item.value.indexOf(it.name) == -1 ? '' : it.writeVal    // 清空没有选中的选项输入的文字
					}))
				}));
				if(this.formType!="dietList" && this.formType!="sleepList" && this.formType!="sportList") {
					this.editHealthForm(arry)
				}
			},
			// 修改健康史
			editHealthForm(arry) {			
				const filterByQuestionType = (questionType) => arry.filter(item => item.questionType && item
					.questionType === questionType);
				
				const symptomHistory = filterByQuestionType("symptomHistory");
				const drugHistory = filterByQuestionType("drugHistory");
				const allergyHistory = filterByQuestionType("allergyHistory");
				const familyHistory = filterByQuestionType("familyHistory");
				const healthHistory = arry.filter(item => !item.questionType);
				
				const param = {
					id: Number(this.id || 0),
					symptomHistory: this.formType == "symptomHistory" ? JSON.stringify(symptomHistory) : undefined, // 症状史
					healthHistory: this.formType == "healthHistory" ? JSON.stringify(healthHistory) : undefined, // 健康史
					drugHistory: this.formType == "drugHistory" ? JSON.stringify(drugHistory) : undefined, // 用药史
					allergyHistory: this.formType == "allergyHistory" ? JSON.stringify(allergyHistory) : undefined, // 过敏史 
					familyHistory: this.formType == "familyHistory" ? JSON.stringify(familyHistory) : undefined // 家族史
				};
				this.btnLoading = true
				editRecord(param).then(res => {
					this.btnLoading = false
						if (res.code == 200) {
							uni.showToast({
								title: "修改成功",
								icon: 'none',
								duration: 1000,
							});
							var timer = setTimeout(function() {
								uni.redirectTo({
									url: "/pages/healthRecords/index"
								});
								clearTimeout('timer')
							}, 1000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					},
					rej => {
						this.btnLoading = false
					}
				).catch(()=>{
					this.btnLoading = false
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.container {
		position: relative;
		font-family: PingFang SC, PingFang SC;

		&-body {
			position: relative;
			padding: 32rpx 24rpx;
			padding-bottom: calc(var(--window-bottom) + 152rpx);
		}
	}

	.userbox {
		padding: 32rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		@include u-flex(row, center, space-between);
		overflow: hidden;

		.userbind {
			width: 100%;
			padding: 8rpx 0;
			font-weight: 400;
			font-size: 34rpx;
			color: #FF5C03;
			@include u-flex(row, center, center);

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;
			}
		}

		&-headimg {
			flex-shrink: 0;
			width: 140rpx;
			height: 140rpx;
		}

		&-left {
			flex-shrink: 0;
			flex: 1;
			@include u-flex(row, center, flex-start);
		}

		&-name {
			@include u-flex(row, center, flex-start);
			flex-wrap: wrap;
			gap: 0 30rpx;
		}

		&-idcard {
			font-weight: 500;
			font-size: 28rpx;
		}

		&-info {
			margin-left: 24rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;

			&-tag {
				margin-top: 30rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #FF5C03;
				@include u-flex(row, center, flex-start);

				view {
					min-width: 62rpx;
					height: 42rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					background: #FCF0E7;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					text-align: center;
					line-height: 42rpx;
					margin-right: 14rpx;
				}
			}
		}
	}

	.listbox {
		padding: 32rpx 24rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;

		&-titlebox {
			font-weight: 600;
			font-size: 34rpx;
			white-space: normal;
		}

		&-titletag {
			min-width: 80rpx;
			height: 40rpx;
			padding: 0 16rpx;
			margin: 0 12rpx;
			flex-shrink: 0;
			box-sizing: border-box;
			line-height: 40rpx;
			text-align: center;
			background: #FF5C03;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			display: inline-block;
		}

		&-option {
			margin-top: 34rpx;
			@include u-flex(row, center, flex-start);
			flex-wrap: wrap;
			gap: 18rpx;

			&-flex {
				@include u-flex(row, center, flex-start);
				gap: 18rpx;
			}

			&-item {
				display: inline-flex;
				min-width: 206rpx;
				min-height: 72rpx;
				padding: 16rpx;
				box-sizing: border-box;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #ECECEC;
				align-items: center;
				justify-content: center;
			}
		}

		.otherinput {
			width: 430rpx;
			height: 72rpx;
			overflow: hidden;
			padding: 16rpx 24rpx;
			box-sizing: border-box;
			background: #F5F7FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			justify-content: flex-start;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.option-active {
			font-weight: 400;
			font-size: 28rpx;
			color: #FF5C03;
			background: #FCF0E7;
			border: 2rpx solid #FF5C03;
		}

		&-choose {
			@include u-flex(row, center, flex-start);
			min-height: 86rpx;

			image {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				margin-right: 18rpx;
			}
		}

		.choose-input {
			width: 430rpx;
			height: 72rpx;
			padding: 16rpx 24rpx;
			box-sizing: border-box;
			margin-left: 42rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #ECECEC;
			display: inline-flex;
			align-items: center;
			justify-content: flex-start;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.dietary-survey {
			@include u-flex(row, flex-start, flex-start);
			flex-wrap: wrap;
			gap: 18rpx;
			margin-top: 36rpx;
		}
		.dietary-survey-iteml {
			width: 206rpx;
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			font-weight: 400;
			font-size: 32rpx;
			view {
				width: 206rpx;
				height: 90rpx;
				background: #F5F7FA;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #ECECEC;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				text-align: center;
				line-height: 90rpx;
			}
			
			text {
				font-size: 24rpx;
				color: #757575;
			}
		}
		.dietary-survey-item {
			display: inline-flex;
		}
		.dietary-survey-input {
			width: 206rpx;
			height: 90rpx;
		}
		.dietary-survey-active {
			color: #fff !important;
			background: #FF5C03 !important;
			border: 2rpx solid #FF5C03 !important;
		}
	}

	.footer {
		width: 100%;
		height: 152rpx;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(114, 114, 114, 0.1);
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;

		&-btn {
			height: 112rpx;
			background: #FF5C03;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-weight: 600;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 112rpx;
			text-align: center;
			&::after {
				border: none;
			}
		}
	}
	.popbox {
		background: #fff;
		padding: 20rpx;
		font-family: PingFang SC, PingFang SC;
		color: #222222;
		font-weight: 400;
		font-size: 28rpx;
		&-title {
			font-weight: 600;
			font-size: 34rpx;
		}
		&-desc {
			margin: 20rpx 0;
		}
		.uni-textarea-wrapper {
			@include u-flex(row, flex-end, space-between);
		}
		.textarea {
			flex: 1;
			max-height: 146rpx;
			padding: 15rpx 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			line-height: 36rpx;
			border: 2rpx solid #ECECEC;
			color: #222222;
			font-weight: 400;
			font-size: 28rpx;
		}
		.popbox-confirm-btn {
			flex-shrink: 0;
			width: 140rpx;
			height: 70rpx;
			margin-left: 10rpx;
			background: #FF5C03;
			border-radius: 16rpx;
			color: #fff;
			text-align: center;
			line-height: 70rpx;
		}
	}
</style>