menber-center/pages/goOnEdu/course/courseMine/mineCredits/mineCredits.vue

<template>
	<view class="container">
		<view class="list-box">
			<view class="list-item-box">
				<view class="list-item">
					学习年度
				</view>
				<view class="list-item">
					会员网络教育<br/>完成学分情况
				</view>
				<view class="list-item">
					年检情况
				</view>
				<view class="list-item">
					是否完成观看
				</view>
			</view>
			<view class="list-item-box" v-for="item in list" :key="item.id">
				<view class="list-item">
					{{item.date}}
				</view>
				<view class="list-item">
					{{item.score}}/{{item.targetScore}}
				</view>
				<view class="list-item" v-html="item.status ? '完成学分' : '学分未达标,<br/>不能申请年检'"></view>
				<view class="list-item">
					<view class="button" :class="[item.isWatched ? 'primary' : 'error']" @click="onJiaoFei(item)">
						{{item.isWatched ? '已完成观看' : '未完成'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const list = ref([])
	const initList = () => {
		list.value = [{
			id: '01',
			date: '2024（2024.5-2024.30）',
			score: '24',
			targetScore: '24',
			status: 1,
			isWatched: 1
		},
		{
			id: '02',
			date: '2023（2023.5-2023.30）',
			score: '0',
			targetScore: '24',
			status: 0,
			isWatched: 0
		},
		{
			id: '03',
			date: '2022（2022.5-2022.30）',
			score: '0',
			targetScore: '24',
			status: 0,
			isWatched: 0
		},
		{
			id: '04',
			date: '2021（2021.5-2021.30）',
			score: '0',
			targetScore: '24',
			status: 0,
			isWatched: 0
		},
		{
			id: '02',
			date: '2020（2020.5-2020.30）',
			score: '0',
			targetScore: '24',
			status: 0,
			isWatched: 0
		}]
	}
	onLoad(() => {
		initList()
		console.log('onLoad')
	})
</script>

<style lang="scss">
	page{
		background-color: $uni-bg-color;
	}
	.container {
		// height: 100vh;
		width: 100vw;
		// background-color: #fff;
		padding: 0 20rpx env(safe-area-inset-bottom, 0);
	}
	.list-box {
		margin: 20rpx 20rpx;
		background-color: $uni-bg-color-grey;
		border-radius: $uni-card-border-radius;
		padding: 20rpx 15rpx;
		// margin-bottom: 30rpx;
		.list-item-box {
			&:first-child {
				border-bottom: 5rpx solid #E6E6E6;
				font-size: $uni-font-size-1;
				font-weight: bold;
				.list-item {
					width: 25%;
					text-align: center;
					&:last-child {
						color: #303133;
						font-weight: bold;
					}
				}
			}
			padding: 15rpx 0;
			text-align: center;
			font-size: $uni-font-size-3;
			font-weight: bold;
			display: flex;
			align-items: center;
			.list-item {
				width: 25%;
				text-align: center;
				&:last-child {
					color: $uni-text-color-inverse;
					font-weight: normal;
				}
			}
			
			.button {
				width: fit-content;
				border-radius: $uni-card-border-radius;
				margin: 0 auto;
			}
			.primary {
				padding: 5rpx 25rpx;
				background-color: $uni-color-primary;
			}
			.error {
				padding: 5rpx 15rpx;
				background-color: $uni-color-error;
			}
		}
	}
</style>