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

<template>
	<view class="list-page">
		<view class="garden-list">
			<view class="garden-item" v-for="farm in gardenList" :key="farm.farmId || farm.id"
				>
				<view class="garden-l" v-if="farm.coverVideo">
					<video :src="farm.coverVideo" :show-progress="false" :show-play-btn="false"
						:show-center-play-btn="false" object-fit="cover" :show-fullscreen-btn="false"
						 disablePictureInPicture :autoplay="true" class="video-dom"
						loop muted>
					</video>
				</view>
				<view class="garden-l" v-else>
					<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
					<text class="img-text">无人机实拍视频</text>
				</view>
				<view class="garden-r" @click="goGardenItem(farm)">
					<view class="garden-title">
						{{ farm.name }}
					</view>
					<view class="garden-info">
						品种：荔枝（{{ farm.pz }}）
					</view>
					<view class="garden-info">
						位置：{{ (farm.cityName + farm.countyName) || '—' }}
					</view>
					<view class="garden-btn-group">
						<view class="btn-second">
							有味指数
							<text>{{ farm.envScore || '—' }}分</text>
						</view>
						<view class="btn-primary" @click.stop="goSourceReport(farm)">
							溯源报告
						</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'

	onMounted(() => {
		getGardenList()
	})

	const gardenList = ref([])

	function getGardenList() {
		HOME.getAllFarm().then(({
			data
		}) => {
			gardenList.value = data.filter(item => item.recommend !== null)
		})
	}

	function goGardenItem(farm) {
		const id = farm?.farmId
		uni.navigateTo({
			url: `/pages/tabBar/home/subPages/gardenItem?farmId=${id}`
		});
	}

	function goSourceReport(farm) {
		const id = farm?.farmId
		uni.navigateTo({
			url: `/pages/tabBar/home/subPages/sourceReport?farmId=${id}`
		});
	}
</script>

<style lang="scss" scoped>
	.list-page {
		padding: 20rpx 40rpx;

		.garden-list {
			.garden-item {
				display: flex;

				.garden-l {
					position: relative;

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

					.garden-img {
						width: 254rpx;
						height: 200rpx;
						object-fit: cover;
						border-radius: 10rpx;
					}

					.img-text {
						position: absolute;
						left: 0%;
						top: 0%;
						background: rgba(0, 0, 0, 0.3);
						backdrop-filter: 8rpx;
						border-radius: 10rpx 0 10rpx 0;
						font-size: 20rpx;
						color: #FFFFFF;
						padding: 6rpx 14rpx;
					}
				}

				.garden-r {
					padding-left: 20rpx;

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

					.garden-info {
						color: rgba(0, 0, 0, 0.5);
						font-size: 24rpx;
						line-height: 36rpx;
					}

					.garden-btn-group {
						padding-top: 20rpx;
						display: flex;
						align-items: center;

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

						.btn-primary {
							padding: 0 20rpx;
							border-radius: 40rpx;
							font-size: 24rpx;
							color: #000000;
							background: #FFD95E;
							font-weight: bold;
							height: 56rpx;
							line-height: 56rpx;
						}
					}
				}
			}

			.garden-item+.garden-item {
				margin-top: 20rpx;
			}
		}
	}
</style>