feat：对接守护成功树的弹窗，修改祝福成功的样式逻辑

api/tree.js

@@ -58,4 +58,12 @@ export default {
 	rankingList(data) {
 		return http.get('mini/z_farm_buy/rankingList',data)
 	},
+	//通过品类查询当前树
+	getLightTree(data) {
+		return http.get('mini/z_farm_buy/getLightTree',data)
+	},
+	//根据样点ID查询日记列表
+	getSampleDiary(data) {
+		return http.get(`mini/z_sample_diary/listBySample/${data.sampleId}`,data)
+	},
 }

components/checkinPopup/checkinPopup.vue

@@ -1,45 +1,47 @@
 <template>
-	<up-popup class="check-popup" :show="showPopup" mode="center" @close="closeCheckPopup" bgColor="transparent" overlayOpacity="0.8">
-		<view class="title">
-			<image class="left-image image" :src="`${config.BASIC_IMG}img/treePage/two-star.png`" alt="" />
-			<text>恭喜你，登录成功</text>
-			<image class="right-image image" :src="`${config.BASIC_IMG}img/treePage/two-star.png`" alt="" />
-		</view>
-		<view class="check-wrap">
-			<!-- First row with 3 items -->
-			<view class="check-row">
-				<view v-for="(item, index) in firstRowItems" :key="index"
-					:class="['check-day', { active: runningDays == index + 1 },{gary:runningDays > index + 1}]">
-					<view class="leaf-wrap">
-						<image class="leaf"
-							:src="`${config.BASIC_IMG}img/treePage/${runningDays == index + 1 ? 'white-leaf' : runningDays > index + 1 ?'gary-leaf':'leaf-icon'}.png`"
-							alt="leaf icon" />
-						<text>x{{ item.energy }}</text>
-					</view>
-					<view v-if="runningDays > index + 1"><text>已领取</text></view>
-					<view v-else><text v-if="runningDays == index + 1">累计</text>{{ item.days }}天</view>
-				</view>
-			</view>
-
-			<!-- Second row with 4 items -->
-			<view class="check-row">
-				<view v-for="(item, index) in secondRowItems" :key="index"
-					:class="['check-day', { active: runningDays == index + 4 },{gary:runningDays > index + 4}]">
-					<view class="leaf-wrap">
-						<image class="leaf"
-							:src="`${config.BASIC_IMG}img/treePage/${runningDays == index + 4 ? 'white-leaf' : runningDays > index + 4 ?'gary-leaf':'leaf-icon'}.png`"
-							alt="leaf icon" />
-						<text>x{{ item.energy }}</text>
-					</view>
-					<view v-if="runningDays > index + 4"><text>已领取</text></view>
-					<view v-else><text v-if="runningDays == index + 4">累计</text>{{ item.days }}天</view>
-				</view>
-			</view>
-		</view>
-		<view class="button" @click="showPopup = false">开心收下</view>
-		<view class="close">
-			<up-icon name="close-circle-fill" size="30" @click="showPopup = false"
-				color="rgba(255, 255, 255, 0.7)"></up-icon>
+	<up-popup :show="showPopup" mode="center" @close="closeCheckPopup" bgColor="transparent" overlayOpacity="0.8">
+		<view class="check-popup">
+			<view class="title">
+				<image class="left-image image" :src="`${config.BASIC_IMG}img/treePage/two-star.png`" alt="" />
+				<text>恭喜你，登录成功</text>
+				<image class="right-image image" :src="`${config.BASIC_IMG}img/treePage/two-star.png`" alt="" />
+			</view>
+			<view class="check-wrap">
+				<!-- First row with 3 items -->
+				<view class="check-row">
+					<view v-for="(item, index) in firstRowItems" :key="index"
+						:class="['check-day', { active: runningDays == index + 1 },{gary:runningDays > index + 1}]">
+						<view class="leaf-wrap">
+							<image class="leaf"
+								:src="`${config.BASIC_IMG}img/treePage/${runningDays == index + 1 ? 'white-leaf' : runningDays > index + 1 ?'gary-leaf':'leaf-icon'}.png`"
+								alt="leaf icon" />
+							<text>x{{ item.energy }}</text>
+						</view>
+						<view v-if="runningDays > index + 1"><text>已领取</text></view>
+						<view v-else><text v-if="runningDays == index + 1">累计</text>{{ item.days }}天</view>
+					</view>
+				</view>
+			
+				<!-- Second row with 4 items -->
+				<view class="check-row">
+					<view v-for="(item, index) in secondRowItems" :key="index"
+						:class="['check-day', { active: runningDays == index + 4 },{gary:runningDays > index + 4}]">
+						<view class="leaf-wrap">
+							<image class="leaf"
+								:src="`${config.BASIC_IMG}img/treePage/${runningDays == index + 4 ? 'white-leaf' : runningDays > index + 4 ?'gary-leaf':'leaf-icon'}.png`"
+								alt="leaf icon" />
+							<text>x{{ item.energy }}</text>
+						</view>
+						<view v-if="runningDays > index + 4"><text>已领取</text></view>
+						<view v-else><text v-if="runningDays == index + 4">累计</text>{{ item.days }}天</view>
+					</view>
+				</view>
+			</view>
+			<view class="button" @click="showPopup = false">开心收下</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>
 		</view>
 	</up-popup>
 </template>
