zdxtDrillProgram/subpkg/complete/complete.vue

<template>
	<view class="v-container">
		<span class="title">本次演练完成</span>
		<view class="question-list">
		  <view class="question-item" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
		    <span class="question-num">{{i+1}}</span>
		  </view>
		</view>
		<view class="answer-content">
			<view>{{ask}}</view>
			<view>{{answer}}</view>
		</view>
	    <view class="question-record">
			<span>演练记录：</span>
	    	<view class="list">
	    	  <view class="item" v-for="(item, i) in recordList" :key="i">
	    	    <span>{{item.createTime}}</span>
	    	  </view>
	    	</view>
	    </view>
		<view class="backIndex">
			<button @click="backIndex()">返回首页</button>
		</view>
		<view class="perinfo">
		  <view class="myitem"> 
			<span><button open-type="share"></button>炫耀一下</span> 
			<span>演练回顾</span> 
			<span @click="reChallenge()">重新挑战</span> 
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			   "questionFreId":"",
			   "roleId":"",
			   questionList: [],
			   recordList: [],
			   "ask":"",
			   "answer":"",
			};
		},
		 onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '自定义分享标题',
		      path: '/pages/home/home'
		    }
		},
		onLoad(options) {
			this.roleId = options.roleId
			this.questionFreId = options.questionFreId
			this.getQuestionList()
			this.getRecordList()
		},
		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
				if (this.questionList.length !=0) {
					this.ask = this.questionList[0].ask;
					this.answer = this.questionList[0].answer;
				}
				
				uni.$showMsg('数据请求成功！')
			},
			async getRecordList() {
				const {
					data: res
				} = await uni.$http.post('/small/questionFre/listAll',{roleId:this.roleId})
				if (!res.success) return uni.$showMsg()
			    this.recordList = res.data
				
				uni.$showMsg('数据请求成功！')
			},
			backIndex(){
				uni.switchTab({
				  url:'/pages/index/index'
				})
			},
			reChallenge(){
				uni.navigateTo({
				 url: '/subpkg/rechallenge/rechallenge?questionFreId='+this.questionFreId
				})
			},
			itemClickHandler(item) {
				if(item !== ""){
					this.ask= item.ask
					this.answer= item.answer
				}
			},
		}
	}
</script>

<style lang="scss">
	.title{
		font-size: 18px;
		text-align: center;
	}
	.question-list {
	  display: flex;
	  justify-content: space-around;
	  margin: 15px 0;
	  
	  .question-item{
	    width: 60rpx;
	    height: 60rpx;
		align-items: center;
	    background-color: lightgreen;
	    color: white;
	  }
	}
   .answer-content{
	   border: 1px solid lightgreen;
	   width: 96%;
	   margin-left: 2%;
	   height: 400rpx;
	   border-radius: 10px;
   }
   
   .myitem span {
   	position: relative;
   	margin: 2% 17% 0 0;
   	padding-right: 0.6rem;
   	font-size: 0.8rem;
   	color: #666;
   }
   
   .myitem span b {
   	color: #333;
   	font-size: 1.3rem;
   }
   
   .myitem span i {
   	position: absolute;
   	top: 0;
   	right: 0;
   	width: 8px;
   	height: 8px;
   	border-radius: 100%;
   	background-color: #fb3737;
   }
</style>