feiniao-youwei-uniapp/pages/tabBar/home/subPages/gardenItem.vue

<template>
	<view class="garden-item-page">
		<view class="report-content">
			<view class="home-search">
				<view class="search-wrap">
					<up-search placeholder="搜索品种" v-model="typeSearch"></up-search>
				</view>
			</view>
			<view class="tips" v-show="panelHeight!==50">
				<view class="tips-content">
					<view class="line-l"></view>
					<image class="down-icon" src="/static/home/down-icon.png" mode=""></image>
					下拉查看溯源报告
					<view class="line-r"></view>
				</view>
			</view>
			<view class="swipe-item">
				<video class="video-wrap" src="https://birdseye-img.sysuimars.com/temp/5-25lby.mp4" controls></video>
			</view>
		</view>
		<l-floating-panel v-model:height="panelHeight" :anchors="anchors" :defaultAnchor="2" :content-draggable="false">
			<view class="panel-content" ref="scrollViewRef">
				<view class="panel-title">
					<view class="title-l">
						<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
						<view class="title-info">
							<view class="title-garden">
								从化荔枝博览园
							</view>
							<view class="btn-second">
								有味指数
								<text>4.5分</text>
							</view>
						</view>
					</view>
					<view class="title-r">
						+
						<text class="add-text">关注</text>
					</view>
				</view>
				<view class="garden-home" v-show="activeMenu === 0">
					<view class="panel-video">
						<video class="video-dom" src="https://birdseye-img.sysuimars.com/temp/5-25lby.mp4" controls></video>
					</view>
					<!-- 果园热卖 -->
					<hot-component-vue :isGardeItem="true"></hot-component-vue>
					<view class="garden-detail">
						<view class="detial-item">
							<view class="sub-title">
								<view class="line-l"></view>
								<view class="title-text">
									果园生态
								</view>
								<view class="line-r"></view>
							</view>
							<view class="detail-img">
								<up-image class="img-dom" radius="8" src="/static/home/fruit-3.png"  mode="widthFix"></up-image>
							</view>
						</view>
						<view class="detial-item">
							<view class="sub-title">
								<view class="line-l"></view>
								<view class="title-text">
									果园生态
								</view>
								<view class="line-r"></view>
							</view>
							<view class="detail-img">
								<up-image class="img-dom" radius="8" src="/static/home/fruit.png"  mode="widthFix"></up-image>
							</view>
						</view>
						<view class="detial-item">
							<view class="sub-title">
								<view class="line-l"></view>
								<view class="title-text">
									果园生态
								</view>
								<view class="line-r"></view>
							</view>
							<view class="detail-img">
								<up-image class="img-dom" radius="8" src="/static/home/fruit-2.png"  mode="widthFix"></up-image>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 好味 -->
				<!-- 列表 -->
				<view class="discover-content" v-show="activeMenu === 1">
					<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>

			<view class="bottom-menu">
				<view class="menu-item" :class="{'active': activeMenu === 0}" @click="changeMenu(0)">
					首页
				</view>
				<view class="menu-item" :class="{'active': activeMenu === 1}" @click="changeMenu(1)">
					好味
				</view>
			</view>
		</l-floating-panel>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue'
	import config from "@/api/config.js"
	import hotComponentVue from '../hotComponent.vue'


	const typeSearch = ref(null)

	const {
		windowHeight
	} = uni.getSystemInfoSync()
	const anchors = [
		50,
		Math.round(0.5 * windowHeight),
		Math.round(0.86 * windowHeight),
	];
	const panelHeight = ref(anchors[2]);

	const myVideo = ref(null);
	const onVideoReady = () => {
		myVideo.value.play();
	};
	
	const activeMenu = ref(0)
	const scrollViewRef = ref(null)
	function changeMenu(i) {
		activeMenu.value = i
		nextTick(() => { 
		     scrollViewRef.value.scrollTo({
		          top: 0,
		          duration: 300 // 动画时间（ms）
		        });
		});
	}
	
	// 好味
	
	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>
	.garden-item-page {
		width: 100%;
		height: 100vh;

		.report-content {
			width: 100%;
			height: calc(100% - 140rpx);
			position: relative;

			.home-search {
				position: absolute;
				z-index: 2;
				top: 20rpx;
				left: 24rpx;
				display: flex;
				align-items: center;
				width: calc(100% - 48rpx);
				border: 2rpx solid rgba(255, 255, 255, 0.39);
				border-radius: 40rpx;
				margin-bottom: 40rpx;
				background-color: rgba(0, 0, 0, 0.31);

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

								}
							}

							.uni-input-input {
								color: rgba(255, 255, 255, 0.8);
							}

							.u-search__action {
								text-align: center;
								line-height: 52rpx;
								border-radius: 40rpx;
								font-size: 28rpx;
								background-color: rgba(255, 255, 255, 0.3);
								color: rgba(255, 255, 255, 0.3);
								margin: 6rpx 8rpx;
								width: 112rpx;
								height: 52rpx;
							}
						}
					}
				}
			}

			.tips {
				position: absolute;
				z-index: 2;
				top: 110rpx;
				left: 0;
				color: #FFFFFF;
				font-size: 24rpx;
				width: 100%;
				text-align: center;

				.tips-content {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;

					.down-icon {
						width: 14rpx;
						height: 14rpx;
						padding-right: 20rpx;
					}

					.line-l {
						width: 208rpx;
						height: 2rpx;
						background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
						margin-right: 20rpx;
					}

					.line-r {
						margin-left: 20rpx;
						width: 208rpx;
						height: 2rpx;
						background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
					}
				}
			}

			.swipe-item {
				width: 100%;
				height: 100%;

				.video-wrap {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				::v-deep {
					.uni-video-video {
						object-fit: cover !important;
					}
				}
			}
		}
	}

	.panel-content {
		padding: 0 24rpx 24rpx;
		height: calc(100vh - 420rpx);
		overflow: auto;

		.panel-title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title-l {
				flex: 1;
				display: flex;
				align-items: center;

				.garden-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}

				.title-info {
					padding-left: 20rpx;

					.title-garden {
						color: #000000;
						font-size: 28rpx;
						font-weight: 600;
						padding-bottom: 10rpx;
					}

					.btn-second {
						padding: 0 30rpx;
						border-radius: 40rpx;
						font-size: 24rpx;
						color: #C49600;
						background: rgba(255, 217, 94, 0.2);
						height: 56rpx;
						line-height: 56rpx;
					}
				}
			}

			.title-r {
				display: flex;
				font-size: 24rpx;
				padding: 8rpx 22rpx;
				background: #FFD95E;
				border-radius: 30rpx;

				.add-text {
					padding-left: 6rpx;
					font-weight: 600;
				}
			}
		}

		.panel-video {
			padding: 20rpx 0;
			height: 300rpx;
			width: 100%;

			.video-dom {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 10rpx;
			}
		}

		.discover-content {
		
			.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;
						border: 2rpx solid rgba(0, 0, 0, 0.1);
						.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;
					}
				}
			}
		}

		.garden-detail {
			padding: 20rpx 0;

			.detial-item {
				padding-bottom: 20rpx;

				.sub-title {
					display: flex;
					align-items: center;
					justify-content: center;
					padding-bottom: 20rpx;

					.line-l {
						width: 120rpx;
						height: 2rpx;
						background: linear-gradient(90deg, rgba(102, 102, 102, 0), rgba(0, 0, 0, 0.5));
						margin-right: 20rpx;
					}

					.line-r {
						width: 120rpx;
						height: 2rpx;
						background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(102, 102, 102, 0));
						margin-left: 20rpx;
					}

					.title-text {
						font-size: 32rpx;
						font-family: "PangMenZhengDao";
						color: #000;
					}
				}

				.detail-img {
					padding: 0 20rpx;
					text-align: center;

					.img-dom {
						margin: 0 auto;
					}
				}
			}
		}
	}
	
	.bottom-menu {
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		width: 100%;
		height: 100rpx;
		.menu-item {
			padding: 0 72rpx;
			position: relative;
			color: #898989;
			font-size: 32rpx;
			&.active {
				color: #000000;
				font-weight: 600;
			}
		}
		.menu-item + .menu-item {
			&::before {
				content: "";
				position: absolute;
				left: 0%;
				top: 16rpx;
				background-color: rgba(0, 0, 0, 0.42);
				width: 2rpx;
				height: 20rpx;
			}
		}
	}
</style>