MiniPrograms/pages/tab_exam/tab_exam.vue

<template>
	<view class="page-view">
		<!-- 统计 -->
		<view class="bg1">
			<view class="circle-line1"></view>
			<view class="circle-line2"></view>
			<view class="circle-line3"></view>
			<top-info :timeStamp="timeStamp"></top-info>
			<scroll-view class="scroll-view" scroll-x="true" :scroll-with-animation="true" scroll-left="0">
				<view class="view-box">
					<view class="scroll-view-item" v-for="(item,index) in cardList" :key="index"
						@click="navGradeList(index)">
						<view class="card-info">
							<view :class="item.icon"></view>
							<view class="title">{{item.title}}</view>
						</view>
						<view class="chart-box">
							<qiun-data-charts :type="item.type" :chartData="item.data" />
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 统计卡片 -->
		<view class="card-view">
			<view class="stat-card">
				<view class="card-column">
					<view class="flex-baseline">
						<text class="_title">评测总数</text>
						<text class="_title" style="margin-left: 20rpx;">{{examData.length}}</text>
						<text class="_unit">例</text>
					</view>
					<view class="flex-baseline">
						<text class="_subtitle">已完成</text>
						<text class="_subtitle" style="margin-left: 20rpx;">{{finishData.length}}</text>
						<text class="_unit">例</text>
					</view>
					<view class="flex-baseline">
						<text class="_subtitle">完成情况</text>
						<text class="_subtitle" style="margin-left: 20rpx;">{{performance}}</text>
					</view>
				</view>
				<view class="card-image" :style="{backgroundImage:`url(${image})`}"></view>
			</view>
			<!-- 列表卡片 -->
			<view class="card-item" style="width: 100%;">
				<view class="card-title">
					<view class="front-tag"></view>
					<view class="title">评测列表</view>
					<view class="flex-row" style="margin: 0 0 0 auto;" @click="navExamList" v-if="examData.length != 0">
						<view class="t-icon t-icon-fenlei"></view>
						<view class="title" style="color: #4169E1;margin-left: 10rpx;">评测详情</view>
					</view>
				</view>
				<view class="data-list">
					<view class="data-item" :style="{borderImage: none}" v-for="(item,index) in examData" :key="index"
						@click="navExamReport(index)" v-if="examData.length != 0">
						<view class="flex-row" style="margin: 0 20rpx;">
							<view class="t-icon t-icon-examicon" style="width: 60rpx; height: 60rpx;"></view>
							<view class="flex-column" style="height:92rpx;justify-content: space-between;">
								<view class="flex-row" style="margin-left: 20rpx;">
									<view class="item-title">{{item.examInfo.name}}</view>
								</view>
								<view class="flex-row">
									<view class="tag-fill">
										<view class="tag-text">{{item.examInfo.subjects[0].name}}</view>
									</view>
									<view class="tag-fill">
										<view class="tag-text">{{item.examInfo.examType.name}}</view>
									</view>
									<view class="tag-fill"
										:style="{backgroundColor: item.examInfo.progress === 'finish'? '#23b46c':'#ff5959'}">
										<view class="tag-text">{{item.examInfo.progress === 'finish' ? '已完成' : '进行中'}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="image-box" v-if="examData.length === 0">
						<view class="detail-image-none" :style="{backgroundImage:`url(${image1})`}"></view>
						<view class="subtitle">今日孩子暂无评测活动</view>
					</view>
				</view>
			</view>
			
			
			
			
			

			<view class="flex-column" style="margin: 15rpx 0 10rpx 20rpx;">
				<view class="title" style="font-size: 32rpx;">评测练习</view>
				<view class="bottom-tag"></view>
			</view>

			<view class="flex-row" style="width: 70%;"></view>
		</view>
		<scroll-view class="scroll-view-bottom" scroll-x="true" :scroll-with-animation="true" scroll-left="0">
			<view class="scroll-item" v-for="(item,index) in examPractice" :key="index"
				@click="navExamPractice(index)">
				<view class="flex-column" style="height: 320rpx;">
					<view class="flex-row" style="margin: 10rpx;">
						<view :class="subjectIcon.find(x=>x.name === item.subject).icon"></view>
						<view class="flex-title">
							<view class="YS-title" style="font-size: 40rpx;">{{item.subject}}</view>
							<view class="tag-fill">
								<view class="t-icon t-icon-zhengceguizhang"></view>
								<view class="tag-text">{{item.type}}</view>
							</view>
						</view>
					</view>
					<view class="flex-desc">
						<view class="YS-title">{{item.title}}</view>
						<view class="YS-title" style="font-size: 30rpx;">「 {{item.modality}} 」</view>
						<view class="flex-baseline">
							<view class="desc">评测题量,共</view>
							<view class="num" style="margin-left: 4rpx;">
								{{item.amount}}
							</view>
							<view class="desc" style="margin-left: 4rpx;">题</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_chart', ['examChartData']),
			...mapState('m_children', ['examData', 'examPractice'])
		},
		data() {
			return {
				cardList: [{
					icon: 't-icon t-icon-zoushi',
					title: '总成绩走势',
					type: 'mini-area',
					data: ''
				}, {
					icon: 't-icon t-icon-shuju',
					title: '单次考试分析',
					type: 'mini-column',
					data: ''
				}, {
					icon: 't-icon t-icon-jiangzhang',
					title: '排行占比分析',
					type: 'mini-area',
					data: ''
				}, {
					icon: 't-icon t-icon-yingyong',
					title: '优劣科目分析',
					type: 'mini-rose',
					data: ''
				}, {
					icon: 't-icon t-icon-yunwei',
					title: '考试能力分析',
					type: 'mini-column',
					data: ''
				}],
				subjectIcon: [{
					icon: 't-icon t-icon-yuwen',
					name: '语文'
				}, {
					icon: 't-icon t-icon-shuxue',
					name: '数学'
				}, {
					icon: 't-icon t-icon-yingyu',
					name: '英语'
				}, {
					icon: 't-icon t-icon-tiyu',
					name: '体育'
				}, {
					icon: 't-icon t-icon-tianwen',
					name: '科学'
				}, {
					icon: 't-icon t-icon-zuixinkecheng',
					name: '思品'
				}, {
					icon: 't-icon t-icon-wuli',
					name: '物理'
				}, {
					icon: 't-icon t-icon-huaxue',
					name: '化学'
				}, {
					icon: 't-icon t-icon-meishu',
					name: '美术'
				}, {
					icon: 't-icon t-icon-yinle',
					name: '音乐'
				}, {
					icon: 't-icon t-icon-dili',
					name: '地理'
				}, {
					icon: 't-icon t-icon-lishi',
					name: '历史'
				}],
				image: 'https://ouch-cdn2.icons8.com/yFl5NWU3aVehLBlQf9ctvnZPqtm5U0hqM3IzWvFDCaQ/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvNzY5/LzY1ZTQxZmZjLTg1/YWQtNDYyMi1hYzU0/LWQ3NDEzZmY2NGI1/YS5wbmc.png',
				//完成情况
				performance: '',
				//完成数据
				finishData: '',
				finishRate: '',
				timeStamp: '',
				image1: 'https://image.meiye.art/pic_1631411821365LA63Wc70BLbmyHhj2XjiL',
			};
		},
		onLoad() {
			this.init()
		},
		//刷新页面
		onPullDownRefresh() {
			this.init()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//初始化
			init() {
				this.timeStamp = (new Date()).format("hh:mm")
				this.$initExam()
				this.getChartData()
				this.getPerformance()
			},
			//初始化cardList数据
			getChartData() {
				this.cardList[0].data = this.examChartData.totalChartData[0]
				this.cardList[1].data = this.examChartData.singleChartData[0]
				this.cardList[2].data = this.examChartData.rankChartData[0]
				this.cardList[3].data = this.examChartData.subjectChartData[0]
				this.cardList[4].data = this.examChartData.levelChartData[0]
			},
			//获得评判信息
			getPerformance() {
				if (this.examData.length != 0) {
					this.finishData = this.examData.filter(x => x.examInfo.progress === 'finish')
					this.finishRate = (this.finishData.length * 100 / this.examData.length).toFixed(0)
					this.performance = this.finishData.length / this.examData.length >= 0.4 ?
						(this.finishData.length / this.examData.length >= 0.7 ? '优秀' : '良好') : '较差'
				} else {
					this.finishData = []
					this.finishRate = 0
					this.performance = '无评测'
				}

			},
			//导航
			navGradeList(index) {
				let urlArr = ['/subpkg/exam/total',
					'/subpkg/exam/single',
					'/subpkg/exam/rank',
					'/subpkg/exam/subject',
					'/subpkg/exam/level'
				]
				uni.navigateTo({
					url: urlArr[index]
				})
			},
			navExamList() {
				let value = this.finishRate
				uni.navigateTo({
					url: `/subpkg/datalist/examList?value=${value}`
				})
			},
			navExamReport(index) {
				uni.navigateTo({
					url: `/subpkg/datalist/examReport?index=${index}`
				})
			},
			navExamPractice(index) {
				uni.navigateTo({
					url: `/subpkg/exam/examPractice?index=${index}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/pages/style/tab_pages.scss';

	.bg1 {
		background-color: $color-pink;
	}

	.tag-fill {
		background-color: $color-pink;
		margin-left: 20rpx;
	}

	.circle-line1 {
		background-image: linear-gradient(to right, #ff8caf, #ff8caf), linear-gradient(90deg, #FFF -50%, rgba(255, 255, 255, 0.0));
	}

	.circle-line2 {
		background-image: linear-gradient(to right, #ff8caf, #ff8caf), linear-gradient(180deg, #FFF -50%, rgba(255, 255, 255, 0.0));
	}

	.circle-line3 {
		background-image: linear-gradient(to right, #ff8caf, #ff8caf), linear-gradient(0deg, #FFF -50%, rgba(255, 255, 255, 0.0));
	}

	.flex-title {
		display: flex;
		flex-direction: column;
		height: 100rpx;
		justify-content: space-around;

		.tag-fill {
			background-color: #d8deff;
			width: fit-content;
			margin-left: 0;
			padding: 5rpx 10rpx;

			.t-icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 5rpx;
			}

			.tag-text {
				color: #4169E1;
			}
		}
	}

	.flex-desc {
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: space-around;
		margin: 0 30rpx 20rpx 30rpx;

		.desc {
			line-height: 28rpx;
			font-size: 28rpx;
			color: $subtitle;
		}

		.num {
			line-height: 40rpx;
			font-size: 40rpx;
			color: $subtitle;
		}
	}
</style>