MinNan/components/course-item/course-item.vue

<template>
	<view class="course-item" @click="onJumpDetail">
		<view class="b-cover">
			<image style="width: 100%; height: 100%" :src="item.cover_url" mode="aspectFill"></image>
		</view>
		<view class="b-main">
			<text class="text_23">{{ item.name }}</text>
			<view class="b-price">
				<view class="aa" style="display: flex; margin-top: 70rpx; width: 150rpx">
					<view lines="1" class="text_25">会员价</view>
					<view lines="1" class="text_26">￥{{ item.price }}</view>
				</view>

				<!-- <view class="s-vip-price" v-if="item.card_price > 0 && !iphonePlatform">会员价 ¥{{ item.card_price }}</view> -->
				<button bindtap="onClick" class="button_6">
					<text lines="1" class="text_27">立即报名</text>
				</button>
			</view>
			<!-- <view class="b-info">
				<view class="s-category">{{ item.category_name }}</view>
				<view class="b-counter">
					<view class="s-learn">{{ item.count_user }}人学习</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
import mixinsGoods from '@/mixins/goods.js';
export default {
	name: 'course-item',
	mixins: [mixinsGoods],
	props: {
		item: {
			type: Object,
			default: null
		}
	},
	data() {
		return {};
	},
	methods: {
		onJumpDetail() {
			console.log(11);
			console.log(this.item, 565656);

			uni.navigateTo({
				url: '/pages/course/detail?cid=' + this.item.id
			});
		}
	}
};
</script>

<style>
.button_6 {
	background-color: rgba(202, 86, 66, 1);
	border-radius: 10rpx;
	height: 44rpx;
	display: flex;
	flex-direction: column;
	width: 129rpx;
	margin: 70rpx 18rpx 0 82rpx;
}
.text_23 {
	width: 110rpx;
	height: 26rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
	margin-left: 1rpx;
}
.text_25 {
	width: 60rpx;
	height: 20rpx;
	overflow-wrap: break-word;
	color: rgba(202, 86, 66, 1);
	font-size: 20rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 20rpx;
	margin-top: 2rpx;
}
.text_26 {
	width: 56rpx;
	height: 22rpx;
	overflow-wrap: break-word;
	color: rgba(202, 86, 66, 1);
	font-size: 28rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 28rpx;
}
.text_27 {
	color: rgba(248, 226, 175, 1);
	font-size: 24rpx;
	white-space: nowrap;
	line-height: 45rpx;
	margin-left: -10rpx;
}
.course-item {
	padding: 30upx;
	background: #fff;
	display: flex;
	align-items: center;
}

.course-item:last-child {
	margin-bottom: 0;
}

.course-item .b-cover {
	width: 307rpx;
	height: 171rpx;
}

.course-item .b-cover image {
	width: 100%;
	height: 100%;
}

.course-item .b-main {
	flex: 1;
	height: 170rpx;
	margin-left: 20upx;
}

.course-item .b-main .b-title {
	font-size: 30upx;
	color: #333;
	max-width: 530upx;
	display: inline-block;
}

.course-item .b-main .b-price {
	margin-top: 16upx;
	display: flex;
	align-items: center;
}

.course-item .b-main .b-price .s-payment {
	margin-right: 20upx;
	font-size: 36upx;
	font-weight: bold;
	color: #dd524d;
}

.course-item .b-main .b-price .s-payment.f-small {
	font-size: 28upx;
}

.course-item .b-main .b-price .s-vip-price {
	margin-right: 20upx;
	font-size: 26upx;
	color: #f0ad4e;
}

.course-item .b-main .b-price .s-vip-free {
	margin-right: 20upx;
	padding: 6upx 10upx;
	font-size: 24upx;
	color: #555;
	background: #f0ad4e;
	border-radius: 5upx;
}

.course-item .b-main .b-info {
	margin-top: 16upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.course-item .b-main .b-info .s-category {
	font-size: 26upx;
	color: #666;
}

.course-item .b-main .b-info .b-counter {
	display: flex;
	align-items: center;
}

.course-item .b-main .b-info .b-counter .s-like {
	font-size: 24upx;
	color: #999;
}

.course-item .b-main .b-info .b-counter .s-learn {
	margin-left: 30upx;
	font-size: 24upx;
	color: #999;
}
</style>