mgrading/src/views/app/ExamRecord.vue

<template>
	<div class="appRecord">
		<!-- <m-header v-if="headerStatus" /> -->
		<div class="container">
			<div v-if="dataShow" key="data">
				<van-list v-model="loading" :finished="finished" finished-text=" " @load="getList">
					<van-cell-group class="section" v-for="(item, index) in dataList" :key="index">
						<van-cell :value="item.examBaseName" title="考级名称" />
						<van-cell :value="item.actualExamStartTime + '~' + item.actualExamEndTime" title="考试日期" />
						<van-cell title="专业等级" >
							<template #default>
								{{ item.subjectName ? item.subjectName : '通用' }}<span v-if="item.level">({{ item.level | formatLevel }})</span>
							</template>
						</van-cell>
						<!-- <transition name="fade"> -->
						<div v-if="item.isShow" class="van-hairline--bottom">
							<van-cell :value="item.cardNo ? item.cardNo : '暂无'" title="准考证号" />
							<!-- <van-cell :value="item.orderNo" title="专业等级" /> -->
							<van-cell :value="item.examMusicTheoryLevel | formatLevel" title="乐理等级" >
							</van-cell>
							<van-cell :value="item.level" title="考试地点" >
								<span v-if="item.examAddress">
									{{ item.examAddress }}
								</span>
								<span v-else>
									线上网络教室
								</span>
							</van-cell>
						</div>
						<!-- </transition> -->
						<van-cell title="考试状态" >
							<template #default>
								<!-- <span class="error" v-if="item.isFinishedExam == 3">未参与</span>
								<span class="success" v-else>参与</span> -->
								{{ item.isFinishedExam | resultStatus }}
							</template>
						</van-cell>
						<van-cell title="考试结果" :border="!item.isShow" >
							<span v-if="item.result && item.examStatus === 'RESULT_CONFIRM'" :class="item.result == 'FAIL' ? 'error' : 'success'">{{ item.result | resultType }}</span>
							<span v-else>暂无</span>
						</van-cell>
						<!-- <transition name="fade"> -->
						<!-- <div v-if="item.isShow && item.videoUrl">
							<van-button type="default" @click="onVideoLook(item.videoUrl)" class="van-hairline--top-bottom" block>考级回看</van-button>
						</div> -->
						<!-- </transition> -->
						<van-button type="default" v-if="item.isShow" @click="onDetail(item)" block>
							点击收起
							<van-icon class="arrow" name="arrow-up" />
						</van-button>
						<van-button type="default" v-else @click="onDetail(item)" block>
							展开全部
							<van-icon class="arrow" name="arrow-down" />
						</van-button>
					</van-cell-group>
				</van-list>
			</div>
			<van-empty v-else key="data" :image="noDataImg" class="custom-image" description="暂无考试记录"></van-empty>
		</div>
	</div>
</template>
<script>
    import { browser } from '@/utils/common'
	import {
		examList
	} from "./appApi";
	export default {
		name: "appRecord",
		data() {
			localStorage.removeItem('examVideoUrl')
			return {
				headerStatus: false,
				noDataImg: require('../../assets/images/level/noData.png'),
				dataShow: true, // 是否有数据
				loading: false,
				finished: false,
				dataList: [],
				params: {
					page: 1,
					rows: 20
				},
				show: false
			};
		},
		mounted() {
			// 插入token
			let params = this.$route.query
			if(params.Authorization) {
				localStorage.setItem('Authorization', decodeURI(params.Authorization))
			}
			// 判断是否在app里面
			if(!browser().android && !browser().iPhone) {
				this.headerStatus = true
			} else {
				document.title = '考试记录'
			}
		},
		methods: {
			getList() {
				// this.finished = true
				let params = this.params;
				examList(params).then(res => {
					let result = res.data;
					this.loading = false;
					if (result.code == 200) {
						let pageInfo = result.data
						params.page = pageInfo.pageNo
						pageInfo.rows.forEach(item => {
							item.isShow = false
						})
						this.dataList = this.dataList.concat(pageInfo.rows)
						if (params.page >= pageInfo.totalPage) {
							this.finished = true;
						}
						this.params.page++;
					} else {
						this.finished = true;
					}
					// 判断是否有数据
					if (this.dataList.length <= 0) {
						this.dataShow = false;
					}
				}).catch(() => {
                    this.finished = true
                    this.dataShow = false
				})
			},
			onVideoLook(videoUrl) { // 查看视频
				localStorage.setItem('examVideoUrl', encodeURIComponent(videoUrl))
				if(browser().android) {
					// eslint-disable-next-line
					EXAM.postMessage(JSON.stringify({
						api: 'lookVideo',
						url: encodeURIComponent(videoUrl)
					}))
				} else {
					this.$router.push({
						path: '/lookVideo'
					})
				}
			},
			onDetail(item) {
				item.isShow = !item.isShow;
			}
		}
	};
</script>
<style lang="less" scoped>
	@import url("../../assets/commonLess/variable");
	.appRecord {
		height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
		.container {
			margin-bottom: 20px;
		}
	}

	/deep/.van-cell {
		padding: 14px 16px;
		font-size: 16px;
		color: @--font-main-color;

		.van-cell__value {
			width: 40%;
			text-align: left;
			flex: auto;
			color: @--font-second-color;
		}

		.error {
			color: @--red-color;
		}
		.success {
			color: @--main-color;
		}
	}

	.section {
		margin-top: 10px;
	}

	.van-button--default {
		border: 0;
		color: @--main-color;
		font-size: 15px;
		height: 0.5rem;
		line-height: 0.52rem;
	}

	/deep/.van-button__text {
		display: flex;
	}

	.arrow {
		min-width: 1em;
		font-size: 1.2em;
		line-height: inherit;
		margin-left: 5px;
	}

	.custom-image {
		padding-top: .8rem;
		/deep/.van-empty__image {
			width: 1.8rem;
			height: 1.88rem;
		}
		/deep/.van-empty__description {
			color: @--font-second-color;
		}
	}
</style>