zdxtDrillProgram/subpkg/review/review.vue

<template>
	<view class="wrap">
		<view class="stabar"></view>
		<!-- <view class="secbar"> <label class="back" @click="back()"></label>
			<view class="title">演练回顾</view>
		</view> -->
		<navigation title="重新挑战"></navigation>
		<view class="mainwrap2" style="top: 73rpx;">
			<view class="background-info">
				您已完成“<font style="color:#fd6d1f;">{{sceneName}}</font>”场景中 “<font style="color:#fd6d1f;">{{roleName}}
				</font>”〞角色挑战的共计{{total}}道题目，，每道题目和您选择的答案详情如下：
			</view>
			<view class="thumbtack">
				<label class="left">
					<image src="/static/images/tack.png"></image>
				</label>
				<label class="right">
					<image src="/static/images/tack.png"></image>
				</label>
			</view>
			<scroll-view class="question-info" scroll-y>
				<view class="question-list" @click="respractice">
					<view class="revmarsk">
						<image class="playbtn" src="/static/images/icon_play2.png"></image>
					</view>
					<image :src="imgUrl"></image>
					<!-- <view class="question-item" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
			    
			 </view> -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import navigation from "@/components/navigation/navigation.vue";
	export default {
		components: {navigation},
		data() {
			return {
				"sceneName": "",
				"roleName": "",
				"total": 0,
				questionFreId: "",
				sceneId: "",
				roleId: "",
				imgUrl: "",
				questionList: []
			}
		},
		onLoad(options) {
			this.roleId = options.roleId;
			this.questionFreId = options.questionFreId;
			this.sceneId = options.sceneId;
			this.getQuestionList()
			this.getRelationInfo()
			this.getFiles();
		},
		methods: {
			async getQuestionList() {
				const {
					data: res
				} = await uni.$http.post('/small/questionAnswer/listAll', {
					questionFreId: this.questionFreId
				})
				if (!res.success) return uni.$showMsg()
				this.questionList = res.data
				this.total = res.data.length
				//uni.$showMsg('数据请求成功！')
			},
			async getRelationInfo() {
				const {
					data: res
				} = await uni.$http.post('/small/questionFre/getRelationInfo', this.questionFreId)
				if (!res.success) return uni.$showMsg()
				if (res.data != null) {
					this.roleName = res.data.sceneRole != null ? res.data.sceneRole.name : ""
					this.sceneName = res.data.sceneManage != null ? res.data.sceneManage.name : ""
					this.backgroundImg = res.data.file.length != 0 ? uni.$http.baseUrl + res.data.file[0].uploadPath :
						""
				}
				//uni.$showMsg('数据请求成功！')
			},
			async getFiles() {
				const {
					data: res
				} = await uni.$http.get('/small/scene/manage/queryFiles/' + this.sceneId);
				this.imgUrl = uni.$http.baseUrl + res.data.filePreview.fileList[0];
				//uni.$showMsg('数据请求成功！')
			},
			respractice() {
				uni.navigateTo({
					url: '/subpkg/respractice/respractice?questionFreId=' + this.questionFreId + '&sceneId=' + this
						.sceneId + "&roleId=" + this.roleId
				})
			},
			back() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
		}
	}
</script>

<style>
	@import url("@/static/base_css.css");

	.background-info,
	.question-info {
		margin: 0 3%;
		padding: 3%;
		width: 88%;
		height: 13vh;
		background-color: #fff;
		border-radius: 20rpx;
		border: 1px solid rgba(151, 1, 188, .45);
		box-shadow: 0 0 10rpx rgba(151, 1, 188, .35);
		font-size: 32rpx;
		line-height: 1.5;
	}

	.question-info {
		margin-top: 20rpx;
		padding-top: 50rpx;
		height: 62vh;
		overflow: hidden;
	}

	.question-list {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.question-list>image {
		width: 100%;
		height: 100%;
	}

	.question-list .revmarsk {
		position: absolute;
		z-index: 10;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .45);
	}

	.question-list .playbtn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 120rpx;
		height: 120rpx;
		pointer-events: none;
	}

	.thumbtack {
		position: relative;
		left: 5%;
		width: 90%;
	}

	.thumbtack .left,
	.thumbtack .right {
		display: inline-block;
		position: absolute;
		z-index: 100;
		bottom: -50rpx;
		left: 5%;
		width: 30rpx;
		height: 80rpx;
	}

	.thumbtack .right {
		left: auto;
		right: 5%;
	}

	.thumbtack .left image,
	.thumbtack .right image,
	.question-txt image {
		width: 100%;
		height: 100%;
	}
</style>