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

<template>
	<view class="source-report">
		<view class="source-content">
			<view class="source-box">
				<view class="steps" v-if="showStep">
					<view class="steps-list">
						<view class="steps-item" :class="{ active: activeIndex == index }"
							v-for="(item, index) in steps" :key="index">
							<view class="name">{{ item }}</view>
							<view class="dot"></view>
						</view>
					</view>
				</view>
				<!-- 位置 -->
				<view class="position-wrap" v-if="farmDetail?.name">
					<view class="address">
						<image class="location-img" :src="`${config.BASIC_IMG}home/adress-icon.png`" mode=""></image>
						<text>{{farmDetail.name}}({{farmDetail.address + farmDetail.district}})</text>
					</view>
				</view>
				<!-- 关闭，下一页 -->
				<view class="footer-btn">
					<div class="btn-item pre" v-show="activeIndex!==0" @click="hanldePrev">上一页</div>
					<view class="btn-item close" :class="{'isLeft': activeIndex===0, 'isRight': activeIndex===5}" @click="goBack">关闭</view>
					<view class="btn-item next" v-show="activeIndex!==5" @click="hanldeNext">下一页</view>
				</view>
			</view>
		</view>
		<view class="report-info">
			<swiper ref="swiperRef" :indicator-dots="true" :autoplay="false" style="height: 100vh"
				:current="activeIndex" @change="handleSwiperChange">
				<swiper-item>
					<view class="item-content">
						<video v-if="videoUrl" :src="videoUrl" object-fit="cover" ref="myVideo" :show-fullscreen-btn="false"
							:autoplay="true" class="mp4" loop muted controls @canplay="onVideoReady">
						</video>
						<view class="mp4-title" :class="{'down': !showStep}">
							<text class="title-text">在线赏园</text>
							<view class="text">科学定义好吃，数字评估生态</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item-content" v-if="reportData?.farmTeamImg">
						<up-image class="img-dom" width="100%" height="100vh"
							:src="reportData.farmTeamImg"
							mode="scaleToFill"></up-image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item-content">
						<banner-two-vue ref="bannerTwoRef" :baseData="reportData" :activeIndex="activeIndex" @handleShow="handleShowPopup"></banner-two-vue>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item-content">
						<banner-three-vue :baseData="reportData"></banner-three-vue>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item-content">
						<banner-four-vue :baseData="reportData"></banner-four-vue>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item-content">
						<banner-five-vue :baseData="reportData"></banner-five-vue>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 评分方法 -->
		<up-popup :show="showPopup" :round="12" mode="center" :closeable="true" bgCoor="transparent"  @close="closePopup">
			<view class="banner-popup">
				<view class="popup-title">评分方法</view>
				<view class="popup-list popup-two">
					<view class="popup-item">
						<view class="label">
							
							<view><text class="name">{{ ruleName }}</text>{{ ruleObj[ruleName]?.text1 }}</view>
						</view>
						<view class="label">
							<view>{{ ruleObj[ruleName]?.text2 }}</view>
						</view>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import config from "@/api/config.js"
	import bannerTwoVue from '../components/bannerTwo.vue';
	import bannerThreeVue from '../components/bannerThree.vue';
	import bannerFourVue from '../components/bannerFour.vue';
	import bannerFiveVue from '../components/bannerFive.vue';
	import {
		onMounted,
		ref,
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import HOME from '@/api/home.js'
	
	const props = defineProps({
		showStep: {
			type: Boolean,
			default: true,
		}
	})

	const activeIndex = ref(0)
	const steps = ["美景", "果园", "环境", "气象", "农事", "生态"];
	const videoUrl = ref(null)
	const farmDetail = ref(null)

	const myVideo = ref(null);
	const onVideoReady = () => {
		myVideo.value.play();
	};

	const swiperRef = ref(null);
	
	function handleSwiperChange(e) {
		activeIndex.value = e.detail.current
	}

	function hanldeNext() {
		activeIndex.value++
	}

	function hanldePrev() {
		activeIndex.value--
	}

	function goBack() {
		uni.navigateBack()
	}
	
	const currentFarmId = ref(null)
	onLoad(({farmId})=>{
		currentFarmId.value = farmId||766
		getFarmInfo()
		getReportData()
		getScoreRule()
	})
	
	const tableData = ref([])
	const reportData = ref(null)
	const getReportData = async () => {
		// 溯源报告
		const { data } = await HOME.getFarmReport({farmId: currentFarmId.value})
		reportData.value = data
		 videoUrl.value = data.fineView;
		 tableData.value = data.farmWorkAuths.filter(
		     (item) => item.periodName === data.periodList[0]
		 );
	};
	
	const getFarmInfo = () => {
		HOME.fetchFarmInfo({id: currentFarmId.value}).then(({data}) => {
			farmDetail.value = data
		})
	}
	
	// 评分方法弹窗
	const showPopup = ref(false)
	const bannerTwoRef = ref(null)
	
	const ruleName = ref("生境");
	const handleShowPopup = (name) => {
	    ruleName.value = name;
	    showPopup.value = true;
		bannerTwoRef.value.stopAutoClick()
	};
	
	function closePopup() {
		showPopup.value = false;
		bannerTwoRef.value.startAutoClick()
	}
	
	const ruleObj = ref({});
	const getScoreRule = () => {
	  HOME.getScoreRule().then(({ data }) => {
	    ruleObj.value = data;
	  });
	};
</script>

<style lang="scss" scoped>
	.source-report {
		height: 100vh;
		width: 100%;
		overflow: hidden;
		position: relative;
		color: #fff;
		font-size: 28rpx;

		.source-content {
			position: absolute;
			z-index: 2;
			width: 100%;
			height: 100vh;
			pointer-events: none;

			.source-box {
				position: relative;
				width: 100%;
				height: 100%;
			}

			.steps {
				padding: 24rpx 8rpx;
				width: 100%;
				font-size: 26rpx;
				box-sizing: border-box;

				.line {
					background: rgba(255, 255, 255, 0.18);
					width: 100%;
					height: 3rpx;
				}

				.steps-list {
					display: flex;
					justify-content: space-between;
					width: 100%;
					border-bottom: 3rpx solid rgba(255, 255, 255, 0.18);
				}

				.steps-item {
					flex: 1;
					margin-bottom: -9rpx;

					.name {
						text-align: center;
						background: #035197;
						border-radius: 40rpx;
						padding: 6rpx;
						width: 108rpx;
						margin: 0 auto 16rpx;
						font-size: 24rpx;
					}

					.dot {
						width: 16rpx;
						height: 16rpx;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 50%;
						margin: auto;
						position: relative;

						&::before {
							content: "";
							position: absolute;
							left: -4rpx;
							top: -4rpx;
							width: 24rpx;
							height: 24rpx;
							background: rgba(255, 255, 255, 0.3);
							border-radius: 50%;
						}
					}

					&.active {
						.name {
							background-image: linear-gradient(45deg, #ffd887, #ed9e1e);
						}

						.dot {
							background: #ffd489;
						}
					}
				}
			}

			.position-wrap {
				z-index: 2;
				position: absolute;
				bottom: 220rpx;
				left: 24rpx;
				width: calc(100% - 48rpx);
				display: flex;
				flex-direction: column;
				align-items: center;

				.address {
					width: 100%;
					color: #f0d09c;
					padding: 20rpx 0;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 10rpx;
					box-sizing: border-box;
					display: flex;
					font-size: 26rpx;
					align-items: center;
					justify-content: center;

					.location-img {
						width: 34rpx;
						height: 38rpx;
						margin-right: 8rpx;
					}
				}
			}

			.footer-btn {
				position: absolute;
				z-index: 2;
				padding: 0 24rpx;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				left: auto;
				right: 0;
				bottom: 172rpx;

				.btn-item {
					font-size: 28rpx;
					color: #FFFFFF;
					padding: 14rpx 36rpx;
					width: 160rpx;
					box-sizing: border-box;
					border-radius: 50rpx;
					border: 2rpx solid rgba(255, 255, 255, 0.3);
					text-align: center;
					font-weight: 500;
					background: rgba(0, 0, 0, 0.6);
					pointer-events: all;
				}

				.pre {
					position: absolute;
					left: 24rpx;
				}

				.close {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					&.isLeft {
						left: 24rpx;
						transform: none;
					}
					&.isRight {
						left: auto;
						right: 24rpx;
						transform: none;
					}
				}

				.next {
					position: absolute;
					left: auto;
					right: 24rpx;
				}

				.save {
					color: #ff8400;
				}
			}
		}

		.report-info {
			.item-content {
				height: 100vh;
				width: 100%;

				.mp4 {
					width: 100%;
					height: 100%;
					object-fit: cover;

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

				.mp4-title {
					position: absolute;
					top: 124rpx;
					left: 48rpx;
					font-size: 90rpx;
					&.down {
						top: 160rpx;
					}

					.title-text {
						font-family: "jiangxizhuokai";
					}

					.text {
						margin-top: 8rpx;
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>


<style lang="scss">
	.banner-popup {
		padding: 26rpx 32rpx 50rpx 32rpx;
		color: #000;
		width: 90vw;
		box-sizing: border-box;
		background: #fff;
		border-radius: 24rpx;
		margin: 0 auto;

		.box-item {
			.box-title {
				display: flex;
				align-items: center;
				color: #000;
				font-size: 30rpx;

				// img {
				// 	width: 30rpx;
				// 	height: 18rpx;
				// 	margin-right: 12rpx;
				// }

				.text {
					width: 100%;
					font-family: "jiangxizhuokai";
					display: flex;
					align-items: center;
					justify-content: space-between;

					.more {
						color: #bbbbbb;
						display: flex;
						align-items: center;
						font-size: 26rpx;
					}
				}
			}

			.tabs {
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
				font-size: 26rpx;
				color: #666666;

				.tabs-item {
					padding: 6rpx 46rpx;
					border-radius: 40rpx;
					background: rgba(0, 0, 0, 0.09);

					&.active {
						color: #fff;
						background-image: linear-gradient(90deg, #ffd887, #ed9e1e);
					}
				}

				.tabs-item+.tabs-item {
					margin-left: 40rpx;
				}
			}
		}

		.popup-title {
			font-family: "PangMenZhengDao";
			font-size: 48rpx;
			margin: 32rpx 0;
			text-align: center;
		}

		.popup-list {
			.popup-item {
				position: relative;
				margin-left: 26rpx;

				&::before {
					content: "";
					position: absolute;
					left: -26rpx;
					top: 20rpx;
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background: #999999;
					margin-right: 10rpx;
				}

				.label {
					font-size: 36rpx;

					.name {
						margin-right: 8rpx;
					}

					.num {
						color: #ff8400;
					}
				}

				.desc {
					margin-top: 8rpx;
					color: #999999;
				}
			}

			.popup-item+.popup-item {
				margin-top: 32rpx;
			}
		}

		.popup-two {
			.popup-item {
				.label {
					font-size: 28rpx;
					color: #999999;

					.name {
						color: #000;
					}
				}

				.label+.label {
					margin-top: 24rpx;
				}
			}
		}
	}
</style>