@@ -92,7 +94,6 @@
 
 	.check-popup {
 		width: 100%;
-		background: transparent;
 		text-align: center;
 
 		.title {
@@ -114,11 +115,11 @@
 
 			.left-image {
 				top: 0;
-				left: -14rpx;
+				left: 84rpx;
 			}
 
 			.right-image {
-				right: -16rpx;
+				right: 84rpx;
 				bottom: 0;
 			}
 
@@ -128,7 +129,7 @@
 				width: 600rpx;
 				height: 104rpx;
 				bottom: -44rpx;
-				left: -16rpx;
+				left: 84rpx;
 				@include ossBg("treePage/check-title-bg.png");
 			}
 		}

components/editNamePopup/editNamePopup.vue

@@ -18,6 +18,7 @@
 						    border="none"
 						    v-model="editForm.treeName"
 							maxlength="4"
+							color="#2199F8"
 						  ></up-input>
                     </view>
                     <view class="form-item">

components/guardSuccessPopup/guardSuccessPopup.vue

@@ -6,12 +6,8 @@
 				<image class="right-star" :src="`${config.BASIC_IMG}img/treePage/star.png`" alt="" />
 				<image class="left-star" :src="`${config.BASIC_IMG}img/treePage/star.png`" alt="" />
 				<view class="card">
-					<image class="img"
-						src="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">
-					</image>
-					<!-- <image class="img" v-lazyload="getImageUrl(treeObj.treeImages[0].filename)" alt="" /> -->
-					<!-- <view class="code">{{treeObj.buyList[0].code}}</view> -->
-					<view class="code">LCJGHN-GZCH-LBY1003</view>
+					<image class="img" mode="aspectFill" :src="getImageUrl(treeObj.filename)" alt="" />
+					<view class="code">{{treeObj.code}}</view>
 				</view>
 			</view>
 			<view class="button" @click="handleClose">我知道了</view>
@@ -32,7 +28,7 @@
 			type: Boolean,
 			defalut: false,
 		},
-		treeObj: {
+		treeData: {
 			type: Object,
 			defalut: () => {},
 		},
@@ -57,16 +53,23 @@
 		showPopup.value = false;
 	};
 
+	const treeObj = ref({})
+
 	watch(
 		() => props.show,
 		() => {
 			showPopup.value = true;
+			treeObj.value = {
+				...props.treeData.treeImages[0],
+				code: props.treeData.buyList[0].code
+			}
 		}
 	);
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>
 	@import "@/static/style/mixin.scss";
