webapp / GreenwayWeb

<template>
	<div>
		<div style="padding:20px;
		overflow-y: auto;">
			<TitleWithCircle title="问卷详情" style="margin-bottom: 20px;" />
			<div>
					<div style="padding: 10px 0  20px 0;">基本信息</div>
					<el-descriptions class="margin-top" :column="3" border :label-style="labelStyle"
						:content-style="contentStyle">
						<el-descriptions-item :span="2">
							<template slot="label">
								问卷标题
							</template>
							{{ secondData.title }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								状态
							</template>
							{{ secondData.reviewStatus == '1' ? '待提交' : secondData.reviewStatus == '2' ? '待审核' :
			    secondData.reviewStatus
			      ==
			      '3' ? '审核通过' : secondData.reviewStatus == '4' ?'不通过': secondData.reviewStatus == '5' ?'已禁用':'' }}
						</el-descriptions-item>
					
						<el-descriptions-item>
							<template slot="label">
								开始时间
							</template>
							{{ secondData.startDate }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								结束时间
							</template>
							{{ secondData.endDate }}
						</el-descriptions-item>
					
						<el-descriptions-item>
							<template slot="label">
								预计填写时长（分钟）
							</template>
							{{ secondData.estimatedTime }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								发布端口
							</template>
							{{ secondData.publishPort }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								问卷类型
							</template>
							{{ secondData.questionnaireType }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								填写条件
							</template>
							{{ secondData.fillingConditions }}
						</el-descriptions-item>
					</el-descriptions>
					<div style="padding: 20px 0;">问卷介绍</div>
					<div v-html="secondData.remarks" />
					<div style="padding: 20px 0;">问卷封面</div>
					<div>
						<el-image style="width: 280px; height: 200px" :src="this.$hostUrl + secondData.coverImage"
							fit="fill" />
					</div>
					<div style="padding: 20px 0 ;">参与答卷奖励</div>
					<el-descriptions class="margin-top" :column="3" border :label-style="labelStylejiang"
						:content-style="contentStylejiang">
						<el-descriptions-item>
							<template slot="label">
								提交问卷后
							</template>
								<span v-if="secondData.rewardForParticipation">{{ secondData.rewardForParticipation!=''?'转盘抽奖':'不设置奖励'}}</span>
							<span v-else></span>
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								奖励
							</template>
							<div>
								<span>{{ secondData.rewardForParticipation!=''?getStatusText(secondData.actStyle):'无'}}</span>
								<span v-if="jiangli.id && jiangli.id!=''"
									style="padding: 0 20px;color: #3F9B6A;cursor: pointer;" @click="actGo(1)">查看</span>
							</div>
						</el-descriptions-item>
					</el-descriptions>
					<div style="padding: 20px 0 ;">问卷题目</div>
					<el-table :data="wenData"
						:header-cell-style="{ fontSize: '14px', color: '#0009', fontWeight: 'normal', backgroundColor: '#F2F3F5' }">
						<el-table-column label="序号" min-width="100">
							<template slot-scope="scope">
								{{ scope.$index + 1 }}
							</template>
						</el-table-column>
						<el-table-column label="题目" min-width="300" prop="title" :show-overflow-tooltip="true" />
						<el-table-column label="题型" min-width="80" prop="type" />
						<el-table-column label="是否必填" prop="required" min-width="80" />
						<el-table-column label="选项" min-width="120">
							<template slot-scope="scope">
								<div v-for="(value, index) in scope.row.options " v-if="scope.row.type != '文本'"
									:key="index">
									{{ index + 1 }}：{{ value.answer }}
								</div>
								<div v-else>
									-
								</div>
							</template>
					
						</el-table-column>
					
					</el-table>
					<div style="padding: 20px 0 ;">系统信息</div>
					<el-descriptions class="margin-top" :column="3" border :label-style="labelStyle"
						:content-style="contentStyle">
						<el-descriptions-item>
							<template slot="label">
								创建人
							</template>
							{{ secondData.createUser }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								创建时间
							</template>
							{{ secondData.createTime }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								更新时间
							</template>
							{{ secondData.updateTime }}
						</el-descriptions-item>
					</el-descriptions>
					<div style="padding: 20px 0 ;">审核信息</div>
					<el-descriptions class="margin-top" :column="3" border :label-style="labelStyle"
						:content-style="contentStyle">
						<el-descriptions-item>
							<template slot="label">
								审核状态
							</template>
							{{ secondData.reviewStatus == '1' ? '待提交' : secondData.reviewStatus == '2' ? '待审核' :
			    secondData.reviewStatus
			      ==
			      '3' ? '审核通过' : secondData.reviewStatus == '4' ?'不通过': secondData.reviewStatus == '5' ?'已禁用':'' }}
						</el-descriptions-item>
						<el-descriptions-item>
							<template slot="label">
								审核意见
							</template>
							<div>{{ secondData.reviewComments }}</div>
						</el-descriptions-item>
					
					</el-descriptions>
				</div>
			</div>
			<el-dialog :visible.sync="iframaShow" title="创建活动" width="90%" center top="1%" :close-on-click-modal="false"
				>
				<div style="padding:20px;">
					<iframe :src="iframaUrl" ref="iframe" frameborder="0" width="100%" height="700px" />
					<div style="padding-top:20px;display:flex;justify-content: flex-end;">
					</div>
				</div>
			
			</el-dialog>
		</div>
	

	</div>
</template>

<script>
	import {
		async
	} from 'q'
	import Vue from 'vue'
	import axios from 'axios'
	import DynamicChartTable from '@/components/dajuanTongji/index.vue'
	import tiaoxing from '@/components/dajuanTongji/tiaoxing.vue'
	import wangEditor from '@/components/editor/index';
	import {
		TerminaGetAll,
		TerminaAdd,
		TerminaEdit,
		TerminaDel,
		QuestionGetAll,
		QuestionAdd,
	} from '../../api/investigation.js'
	import upimg from '@/components/ImageUpload/index'
	import TitleWithCircle from '@/components/top/index';
	export default {
		components: {
			upimg,
			DynamicChartTable,
			tiaoxing,
			wangEditor,
			TitleWithCircle
		},
		data() {
			return {
				secondData:{},
				labelStylejiang: {
					width: '180px'
				},
				contentStylejiang: {
					width: '300px'
				},
				labelStyle: {
					width: '250px'
				},
				contentStyle: {
					width: '246px'
				},
				wenData: [],
				jiangli: {
					// id: '1895043663592030209', //活动id
					// actName: '商业测试活动1', //活动名称
					// actStyle: '1', //抽奖样式 1：大转盘 2：砸金蛋 3：刮刮卡 4：翻牌乐 5：福袋 6：摇一摇
					id:'',
					actName:'',
					actStyle:'', //抽奖样式 1：大转盘 2：砸金蛋 3：刮刮卡 4：翻牌乐 5：福袋 6：摇一摇
				},
				iframaShow:false,
				iframaUrl:''
			}
		},
		computed: {

		},
		created() {},
		mounted() {
			this.moren()
		},
		methods: {
			getIdValue(urlPart) {
				const queryIndex = urlPart.indexOf('?');
				if (queryIndex === -1) {
					return null;
				}
				const queryString = urlPart.slice(queryIndex + 1);
				const paramPairs = queryString.split('&');
				for (let i = 0; i < paramPairs.length; i++) {
					const pair = paramPairs[i].split('=');
					if (pair[0] === 'id') {
						return pair[1];
					}
				}
				return null;
			},
			moren() {
				const idValue = this.getIdValue(window.location.href)
				console.log(idValue, 'idValue')
				if (idValue != null) {
					let obj = {
						id: idValue,
						pageNumber: 0,
						pageSize: 10,
					}
					TerminaGetAll(obj).then(res => {
						this.secondData = res.data.content[0]
						if (typeof this.secondData.question === 'string') {
							this.secondData.question = JSON.parse(this.secondData.question)
						}
						const array = this.objectToArray(this.secondData.question)
						this.jiangli.id = this.secondData.rewardForParticipation
						this.wenData = array
					
					})
				}
			},
objectToArray(obj) {
				return Object.keys(obj).map(key => {
					const item = obj[key];
					return {
						id: key,
						...item
					}
				})
			},
			getStatusText(val) {
				switch (val) {
					case '1':
						return '大转盘';
					case '2':
						return '砸金蛋';
					case '3':
						return '刮刮卡';
				case '4':
						return '翻牌乐';
				case '5':
						return '福袋';
				case '6':
						return '摇一摇';
					default:
						return '无';
				}
			},
			actGo(val) {
				let token = localStorage.getItem('token');
				if (token && token.startsWith('Bearer')) {
					token = token.substring(7);
				}
				// token =
				// 	'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqd3RfdXNlcl9pbmZvIjoie1wiYXBwSWRcIjoxLFwiYXJlYUNvZGVzXCI6W10sXCJjb21wYW55QWRtaW5cIjpmYWxzZSxcImNvbXBhbnlDb2RlXCI6XCJKSkxEXzAwMVwiLFwiZGVwdENvZGVcIjpcIjAwMlwiLFwiZGVwdFRhZ1wiOlwiXCIsXCJsb2dpblR5cGVcIjpcIlBDXCIsXCJtYWluRGVwdENvZGVcIjpcIjAwMlwiLFwibWFuYWdlclwiOnRydWUsXCJuYW1lXCI6XCLotoXnuqfnrqHnkIblkZhcIixcInBob25lXCI6XCIxMzU0MTMwNDkxMFwiLFwicm9sZXNcIjpbXCJyb2xlX3N1cGVyX2FkbWluXCIsXCJ2aXAtYWRtaW5cIl0sXCJzdXBlckFkbWluXCI6dHJ1ZSxcInRvcERlcHRDb2RlXCI6XCIwMDJcIixcInVzZXJJZFwiOjEsXCJ1c2VybmFtZVwiOlwic3VwZXItampsZFwifSIsImp0aSI6ImMxMWQ5ZjJjLTc1ZjItNDM5Yy05NjMzLTliYzU4MTc2NmZmYiIsImV4cCI6MTc0MDY2Mjg2NywiaWF0IjoxNzQwNjQ4NDY3LCJzdWIiOiJDRFdMIiwiaXNzIjoiT0EifQ.-2jv7Vq8pqn8PehIpd1lMXJrSqPsmCfhXp7fddL56qI'
				this.iframaShow = true
				if (val == 0) {
					this.iframaUrl =
						// `https://jy.scjysm.asia:18086/cdwltool/addEmptyLottery?token=${token}&channel=shangye&thirdPartyUrl=http://localhost:9529/#/investigation/index`
						`https://zhgw-uat.028wlkj.com/liuliang/cdwltool/addEmptyLottery?token=${token}&channel=shangye&thirdPartyUrl=http://localhost:9529/#/investigation/index`
				} else if (val == 1) {
					this.iframaUrl =
						`https://zhgw-uat.028wlkj.com/liuliang/cdwltool/addEmptyLottery?token=${token}&id=${this.jiangli.id}&title=活动详情&channel=shangye&thirdPartyUrl=http://localhost:9529/#/investigation/index`
				} else if (val == 2) {
					this.iframaUrl =
						`https://zhgw-uat.028wlkj.com/liuliang/cdwltool/addEmptyLottery?token=${token}&id=${this.jiangli.id}&channel=shangye&thirdPartyUrl=http://localhost:9529/#/investigation/index`
				}
			
				// window.location.href =
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .bian_css {
		.el-dialog__header {
			padding: 0px;
		}

		.el-input__inner {
			height: 18px;
			border: 0px;
			margin-top: 0px;
		}

		.el-input__inner:hover {
			border: 0px;
		}

		.el-input__inner:focus {
			border: 0px;
		}
	}

	::v-deep .buttonHover:hover {
		color: #3f9b6a !important;
		border-color: #c5e1d2 !important;
		background-color: #ecf5f0 !important;
		outline: none;
	}

	::v-deep .el-pagination__total {
		position: absolute;
		left: 33px;
	}

	::v-deep .diaslog_zhong {
		.el-dialog__body {
			padding: 10px 20px 20px 20px;
		}

		.el-upload--picture-card {
			width: 130px;
			height: 130px;
		}
	}

	::v-deep .el-radio-group {
		.el-radio {
			font-weight: 400;
			height: 29px;
		}
	}

	::v-deep .el-checkbox-group {
		.el-checkbox {
			height: 29px;
		}

		label {
			font-weight: 400;
		}
	}

	.questionnaire {
		width: 100%;
		flex-grow: 1;
		background-color: white;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		box-sizing: border-box;
	}

	.question-title {
		// font-size: 18px;
		color: #000;
		margin-bottom: 10px;
	}

	.question {
		background-color: white;
		padding: 15px;
		margin: 10px 0;
		border-radius: 10px;
	}

	.answerItem {
		width: auto;
		padding: 10px 15px;
		margin: 0 0 5px 10px;
		border-radius: 6px;
		background-color: #f5f7fa;
		display: flex;
		align-items: center;
	}

	// ::v-deep .tongyong_css {
	//   max-height: 850px;

	// }

	// .tongyong_css {
	//   max-height: calc(100vh - 200px); /* Adjust the 200px to the combined height of your header and footer */
	//   overflow-y: auto;
	// }
	::v-deep .xddTable {
		height: 100% !important;

		.el-table__body-wrapper {
			overflow: auto !important;
			height: 100% !important;
		}

		.el-table__body-wrapper is-scrolling-none {
			height: 100% !important;
		}

		.el-table--scrollable-y .el-table__body-wrapper {
			overflow-y: inherit !important;
		}

	}
</style>