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="mobile-card-btn"
        @click="btnClick(data)"
        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,
  },
]);

const Emits = defineEmits(['btnClick'])

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