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 :indicator="typeList.length>5" indicatorColor="#FF770033" indicatorActiveColor="#FF7700" :indicatorWidth="30"
					:indicatorBarWidth="15">
					<view class="item-type" :class="{'active': activeType === 0}" @click="handleSelectType(null, 0)">
						<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
						<view class="type-text">
							全部
						</view>
					</view>
					<view class="item-type" v-for="(item, index) in typeList"
						:class="{'active': activeType === index+1}" :key="index" @click="handleSelectType(item.id, index+1)">
						<image class="type-img" :src="item.image" alt="" />
						<view class="type-text">
							{{item.name}}
						</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)">
					价格
					<div class="filter-icon">
						<image v-show="filterIndex !== 1" style="width: 14px; height: 14px;padding-top: 2px;" :src="`${config.BASIC_IMG}home/filter-icon.png`" mode=""></image>
						<image v-show="filterIndex === 1 && orderType===true" style="width: 14px; height: 14px;padding-top: 2px;" :src="`${config.BASIC_IMG}home/filter-icon-1.png`" mode=""></image>
						<image v-show="filterIndex === 1 && orderType===false" style="width: 14px; height: 14px;padding-top: 2px;" :src="`${config.BASIC_IMG}home/filter-icon-2.png`" mode=""></image>
					</div>
				</view>
				<view class="filter-item" :class="{'active': filterIndex === 2}" @click="selectFilter(2)">
					销量
					<div class="filter-icon">
						<image v-show="filterIndex !== 2" style="width: 14px; height: 14px;padding-top: 2px;" :src="`${config.BASIC_IMG}home/filter-icon.png`" mode=""></image>
						<image v-show="filterIndex === 2 && orderType===true" style="width: 14px; height: 14px;padding-top: 2px;" :src="`${config.BASIC_IMG}home/filter-icon-1.png`" mode=""></image>
						<image v-show="filterIndex === 2 && orderType===false" style="width: 14px; height: 14px;padding-top: 2px;" :src="`${config.BASIC_IMG}home/filter-icon-2.png`" mode=""></image>
					</div>
				</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="aspectFill"></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.salesVal}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

	const typeSearch = ref(null)

	const filterIndex = ref(0)
	const activeType = ref(0)
	const orderType = ref(true)

	const discoverData = ref([])
	let sortObj = {
		0: "id",
		1: "price",
		2: "salesVal"
	}

	function selectFilter(i) {
		if (filterIndex.value !== i) {
			orderType.value = false
		}
		filterIndex.value = i
		sort.value = sortObj[i]
		orderType.value = !orderType.value
		getGoodsList()
	}

	onMounted(() => {
		getTypeList()
		getGoodsList()
	})


	const typeList = ref([])

	function getTypeList() {
		HOME.fetchTypeList().then(({
			data
		}) => {
			typeList.value = [...data, ...data]
		})
	}

	const sort = ref("id")
	function getGoodsList(param) {
		let params = {...param, sort: sort.value}
		if (filterIndex.value !== 0) {
			params = {
				...params,
				order: orderType.value ? "asc" : "desc"
			}
		}
		HOME.fetchGoodsList(params).then(({
			data
		}) => {
			discoverData.value = [...data, ...data]
		})
	}
	
	function handleSelectType(id, index) {
		activeType.value = index
		let params = {}
		if (id) {
			params = {
				categoryId: id
			}
		}
		getGoodsList(params)
	}
</script>

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

		.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;
				
				// 覆盖 up-scroll-list 的默认样式，实现两端对齐
				:deep(.u-scroll-list__scroll-view__content) {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					min-width: 100%;
				}

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

					.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;
			height: calc(100% - 352rpx);
			overflow: auto;
			background: #F2F3F5;
			box-sizing: border-box;

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

				.filter-item {
					padding: 12rpx 20rpx;
					display: flex;
					align-items: center;

					&.active {
						color: #000000;
					}
					.filter-icon {
						padding-left: 4rpx;
					}
				}
			}

			.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>