siyu_app/pages/course/components/goodsItemVertical.vue

<template>
	<view class="vertical-goods-itembox">
		<view class="choose" @click.stop="handleChoose" v-show="isOperate">
			<image src="@/static/image/hall/choose_icon.png" v-show="item.checked"></image>
			<image src="@/static/image/hall/choose_moren_icon.png" v-show="!item.checked"></image>
		</view>
		<view class="vertical-goods-item" @click="$navTo('../info?courseId='+item.courseId)">
			<image class="vertical-goods-item-image" :src="item.imgUrl" :lazy-load="true" mode="aspectFill"></image>
			<view class="vertical-goods-item-info">
				<text class=" vertical-goods-item-name textOne">{{item.courseName}}</text>
				<text class="vertical-goods-item-desc">{{item.description}}</text>
				<view class="vertical-goods-item-buyinfo">{{ formatNum(item.favoriteNum) }}人收藏</view>
				<view class="vertical-goods-item-footer">
					<view class="price-box">
					<!-- 	<text class="price-box-unit">￥</text>
						<text class="price-box-integer">300</text>
						<text class="price-box-decimal">.00</text>
						<text class="price-box-text">/日</text> -->
						
						<image class="price-box-imgEye" src="@/static/image/hall/icon_eyes.png"></image>
						<text class="text">{{ formatNum(item.likes)  }}</text>
						
						<image class="price-box-imgZan" src="@/static/image/hall/zan_icon.png"></image>
						<text class="text">{{ formatNum(item.views)  }}</text>
						
					</view>
					<view class="vertical-goods-item-footer-r" :style="{visibility: isOperate ? 'hidden':'visible'}">
						<view v-show="showCollect">
							<image src="@/static/image/liveStream/collect_orange_icon.png"></image>
						</view>
						<view class="gobuy-btn"  @click.stop="canCalFav(item)">取消收藏</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { doFavorite } from '@/api/course'
	export default {
		props: {
			// 是否展示收藏
			showCollect: {
				type: Boolean,
				default: true
			},
			// 是否可以对其操作
			isOperate: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default() {
					return { imgUrl:"",isIntegral:-1 };
				}
			},
			index: {
				type: Number,
				default: -1
			},
		},
		data() {
			return {

			}
		},
		methods: {
			handleChoose() {
				this.$emit("handleChoose",this.index);
			},
			canCalFav(item) {
				item.index=this.index;
				this.$emit("canCalFav",item);
			},
			formatNum(num){
				if(num>10000){
					return (num/10000.0).toFixed(1)+"万";
				}
				return num;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.vertical-goods-itembox {
		width: 100%;
		padding: 20rpx 16rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		overflow: hidden;
		@include u-flex(row, center , flex-start);
		.choose {
			margin-right: 20rpx;
			image{
				width: 36rpx;
				height: 36rpx;
				flex-shrink: 0;
			}
		}
	}
	.vertical-goods-item {
		flex: 1;
		@include u-flex(row, center , flex-start);
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		overflow: hidden;
		&-image {
			width: 230rpx;
			height: 129rpx;
			margin-right: 24rpx;
			flex-shrink: 0;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
		}
		&-info {
			flex: 1;
			@include u-flex(column, flex-start , flex-start);
			overflow: hidden;
		}
		&-name {
			width: 100%;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 10rpx;
		}
		&-desc {
			
			width: 100%;
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 20rpx;
			
			display: -webkit-box;
			-webkit-line-clamp: 2; /* 显示的行数 */
			-webkit-box-orient: vertical; /* 内容会垂直堆叠 */
			overflow: hidden; /* 隐藏溢出的内容 */
			text-overflow: ellipsis; /* 当内容被裁剪时显示省略号 */
		}
		&-buyinfo {
			width: 100%;
			font-size: 22rpx;
			color: #E69A22;
			margin-bottom: 8rpx;
		}
		&-footer {
			width: 100%;
			@include u-flex(row, center , space-between);
			.price-box {
				font-family: Roboto, Roboto;
				font-weight: bold;
				font-size: 36rpx;
				display: flex;
				align-items: center;
				color: #FF5C03;
				&-unit {
					font-weight: 600;
					font-size: 20rpx;
				}
				&-integer {
					font-size: 36rpx;
				}
				&-decimal {
					font-weight: 600;
					font-size: 26rpx;
				}
				&-text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
				}
				.buynum {
					font-weight: 400;
					font-size: 22rpx;
					color: #757575;
					line-height: 22rpx;
					margin-left: 16rpx;
				}
				
				&-imgEye {
					width: 32rpx;
					height: 22rpx;
					margin-right: 8rpx;
					flex-shrink: 0;
				}
				&-imgZan{
					width: 32rpx;
					height: 32rpx;
					margin-left: 8rpx;
					margin-right: 8rpx;
					flex-shrink: 0;
				}
			}
			.gobuy-btn {
				width: 142rpx;
				height: 56rpx;
				background: linear-gradient( 270deg, #FF5C03 0%, #FFAC64 100%);
				border-radius: 0rpx 8rpx 8rpx 0rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 56rpx;
				text-align: center;
			}
			&-r {
				height: 56rpx;
				flex-shrink: 0;
				@include u-flex(row, center , flex-start);
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}
			}
			
			.text{
				
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>