uniProject/components/score-lianxi-card-lianxi/score-lianxi-card-lianxi.vue

<template>
	<view class="scroll-list-card mobile-card-box">
		<!--   title     -->
		<text class="mobile-card-title">{{ data.lxName === null ? "" : data.lxName }}</text>
		<!--   content   -->
		<view class="mobile-card-row" style="font-size: 28rpx">
			时间：{{ data.lxStartTime === null ? "" : data.lxStartTime }}-{{
        data.lxEndTime === null ? "" : data.lxEndTime
      }}
		</view>
		<!--    button    -->
		<template v-for="item in btns">
			<button class="lli-btn" :key="item.index" v-if="data.status == item.status" @click="btnClick(data)">
				{{ 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(() => [{
			index: 0,
			status: 1,
			text: "开始练习",
		},
		{
			index: 1,
			status: 2,
			text: "已结束",
		},
	]);

	const Emits = defineEmits(['btnClick'])

	function btnClick(data) {
		Emits('btnClick', data)
	}
</script>

<style>

</style>