exam/exam-06173-uni - reg/pages/repo/detail.vue

<template>
	<view class="content">

		<uni-card :title="repo.title">
			<view>{{repo.remark}}</view>
			<view>题目总数：{{repo.quCount}}</view>
			<view>创建时间：{{repo.createTime}}</view>
		</uni-card>
		
		
		<view>
		
			<uni-card title="练习模式">
				<uni-row :gutter="2">
					<uni-col :span="8">
						<view class="tr-item" @click="navtoTrain(11)">
							<image src="../../static/nav/pattern1.png"></image>
							<text>顺序训练</text>
						</view>
					</uni-col>
					<uni-col :span="8">
						<view class="tr-item" @click="navtoTrain(12)">
							<image src="../../static/nav/pattern2.png"></image>
							<text>随机训练</text>
						</view>
					</uni-col>
					<uni-col :span="8">
						<view class="tr-item" @click="navtoTrain(13)">
							<image src="../../static/nav/pattern3.png"></image>
							<text>背题模式</text>
						</view>
					 </uni-col>
				</uni-row>
			</uni-card>
			
			<uni-card title="题型练习">
				
				<uni-row :gutter="2">
					<uni-col :span="8"  v-for="item in repo.typeList">
						<view class="tr-item" @click="navtoTrain(`2${item.quType}`)">
							<image :src="`../../static/nav/qtype${item.quType}.png`"></image>
							<text>{{item.quType_dictText}}({{ item.count }})</text>
						</view>
					</uni-col>
				</uni-row>
				
			</uni-card>
		
		</view>
		
		


	</view>
</template>

<script>
	import { repoDetail } from '@/api/repo/repo'
		
	export default {
		components: {
		
		},
		data() {
			return {
				repoId: null,
				repo: {},

			}
		},
		onLoad(option) {
			this.repoId = option.id;
			this.fetchRepoDetail()
			
			// 支付成功刷新页面
			uni.$on('paySuccess', () => {
				this.fetchRepoDetail()
			});
		},


		methods: {

			// 加载考试列表
			fetchRepoDetail() {
				repoDetail(this.repoId).then(data => {
					//打印请求返回的数据
					this.repo = data
				}, error => {
					console.log(error);
				})
			},

			// 去训练
			navtoTrain(mode) {
				uni.redirectTo({
					url: '/pages/repo/train?repoId=' + this.repoId + '&mode=' + mode
				});
			}
			
		},
		onUnload() {
			uni.$off('paySuccess');
		}
	}
</script>

<style scoped>
	
	.tr-item {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		align-content: center;
		flex-direction: column;
		padding: 10px 0px 10px 0px;
		border: #efefef 0.5px solid;
		margin: 10px;
	}

	.tr-item image {
		width: 18px;
		height: 18px;
	}


	.tr-item text {
		color: #666;
	}
	
	
	
</style>