xinelu-applet-ui/questionnaire/copd/copd.vue

<template>
	<view class="app" v-if='list'>
		<view class="item" v-for="(item,index) in list.questions" :key="index">
			<view class="title">
				{{Number(index)+1}}、{{item.questionName}}
			</view>
			<u-radio-group v-model="list.answers[index].optionContent" @change="radioGroupChange($event,item)">
				<u-radio @change="radioChange($event,aitem,index)" v-for="(aitem, aindex) in item.options" :key="aindex"
					:name="aitem.optionName">
					{{aitem.optionName}}
				</u-radio>
			</u-radio-group>
		</view>
		<view class="btns" @tap='updata'>
			提交
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: null,
			};
		},
		methods: {
			updata() {
				this.list.answers.forEach(e => {
					if (!e.optionId) {
						this.$refs.uToast.show({
							title: '请选择完全部选项',
							type: 'error',
						})
						return
					}
				})
				var value = 0
				if (this.list.answers[0].optionContent == '从未感觉气短' || this.list.answers[0].optionContent ==
					'很少感觉气短') {} else if (this.list.answers[0].optionContent == '有时感觉气短' || this.list.answers[0]
					.optionContent == '经常感觉气短' || this.list.answers[0].optionContent == '总是感觉气短') {
					value++
				}
				if (this.list.answers[1].optionContent == '从未咳出' || this.list.answers[1].optionContent ==
					'是的,但仅在偶尔和感冒或胸部感染时咳出') {} else if (this.list.answers[1].optionContent == '是的,每月都咳出几天' || this.list
					.answers[1].optionContent == '是的,大多数日子都咳' || this.list.answers[1].optionContent == '是的,每天都咳') {
					value++
				}
				if (this.list.answers[2].optionContent == '强烈反对' || this.list.answers[2].optionContent ==
					'反对' || this.list.answers[2].optionContent == '不确定') {} else if (this.list.answers[2].optionContent ==
					'同意' || this.list.answers[2].optionContent == '非常同意') {
					value++
				}
				if (this.list.answers[3].optionContent == '否') {} else if (this.list.answers[3].optionContent == '是') {
					value++
				}
				if (this.list.answers[4].optionContent == '35-49岁' || this.list.answers[4].optionContent ==
					'≥70岁') {} else if (this.list.answers[4].optionContent == '50-69岁') {
					value = value + 2
				}
				if (value <= 4) {
					this.list.evaluateResult = `您的评估结果为${value}分，0-4分为呼吸状况良好，若伴有呼吸问题，请尽早就医。`
				} else if (value >= 5) {
					this.list.evaluateResult = `您的评估结果为${value}分，5分及以上可能存在慢性阻塞性肺疾病风险，如有以下情形，请尽早就医。`
				}
				console.log(this.list)
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e, item, index) {
				this.list.answers[index].optionId = item.id
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		},
		onLoad(options) {
			let list = JSON.parse(decodeURIComponent(options.item))
			list.answers = []
			list.questions.forEach(e => {
				e.name = '请选择'
				var obj = {
					"questionId": e.id,
					"optionId": null,
					"optionContent": null,
				}
				list.answers.push(obj)
			})
			this.list = {
				userId: uni.getStorageSync('patientId'),
				surveyId: list.id,
				surveySubject: list.surveySubject,
				evaluateResult: null,
				advice: null,
				questions: list.questions,
				answers: list.answers
			}
		}
	}
</script>

<style lang="scss">
	.app {
		width: 96%;
		margin: 16rpx auto;
		background: #FFFFFF;
		box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
		border-radius: 5rpx;
		padding-bottom: 200rpx;

		.btns {
			width: 90%;
			margin: 100rpx auto;
			background-color: #26A888;
			text-align: center;
			line-height: 60rpx;
			height: 60rpx;
			color: #fff;
		}

		.item {
			width: 90%;
			margin: 0 auto;
			padding: 30rpx 0;

			::v-deep .u-radio {
				padding: 20rpx;
			}

			.title {
				padding: 40rpx 0 20rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}

			::v-deep .uni-picker-container {
				width: 100%;
				height: 63rpx;
				background: #A7A7A7;
				line-height: 63rpx;
				opacity: 0.1;
				border-radius: 5rpx;
			}
		}
	}
</style>