parentNew/src/pages/index/components/card.vue

<template>
  <view class="card flex" @tap="goDetail(item)">
    <view class="card-left">
      <img mode="aspectFill" :src="item.image" alt="" />
    </view>
    <view class="card-right flex-sub">
      <view class="card-title flex justify-between"
        ><text>{{ item.attend_name }}</text
        ><text class="text-student text-light">￥{{ item.money }}</text></view
      >
      <view class="text-gray text-sm"
        ><text>{{ item.day }}</text></view
      >
      <view class="text-gray text-sm">{{ item.grade_desc }}</view>
      <view class="margin-top-sm">
        <button class="cu-btn round bg-student text-white button-hover" v-if="item.enable">报课</button>
        <button class="cu-btn round bg-grey button-hover text-white disabled" v-else>停止</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      key: 1212
    }
  },
  methods: {
    goDetail(item) {
      if (!item.enable) {
        uni.showToast({ title: '课程已停止！', icon: 'none' })
        return false
      }
      this.globalNavigateTo('classDetail', { attend_id: this.item.class_attend_id })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/common/css/mixin.scss';
.card {
  padding: 30rpx;
  width: 100%;
  &-title {
    @include title(10px, 14px);
  }
  &-left {
    margin-right: 20rpx;
    width: 240rpx;
    image {
      height: 96px;
    }
  }
  &-right {
  }
}
</style>