taoke/components/product-item/product-item.vue

<template>
	<view :class="type==='swiper'?'product-swiper-item':'product-list-item'" class="product-item" @tap="openDetails">
		<image class="image" :src="image" mode="scaleToFill"></image>
		<view class="row row-1">
			<text class="title"><text class="sxzg-icon">省心直供</text>{{title}}</text>
		</view>
		<view class="row row-2">
			<text class="org-price">￥{{orgPrice}}</text>
			<text class="sales">月销15.8万</text>
		</view>
		<view class="row row-3">
			<text class="sxj-icon">省心价</text>
			<text class="price">￥{{price}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			id: {
				type: [String, Number],
				default: 0
			},
			title: {
				type: String,
				default: "【工厂直营】加厚款手提垃圾袋加厚款手提垃圾袋加厚款手提垃圾袋加厚款手提垃圾袋*50支"
			},
			image: {
				type: String,
				default: ""
			},
			type: {
				type: String,
				default: "list"
			},
			sales: {
				type: [String, Number],
				default: 0
			},
			orgPrice: {
				type: [String, Number],
				default: 0
			},
			price: {
				type: [String, Number],
				default: 0
			}
		},
		methods: {
			openDetails() {
				uni.navigateTo({
					url: "/pages/product/product-details?id=" + this.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.product-item {
		overflow: hidden;
		border-radius: 18rpx;
		background: white;
		box-shadow: 0 0 10rpx #EEEEEE;
		padding-bottom: 10upx;
		display: inline-block;
	}

	.product-list-item {
		width: 350rpx;

		.image {
			width: 350rpx;
			height: 300rpx;
		}
	}

	.product-swiper-item {
		width: 288rpx;
		// height: 268rpx;

		.image {
			width: 288rpx;
			height: 288rpx;
		}
	}

	.sxzg-icon {
		color: $primary-color;
		font-size: 16rpx;
		width: 80rpx;
		text-align: center;
		line-height: normal;
		border: 2rpx solid $primary-color;
		border-radius: 20rpx;
		display: inline-block;
		position: relative;
		top: -4rpx;
		margin-right: 10upx;
		// transform: scale(0.9);
	}

	.title {
		font-size: 24rpx;
		display: inline-block;
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		height: 68upx;
	}

	.row {
		padding: 0 10upx;		
	}

	.row-2 {
		display: flex;
		justify-content: space-between;
	}

	.org-price,
	.sales {
		font-size: 22rpx;
		color: #cccccc;
	}

	.org-price {
		text-decoration: line-through;
	}

	.sxj-icon {
		background: $primary-color;
		color: white;
		font-size: 20upx;
		padding: 0 5upx;
		border-radius: 5upx;
		vertical-align: middle;
	}

	.price {
		font-size: 24rpx;
		color: $primary-color;
		font-weight: bold;
	}
</style>