kaoshi/addons/exam/uniapp/pages/paper/index.vue

<template>
	<view>
		<HMfilterDropdown :filterData="filterData" :defaultSelected="filterDropdownValue" @confirm="confirmCate"></HMfilterDropdown>
		
		<view class="paper-contains">
			<!-- 试卷列表 -->
			<view class="paper-card" v-for="(item, index) in list" :key="index">
				<navigator :url="'paper?id='+item.id" hover-class="none">
					<tui-card :title="{text: item.cates.name, size: 30, color: '#7A7A7A'}" :tag="{text: item.mode_text, size: 24}" :header="{title: item.title}">
						<template v-slot:body>
							<view class="tui-default">
								{{item.title}}
							</view>
						</template>
						<template v-slot:footer>
							<view class="tui-default">
								<view>考试限时：{{item.limit_time|format_second}}</view>
								<view class="text-red" v-if="item.end_time > 0">截止时间：{{item.end_time|format_date}}</view>
							</view>
						</template>
					</tui-card>
				</navigator>
			</view>
			
			<!-- 加载状态条 -->
			<view class="cu-load bg-grey" :class="loadFlag" v-show="!has_more"></view>
		</view>
		
		<tabbar></tabbar>
	</view>
</template>

<script>
	import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	import TuiCard from '@/components/tui-card/tui-card.vue';
	
	export default {
		components: {
			'HMfilterDropdown': HMfilterDropdown,
			'tui-card': TuiCard,
		},
		data() {
			return {
				cate_id: null,
				sort: null,
				list: [],
				has_more: false,
				current_page: 1,
				loadFlag: 'loading',
				filterData: [],
				filterDropdownValue: [],
			}
		},
		onLoad(e) {
			if (e.cate_id) {
				this.cate_id = e.cate_id
			}
			this.ajax()
		},
		async onReachBottom() {
			console.log("onReachBottom")
			if (this.has_more) {
				this.current_page++
				this.getPaper()
			}
		},
		methods: {
			async ajax() {
				await this.getCate('init')
				await this.getPaper()
			},
			
			// 获取试卷
			async getPaper() {
				this.loadFlag = 'loading'
				
				let params = {
					page: this.current_page
				}
				
				if (this.cate_id) {
					params['cate_id'] = this.cate_id
				}
				if (this.sort) {
					params['sort'] = this.sort
				}
				
				await this.http('paper/index', params).then(res => {
					if (res && res.data) {
						this.list = this.list.concat(res.data.list.data)
						console.log('list', this.list)
						this.has_more = res.data.list.has_more
						this.current_page = res.data.list.current_page
						this.loadFlag = 'over'
					}
				})
			},
			// 获取题库
			async getCate(type = '') {
				await this.http('cate/filter', {kind: 'QUESTION'}).then(res => {
					this.filterData = res.data
					
					if (type == 'init') {
						let defaultCate = this.utils.getData('default_cate-QUESTION')
						console.log('defaultCate', defaultCate)
						if (defaultCate) {
							this.cate_id = defaultCate.value
							
							let defaultCateList = []
							for (var i = 0; i < defaultCate.result.length; i++) {
								if (i == 0) {
									// 0=全部题库，需要+1
									defaultCateList.push(defaultCate.result[i].index + 1)
								} else {
									defaultCateList.push(defaultCate.result[i].index)
								}
								
							}
							
							console.log('defaultCateList', defaultCateList)
							this.filterDropdownValue = [
								defaultCateList,
								[0]
							]
						}
						
						
					}
					
				})
			},
			// 选择题库
			confirmCate(event) {
				console.log('confirm cate', event, event.value[0].length)
				let cate_id = 0
				for (let i = 0; i < event.value[0].length; i++) {
					cate_id = event.value[0].pop()
					console.log('for cate_id', cate_id)
					if (cate_id) {
						break
					}
				}
				
				if (!cate_id && event.value[0][0]) {
					cate_id = event.value[0][0]
				}
				
				console.log('cate_id', cate_id)
				
				let sort = ''
				if (event?.value[1]) {
					sort = event?.value[1][0]
				}
				
				if (cate_id != this.cate_id || sort !== this.sort) {
					console.log('confirmCate', [cate_id, this.cate_id, sort, this.sort])
					
					this.cate_id = cate_id
					this.sort = sort
					
					this.list = []
					this.getPaper()
				}
			},
			
		}
	}
</script>

<style>
	.paper-contains {
		margin-top: 50px;
		padding-bottom: 100px;
	}
	
	.paper-card {
		margin: 20rpx 0;
	}
	
	.tui-title {
		width: 100%;
		padding: 70rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		line-height: 30rpx;
		color: #666;
	}
	
	.tui-default {
		padding: 20rpx 30rpx;
	}
	
	.tui-article {
		position: relative;
	}
	
	.tui-article-img {
		width: 100%;
		height: 300rpx;
		display: block;
	}
	
	.tui-article-title {
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
	}
	
	.tui-cell-title {
		font-size: 32rpx;
		font-weight: 500;
		padding: 0 10rpx;
		word-break: break-all;
		word-wrap: break-word;
	}
	
	.tui-cell-img {
		height: 160rpx;
		width: 160rpx;
	}
	
	.tui-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.tui-mr {
		margin-right: 20rpx;
	}
	
	
	.tui-flex-pic {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		background: #fff;
		padding: 0 120rpx;
	}
	
	.tui-flex-pic image {
		width: 32%;
		margin-bottom: 2%;
	}
	
	.tui-content {
		padding: 0rpx 30rpx 20rpx 120rpx;
		box-sizing: border-box;
		font-size: 34rpx;
		font-weight: 400;
		color: #333;
	}
	
	.tui-color-gray {
		color: #ccc;
	}
	
	.tui-pleft {
		padding-left: 120rpx;
	}
</style>