feiniao-youwei-uniapp/pages/tabBar/tree/tree.vue

<template>
	<view class="page-container">
		<view class="base-container">
			<member-level :treeData="treeData">
				<view class="toogle" @click="handleShow">切换 {{name}}<up-icon class="icon" name="arrow-down" color="#fff"
						size="12"></up-icon></view>
			</member-level>
			<view class="tree-cont">
				<!-- 弹幕组件 -->
				<view class="danmaku-wrapper">
					<danmakuManager 
						ref="danmakuRef"
						:danmakuList="danmakuList" 
						:height="100" 
						:infinite="true"
						:speed="80"
						@danmakuComplete="onDanmakuComplete"
					></danmakuManager>
				</view>
				<view class="dialogue-tips">
					<view class="tips-name">
						<image class="tip-img" :src="`${config.BASIC_IMG}img/treePage/sun-icon.png`"></image>
						<text>亲爱的主人！</text>
					</view>
					<view class="tips-cont">今天是我开花的日子，我很开心！</view>
				</view>
				<view class="tree-name">
					<view>{{treeName}}</view>
					<image v-if="userInfo.tel" @click="handleEditName" class="edit-icon" :src="`${config.BASIC_IMG}img/edit-icon.png`">
					</image>
				</view>
				<image class="drone-icon" :src="`${config.BASIC_IMG}img/treePage/drone-icon.png`"></image>
				<view class="tool-wrap">
					<view class="tool-left">
						<view :class="['tool-item',item.className]" v-for="(item,index) in toolLeftList" :key="index"
							@click="handleToolItem(item)">
							<image class="icon" :src="`${config.BASIC_IMG}img/treePage/l-tree-icon-${index+1}.png`">
							</image>
							<view class="name">{{item.name}}</view>
						</view>
					</view>
					<view class="tool-right">
						<view :class="['tool-item',item.className]" v-for="(item,index) in toolRightList" :key="index"
							@click="handleToolItem(item)">
							<image class="icon" :src="`${config.BASIC_IMG}img/treePage/r-tree-icon-${index+1}.png`">
							</image>
							<view class="name">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tree-footer">
				<template v-if="userInfo.tel">
					<view class="footer-item" v-for="(item,index) in footerList" :key="index" @click="handleItem(index)">
						<view @click="requestSubscribe">
							<button class="share-btn" open-type="share" v-if="index === 2">
								<image class="icon" :src="`${config.BASIC_IMG}img/treePage/b-tree-icon-${index+1}.png`">
								</image>
							</button>
							<image v-else class="icon" :class="{small:index === 0}" :src="`${config.BASIC_IMG}img/treePage/b-tree-icon-${index+1}.png`">
							</image>
							<view class="name">{{item}}</view>
						</view>
					</view>
				</template>
				<view v-else class="button" @click="handlePage">开启我的守护</view>
			</view>
		</view>
		<!-- 引导弹窗 -->
		<view class="guide-bg" v-if="showMask" @click="handleClose">
			<image class="guide-icon" :src="`${config.BASIC_IMG}img/treePage/guide-1.png`"></image>
		</view>
		<!-- 切换 -->
		<up-picker :show="showPicker" :columns="columns" :defaultIndex="[0]" @cancel="handleCancel"
			@confirm="handleConfirm" keyName="name" valueName="speciesId"></up-picker>
		<!-- 签到打卡 -->
		<checkinPopup @closedCheckPopup="closedCheckPopup"></checkinPopup>
		<!-- 编辑树名称 -->
		<editNamePopup ref="editNameRef" @editEnd="getBySampleId"></editNamePopup>
		<!-- 海报弹窗 -->
		<posterPopup 
			:showPoster="showPoster" 
			:farmBuyId="farmBuyId" 
			:treeName="treeName" 
			:sampleId="sampleId"
			@download-poster="handleDownloadPoster"
		></posterPopup>
		<!-- 果树成功弹窗 -->
		<guardSuccessPopup :show="showGuardSuccess" :treeData="treeData"></guardSuccessPopup>
		<!-- 果树相册弹窗 -->
		<tree-album-popup :show="showAlbum" :farmBuyId="farmBuyId" :sampleId="sampleId"></tree-album-popup>
		<!-- 等级升级成功弹窗 -->
		<levelSuccessPopup></levelSuccessPopup>
		<!-- 祝福弹窗 -->
		<blessingsPopup :show="showBlessingsPopup" :showSuccess="showSuccess" :farmBuyId="farmBuyId"
			:clockinType="clockinType" @clockinCallback="getBySampleId"></blessingsPopup>
		
		<!-- canvas生成图片 - 隐藏的canvas元素 -->
		<canvas id="posterCanvas" canvas-id="posterCanvas" style="width: 1380rpx;height: 2280rpx;position: fixed;left: 750rpx;top: 2000rpx;z-index: 9999;"></canvas>
	</view>
