uniProject/components/scroll-list-card/scroll-list-card.vue

<template>
	<view class="scroll-list-card mobile-card-box">
		<!--   title     -->
		<text class="mobile-card-title">{{data.ksName === null ? '':data.ksName}}</text>
		<!--   content   -->
		<view class="mobile-card-row" style="font-size: 28rpx;">
			时间：{{data.ksStartTime === null ? '':data.ksStartTime}}-{{data.ksEndTime === null ? '':data.ksEndTime}}
		</view>
		<view class="mobile-card-row">
			<text>总分：{{data.ksScore === null ? '':data.ksScore}}</text>
			<text class="card-score-box">学分：{{data.credit === null ? '':data.credit}}</text>
		</view>
		<view class="mobile-card-row">
			<text>及格分：{{data.okScore === null ? '':data.okScore}}</text>
			<text class="card-score-box">考试时长：{{data.totalTm === null ? '':data.totalTm}}分钟</text>
		</view>
		<!--    button    -->
		<template v-for="item in btns" :key="item.status">
			<button class="lli-btn" @click="btnClick(item)" v-if="item.show" :key="item.status"
				:disabled="data.disabled">{{item.text}}</button>
		</template>
	</view>
</template>

<script setup>
	import {
		toRefs,
		ref,
		computed
	} from "vue";

	const props = defineProps({
		data: {
			type: Object
		}
	})
	const {
		data
	} = toRefs(props)

	const btns = computed(() => [{
			status: 0,
			btnType: 'kaoshi',
			text: '未开始',
			show: data.value.status === 0,
		},
		{
			status: 1,
			btnType: 'kaoshi',
			text: '开始考试',
			show: data.value.status === 1,
		},
		{
			status: 3,
			btnType: 'kaoshi',
			text: '考试中',
			show: data.value.status === 3,
		},
		{
			status: 2,
			btnType: 'kaoshi',
			text: '再次考试',
			show: data.value.status === 2,
		},
		{
			status: 4,
			btnType: 'kaoshi',
			text: '已结束',
			show: data.value.status === 4,
		},
		{
			status: 5,
			btnType: 'kaoshi',
			text: '报名',
			show: data.value.status === 5,
		},
		{
			status: 6,
			btnType: 'kaoshi',
			text: '报名审核中',
			show: data.value.status === 6,
		},
		{
			status: 7,
			btnType: 'kaoshi',
			text: '审核未通过',
			show: data.value.status === 7,
		},
		{
			status: 8,
			btnType: 'kaoshi',
			text: '等待人工评分',
			show: data.value.status === 8,
		},
	])

</script>

<style lang="scss" scoped>
	.mobile-card-box {
		box-sizing: border-box;
		margin: 0 30rpx 10rpx;
		border-bottom: 2rpx solid #f2f1f2;
		padding-bottom: 30rpx;
	}

	.mobile-card-title {
		color: #333;
		font-size: 32rpx;
		font-weight: 500;
		margin: 24rpx 0 24rpx 0;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		overflow: hidden;
		word-wrap: break-word;
		display: -webkit-box;
		white-space: normal;
		-webkit-box-orient: vertical;
		text-align: justify;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		line-height: 48rpx;
	}

	// 行
	.mobile-card-row {
		margin-bottom: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;

		text {
			font-size: 28rpx;
			line-height: 40rpx
		}

		// 得分
		.mobile-card-score {
			font-size: 40rpx;
			color: #F10A0A;
		}

		// 分数（有最小宽度）
		.card-score-box {
			min-width: 240rpx;
			text-align: left;
		}
	}

	// 按钮
	.mobile-card-btn {
		width: 60%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 50rpx auto;
		background: linear-gradient(0deg, #436aff 0%, #234ff7 100%);
		border-radius: 80rpx;
		display: block;
	}
</style>