feiniao-youwei-uniapp/pages/tabBar/discover/discover.vue

<template>
	<view class="discover-page base-container">
		<view class="discover-top">
			<view class="home-search">
				<view class="search-wrap">
					<up-search placeholder="搜索品种" v-model="typeSearch"></up-search>
				</view>
			</view>

			<view class="type-wrap">
				<up-scroll-list indicatorColor="#FF770033" indicatorActiveColor="#FF7700" :indicatorWidth="30"
					:indicatorBarWidth="13">
					<view class="item-type" :class="{'active': activeType === 0}">
						<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
						<view class="type-text">
							全部
						</view>
					</view>
					<view class="item-type">
						<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
						<view class="type-text">
							龙眼
						</view>
					</view>
					<view class="item-type">
						<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
						<view class="type-text">
							葡萄
						</view>
					</view>
					<view class="item-type">
						<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
						<view class="type-text">
							水蜜桃
						</view>
					</view>
					<view class="item-type">
						<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
						<view class="type-text">
							龙眼
						</view>
					</view>
					<view class="item-type">
						<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
						<view class="type-text">
							葡萄
						</view>
					</view>
					<view class="item-type">
						<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
						<view class="type-text">
							葡萄
						</view>
					</view>
					<view class="item-type">
						<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
						<view class="type-text">
							水蜜桃
						</view>
					</view>
					<view class="item-type">
						<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
						<view class="type-text">
							龙眼
						</view>
					</view>
				</up-scroll-list>
			</view>

		</view>

		<!-- 列表 -->
		<view class="discover-content">
			<view class="discover-filter">
				<view class="filter-item" :class="{'active': filterIndex === 0}" @click="selectFilter(0)">
					综合
				</view>
				<view class="filter-item" :class="{'active': filterIndex === 1}" @click="selectFilter(1)">
					价格
				</view>
				<view class="filter-item" :class="{'active': filterIndex === 2}" @click="selectFilter(2)">
					销量
				</view>
			</view>

			<view class="discover-list">
				<view class="list-line">
					<view class="list-item" v-for="(item, index) in discoverData" :key="index">
						<image class="item-img" :src="item.img" mode=""></image>
						<view class="item-desc">
							<view class="item-text">
								{{item.name}}
							</view>
							<view class="item-subtext">
								<text class="subtext-text">坏单包退</text>
								<text class="subtext-text">包邮</text>
							</view>
							
							<view class="info-price">
								<view class="price-text">
									<text class="price-unit">￥</text>{{item.price}}
								</view>
								<view class="info-sold">
									已售{{item.sold}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import config from "@/api/config.js"

	const typeSearch = ref(null)

	const filterIndex = ref(0)
	const activeType = ref(0)
	
	const discoverData = ref([
		{
			name: "海南妃子笑荔枝新鲜采摘新鲜采摘",
			img: "/static/home/fruit.png",
			text: "",
			price: '107',
			sold: "1250"
		},
		{
			name: "海南妃子笑荔枝新鲜采摘新鲜采摘",
			img: "/static/home/fruit.png",
			text: "",
			price: '107',
			sold: "1250"
		},
		{
			name: "海南妃子笑荔枝新鲜采摘新鲜采摘",
			img: "/static/home/fruit.png",
			text: "",
			price: '107',
			sold: "1250"
		},
		{
			name: "海南妃子笑荔枝新鲜采摘新鲜采摘",
			img: "/static/home/fruit.png",
			text: "",
			price: '107',
			sold: "1250"
		}
	])

	function selectFilter(i) {
		filterIndex.value = i
	}
</script>

<style lang="scss" scoped>
	.discover-page {
		padding: 0;
		background: #F2F3F5;

		.discover-top {
			padding: 20rpx 24rpx;
			background: linear-gradient(#FFFFFF, #F2F3F5);

			.home-search {
				display: flex;
				align-items: center;
				width: 100%;
				border: 2rpx solid #FFD95E;
				border-radius: 40rpx;
				margin-bottom: 40rpx;

				.search-wrap {
					flex: 1;

					// padding-left: 22rpx;
					::v-deep {
						.u-search {
							.u-search__content {
								background-color: transparent !important;

								.u-search__content__input {
									background-color: transparent !important;

								}
							}

							.u-search__action {
								text-align: center;
								line-height: 52rpx;
								border-radius: 40rpx;
								font-size: 28rpx;
								background-color: #FFD95E;
								margin: 6rpx 8rpx;
								width: 112rpx;
								height: 52rpx;
							}
						}
					}
				}

				.search-btn {
					text-align: center;
					line-height: 52rpx;
					border-radius: 40rpx;
					font-size: 28rpx;
					background-color: #FFD95E;
					margin: 6rpx 8rpx;
					width: 112rpx;
					height: 52rpx;
				}
			}

			.type-wrap {
				padding: 0 20rpx 20rpx;
				background-color: #fff;
				border-radius: 16rpx;
				height: 200rpx;
				box-sizing: border-box;

				.item-type {
					text-align: center;
					font-size: 24rpx;

					.type-img {
						width: 92rpx;
						height: 92rpx;
					}
					.type-text {
						line-height: 36rpx;
					}
					&.active {
						.type-text {
							background-color: #FFD95E;
							border-radius: 20rpx;
						}
					}
				}

				.item-type+.item-type {
					padding-left: 22rpx;
				}
			}

		}

		.discover-content {
			padding: 0rpx 24rpx 24rpx;

			.discover-filter {
				color: #A6A6A6;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.filter-item {
					padding: 12rpx 20rpx;

					&.active {
						color: #000000;
					}
				}
			}
			.discover-list {
				padding-top: 20rpx;
				.list-line {
					padding-bottom: 20rpx;
					display: flex;
					flex-wrap: wrap;
					.list-item {
						background-color: #FFFFFF;
						border-radius: 10rpx;
						width: calc(50% - 16rpx);
						margin-bottom: 20rpx;
						.item-img {
							width: 100%;
							height: 340rpx;
							object-fit: cover;
							border-radius: 10rpx 10rpx 0 0;
						}
						.item-desc {
							padding: 0 10rpx 10rpx;
							.item-text {
								width: calc(100% - 22rpx);
								overflow: hidden;
								text-overflow: ellipsis;
								color: #000000;
								font-size: 28rpx;
								line-height: 42rpx;
								font-weight: 600;
								white-space: nowrap;
							}
							.item-subtext {
								color: #AFAFAF;
								font-size: 24rpx;
								line-height: 36rpx;
								.subtext-text + .subtext-text {
									padding-left: 10rpx;
								}
							}
							
							.info-price {
								display: flex;
								align-items: baseline;
								justify-content: space-between;
								.price-text {
									color: #FF7700;
									font-size: 36rpx;
									.price-unit {
										font-size: 23rpx;
									}
								}
								.info-sold {
									font-size: 20rpx;
									color: #C4C4C4;
								}
							}
						}
					}
					.list-item:nth-child(2n) {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>