FE_occupationlab_miniProgram/pages/achievement/achievement.vue

<template>
	<view class="page">
		<view class="wrap">
			<view class="p-title">
				<image class="icon" src="https://izhixinyun.com/images/record5.png" mode="widthFix"></image> 成绩概览
			</view>
			<view class="stat">
				<view class="item">
					<view class="val">{{ overview.userName }}</view>
					<view class="name">姓名</view>
				</view>

				<view class="item">
					<view class="val">{{ overview.experimentalNum }}</view>
					<view class="name">实验次数(次)</view>
				</view>

				<view class="item">
					<view class="val">{{ overview.duration ? overview.duration : 0 }}小时</view>
					<view class="name">实验总时长(时)</view>
				</view>

				<view class="item">
					<view class="val">{{ overview.avgScore ? overview.avgScore.toFixed(2) : overview.avgScore }}</view>
					<view class="name">实验平均分</view>
				</view>
			</view>
		</view>
		
		
		<view class="wrap">
			<view class="p-title">
				<image class="icon" src="https://izhixinyun.com/images/record6.png" mode="widthFix"></image> 成绩记录明细
			</view>
			<ul class="tabs">
				<li v-for="(item, i) in tabs" :key="i" :class="{active: curTab === item.id}" @click="tabChange(item.id)">{{ item.name }}</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import { experimentOverview } from '@/apis/modules/course.js'
	export default {
		data() {
			return {
				overview: {},
				curTab: 0,
				tabs: [
					{
					    id: 0,
					    name: '练习'
					},
					{
					    id: 1,
					    name: '考核'
					},
				],
				list: [],
				reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
				status: 'more', // 上拉加载状态 more|loading|noMore
				page: 1,
				pageSize: 10,
			}
		},
		onShow() {
			this.getOverview()
		},
		methods: {
			// 获取概览
			async getOverview () {
			    const res = await experimentOverview()
				this.overview = res.data
			},
			// tab切换
			tabChange(id) {
				this.curTab = id
			},
			// 模块点击
			toModule(i) {
				this.$uma.trackEvent(i) // 友盟统计
				let path = '/order/clients/clients'
				if (i === 'plan') {
					path = '/team/plans/plans'
				} else if (i === 'study') {
					path = '/team/study/study'
				} else if (i === 'info') {
					path = '/team/info/info'
				}
				this.$util.to(path, { type: i })
			},
			// 提示暂未开放
			toPanel(i) {
				this.$util.errMsg('功能暂未开放！')
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	.wrap {
		padding: 30rpx;
		margin-bottom: 30rpx;
		background-color: #fff;
	}
	.p-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #333;
		.icon {
			width: 44rpx;
			margin-right: 8rpx;
		}
	}
	.tabs {
		display: flex;
		margin-bottom: 32rpx;
		li {
			position: relative;
			margin-right: 40rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333;
		}
		.active {
			color: #007EFF;
			&:after {
				content: '';
				position: absolute;
				bottom: -12rpx;
				left: 50%;
				width: 116%;
				height: 4rpx;
				margin: 10rpx auto 0;
				background-color: #007EFF;
				transform: translateX(-50%);
			}
		}
	}
	
	.stat {
	    display: flex;
	    flex-wrap: wrap;
		gap: 32rpx;
	
	    .item:nth-child(1) {
	      background: url(https://izhixinyun.com/images/record1.png) (88% 25px) / auto no-repeat,
	        url(https://izhixinyun.com/images/record1.png) 0 0/100% 100% no-repeat;
	    }
	
	    .item:nth-child(2) {
	      background: url(https://izhixinyun.com/images/record2-1.png) (88% 15px) / auto no-repeat,
	        url(https://izhixinyun.com/images/record2.png) 0 0/100% 100% no-repeat;
	    }
	
	    .item:nth-child(3) {
	      background: url(https://izhixinyun.com/images/record3-1.png) (88% 20px) / auto no-repeat,
	        url(https://izhixinyun.com/images/record3.png) 0 0/100% 100% no-repeat;
	    }
	
	    .item:nth-child(4) {
	      margin-right: 0;
	      background: url(https://izhixinyun.com/images/record4-1.png) (88% 18px) / auto no-repeat,
	        url(https://izhixinyun.com/images/record4.png) 0 0/100% 100% no-repeat;
	    }
	
	    .item {
	        width: calc(50% - 16rpx);
	        padding: 30rpx;
			border-radius: 8rpx;
		    box-sizing: border-box;
	
	      .name {
	        margin-top: 8rpx;
	        color: #fff;
	        font-size: 28rpx;
	      }
	
	      .val {
	        font-size: 42rpx;
	        color: #fff;
	      }
	    }
	}
	.list {
		.item {
			position: relative;
			padding: 20rpx 0;
			border-bottom: 1px solid #e6e6e6;
		}
		.c-name {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
		.line {
			margin-top: 14rpx;
			font-size: 26rpx;
			color: #828282;
		}
		.btn {
			position: absolute;
			bottom: 20rpx;
			right: 0;
			padding: 10rpx 30rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #007EFF;
			border-radius: 36rpx;
		}
	}
}
</style>