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 class="month">{{ treeObj.monthNumber }}</text>/{{ treeObj.day }}
					</view>
				</view>
				<view class="qr-code">
					<image class="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>{{ userInfo.nickname || userInfo.name }}</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">
					<up-divider lineColor="#000" :hairline="false"></up-divider>
					<view v-for="(text, textI) in treeObj.watermarkArr" :key="textI">{{ text }}</view>
				</view>
				<view class="nickname">
					<image class="logo" :src="`${config.BASIC_IMG}img/treePage/logo.png`" alt="" />
					<view class="text">飞鸟有味</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn" @click="handleDownload">保存图片</view>
			<button class="share btn" open-type="share">去分享</button>
		</view>
		<view class="close">
			<up-icon name="close-circle-fill" size="30" @click="showPopup = false"
				color="rgba(255, 255, 255, 0.7)"></up-icon>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue";
	import TREE from '@/api/tree.js'
	import {
		onShareAppMessage
	} from '@dcloudio/uni-app'
	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) => {
			getPosterData(props.farmBuyId)
		}
	);

	onShareAppMessage((res) => {
		return {
			title: '我分享了我的果树，快来查看吧～',
			path: `/pages/tabBar/tree/subPages/friendTree?sampleId=${props.sampleId}`, // 分享的小程序页面路径  
			imageUrl: `http://birdseye-api.feiniaotech.sysuimars.cn/mini/z_farm_buy/genImage/${props.farmBuyId}?key=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9&x1=25&y1=220&fontSize1=40&x2=55&y2=250&fontSize2=16&timestamp=${Date.now()}`,
		}
	})

	const showPopup = ref(false);
	const userInfo = uni.getStorageSync('userInfo')
	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 contentDom = ref(null);

	const emit = defineEmits(['download-poster']);
	
	const handleDownload = () => {
		// 将数据传递给父组件处理canvas
		emit('download-poster', {
			treeObj: treeObj.value,
			treeName: props.treeName,
			userInfo
		});
	};

	const getPosterData = (farmBuyId) => {
		TREE.getPoster({farmBuyId}).then(({data,code,msg}) =>{
			if (code === 0) {
				showPopup.value = true;
				treeObj.value = {
					...data,
					// posterUrl: 'https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1751086680814.jpg',
					watermarkArr: data.watermarkMsg && data.watermarkMsg.split("，"),
					...formatDate(data.createDate)
				};
			}else{
				uni.showToast({
				  title: msg,
				  icon: 'none',
				  duration: 2000
				})
			}
		})
	};

	const closePopup = () => {
		showPopup.value = false;
	};
</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;

			.time {
				line-height: 100rpx;
				margin-top: -42rpx;
				font-family: "SweiSpringCJKtc";

				.date {
					font-size: 48rpx;

					.month {
						font-size: 172rpx;
					}
				}
			}

			.qr-code {
				text-align: right;
				font-family: "SweiSpringCJKtc";

				.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%;
				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;
				font-family: "SweiSpringCJKtc";
				line-height: 32rpx;

			}

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

				.logo {
					width: 68rpx;
					height: 72rpx;
					margin-bottom: 8rpx;
				}
				.text{
					font-family: "SweiSpringCJKtc";
				}
			}
		}
	}

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

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

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

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