GSExamProj/pages/examScore/examScore.vue

<template>
	<view class="hole-page">
		<view class="nav-bar"></view>
		<view 
			class="single-prac"
			v-for="(item, index) in pracArr"
			:key="index"
			@click="toggleDetail(item.examType, item.examId, item.examMajor)"
		>
			<view class="single-lef">
				<h4 style="font-size: 18px; font-weight: bold;">{{ item.examName }}</h4>
				<h4>考试类型：{{ item.examType }}</h4>
				<h4>考试开始时间：{{ item.startTime }}</h4>
				<h4>
					得分：
					<span
						:class="[
							{ red: Number(item.examScore.split('.')[0]) < 90 },
							{ green: Number(item.examScore.split('.')[0]) >= 90 }
						]"
					>
						{{ item.examScore.split('.')[0] }}分
					</span>
				</h4>
			</view>
			<view class="single-rig">
				<image v-show="Number(item.examScore) < 90" src="../../static/noPass.png" mode=""></image>
				<image v-show="Number(item.examScore) >= 90" src="../../static/pass.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
import { publicPath } from '../../public'
	export default {
		data() {
			return {
				pracArr: []
			}
		},
		methods: {
			toggleDetail (type, id, major) {
				uni.navigateTo({
					url: `/pages/quesDetail/quesDetail?type=${type}&id=${id}&major=${major}`
				})
			}
		},
		onShow() {
			let that = this
			that.pracArr = []
			// 获取考试成绩
			uni.request({
				url: publicPath + '/backstage/app/selStudyScore',
				method: 'POST',
				header: {
					'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
				},
				data: {
					tableName1: 'exam_paper',
					tableName2: 'exam_question',
					tableName3: 'exam_profess',
					examType: '1',
					keyWord: uni.getStorageSync('id'),
					idNumber: uni.getStorageSync('idCard')
				},
				success: (res) => {
					console.log(res);
					if (res.data.data.length != 0) {
						for (let i = 0; i < res.data.data.length; i++) {
							that.pracArr.push(res.data.data[i])
						}
					} else {
						uni.showToast({
							icon: 'none', 
							title: '当前暂无考试成绩'
						})
					}
					console.log(that.pracArr);
				}
			})
		}
	}
</script>

<style lang="scss">
	.hole-page{
		background-color: #f7fbfe;
		.nav-bar{
			width: 100%;
			height: var(--status-bar-height);
			padding-top: var(--status-bar-height);
		}
		.single-prac{
			width: 95%;
			background-color: #fff;
			border-radius: 15rpx;
			margin: 20rpx auto;
			box-shadow: 1px 1px 1px 1px #DCEAF8;
			box-sizing: border-box;
			padding: 15rpx;
			display: flex;
			font-size: 14px;
			.single-lef{
				width: 60%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				h4{
					font-weight: normal;
					margin-bottom: 15rpx;
					white-space: nowrap;
					.green{
						color: limegreen;
					}
					.red{
						color: red;
					}
				}
				h4:last-child{
					margin-bottom: 0;
				}
			}
			.single-rig{
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				image{
					width: 80%;
					height: 95%;
				}
			}
		}
	}
</style>