feiniao-youwei-uniapp/components/posterPopup/posterPopup.vue

<template>
	<up-popup :show="showPopup" @close="closePopup" mode="center" bgColor="transparent">
		<view class="poster-popup" ref="contentDom">
			<view class="date-wrap">
				<view class="time">
					<text class="month">{{ treeObj.year }}</text>
					<view class="date">
						<text>{{ treeObj.monthNumber }}</text>/{{ treeObj.day }}
					</view>
				</view>
				<view class="qr-code">
					<image :src="treeObj.qrCodeUrl" alt="" />
					<view class="txt">
						<text>{{ treeObj.age }}年 {{ treeObj.age > 9 ? "老树" : "树龄" }} {{ treeObj.pz }}</text>
						<view>{{treeObj.phenology}} 气候适宜-{{ treeObj.howTxt || "果园采摘" }}</view>
					</view>
				</view>
			</view>
			<view class="image-wrap">
				<image class="image" :src="treeObj.posterUrl" alt="" />
				<view class="address common-bg">{{ treeObj.pz }}-{{ treeObj.countyName }}</view>
				<view class="tag-image">
					<view class="tag-content">
						<view class="tag-name">【{{ treeName || '茜茜荔' }}】</view>
						<view class="tag-user">
							<text>{{ treeObj.nickname || treeObj.name || '12' }}</text>
							<text class="date">{{ treeObj.year }}.{{
	                                    treeObj.monthNumber >= 10 ? treeObj.monthNumber : "0" + treeObj.monthNumber
	                                }}.{{ treeObj.day }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="info-wrap">
				<view class="text">
					<!-- <el-viewider class="viewider" /> -->
					<view v-for="(text, textI) in treeObj.watermarkArr" :key="textI">{{ text }}</view>
				</view>
				<view class="nickname">
					<image :src="`${config.BASIC_IMG}img/treePage/logo.png`" alt="" />
					<view>飞鸟有味</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view @click="handleDownload">保存图片</view>
			<view class="share" @click="handleShare">去分享</view>
		</view>
		<up-icon class="close" name="close-circle-fill" size="30" @click="showPopup = false" color="rgba(255, 255, 255, 0.7)"></up-icon>
	</up-popup>
	<!-- 保存弹窗 -->
	<!-- <save-photo-popup ref="savePhotoDom" height="480"></save-photo-popup> -->
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue";
	// import savePhotoPopup from "@/components/common/savePhotoPopup.vue";
	import config from "@/api/config.js"
	const resize = "?x-oss-process=image/resize,w_1000";

	const props = defineProps({
		farmBuyId: {
			type: [Number, String],
			defalut: "",
		},
		sampleId: {
			type: [Number, String],
			defalut: "",
		},
		treeName: {
			type: String,
			defalut: "",
		},
		showPoster: {
			type: Boolean,
			defalut: false,
		},
	});

	watch(
		() => props.farmBuyId,
		(newValue) => {
			if (newValue && userInfo?.tel && props.showPoster) {
				getPosterData(newValue);
			}
		}
	);

	watch(
		() => props.showPoster,
		(newValue) => {
			// if (newValue && userInfo?.tel && props.showPoster) {
			// 	getPosterData(props.farmBuyId);
			// }
			getPosterData()
		}
	);

	const handleShare = () => {
		const params = {
			sampleId: props.sampleId,
			farmBuyId: props.farmBuyId,
		};
		// wx.miniProgram.navigateTo({
		//     url: `/pages/subPages/share_page/index?type=treeExample&pageParams=${JSON.stringify(params)}`,
		// });
	};

	const showPopup = ref(false);
	// const userInfo = JSON.parse(localStorage.getItem("localUserInfo"));
	function formatDate(dateStr) {
		const date = new Date(dateStr);
		return {
			month: date.toLocaleString("en-US", {
				month: "short"
			}), // "Jun"
			year: date.getFullYear(),
			monthNumber: date.getMonth() + 1, // 6
			day: date.getDate(), // 23
		};
	}

	const treeObj = ref({});
	const savePhotoDom = ref(null);
	const contentDom = ref(null);

	const handleDownload = () => {
		savePhotoDom.value.handleDownload(contentDom.value);
	};

	const getPosterData = (farmBuyId) => {
		// VE_API.lj_home.getPoster({ farmBuyId }).then((res) => {
		//     if (res.code === 0) {
		//         if(!props.isShow){
		showPopup.value = true;
		const data = {
			"posterUrl": "https://birdseye-img-ali-cdn.sysuimars.com/562ba414-9517-4789-98f9-42fdae26cee4/bc27ee0c-8177-47fb-823c-c81d6f8b514c/DJI_202507281100_002_bc27ee0c-8177-47fb-823c-c81d6f8b514c/DJI_20250728110246_0016_Z_code-ws0y1mu3uwb2.jpeg",
			"qrCodeUrl": "https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1751087233847.jpg",
			"age": 2,
			"countyName": "从化",
			"pz": "井岗红糯",
			"watermarkMsg": "山海皆可平，无处不风景",
			"watermarkUrl": "",
			"fosterCode": "LCJGHN-GZCH-LBY1003",
			"countdown": -40,
			"sampleId": 172055,
			"posterId": "740994773711589376",
			"ssDate": null,
			"createDate": "2025-08-06",
			"phenology": "秋梢期",
			"howTxt": "梢期防虫"
		}
		treeObj.value = {
			...data,
			watermarkArr: data.watermarkMsg && data.watermarkMsg.split("，"),
			...formatDate(data.createDate)
		};
		//         }else{
		//             closePopup()
		//         }
		//     }
		// });
	};

	const closePopup = () => {
		showPopup.value = false;
		// VE_API.lj_home.posterRead({ posterId: treeObj.value.posterId });
	};
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";
	.poster-popup {
		width: 90vw;
		box-sizing: border-box;
		position: relative;
		padding: 40rpx 30rpx;
		background: #fff;
		border-radius: 24rpx;
		.date-wrap {
			display: flex;
			justify-content: space-between;

			view {
				font-family: "SweiSpringCJKtc";
			}

			.time {
				line-height: 100rpx;
				margin-top: -42rpx;

				.date {
					font-size: 48rpx;

					text {
						font-size: 172rpx;
					}
				}
			}

			.qr-code {
				text-align: right;

				image {
					width: 112rpx;
					height: 124rpx;
				}

				.txt {
					font-size: 24rpx;
					line-height: 36rpx;
					margin-top: 12rpx;
				}
			}
		}

		.image-wrap {
			width: 100%;
			height: 480rpx;
			position: relative;
			margin: 30rpx 0 44rpx 0;
			pointer-events: none;

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

			.common-bg {
				position: absolute;
				background: rgba(0, 0, 0, 0.6);
				font-size: 20rpx;
				color: #fff;
				padding: 8rpx 30rpx;
				border-radius: 50rpx;
			}

			.address {
				top: 20rpx;
				right: 12rpx;
				border: 1px solid rgba(255, 255, 255, 0.39);
			}

			.tag-image {
				position: absolute;
				z-index: 3;
				left: 0;
				bottom: 0;

				.tag-content {
					@include ossBg("treePage/tag-bg.png");
					width: 276rpx;
					height: 274rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #fff;

					.tag-name {
						font-family: "jiangxizhuokai";
						font-size: 36rpx;
						padding-top: 56rpx;
					}

					.tag-user {
						padding-top: 6rpx;
						font-family: "jiangxizhuokai";
						font-size: 16rpx;

						.date {
							padding-left: 10rpx;
						}
					}
				}
			}
		}

		.info-wrap {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			.text {
				font-size: 22rpx;

				view {
					font-family: "SweiSpringCJKtc";
					line-height: 32rpx;
				}

				.viewider {
					width: 60rpx;
					border-top-color: #000;
					margin: 12rpx 0;
					height: 4rpx;
				}
			}

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

				image {
					width: 68rpx;
					height: 72rpx;
					margin-bottom: 8rpx;
				}

				view {
					font-family: "SweiSpringCJKtc-Black";
				}
			}
		}
	}

	.footer {
		margin: 40rpx 0;
		display: flex;
		width: 100%;
		box-sizing: border-box;

		view {
			flex: 1;
			padding: 20rpx 0;
			font-size: 32rpx;
			border-radius: 50rpx;
			border: 1px solid #fff;
			background: #fff;
			text-align: center;
			color: #000;
		}

		.share {
			margin-left: 20rpx;
			color: #fff;
			background-image: linear-gradient(120deg, #ffd887, #ed9e1e);
		}
	}

	.close{
		margin-top: 36rpx;
		justify-content: center;
	}
</style>