+
 	.success-popup {
 		width: 90vw;
 		color: #fff;
@@ -77,11 +80,11 @@
 
 		.success-title {
 			font-size: 56rpx;
-			text-align: center;
+			text-align: center;
 			@include ossBg("treePage/ribbon.png");
 			margin-bottom: 42rpx;
 			font-family: "PangMenZhengDao";
-			padding: 14rpx 46rpx 0;
+			padding: 14rpx 46rpx 0;
 			line-height: 130rpx;
 		}
 
@@ -120,7 +123,6 @@
 					border-radius: 32rpx;
 					width: 100%;
 					height: 646rpx;
-					object-fit: cover;
 				}
 
 				.code {

components/posterPopup/posterPopup.vue

@@ -96,9 +96,6 @@
 	watch(
 		() => props.showPoster,
 		(newValue) => {
-			// if (newValue && userInfo?.tel && props.showPoster) {
-			// 	getPosterData(props.farmBuyId);
-			// }
 			getPosterData(props.farmBuyId)
 		}
 	);

pages/tabBar/tree/components/blessingsPopup.vue

@@ -29,20 +29,20 @@
 		</view>
 	</up-popup>
 	<!-- 祝福成功弹窗 -->
-	<up-popup :show="sucessPopup" mode="center" @close="handleCancelSucess" bgColor="transparent">
+	<up-popup :show="sucessPopup" mode="center" @close="handleCancelSucess" bgColor="transparent" overlayOpacity="0.8">
 		<view class="sucess-popup" @click="handleCancelSucess">
-			<template v-if="isFriend">
-				<view class="sucess-bg">
-					<image class="img" :src="`${config.BASIC_IMG}img/subTreePage/blessing-sucess.png`"></image>
+			<view class="sucess-bg">
+				<image v-if="isFriend" class="img" :src="`${config.BASIC_IMG}img/subTreePage/blessing-sucess.png`">
+				</image>
+				<image v-else class="img"
+					:src="`${config.BASIC_IMG}img/subTreePage/blessing-sucess-${clockinType}.png`"></image>
+			</view>
+			<view class="button-group">
+				<view class="btn">开心收下</view>
+				<view class="close">
+					<up-icon name="close-circle-fill" size="30" color="rgba(255, 255, 255, 0.7)"></up-icon>
 				</view>
-				<view class="button-group">
-					<view class="btn">开心收下</view>
-					<up-icon class="close" name="close-circle-fill" size="30" color="rgba(255, 255, 255, 0.7)"></up-icon>
-				</view>
-			</template>
-			<view v-else  class="sucess-bg">
-				<image class="image" :src="`https://birdseye-img.sysuimars.com/dinggou-mini/sucess-icon-${clockinType}.png`"></image>
-			</view>
+			</view>
 		</view>
 	</up-popup>
 </template>
@@ -53,29 +53,29 @@
 		onMounted,
 		ref,
 		watch
-	} from "vue";
+	} from "vue";
 	import TREE from '@/api/tree.js'
 
 	const props = defineProps({
 		show: {
 			type: Boolean,
 			defalut: false,
-		},
-		showSuccess: {
-			type: Boolean,
-			defalut: false,
+		},
+		showSuccess: {
+			type: Boolean,
+			defalut: false,
 		},
 		farmBuyId: {
 			type: [Number, String],
 			defalut: '',
-		},
-		isFriend: {
-			type: Boolean,
-			defalut: false,
-		},
-		clockinType: {
-			type: [Number, String],
-			defalut: "1",
+		},
+		isFriend: {
+			type: Boolean,
+			defalut: false,
+		},
+		clockinType: {
+			type: [Number, String],
+			defalut: "1",
 		},
 	});
 
@@ -92,7 +92,7 @@
 	};
 
 	const handleCancelSucess = () => {
-		sucessPopup.value = false;
+		sucessPopup.value = false;
 	};
 
 	const getRandomPick = () => {
@@ -114,18 +114,18 @@
 	};
 
 	const sucessPopup = ref(false);
-	
+
 	const emit = defineEmits(['clockinCallback'])
 	const handleSend = () => {
 		const params = {
 			farmBuyId: props.farmBuyId,
 			clockinType: props.clockinType,
 			msg: message.value,
-		};
-		TREE.clockin(params).then((res) => {
+		};
+		TREE.clockin(params).then((res) => {
 			if (res.code === 0) {
 				handleCancel();
-				sucessPopup.value = true;
+				sucessPopup.value = true;
 				emit('clockinCallback')
 			}
 		});
@@ -140,13 +140,13 @@
 		() => {
 			showPopup.value = true;
 		}
-	);
-	
-	watch(
-		() => props.showSuccess,
-		() => {
-			handleSend()
-		}
+	);
+
+	watch(
+		() => props.showSuccess,
+		() => {
+			handleSend()
+		}
 	);
 </script>
 
@@ -260,25 +260,25 @@
 	}
 
 	.sucess-popup {
-		width: 100vw;
-		height: 100vh;
-		background: rgba(0, 0, 0, 0.6);
-		.image{
-			width: 570rpx;
-			height: 480rpx;
-	    }
+		width: 100vw;
+		min-height: 100vh;
+
+		.image {
+			width: 570rpx;
+			height: 480rpx;
+		}
 
 		.sucess-bg {
 			width: 100%;
-			height: 920rpx;
+			height: 830rpx;
 			@include ossBg("subTreePage/light-effect-bg.png");
 			display: flex;
 			align-items: flex-end;
 			justify-content: center;
 
 			.img {
-				width: 82%;
-				height: 410rpx;
+				width: 81%;
+				height: 410rpx;
 			}
 		}
 
@@ -298,6 +298,7 @@
 
 			.close {
 				margin-top: 80rpx;
+				display: flex;
 				justify-content: center;
 			}
 		}

