sports-merchant-minapp/src/components/classItem/index.vue

<template>
  <view class="bg-white rounded-32rpx p24rpx box-border" v-if="item">
    <view class="flex items-center">
      <view class="w-8rpx h-28rpx bg-#0074FF"></view>
      <view class="ml20rpx text-28rpx">
        {{ dayjs(item?.startTime).format("MM-DD HH:mm") }}
        {{ dayjs(item?.endTime).format("HH:mm") }}
      </view>
    </view>
    <view class="mt20rpx flex items-center justify-between pl20rpx">
      <!-- <view class="text-28rpx">{{ item.name }}</view> -->
      <wd-text :text="item.name" size="28rpx" :lines="1"></wd-text>
      <commonbtn
        bg-color="#0074FF"
        @click="handleGoPath(`/subPack/selectClass/index?id=${item.id}`)"
        v-if="type == 0 && showBtn"
        >拍照核销</commonbtn
      >
      <commonbtn
        bg-color="#0074FF"
        @click="handleGoPath(`/subPack/ReservationClass/index?id=${item.id}`)"
        v-if="type == 1 && showBtn"
        >预约这节</commonbtn
      ><commonbtn
        bg-color="#0074FF"
        @click="handleGoPath('/subPack/ExtensionClass/index')"
        v-if="type == 2 && showBtn"
        >延期这节</commonbtn
      >
      <view v-if="!showBtn">
        <view class="text-gray font-semibold text-28rpx" v-if="item.orDone"
          >已完成</view
        >
        <view v-else class="text-[#0074FF] font-semibold text-28rpx"
          >未开始</view
        >
      </view>
    </view>
    <view
      class="mt20rpx pl20rpx flex items-center text-24rpx"
      @click="handleGoPath(`/subPack/PersonnelView/index?id=${item.id}`)"
    >
      <view class="text-[rgb(0,0,0,0.3)] mr20rpx"
        >共{{ item?.totalNum }}人</view
      >
      <view class="text-[rgb(0,0,0,0.3)] mr20rpx"
        >延课
        <text class="text-#0074FF"> {{ item.postponeNum }} </text> 人</view
      >
      <view class="text-[rgb(0,0,0,0.3)] mr20rpx"
        >已核销<text class="text-#0074FF"> {{ item.writtenOffNum }} </text
        >人</view
      >
      <view class="text-[rgb(0,0,0,0.3)]"
        >未核销<text class="text-#0074FF"> {{ item.unwrittenOffNum }} </text
        >人</view
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import type { VerifyCourseInfoDTO } from "@/api/globals";
import dayjs from "dayjs";

interface IProps {
  /**
   * 当前组件在什么地方展示，0为验课，1为约课，2为课程延期
   */
  type: number;

  item?: VerifyCourseInfoDTO;
  showBtn: boolean;
}
const props = defineProps<IProps>();
function handleGoPath(url: string) {
  uni.navigateTo({
    url,
  });
}
</script>

<style scoped></style>