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, index) in list" :key="index">
				<view class="list-item">
					{{item.year}}
				</view>
				<view class="list-item">
					{{item.credit}}
				</view>
				<view class="list-item" v-html="item.annIns!=='学分未达标不能申请年检' ? '完成学分' : '学分未达标,<br/>不能申请年检'"></view>
				<view class="list-item">
					<view class="button" :class="[item.finish ? 'primary' : 'error']">
						{{item.finish ? '已完成观看' : '未完成'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { loadCredit } from '@/api/edu.js'
	const list = ref([])
	const initList = () => {
		loadCredit().then(res=>{
			if(res && res?.code ===0){
				list.value = res.data
			}
		})
	}
	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>