pages/tabBar/tree/components/memberLevel.vue

@@ -112,7 +112,7 @@
 
 				.level-wrap {
 					line-height: 32rpx;
-					width: 54%;
+					width: 55%;
 					margin-left: 20rpx;
 
 					.name {
@@ -128,7 +128,7 @@
 						justify-content: space-between;
 
 						.progress-value {
-							width: calc(100% - 120rpx);
+							width: calc(100% - 140rpx);
 							height: 16rpx;
 							background: #E7E7E7;
 							border-radius: 40rpx;

pages/tabBar/tree/components/treeAlbumPopup.vue

@@ -60,7 +60,7 @@
             type: [String, Number],
             default: ''
         },
-        treeId: {
+        sampleId: {
             type: [String, Number],
             default: 110939
         }
@@ -152,7 +152,8 @@
             const params = {
                 page: 1,
                 limit: 1,
-                treeId: Number(props.treeId) || 110939,
+                // treeId: Number(props.sampleId),
+                treeId: 110939,
                 date: dateStr,
             }
             const {data} = await TREE.treeImageList(params)

pages/tabBar/tree/subPages/rank.vue

@@ -3,10 +3,16 @@
 		<view class="gradient-reflection" data-text="好友排行榜">好友排行榜</view>
 		<view class="rank-card">
 			<view class="tabs">
-				<view :class="['tab-item',{active:active === item.speciesId}]" v-for="(item,index) in tabsList" :key="index"
-					@click="handleTab(item)">{{item.name}}</view>
+				<view :class="['tab-item',{active:active === item.speciesId}]" v-for="(item,index) in tabsList"
+					:key="index" @click="handleTab(item)">{{item.name}}</view>
 			</view>
-			<view class="rank-list">
+			<scroll-view 
+				class="rank-list" 
+				v-if="rankList.length"
+				scroll-y="true"
+				@scrolltolower="loadMore"
+				:style="{height: 'calc(100vh - 500rpx)'}"
+			>
 				<view :class="['rank-item',{bg:(index + 1) <=3}]" v-for="(item,index) in rankList" :key="index">
 					<view class="rank-info">
 						<text :class="['num',`num-${(index + 1)}`]">{{item.ranking}}</text>
@@ -14,16 +20,25 @@
 							shape="circle"></up-image>
 						<view class="info">
 							<view class="name">
-								<text>{{item.treeName}}</text>
+								<text>{{item.treeName || item.nickname.slice(0, 3) + "荔"}}</text>
 								<view :class="['level',{levelBlue:item.level.id >3}]">
 									V{{item.level.id}}.{{item.level.name}}</view>
 							</view>
 							<text class="nickname ellipsis-l1">昵称:{{item.nickname}}</text>
 						</view>
 					</view>
-					<view class="button">去看看</view>
+					<view class="button" @click="handlePage">去看看</view>
 				</view>
-			</view>
+				<!-- 加载更多提示 -->
+				<view class="loading-more" v-if="loading">
+					<text>下拉加载数据</text>
+				</view>
+				<view class="no-more" v-if="!hasMore && rankList.length > 0">
+					<text>没有更多数据了</text>
+				</view>
+			</scroll-view>
+			<up-empty v-else mode="data" marginTop="50">
+			</up-empty>
 		</view>
 	</view>
 </template>
@@ -40,12 +55,22 @@
 	onLoad(() => {
 		getCategoryList()
 		getRankingList()
-	})
-
+	})
+	
+	const handlePage = () =>{
+		uni.navigateTo({
+			url: `/pages/tabBar/tree/subPages/friendTree?`
+		});
+	}
+	
 	const active = ref(null)
 	const tabsList = ref([])
 	const handleTab = (item) => {
 		active.value = item.speciesId
+		// 切换tab时重置分页
+		currentPage.value = 1
+		rankList.value = []
+		hasMore.value = true
 		getRankingList()
 	}
 
@@ -60,16 +85,41 @@
 	}
 
 	const rankList = ref([])
