front/components/use-goods-list/use-goods-list.vue

<template>

	<view class="goods-list margin-top-xs">
		<view class="list dflex-b dflex dflex-wrap-w w-full">

			<view class="item pos-r bg-main border-radius padding-bottom-sm" v-for="(item, index) in data" :key="index"
				@click="Dever.location('source/info?id=' + item.id + '&title=' + item.name)">
				<view class="image-wrapper">
					<image mode="aspectFill" :lazy-load="true" :src="item.cover"></image>
				</view>
				<text class="title clamp padding-sm">{{ item.name }}</text>
				<view class="padding-left-sm price-area">
					<template v-if="item.price && item.price > 0">
						<text class="price">{{ item.price_text }}</text>
						<text class="m-price" v-if="item.m_price && item.m_price > 0">{{ item.m_price_text }}</text>
					</template>
					<template v-else>
						<text v-if="item.info" class="price-desc">{{ item.info }}</text>
						<text v-else class="price free-tag">免费</text>
						<text class="m-price" v-if="item.m_price > 0">{{ item.m_price_text }}</text>
					</template>
			</view>


			<view class="padding-left-sm rebate-info">
				<view class="rebate-line" v-if="item.rebate && item.rebate.buy && item.rebate.buy.desc">
					<text class="icon icon-jifen">🎁</text>
					<text class="label">{{ item.rebate.buy.name }}：</text>
					<text class="value">{{ item.rebate.buy.desc }}</text>
				</view>
				<view class="rebate-line" v-if="item.rebate && item.rebate.share && item.rebate.share.desc">
					<text class="icon icon-yongjin">💰</text>
					<text class="label">{{ item.rebate.share.name }}：</text>
					<text class="value">{{ item.rebate.share.desc }}</text>
				</view>
			</view>

			<view class="use-tag pos-a pos-top bg-base"
				v-if="item.price > 0 && item.promotion_tag && item.promotion_tag.name">{{ item.promotion_tag.name }}
			</view>
		</view>
	</view>
	</view>

</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default: []
			},
		}
	};
</script>

<style>
	.yishou {
		float: right;
	}

	.price-area {
		min-height: 48rpx;
		/* 确保有一致高度 */
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.free-tag {
		color: #4caf50;
		/* 绿色 */
		background-color: #e6f5ea;
		padding: 4rpx 10rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
	}

	.use-tag {
		border-top-left-radius: 5px;
		border-bottom-right-radius: 5px;
		line-height: 1;
		padding: 4px 6px;
		font-size: 11px;
	}

	.price-desc {
		font-size: 24rpx;
		color: #666;
		font-weight: normal;
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 超出隐藏 */
		text-overflow: ellipsis;
		/* 超出显示省略号 */
	}

	.item {
		height: 480rpx;
		/* 示例高度，根据实际内容调整 */
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.rebate-info {
		margin-top: 8rpx;
		font-size: 24rpx;
		color: #555;
	}

	.rebate-line {
		display: flex;
		align-items: center;
		margin-bottom: 4rpx;
	}

	.rebate-line .icon {
		margin-right: 6rpx;
	}

	.rebate-line .label {
		color: #999;
		margin-right: 4rpx;
	}

	.rebate-line .value {
		color: #e64340;
		font-weight: bold;
	}

	.goods-list .list {
		padding: 0 1vw 9px;
	}

	.goods-list .item:nth-child(2n+1) {
		margin-right: 1vw;
	}

	.goods-list .item {
		width: 46vw;
		overflow: hidden;
		margin-top: 2vw;
	}

	.goods-list .image-wrapper {
		width: 100%;
		height: 320rpx;
		overflow: hidden;
	}

	.clamp {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		width: 100%;
	}

	.goods-list .image-wrapper uni-image {
		width: 100%;
		height: 100%;
		opacity: 1;
	}
</style>