BLi/pages/index/wenjuan-info.vue

<template>
	<view class="wenjuan-info">
		<image src="../../static/img/bg@2x.png" style="position: fixed;z-index: -1;width: 750rpx;top: 0;left: 0;" mode="widthFix"></image>
		<view class="wenjuan-body">
			<view class="wenjuan-item" v-for="(item,index) in list" :key="index">
				<dan :index="index + 1" v-if="item.quesType == 1" :item="item" @changeradio="(e) => changeradio(e,index)"></dan>
				<duo :index="index + 1" v-if="item.quesType == 2" :item="item" @changecheck="(e) => changecheck(e,index)"></duo>
				<tian :index="index + 1" v-if="item.quesType == 3" :item="item" @changetian="(e) => changetian(e,index)"></tian>
				<wen :index="index + 1" v-if="item.quesType == 4" :item="item" @changewen="(e) => changewen(e,index)"></wen>
			</view>
		</view>
		<view style="height: 150rpx;"></view>
		<view class="safe-area-inset-bottom"></view>
		<view class="wenjuan-info-btn">
			<view class="btn-box u-flex u-row-center">
				<text @click="save">提交</text>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
	</view>
</template>

<script>
	import dan from "../../components/wenjuan-dan.vue"
	import duo from "../../components/wenjuan-duo.vue"
	import tian from "../../components/wenjuan-tian.vue"
	import wen from "../../components/wenjuan-wen.vue"
	export default {
		data() {
			return {
				id: '',
				list: []
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdata()
		},
		components: {
			dan,
			duo,
			tian,
			wen
		},
		methods: {
			save() {
				var quesSubNodeMessageList = []
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].quesType == 1) {
						if (!this.list[i].value) {
							this.$u.toast(`请选择第${i + 1}题答案`)
							return
						}
						quesSubNodeMessageList.push({
							answer: this.list[i].value,
							id: this.list[i].id,
							orderId: this.list[i].orderId,
							quesName: this.list[i].quesName,
							sysOrgCode: this.list[i].sysOrgCode
						})
					}
					if (this.list[i].quesType == 2) {
						if (this.list[i].value.length == 0) {
							this.$u.toast(`请选择第${i + 1}题答案`)
							return
						}
						quesSubNodeMessageList.push({
							answer: this.list[i].value.join(','),
							id: this.list[i].id,
							orderId: this.list[i].orderId,
							quesName: this.list[i].quesName,
							sysOrgCode: this.list[i].sysOrgCode
						})
					}
					if (this.list[i].quesType == 3) {
						var tian = ''
						for (let a = 0; a < this.list[i].value.length; a++) {
							if (this.list[i].value[a].input && !this.list[i].value[a].value) {
								this.$u.toast(`请选择第${i + 1}题填空题`)
								return
							} else {
								tian = tian + this.list[i].value[a].text + (this.list[i].value[a].value || '')
							}
						}
						quesSubNodeMessageList.push({
							answer: tian,
							id: this.list[i].id,
							orderId: this.list[i].orderId,
							quesName: this.list[i].quesName,
							sysOrgCode: this.list[i].sysOrgCode
						})
					}
					if (this.list[i].quesType == 4) {
						if (!this.list[i].value) {
							this.$u.toast(`请输入第${i + 1}题答案`)
							return
						}
						quesSubNodeMessageList.push({
							answer: this.list[i].value,
							id: this.list[i].id,
							orderId: this.list[i].orderId,
							quesName: this.list[i].quesName,
							sysOrgCode: this.list[i].sysOrgCode
						})
					}
				}
				uni.showLoading({
					mask: true,
					title: "请稍候"
				})
				this.$http.noteAdd({
					id: this.id,
					quesSubNodeMessageList: quesSubNodeMessageList
				}).then(res => {
					this.$u.toast(res.data.message)
					if (res.data.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
				// console.log(JSON.parse(JSON.stringify(this.list)));
			},
			changewen(e, index) {
				this.list[index].value = e
			},
			changetian(e, index) {
				this.list[index].value = e
			},
			changecheck(e, index) {
				this.list[index].value = e
			},
			changeradio(e, index) {
				this.list[index].value = e
			},
			getdata() {
				this.$http.quesInfo({
					id: this.id
				}).then(res => {
					this.list = []
					res.data.result.forEach(val => {
						if (val.quesType == 1) {
							this.list.push({
								...val,
								value: ''
							})
						}
						if (val.quesType == 2) {
							this.list.push({
								...val,
								value: []
							})
						}
						if (val.quesType == 3) {
							this.list.push({
								...val,
								value: []
							})
						}
						if (val.quesType == 4) {
							this.list.push({
								...val,
								value: ''
							})
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.wenjuan-info {
		.wenjuan-info-btn {
			position: fixed;
			z-index: 10;
			background-color: #fff;
			width: 750rpx;
			left: 0;
			bottom: 0;

			.btn-box {
				padding: 10rpx 30rpx;
				width: 100%;

				text {
					width: 100%;
					line-height: 88rpx;
					background: #167FFF;
					border-radius: 12rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.wenjuan-body {
			width: 690rpx;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 20rpx;
			border: 2rpx solid #FFFFFF;
			backdrop-filter: blur(4px);
			margin: 20rpx auto;
			padding: 20rpx 0;

			.wenjuan-item {
				padding: 18rpx 20rpx;
			}
		}
	}
</style>