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">{{item.attend_name}}</view>
			<view class="text-gray text-sm flex justify-between"><text>{{item.day}}</text><text class="text-student">￥{{item.money}}</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>