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

<template>
  <view class="bg-white rounded-32rpx p24rpx box-border">
    <view class="flex items-center">
      <view class="w-8rpx h-28rpx bg-#0074FF"></view>
      <view class="ml20rpx text-28rpx">05.06 17：00-19：00</view>
    </view>
    <view class="mt20rpx flex items-center justify-between pl20rpx">
      <view class="text-28rpx">第二节：拍球、握球、传球...</view>
      <commonbtn
        bg-color="#0074FF"
        @click="handleGoPath('/subPack/selectClass/index')"
        v-if="type == 0"
        >拍照核销</commonbtn
      >
      <commonbtn
        bg-color="#0074FF"
        @click="handleGoPath('/subPack/ReservationClass/index')"
        v-if="type == 1"
        >预约这节</commonbtn
      ><commonbtn
        bg-color="#0074FF"
        @click="handleGoPath('/subPack/ExtensionClass/index')"
        v-if="type == 2"
        >延期这节</commonbtn
      >
    </view>
    <view
      class="mt20rpx pl20rpx flex items-center text-24rpx"
      @click="handleGoPath('/subPack/PersonnelView/index')"
    >
      <view class="text-[rgb(0,0,0,0.3)] mr20rpx">共20人</view>
      <view class="text-[rgb(0,0,0,0.3)] mr20rpx"
        >延课 <text class="text-#0074FF">5</text> 人</view
      >
      <view class="text-[rgb(0,0,0,0.3)] mr20rpx"
        >已核销<text class="text-#0074FF">10</text>人</view
      >
      <view class="text-[rgb(0,0,0,0.3)]"
        >未核销<text class="text-#0074FF">5</text>人</view
      >
    </view>
  </view>
</template>

<script setup lang="ts">
interface IProps {
  /**
   * 当前组件在什么地方展示，0为验课，1为约课，2为课程延期
   */
  type: number;
}
const props = defineProps<IProps>();
function handleGoPath(url: string) {
  uni.navigateTo({
    url,
  });
}
</script>

<style scoped></style>