questionnaire/pages/question/question.vue

<template>
	<view class="page">
		<block v-for="(obj, index) in pageList">
			<!-- :key="index" -->
			<template v-if="obj.type == 0">
				<!-- 多选 -->
				<view :key="index" class="sections">
					<view class="s-title">
						{{ obj.questionTitle }}
					</view>
					<view class="s-radio">
						<block v-for="(item) in obj.selectArr">
							<view class="s-radio" :key="item.value">
								<view class="s-radio-item">
									<view class="checked" @click="checkBox(item, obj)">
										<image v-if="item.select" src="../../static/image/checked.png" mode=""></image>
									</view>
									<view class="s-text">
										{{ item.name }}
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</template>


			<template v-if="obj.type == 1">
				<!-- 单选 -->
				<view :key="index" class="sections">
					<view class="s-title">
						{{ obj.questionTitle }}
					</view>
					<view class="s-radio">
						<block v-for="(item, oIndex) in  obj.selectArr">
							<view class="s-radio" :key="item.value">
								<view class="s-radio-item">
									<view class="doit" @click="radioBox(obj.selectArr, oIndex, obj)">
										<image v-if="item.select" src="../../static/image/radioed.png" mode=""></image>
									</view>
									<view class="s-text">
										{{ item.name }}
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</template>

			<template v-if="obj.type == 2">
				<!-- 文本框 -->
				<view :key="index" class="sections">
					<view class="s-title">
						{{ obj.questionTitle }}
					</view>
					<view class="s-input">
						<input v-model="obj.answer" type="text" value="" />
					</view>
				</view>
			</template>

			<template v-if="obj.type == 3">
				<!-- 日期 -->
				<view :key="index" class="sections">
					<view class="s-title">
						{{ obj.questionTitle }}
					</view>
					<view class="s-picker">
						<picker mode="date" @change="(e) => {selectDate(e, obj)}">
							<view class="s-texs">{{ obj.dateText }}</view>
						</picker>
					</view>
				</view>
			</template>

			<template v-if="obj.type == 4">
				<!-- 文本域 -->
				<view :key="index" class="sections">
					<view class="s-title">
						{{ obj.questionTitle }}
					</view>
					<view class="s-textarea">
						<textarea v-model="obj.answer" maxlength="100" placeholder="	" />
					</view>
				</view>
			</template>
		</block>

		<!-- 提交 -->
		<view class="btns" v-if="pageList.length > 0">
			<button class="btns" type="dgefault" @getphonenumber="backframesurveycusAdd" open-type="getPhoneNumber">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue';
	import WXBizDataCrypt from "@/common/utils/WXBizDataCrypt.js";
	export default {
		components: {
			uParse
		},
		data() {
			return {
				id: '',
				pageList: [], // 问题列表
			};
		},

		onLoad(option) {
			if (option.id) this.id = option.id
			this.backframesurveycusList()
		},

		methods: {
			// 多选
			checkBox(data, obj) {
				data.select = !data.select
				this.$forceUpdate()
				let arr = obj.selectArr.filter(item => item.select).map(item => {
					return item.name
				})
				obj.answer = arr.join(',')
				console.log(obj)
			},

			// 单选
			radioBox(arr, index, obj) {
				arr.map(item => {
					item.select = false
				})
				arr[index].select = true
				obj.answer = arr[index].name
			},

			// 日期选择
			selectDate(e, data) {
				data.dateText = e.detail.value
				data.answer = e.detail.value
			},

			// 提交
			backframesurveycusAdd(e) {
				console.log(e)

				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.$request.get(this.$apiUrls.findPhone, {
						code: e.detail.code,
					}).then(res => {
						
						let phoneNum = JSON.parse(res.data).phone_info.phoneNumber
						this.addBackframesurveycusAdd(phoneNum)
					})
				} else {
					this.addBackframesurveycusAdd()
				}
			},

			// 
			addBackframesurveycusAdd(data) {
				this.$request.post(this.$apiUrls.backframesurveycusAdd, {
					answer: JSON.stringify(this.pageList),
					phone: data,
					surveyId: this.id
				}).then(res => {
					uni.navigateTo({
						url: `/pages/success/success?id=${this.id}`
					})
				}).catch(e => {
					uni.navigateTo({
						url: `/pages/success/success?id=${this.id}`
					})
				})
			},

			// 详情
			backframesurveycusList() {
				this.$request.get(this.$apiUrls.backframesurveycusList, {
					id: this.id
				}).then(res => {
					console.log(res)
					this.pageList = res.data.questionList.map(item => {
						// 单选，多选选项处理
						if (item.type == 0 || item.type == 1) {
							item.selectArr = item.select.split(',').map(i => {
								let value = new Date().getTime() + i
								return {
									name: i,
									value: value,
									select: false
								}
							})
						}
						return {
							...item,
							answer: '',
							dateText: "请选择日期"
						}
					})
				})
			},
		},
	}
</script>

<style lang="scss">
	@import url("@/components/u-parse/u-parse.css");

	.page {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(180deg, #3D78F6 0%, #BFD0F3 100%);

		.sections {
			margin-bottom: 24rpx;
			padding: 0 24rpx;
			width: 702rpx;
			min-height: 230rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;

			&:first-of-type {
				margin-top: 24rpx;
			}

			.s-title {
				width: 100%;
				height: 106rpx;
				display: flex;
				align-items: center;
				background: #fff;
				font-size: 30rpx;
				font-weight: 600;
				color: #000000;
			}

			.s-input {
				width: 100%;
				height: 88rpx;
				background: #F6F8FE;
				border-radius: 8rpx;

				input {
					padding: 0 24rpx;
					width: 100%;
					height: 100%;
					font-size: 30rpx;
					font-weight: 600;
					color: #000000;
				}
			}

			.s-textarea {
				margin: 0 0 32rpx 0;
				width: 100%;
				min-height: 182rpx;
				background: #F6F8FE;
				border-radius: 8rpx;

				textarea {
					padding: 24rpx;
					width: 100%;
					height: 182rpx;
				}

			}

			.s-radio {
				margin: 0 0 32rpx 0;
				width: 100%;

				.s-radio-item {
					width: 100%;
					height: 60rpx;
					display: flex;
					align-items: center;

					.doit {
						width: 34rpx;
						height: 34rpx;
						background: #F0F1F5;
						border-radius: 50%;

						image {
							width: 34rpx;
							height: 34rpx;
							border-radius: 50%;
						}
					}

					.checked {
						width: 34rpx;
						height: 34rpx;
						background: #F0F1F5;
						border-radius: 8rpx;

						image {
							width: 34rpx;
							height: 34rpx;
							border-radius: 8rpx;
						}
					}

					.s-text {
						margin-left: 20rpx;
						flex-grow: 1;
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
					}
				}
			}

			.s-picker {
				width: 100%;
				height: auto;

				.s-texs {
					padding: 0 24rpx;
					width: 654rpx;
					height: 88rpx;
					background: #F6F8FE;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-weight: 400;
					color: #000000;
				}
			}
		}

		.btns {
			position: sticky;
			bottom: 0;
			margin: 0 auto 80rpx;
			width: 560rpx;
			height: 88rpx;
			background: #3D78F6;
			border-radius: 8rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}
</style>