zdxtDrillProgram/subpkg/review/review.vue

<template>
	<view class="wrap">
		<view class="stabar"></view>
		<view class="secbar"> <span class="back" @click="back()"></span>
		<view class="title">演练回顾</view>
		</view>
		<view class="mainwrap2">
		<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">
			 <view class="question-item" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
			    
			 </view>
		   </view>
		</scroll-view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			   "sceneName":"",
			   "roleName":"",
			   "total":0,
			   "questionFreId":"",
			   questionList:[]
			}
		},
		onLoad(options) {
			this.questionFreId = options.questionFreId
			this.getQuestionList()
			this.getRelationInfo()
		},
		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('数据请求成功！')
		    },
			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: 240rpx;
		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: calc(100% - 420rpx);
		   overflow: hidden;
	}
	
	.question-list {
		   width: 100%;
		   height: 100%;
	}
	
	.question-item {
		   position: relative;
		   margin: 2% 0 3%;
		   width: 100%;
		   height: 320rpx;  
		   border-radius: 20rpx;
		   overflow: hidden;
	}
	
	.question-item image {
		   width: 100%;
		   height: 100%;
	}
	
	.question-num {
			position: absolute;
			z-index: 10;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .45);
		}
		
	.question-txt {
			position: absolute;
			z-index: 100;
			top: 3%;
			left: 2%;
			width: 96%;
			color:#fff;	
		}
		
		.question-txt .imgbox {
			display: inline-block;
			position: relative;
			top: 20rpx;
			margin: 0 12rpx;
			width: 66rpx;
			height: 66rpx;
		}
		
		.question-txt .ordnum {
			position: absolute;
			left: 48rpx;
			top: 22rpx;
			font-size: 38rpx;
		}
		
	.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>