</template>

<script setup>
	import config from "@/api/config.js"
	import {
	onLoad,
	onShareAppMessage,
	onShow,
	onHide,
	onUnload
} from '@dcloudio/uni-app'
	import memberLevel from "./components/memberLevel.vue"
	import treeAlbumPopup from "./components/treeAlbumPopup.vue"
	import blessingsPopup from "./components/blessingsPopup.vue"
	import checkinPopup from "@/components/checkinPopup/checkinPopup.vue"
	import editNamePopup from "@/components/editNamePopup/editNamePopup.vue"
	import guardSuccessPopup from "@/components/guardSuccessPopup/guardSuccessPopup.vue"
	import levelSuccessPopup from "@/components/levelSuccessPopup/levelSuccessPopup.vue"
	import danmakuManager from "@/components/danmakuManager/danmakuManager.vue"
	import posterPopup from "@/components/posterPopup/posterPopup.vue"
	import TREE from '@/api/tree.js'
	import USER from '@/api/user.js'
	import { CanvasUtils } from '@/utils/canvasUtils.js'
	import {
		ref
	} from 'vue';

	const name = ref('荔枝')
	const showPicker = ref(false)
	const columns = ref([]);
	const speciesId = ref('')
	const handleShow = () => {
		showPicker.value = true
	}
	const handleCancel = () => {
		showPicker.value = false
	}
	const handleConfirm = (e) => {
		name.value = e.value[0].name
		speciesId.value = e.value[0].speciesId
		handleCancel()
	}

	const toolLeftList = [{
			name: "相册",
			clickName: 'album'
		},
		{
			name: "日记",
			path: 'diary'
		},
		{
			name: "海报",
			className: 'blue',
			clickName: 'poster'
		},
		{
			name: "礼物",
			className: 'gift',
			path: 'gift'
		}
	]
	const toolRightList = [{
			name: "好友",
			className: 'friend',
			path: 'rank'
		},
		{
			name: "认养",
		},
		{
			name: "果园",
		},
		{
			name: "动态",
			className: 'dynamic',
			path: 'dynamic',
			params: 'farmBuyId'
		}
	]

	const showGuardSuccess = ref(false)

	const editNameRef = ref(null)
	const formatDate = (dateStr) => {
		return dateStr.split(" ")[0].replace(/-/g, ".");
	};
	const handleEditName = () => {
		editNameRef.value.showPopup({
			id: farmBuyId.value,
			treeName: treeName.value,
			nickname: treeData.value.buyList[0].nickname,
			showName: treeData.value.buyList[0].showName,
			createDate: formatDate(treeData.value.buyList[0].createDate),
		})
	}
	
	const userInfo = ref({})

	onLoad(() => {
		featchIsLookedGuide()
		featchCategoryList()
	})
	
	onShow(()=>{
		userInfo.value = uni.getStorageSync('userInfo')
		const isUpdateName = uni.getStorageSync('isUpdateName')
		if(isUpdateName === 'true'){
			featchLightTree()
			uni.setStorageSync('isUpdateName','false')
		}
		featchSessionStore()
		// 页面显示时启动弹幕
		startDanmaku()
	})
	
	onHide(() => {
		// 页面隐藏时停止弹幕
		stopDanmaku()
	})
	
	onUnload(() => {
		// 页面卸载时停止弹幕
		stopDanmaku()
	})
	
	//品类查询所有
	const featchCategoryList = () =>{
		TREE.categoryList().then(({
			data
		}) => {
			columns.value[0] = data || []
			speciesId.value = data[0].speciesId
			featchLightTree()
		})
	}

	const showMask = ref(false)
	const featchIsLookedGuide = () => {
		USER.isLookedGuide({
			type: 1
		}).then(({
			data
		}) => {
			if (data == false) {
				showMask.value = true
			}
		})
	}
	
	const handleClose = async () =>{
		const {code} = await USER.lookedGuide({type:1})
		if(code === 0){
			showMask.value = false
		}
	}

	const featchSessionStore = () => {
		USER.getSessionStore({
			key: 'successTree',
			miniUserId: userInfo.value.id
		}).then((({data}) => {
			if(data?.text === 'orderSuccess'){
				clockinType.value = 4
				showSuccess.value = !showSuccess.value
				treeSetSessionStore()
			}else{
				if (data?.val == 0) {
					showGuardSuccess.value = !showGuardSuccess.value
					treeSetSessionStore()
				}
			}
		}))
	}
	
	const treeSetSessionStore = () =>{
		USER.setSessionStore({
			key: 'successTree',
			miniUserId: userInfo.value.id,
			val:1,
			text:'1'
		})
	}
	
	const closedCheckPopup = () =>{
		showPoster.value = !showPoster.value
	}
	
	const sampleId = ref('')
	//通过品类查询当前树
	const featchLightTree = () =>{
		TREE.getLightTreeList().then((res =>{
			sampleId.value = res.data[0].sampleId
			getBySampleId()
		}))
	}

	const treeData = ref({})
	const farmBuyId = ref('')
	const treeName = ref('')
	const getBySampleId = () => {
		TREE.getBySampleId({
			sampleId: sampleId.value
		}).then(({
			data
		}) => {
			treeData.value = data || {}
			if (userInfo.value.tel) {
				treeName.value = data.buyList[0].treeName || (data.buyList[0].nickname.length ? data.buyList[0]
					.nickname.slice(0, 3) + "荔" : data.buyList[0].owner.slice(0, 3) + "荔")
			} else {
				treeName.value = '飞鸟守护'
			}
			farmBuyId.value = data.buyList[0].id
			featchSessionStore()
		})
	}
	
	const handlePage = () =>{
		uni.navigateTo({
			url: `/pages/login/index`
		});
	}

	const showPoster = ref(false)
	const showAlbum = ref(false)
	const handleToolItem = ({
		path,
		clickName,
		params
	}) => {
		if (clickName === 'album') {
			showAlbum.value = !showAlbum.value
		} else if (clickName === 'poster') {
			showPoster.value = !showPoster.value
		} else {
			uni.navigateTo({
				url: `/pages/tabBar/tree/subPages/${path}?farmBuyId=${farmBuyId.value}&sampleId=${sampleId.value}`
			});
		}
	}
	const footerList = ["每日阳光", "送ta祝福", "分享转发", "水果订购"]
	const showBlessingsPopup = ref(false)
	const showSuccess = ref(false)
	const clockinType = ref('1')
	
	// 弹幕相关数据
	const danmakuList = ref([
		{
			text: "晨曦微露，阳光洒满大地",
			avatar: `${userInfo.value.icon}`
		},
		{
			text: "守护果树，收获美好",
			avatar: `${userInfo.value.icon}`
		},
		{
			text: "今天也要给果树浇水哦",
			avatar: `${userInfo.value.icon}`
		},
		{
			text: "果树长得好快啊",
			avatar: `${config.BASIC_IMG}img/treePage/drone-icon.png`
		},
		{
			text: "期待果实成熟的那一天",
			avatar: `${config.BASIC_IMG}img/treePage/drone-icon.png`
		},
		{
			text: "和好友一起守护果树",
			avatar: `${config.BASIC_IMG}img/treePage/drone-icon.png`
		},
		{
			text: "每日签到，果树茁壮成长",
			avatar: `${config.BASIC_IMG}img/treePage/drone-icon.png`
		},
		{
			text: "分享给更多朋友",
			avatar: `${config.BASIC_IMG}img/treePage/drone-icon.png`
		}
	])
	
	// 弹幕组件引用
	const danmakuRef = ref(null)
	
	// 弹幕完成回调
	const onDanmakuComplete = (id) => {
		// console.log('弹幕播放完成:', id)
	}
	
	// 启动弹幕
	const startDanmaku = () => {
		if (danmakuRef.value) {
			danmakuRef.value.startDanmakuAnimation()
		}
	}
	
	// 停止弹幕
	const stopDanmaku = () => {
		if (danmakuRef.value) {
			danmakuRef.value.stopDanmakuAnimation()
		}
	}
	// 创建canvas工具类实例
	const canvasUtils = new CanvasUtils('posterCanvas')
	
	// 处理海报下载
	const handleDownloadPoster = async (data) => {
		
		// 检查数据完整性
		if (!data || !data.treeObj) {
			uni.showToast({
				title: '数据不完整，无法生成海报',
				icon: 'none'
			});
			return;
		}
		
		try {
			uni.showLoading({
				title: '正在生成海报...',
				mask: true
			});
			
			const success = await canvasUtils.generateAndSave(data);
			
			uni.hideLoading();

		} catch (error) {
			uni.hideLoading();
			console.error('海报处理出错:', error);
			uni.showToast({
				title: '海报生成失败: ' + error.message,
				icon: 'none'
			});
		}
	}



	const handleItem = (index) => {
		if (index === 0) {
			clockinType.value = 1
			if (treeData.value.buyList[0].level.clockinMap['1']) {
				uni.showToast({
					title: '今日已守护',
					icon: 'none',
					duration: 2000
				});
			} else {
				showSuccess.value = !showSuccess.value
			}
		} else if (index === 1) {
			clockinType.value = 3
			if (treeData.value.buyList[0].level.clockinMap['3']) {
				uni.showToast({
					title: '今日已送过祝福',
					icon: 'none',
					duration: 2000
				});
			} else {
				showBlessingsPopup.value = !showBlessingsPopup.value
			}
		} else if (index === 2) {
			clockinType.value = 2
			if (!treeData.value.buyList[0].level.clockinMap['2']) {
				showSuccess.value = !showSuccess.value
			}
		} else {
			uni.navigateTo({
				url: `/pages/tabBar/home/subPages/gardenItem`
			});
		}
	}

	function requestSubscribe() {
		// #ifdef MP-WEIXIN
		//订阅模板
		TREE.getSubscribeTemplate({
			id: 1
		}).then(({
			data
		}) => {
			uni.requestSubscribeMessage({
				tmplIds: [data.templateId], // 模板ID
				success(res) {
					if (res[data.templateId] === 'accept') {
						TREE.addSubscribe({
							templateId: 1
						})
					} else if (res[data.templateId] === 'reject') {
						console.log('用户拒绝订阅模板');
					}
				},
				fail(err) {
					uni.openSetting({
						withSubscriptions: true, // 显示订阅消息开关
					});
				},
			});
		})
		// #endif
	}

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

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";
	.guide-bg{
		position: fixed;
		top: 0;
		width: 100%;
		height: 107vh;
		@include ossBg("treePage/guide-bg.png");
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		.guide-icon{
			width: 360rpx;
			height: 236rpx
		}
	}
	/* #ifdef H5 */
	.guide-bg{
		height: 102vh;
	}
	/* #endif */

	.base-container {
		@include ossBg("tree-bg.png");
		// background-position: top left;
		padding: 22rpx 0;
		position: relative;
		
		.danmaku-wrapper {
			position: absolute;
			top: 21%;
			left: 0;
			right: 0;
			z-index: 100;
			pointer-events: none;
		}

		.toogle {
			position: absolute;
			right: 0;
			top: calc(50% - 32rpx);
			font-size: 24rpx;
			color: #fff;
			border-radius: 50rpx 0 0 50rpx;
			background: rgba(0, 0, 0, 0.2);
			padding: 12rpx 20rpx;
			display: flex;

			.icon {
				margin-left: 10rpx;
			}
		}

		.tree-cont {
			width: 100%;
			margin-top: 10rpx;
			.dialogue-tips{
				position: absolute;
				top: 31.5%;
				right: 80rpx;
				font-size: 24rpx;
				@include ossBg("treePage/tips-bg.png");
				padding: 10rpx 10rpx 30rpx 20rpx;
				.tips-name{
					font-size: 28rpx;
					font-weight: 500;
					margin-bottom: 6rpx;
					display: flex;
					align-items: center;
					.tip-img{
						width: 40rpx;
						height: 40rpx;
						margin-right: 4rpx;
					}
				}
			}

			.tree-name {
				position: absolute;
				top: 60.45%;
				left: calc(50% - 32rpx);
				z-index: 2;
				font-size: 22rpx;
				font-family: 'SweiSpringCJKtc';
				text-align: center;
				width: 88rpx;

				.edit-icon {
					width: 44rpx;
					height: 44rpx;
					margin-top: 14rpx;
				}
			}

			.drone-icon {
				width: 376rpx;
				height: 384rpx;
				margin-left: 26rpx;
			}

			.tool-wrap {
				width: 100%;
				padding: 14rpx;
				box-sizing: border-box;
				position: absolute;
				bottom: calc(50% - 350rpx);
				display: flex;
				justify-content: space-between;

				.tool-left,
				.tool-right {
					.tool-item {
						color: #fff;
						font-size: 24rpx;
						font-weight: 500;
						text-align: center;
						width: 100rpx;
						margin-bottom: 16rpx;
						text-shadow:
							0 0 3rpx #D7660A,
							0 0 3rpx #D7660A,
							0 0 3rpx #D7660A,
							0 0 3rpx #D7660A;

						&.blue {
							text-shadow:
								0 0 3rpx #2199F8,
								0 0 3rpx #2199F8,
								0 0 3rpx #2199F8,
								0 0 3rpx #2199F8;
						}

						.icon {
							width: 100%;
							height: 82rpx;
							position: relative;
						}

						.name {
							margin-top: -24rpx;
							position: relative;
							z-index: 2;
						}

						&.gift {
							.icon {
								height: 114rpx;
								margin-top: -5rpx;
							}

							.name {
								margin-top: -44rpx;
							}
						}

						&.friend {
							.icon {
								height: 90rpx;
							}

							.name {
								margin-top: -35rpx;
							}
						}

						&.dynamic {
							.icon {
								height: 96rpx;
							}

							.name {
								margin-top: -32rpx;
							}
						}
					}
				}
			}
		}

		.tree-footer {
			position: absolute;
			left: 0;
			bottom: 76rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			.button {
				padding: 26rpx 80rpx;
				border-radius: 50rpx;
				border: 2rpx solid #fff;
				background-image: linear-gradient(120deg, #FFD887, #ED9E1E);
				margin-top: 20rpx;
				color: #fff;
			}

			.footer-item {
				width: 18%;
				text-align: center;
				.icon {
					width: 96rpx;
					height: 96rpx;
				}
				.share-btn {
					background: transparent;
					display: inline-flex;
					.icon {
						width: 90rpx;
						height: 90rpx;
						margin-top: 6rpx;
					}
				
					&::after {
						border: none;
					}
				}
				
				.small{
					width: 90rpx;
					height: 90rpx;
					margin-top: 6rpx;
				}

				.name {
					font-size: 24rpx;
					font-weight: 500;
					padding: 2rpx 16rpx;
					background-image: linear-gradient(0deg, #FFFFFF, #FFE079);
					border-radius: 50rpx;
					border: 2rpx solid #fff;
				}
			}

			.footer-item+.footer-item {
				margin-left: 30rpx;
			}
		}
	}
</style>