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

<template>
	<view>
		<view class="solids-bottom padding-xs flex align-center">
			<view class="flex-sub text-left">
				<view class="solid-bottom text-sm padding">
					<text class="text-grey">* 可点击记录进行其他操作</text>
				</view>
			</view>
		</view>
		
		<view class="grade-list">
			<view class="grade-card" v-for="(item, index) in list" :key="index" @click="clickGrade(item)">
				<tui-card :title="{text: item.paper ? item.paper.title : '-', size: 30, color: '#7A7A7A'}" :tag="{text: item.cate ? item.cate.name : '-', size: 24}">
					<template v-slot:body>
						<view class="m-lr-20 grade-content text-sm">
							<view class="grid m-t-20">
								<view class="" style="width: 45%;">总分数：{{item.total_score}}分</view>
								<view>得分数：{{item.score}}分</view>
							</view>
							
							<view class="grid">
								<view style="width: 45%;">答对数：{{item.right_count}}题</view>
								<view>答错数：{{item.error_count}}题</view>
							</view>
							
							<view class="m-t-20" :class="is_pass ? ['text-green'] : ['text-red']">{{item.is_pass ? '及格' : '未及格'}}</view>
						</view>
					</template>
					<template v-slot:footer>
						<view class="grade-time">
							<view class="grade-time-item" style="width: 69%;">
								时间：{{item.createtime|format_date}}
							</view>
							<view class="grade-time-item">
								用时：{{item.grade_time|format_second}}
							</view>
						</view>
						
					</template>
				</tui-card>
				
			</view>
			
			<!-- 加载状态条 -->
			<view class="cu-load bg-grey" :class="loadFlag" v-show="has_more || loadFlag == 'over'"></view>
		</view>
		
		<tui-loading v-if="showLoading"></tui-loading>
		<tui-no-data imgUrl="/static/img/img_noorder_3x.png" v-if="showNodata">暂无数据</tui-no-data>
		
		<login ref="login" v-on:succ="getList"></login>
		
		<!-- 操作菜单 -->
		<tn-action-sheet
		  v-model="showAction"
		  :tips="tipsAction"
		  :list="listAction"
		  :borderRadius="23"
		  :cancelBtn="true"
		  :maskCloseable="true"
		  @click="clickActionSheetItem"
		  @close="closedActionSheet"
		>
		</tn-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showLoading: false,
				showNodata: true,
				keyword: '',
				list: [],
				loadFlag: 'loading',
				current_page: 1,
				has_more: false,
				gradeItem: null,
				// sheet action
				showAction: false,
				tipsAction: '',
				listAction: [],
				
			}
		},
		onLoad(e) {
			this.getList()
		},
		async onReachBottom() {
			console.log("onReachBottom")
			if (this.has_more) {
				this.current_page++
				this.getList()
			}
		},
		methods: {
			// 获取记录
			getList() {
				this.loadFlag = 'loading'
				this.has_more = true
				this.http('grade/index', {keyword: this.keyword, page:this.current_page}, 'post').then(res => {
					console.log('grade res', res)
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					} else {
						this.list = this.list.concat(res.data.list.data)
						
						this.current_page = res.data.list.current_page
						this.has_more = res.data.list.has_more
						this.loadFlag = !this.has_more ? 'over' : ''
						this.showNodata = !this.list.length
					}
				})
			},
			// 查看排行榜
			showRank(paper_id) {
				console.log('paper_id', paper_id)
				this.utils.goto('rank?paper_id=' + paper_id)
			},
			
			// 点击成绩
			clickGrade(item) {
				console.log('grade item', item)
				this.gradeItem = item
				this.tipsAction = {text: item.paper?.title}
				
				let listAction = [
					{text: '查看排行榜'}
				]
				if (item.error_ids) {
					listAction.unshift({text: '查看错题'})
				}
				
				this.listAction = listAction
				this.showAction = true
			},
			
			// 点击菜单选项
			clickActionSheetItem(index) {
				let item = this.listAction[index]
				switch (item.text) {
					case '查看排行榜':
						this.showRank(this.gradeItem.paper_id)
						break
						
					case '查看错题':
						this.utils.goto('/pages/wrong/index?question_ids=' + this.gradeItem.error_ids)
						break
				}
				this.closedActionSheet()
			},
			// 关闭actionSheet
			closedActionSheet() {
			  this.show = false
			}
		}
	}
</script>

<style>
	.grade-list {
		padding-bottom: 20rpx;
	}
	
	.grade-card {
		margin: 20rpx 0;
	}
	
	.options {
		margin: 20rpx 0;
		line-height: 50rpx;
	}
	
	.grade-time {
		margin: 20rpx 0;
		padding: 0rpx 15rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.grade-content {
		
	}
	
	
</style>