feiniao-youwei-uniapp/pages/tabBar/home/hotComponent.vue

<template>
	<view class="hot-wrap" v-if="hotList && hotList.length">
		<view class="hot-content" :class="{'hot-border': isGardeItem}">
			<view class="hot-title">
				<view class="title-l" v-show="!isGardeItem">
					好味<text class="title-color">热卖</text>
				</view>
				<view class="title-l" v-show="isGardeItem">
					果园热卖
				</view>
				<view class="title-btn">
					限时抢购中<up-icon size="10" name="arrow-right"></up-icon>
				</view>
			</view>
			<view class="hot-list">
				<up-scroll-list :indicator="hotList && hotList.length>2" indicatorColor="#FF770033" indicatorActiveColor="#FF7700" :indicatorWidth="30"
					:indicatorBarWidth="13">
					<view class="hot-panel">
						<view class="hot-item" v-for="(item, index) in hotList" :key="index">
							<image class="hot-img" :src="item.img" mode=""></image>
							<view class="item-info">
								<view class="info-text">
									<!-- <up-text :lines="2" color="#000000" size="12" text="海南妃子笑新鲜顺丰发货海南妃子笑海南妃子笑"></up-text> -->
									<view class="ellipsis-l2">
										{{ item.name }}
									</view>
								</view>
								<view class="info-price">
									<view class="price-text">
										<text class="price-unit">￥</text>{{ item.price }}
									</view>
									<view class="info-sold">
										已售{{ item.salesVal }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</up-scroll-list>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { watch, ref, onMounted } from 'vue'
	import HOME from '@/api/home.js'
	const props = defineProps({
		isGardeItem: {
			type: Boolean,
			default: false
		},
		farmId: {
			type: [String, Number],
			default: null
		}
	})
	const hotList = ref([])
	watch(() => props.farmId, (newVal) => {
		getHotList()
	})

	onMounted(() => {
		getHotList()
	})

	const getHotList = () => {
		HOME.fetchHotList({
			farmId: props.farmId
		}).then(({data}) => {
			hotList.value = data
		})
	}
</script>

<style lang="scss" scoped>
	.hot-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 20rpx;

		.title-l {
			font-family: 'PangMenZhengDao';
			font-size: 32rpx;

			.title-color {
				color: #F3C11D;
			}
		}

		.title-btn {
			color: rgba(0, 0, 0, 0.6);
			font-size: 24rpx;
			display: inline-flex;
			align-items: center;
		}
	}

	.hot-wrap {
		background: linear-gradient(#FFFFFF, rgba(255, 255, 255, 0));
		padding: 2rpx;
		border-radius: 16rpx;

		.hot-content {
			background: linear-gradient(#fff1c3 4%, #FFFFFF 28%);
			border-radius: 16rpx;
			padding: 20rpx;
			height: 240rpx;
			box-sizing: border-box;

			&.hot-border {
				background: none;
				border: 2rpx solid #F3F3F3;
			}
			.hot-list {
				// 覆盖 up-scroll-list 的默认样式，实现两端对齐
				:deep(.u-scroll-list__scroll-view__content) {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					min-width: 100%;
				}

				.hot-panel {
					width: 100%;
					display: flex;

					.hot-item {
						// width: calc(50% - 10rpx);
						// width: calc(100% - 20rpx);
						display: flex;
						white-space: nowrap;
						flex-shrink: 0;

						.hot-img {
							flex: none;
							width: 116rpx;
							height: 116rpx;
							object-fit: cover;
							border-radius: 10rpx;
						}

						.item-info {
							padding-left: 10rpx;
							width: 200rpx;

							.info-text {
								color: #000000;
								font-size: 24rpx;
							}

							.info-price {
								padding-top: 10rpx;
								display: flex;
								align-items: baseline;
								justify-content: space-between;

								.price-text {
									color: #FF7700;
									font-size: 32rpx;

									.price-unit {
										font-size: 20rpx;
									}
								}

								.info-sold {
									font-size: 20rpx;
									color: #C4C4C4;
								}
							}
						}
					}

					.hot-item+.hot-item {
						margin-left: 20rpx;
					}
				}
				
				::v-deep {
					.u-scroll-list__indicator {
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>