+	const currentPage = ref(1)
+	const loading = ref(false)
+	const hasMore = ref(true)
+	
 	const getRankingList = () => {
+		if (loading.value || !hasMore.value) return
+		
+		loading.value = true
 		const params = {
 			speciesId: active.value,
-			page: 1,
-			limit: 20
+			page: currentPage.value,
+			limit: 10
 		}
 		TREE.rankingList(params).then(res => {
-			rankList.value = res.data || []
+			const newData = res.data || []
+			if (currentPage.value === 1) {
+				rankList.value = newData
+			} else {
+				rankList.value = [...rankList.value, ...newData]
+			}
+			
+			// 判断是否还有更多数据
+			hasMore.value = newData.length === 10
+			loading.value = false
+		}).catch(() => {
+			loading.value = false
 		})
 	}
+	
+	const loadMore = () => {
+		if (hasMore.value && !loading.value) {
+			currentPage.value++
+			getRankingList()
+		}
+	}
 </script>
 
 <style lang="scss" scoped>
@@ -215,6 +265,13 @@
 						background: #fff;
 					}
 				}
+				
+				.loading-more, .no-more {
+					text-align: center;
+					padding: 20rpx 0;
+					color: rgba(0, 0, 0, 0.5);
+					font-size: 24rpx;
+				}
 			}
 		}
 	}

pages/tabBar/tree/tree.vue

@@ -58,9 +58,9 @@
 	<!-- 海报弹窗 -->
 	<posterPopup :showPoster="showPoster" :farmBuyId="farmBuyId" :treeName="treeName"></posterPopup>
 	<!-- 果树成功弹窗 -->
-	<guardSuccessPopup :show="showGuardSuccess"></guardSuccessPopup>
+	<guardSuccessPopup :show="showGuardSuccess" :treeData="treeData"></guardSuccessPopup>
 	<!-- 果树相册弹窗 -->
-	<tree-album-popup :show="showAlbum" :farmBuyId="farmBuyId"></tree-album-popup>
+	<tree-album-popup :show="showAlbum" :farmBuyId="farmBuyId" :sampleId="sampleId"></tree-album-popup>
 	<!-- 等级升级成功弹窗 -->
 	<levelSuccessPopup></levelSuccessPopup>
 	<!-- 祝福弹窗 -->
@@ -154,10 +154,10 @@
 		})
 	}
 
-	onLoad(() => {
+	onLoad(() => {
 		featchSessionStore()
 		featchIsLookedGuide()
-		getBySampleId()
+		featchLightTree()
 	})
 
 	const showMask = ref(false)
@@ -193,15 +193,24 @@
 				})
 			}
 		}))
+	}
+	
+	const sampleId = ref('')
+	//通过品类查询当前树
+	const featchLightTree = () =>{
+		TREE.getLightTree({farmId:766}).then((res =>{
+			sampleId.value = res.data.id
+			getBySampleId()
+		}))
 	}
 
-	const treeData = ref({})
+	const treeData = ref({})
 	const farmBuyId = ref('')
 	const treeName = ref('')
 	const userInfo = uni.getStorageSync('userInfo')
 	const getBySampleId = () => {
 		TREE.getBySampleId({
-			sampleId: 172055
+			sampleId: sampleId.value
 		}).then(({
 			data
 		}) => {
@@ -212,7 +221,7 @@
 			} else {
 				treeName.value = '飞鸟守护'
 			}
-			farmBuyId.value = data.buyList[0].id
+			farmBuyId.value = data.buyList[0].id
 		})
 	}
 
@@ -239,7 +248,7 @@
 	const clockinType = ref('1')
 	const handleItem = (index) => {
 		if (index === 0) {
-			clockinType.value = 1
+			clockinType.value = 1
 			if (treeData.value.buyList[0].level.clockinMap['1']) {
 				uni.showToast({
 					title: '今日已守护',
@@ -365,7 +374,8 @@
 			.tree-name {
 				position: absolute;
 				top: 60.45%;
-				left: calc(50% - 32rpx);
+				left: calc(50% - 32rpx);
+				z-index: 2;
 				font-size: 22rpx;
 				font-family: 'SweiSpringCJKtc';
 				text-align: center;