feat：对接好友排行榜接口

api/index.js

@@ -14,6 +14,6 @@ export default {
   },
   
   getCode() {
-	  return http.post(config.BASE_URL_MINI + "cfg/get")
+	return http.post(config.BASE_URL_MINI + "cfg/get")
   },
 }

api/tree.js

@@ -50,4 +50,12 @@ export default {
 	treeImageList(data) {
 		return http.post('mini/lz_tree_image/treeImageList', data)
 	},
+	//品类查询所有
+	categoryList() {
+		return http.get('mini/bur_category/list')
+	},
+	//排行榜分页查询
+	rankingList(data) {
+		return http.get('mini/z_farm_buy/rankingList',data)
+	},
 }

api/user.js

@@ -18,5 +18,21 @@ export default {
 	// 获取手机号
 	getPhone(data) {
 		return http.get('mini/mini_min_app_user/getPhone', data)
+	},
+	//存储查询
+	getSessionStore(data) {
+		return http.post(`mini/mini_session_store/get/${data.key}`, data)
+	},
+	//存储修改
+	setSessionStore(data) {
+		return http.post(`mini/mini_session_store/save`, data)
+	},
+	//是否看过引导编辑树
+	isLookedGuide(data) {
+		return http.get(`mini/z_farm_buy/isLookedGuide`, data)
+	},
+	//是否看过引导编辑树
+	lookedGuide(data) {
+		return http.get(`mini/z_farm_buy/lookedGuide`, data)
 	},
 }

components/checkinPopup/checkinPopup.vue

@@ -1,9 +1,9 @@
 <template>
 	<up-popup class="check-popup" :show="showPopup" mode="center" @close="closeCheckPopup" bgColor="transparent" overlayOpacity="0.8">
 		<view class="title">
-			<image class="left-image" :src="`${config.BASIC_IMG}img/treePage/two-star.png`" alt="" />
+			<image class="left-image image" :src="`${config.BASIC_IMG}img/treePage/two-star.png`" alt="" />
 			<text>恭喜你，登录成功</text>
-			<image class="right-image" :src="`${config.BASIC_IMG}img/treePage/two-star.png`" alt="" />
+			<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 -->
@@ -106,7 +106,7 @@
 			color: transparent;
 			position: relative;
 
-			image {
+			.image {
 				width: 48rpx;
 				height: 48rpx;
 				position: absolute;

components/levelSuccessPopup/levelSuccessPopup.vue

@@ -14,7 +14,7 @@
 						<text>曲奇饼干兑换券一份</text>
 					</view>
 					<view class="tips">
-						已发放到 <text>个人中心-优惠券</text>
+						已发放到 <text class="text">个人中心-优惠券</text>
 					</view>
 				</view>
 				<view class="button-group">
@@ -118,7 +118,7 @@
 			.tips{
 				font-size: 24rpx;
 				color: #999999;
-				text{
+				.text{
 					color: #EE8F00;
 				}
 			}

components/posterPopup/posterPopup.vue

@@ -5,11 +5,11 @@
 				<view class="time">
 					<text class="month">{{ treeObj.year }}</text>
 					<view class="date">
-						<text>{{ treeObj.monthNumber }}</text>/{{ treeObj.day }}
+						<text class="month">{{ treeObj.monthNumber }}</text>/{{ treeObj.day }}
 					</view>
 				</view>
 				<view class="qr-code">
-					<image :src="treeObj.qrCodeUrl" alt="" />
+					<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>
@@ -37,14 +37,14 @@
 					<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>
+					<image class="logo" :src="`${config.BASIC_IMG}img/treePage/logo.png`" alt="" />
+					<view class="text">飞鸟有味</view>
 				</view>
 			</view>
 		</view>
 		<view class="footer">
-			<view @click="handleDownload">保存图片</view>
-			<view class="share" @click="handleShare">去分享</view>
+			<view class="btn" @click="handleDownload">保存图片</view>
+			<view class="share btn" @click="handleShare">去分享</view>
 		</view>
 		<view class="close">
 			<up-icon name="close-circle-fill" size="30" @click="showPopup = false"
@@ -168,18 +168,15 @@
 			display: flex;
 			justify-content: space-between;
 
-			view {
-				font-family: "SweiSpringCJKtc";
-			}
-
 			.time {
 				line-height: 100rpx;
-				margin-top: -42rpx;
+				margin-top: -42rpx;
+				font-family: "SweiSpringCJKtc";
 
 				.date {
 					font-size: 48rpx;
 
-					text {
+					.month {
 						font-size: 172rpx;
 					}
 				}
@@ -188,7 +185,7 @@
 			.qr-code {
 				text-align: right;
 
-				image {
+				.image {
 					width: 112rpx;
 					height: 124rpx;
 				}
@@ -208,7 +205,7 @@
 			margin: 30rpx 0 44rpx 0;
 			pointer-events: none;
 
-			image {
+			.image {
 				width: 100%;
 				height: 100%;
 				object-fit: cover;
@@ -270,33 +267,23 @@
 			justify-content: space-between;
 
 			.text {
-				font-size: 22rpx;
+				font-size: 22rpx;
+				font-family: "SweiSpringCJKtc";
+				line-height: 32rpx;
 
-				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;
+				text-align: center;
 
-				image {
+				.logo {
 					width: 68rpx;
 					height: 72rpx;
 					margin-bottom: 8rpx;
-				}
-
-				view {
-					font-family: "SweiSpringCJKtc-Black";
+				}
+				.text{
+					font-family: "SweiSpringCJKtc";
 				}
 			}
 		}
@@ -308,7 +295,7 @@
 		width: 100%;
 		box-sizing: border-box;
 
-		view {
+		.btn {
 			flex: 1;
 			padding: 20rpx 0;
 			font-size: 32rpx;

pages/tabBar/tree/components/blessingsPopup.vue

@@ -10,7 +10,7 @@
 					</view>
 					<view class="button" @click="getRandomPick">
 						<icon name="exchange" />
-						<text>换一换</text>
+						<text class="text">换一换</text>
 					</view>
 				</view>
 				<view class="blessings-list">
@@ -23,8 +23,8 @@
 					autoHeight></up-textarea>
 			</view>
 			<view class="blessings-footer">
-				<view @click="handleCancel">取消</view>
-				<view class="send" @click="handleSend">发送</view>
+				<view class="btn" @click="handleCancel">取消</view>
+				<view class="send btn" @click="handleSend">发送</view>
 			</view>
 		</view>
 	</up-popup>
@@ -209,7 +209,7 @@
 					align-items: center;
 					justify-content: center;
 
-					text {
+					.text {
 						margin-left: 10rpx;
 					}
 				}
@@ -240,7 +240,7 @@
 		.blessings-footer {
 			display: flex;
 
-			view {
+			.btn {
 				text-align: center;
 				flex: 1;
 				color: #666666;

pages/tabBar/tree/subPages/rank.vue

@@ -1,57 +1,94 @@
 <template>
 	<view class="sub-base-container">
-		<view class="gradient-reflection" data-text="好友排行榜">好友排行榜</view>
-		<view class="rank-card">
-			<view class="tabs">
-				<view :class="['tab-item',{active:active === index}]" v-for="(item,index) in tabsList" :key="index" @click="handleTab(index)">{{item}}</view>
-			</view>
-			<view class="rank-list">
-				<view :class="['rank-item',{bg:(index + 1) <=3}]" v-for="(item,index) in 7" :key="index">
-					<view class="rank-info">
-						<text :class="['num',`num-${(index + 1)}`]">{{item}}</text>
-						<up-image class="avatar" :fade="false"
-							src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" width="92rpx"
-							height="92rpx" shape="circle"></up-image>
-						<view class="info">
-							<view class="name">
-								<text>茜茜荔</text>
-								<view :class="['level',{levelBlue:(index + 1) <=3}]">V4.星勋</view>
-							</view>
-							<text class="nickname">昵称:听妈妈的话</text>
-						</view>
-					</view>
-					<view class="button">去看看</view>
-				</view>
-			</view>
+		<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>
+			<view class="rank-list">
+				<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>
+						<up-image class="avatar" :fade="false" :src="item.icon" width="92rpx" height="92rpx"
+							shape="circle"></up-image>
+						<view class="info">
+							<view class="name">
+								<text>{{item.treeName}}</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>
+			</view>
 		</view>
 	</view>
 </template>
 
-<script setup>
-	import {ref} from "vue"
-	
-	const active = ref(0)
-	const tabsList = ["总榜","桃子","葡萄","香蕉","荔枝"]
-	const handleTab = (index) =>{
-		active.value = index
+<script setup>
+	import {
+		ref
+	} from "vue"
+	import TREE from '@/api/tree.js'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+
+	onLoad(() => {
+		getCategoryList()
+		getRankingList()
+	})
+
+	const active = ref(null)
+	const tabsList = ref([])
+	const handleTab = (item) => {
+		active.value = item.speciesId
+		getRankingList()
+	}
+
+	const getCategoryList = () => {
+		TREE.categoryList().then(res => {
+			tabsList.value = res.data || []
+			tabsList.value.unshift({
+				name: '总榜',
+				speciesId: null
+			})
+		})
+	}
+
+	const rankList = ref([])
+	const getRankingList = () => {
+		const params = {
+			speciesId: active.value,
+			page: 1,
+			limit: 20
+		}
+		TREE.rankingList(params).then(res => {
+			rankList.value = res.data || []
+		})
 	}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped>
 	@import "@/static/style/mixin.scss";
-	.sub-base-container {
-		@include ossBg("subTreePage/rank-bg.png");
+
+	.sub-base-container {
+		@include ossBg("subTreePage/rank-bg.png");
+
 		.gradient-reflection {
 			width: 100%;
 			position: relative;
 			font-size: 86rpx;
 			color: #fff;
-			font-family: "PangMenZhengDao";
+			font-family: "PangMenZhengDao";
 			text-align: center;
 		}
 
 		.gradient-reflection::after {
-			content: attr(data-text);
+			content: attr(data-text);
 			position: absolute;
 			top: 75%;
 			left: calc(50% - 430rpx / 2);
@@ -61,107 +98,124 @@
 			background-clip: text;
 			color: transparent;
 			opacity: 0.5;
-		}
-		
-		.rank-card{
-			margin-top: 90rpx;
-			background: rgba(255, 255, 255, 0.74);
-			border-radius: 20rpx 20rpx 0 0;
-			padding: 20rpx;
-			.tabs{
-				display: flex;
-				.tab-item{
-					flex: 1;
-					text-align: center;
-					color: rgba(0, 0, 0, 0.5);
-					font-size: 28rpx;
-					padding: 10rpx 0;
-					&.active{
-						border-radius: 50rpx;
-						color: #000;
-						background: #fff;
-					}
-				}
-			}
-			.rank-list{
-				.rank-item{
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					padding: 14rpx 20rpx;
-					border-radius: 10rpx;
-					margin-top: 20rpx;
-					&.bg{
-						background-image: linear-gradient(90deg,rgba(255,255,255,0.6),transparent);
-					}
-					.rank-info{
-						display: flex;
-						align-items: center;
-						font-size: 24rpx;
-						.num{
-							margin-right: 28rpx;
-							color: #724E02;
-							font-family: 'SweiSpringCJKtc';
-							&-1{
-								background: linear-gradient(to bottom, #724E02 0%, #F3C11D 100%);
-								-webkit-background-clip: text;
-								background-clip: text;
-								color: transparent;
-								font-size: 52rpx;
-								font-family: 'SMILEYSANS';
-							}
-							&-2{
-								background: linear-gradient(to bottom, #898989 0%, #fff 100%);
-								-webkit-background-clip: text;
-								background-clip: text;
-								color: transparent;
-								font-size: 52rpx;
-								font-family: 'SMILEYSANS';
-							}
-							&-3{
-								background: linear-gradient(to bottom, #F2BF16 0%, #FF8400 100%);
-								-webkit-background-clip: text;
-								background-clip: text;
-								color: transparent;
-								font-size: 52rpx;
-								font-family: 'SMILEYSANS';
-							}
-						}
-						.info{
-							margin-left: 10rpx;
-							.name{
-								font-size: 28rpx;
-								font-weight: 500;
-								display: flex;
-								align-items: center;
-								margin-bottom: 4rpx;
-							}
-							.level{
-								background: rgba(81, 81, 81, 0.1);
-								color: #444444;
-								border-radius: 4rpx;
-								font-size: 24rpx;
-								padding: 4rpx 10rpx;
-								margin-left: 20rpx;
-								&.levelBlue{
-									background: #fff;
-									color: #2199F8;
-								}
-							}
-							.nickname{
-								color: rgba(0, 0, 0, 0.5);
-							}
-						}
-					}
-					.button{
-						font-size: 24rpx;
-						padding: 10rpx 20rpx;
-						border-radius: 50rpx;
-						border: 2rpx solid rgba(0, 0, 0, 0.3);
-						background: #fff;
-					}
-				}
-			}
+		}
+
+		.rank-card {
+			margin-top: 90rpx;
+			background: rgba(255, 255, 255, 0.74);
+			border-radius: 20rpx 20rpx 0 0;
+			padding: 20rpx;
+
+			.tabs {
+				display: flex;
+
+				.tab-item {
+					flex: 1;
+					text-align: center;
+					color: rgba(0, 0, 0, 0.5);
+					font-size: 28rpx;
+					padding: 10rpx 0;
+
+					&.active {
+						border-radius: 50rpx;
+						color: #000;
+						background: #fff;
+					}
+				}
+			}
+
+			.rank-list {
+				.rank-item {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 14rpx 20rpx;
+					border-radius: 10rpx;
+					margin-top: 20rpx;
+
+					&.bg {
+						background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6), transparent);
+					}
+
+					.rank-info {
+						display: flex;
+						align-items: center;
+						font-size: 24rpx;
+
+						.num {
+							margin-right: 28rpx;
+							color: #724E02;
+							font-family: 'SweiSpringCJKtc';
+
+							&-1 {
+								background: linear-gradient(to bottom, #724E02 0%, #F3C11D 100%);
+								-webkit-background-clip: text;
+								background-clip: text;
+								color: transparent;
+								font-size: 52rpx;
+								font-family: 'SMILEYSANS';
+							}
+
+							&-2 {
+								background: linear-gradient(to bottom, #898989 0%, #fff 100%);
+								-webkit-background-clip: text;
+								background-clip: text;
+								color: transparent;
+								font-size: 52rpx;
+								font-family: 'SMILEYSANS';
+							}
+
+							&-3 {
+								background: linear-gradient(to bottom, #F2BF16 0%, #FF8400 100%);
+								-webkit-background-clip: text;
+								background-clip: text;
+								color: transparent;
+								font-size: 52rpx;
+								font-family: 'SMILEYSANS';
+							}
+						}
+
+						.info {
+							margin-left: 10rpx;
+
+							.name {
+								font-size: 28rpx;
+								font-weight: 500;
+								display: flex;
+								align-items: center;
+								margin-bottom: 4rpx;
+							}
+
+							.level {
+								background: rgba(81, 81, 81, 0.1);
+								color: #444444;
+								border-radius: 4rpx;
+								font-size: 24rpx;
+								padding: 4rpx 10rpx;
+								margin-left: 20rpx;
+
+								&.levelBlue {
+									background: #fff;
+									color: #2199F8;
+								}
+							}
+
+							.nickname {
+								max-width: 320rpx;
+								color: rgba(0, 0, 0, 0.5);
+							}
+						}
+					}
+
+					.button {
+						font-size: 24rpx;
+						padding: 10rpx 20rpx;
+						border-radius: 50rpx;
+						border: 2rpx solid rgba(0, 0, 0, 0.3);
+						background: #fff;
+					}
+				}
+			}
 		}
 	}
 </style>

pages/tabBar/tree/tree.vue

@@ -1,6 +1,5 @@
 <template>
-	<view>
-		<view class="base-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>
@@ -8,21 +7,24 @@
 		<view class="tree-cont">
 			<view class="tree-name">
 				<view>{{treeName}}</view>
-				<image @click="handleEditName" class="edit-icon" :src="`${config.BASIC_IMG}img/edit-icon.png`"></image>
+				<image @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>
+						<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>
+						<image class="icon" :src="`${config.BASIC_IMG}img/treePage/r-tree-icon-${index+1}.png`">
+						</image>
 						<view class="name">{{item.name}}</view>
 					</view>
 				</view>
@@ -32,14 +34,20 @@
 			<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>
+						<image class="icon" :src="`${config.BASIC_IMG}img/treePage/b-tree-icon-${index+1}.png`">
+						</image>
 					</button>
-					<image v-else class="icon" :src="`${config.BASIC_IMG}img/treePage/b-tree-icon-${index+1}.png`"></image>
+					<image v-else class="icon" :src="`${config.BASIC_IMG}img/treePage/b-tree-icon-${index+1}.png`">
+					</image>
 					<view class="name">{{item}}</view>
 				</view>
 			</view>
 		</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"></up-picker>
@@ -51,22 +59,26 @@
 	<posterPopup :showPoster="showPoster" :farmBuyId="farmBuyId" :treeName="treeName"></posterPopup>
 	<!-- 果树成功弹窗 -->
 	<guardSuccessPopup :show="showGuardSuccess"></guardSuccessPopup>
-    <!-- 果树相册弹窗 -->
-    <tree-album-popup :show="showAlbum" :farmBuyId="farmBuyId"></tree-album-popup>
+	<!-- 果树相册弹窗 -->
+	<tree-album-popup :show="showAlbum" :farmBuyId="farmBuyId"></tree-album-popup>
 	<!-- 等级升级成功弹窗 -->
 	<levelSuccessPopup></levelSuccessPopup>
 	<!-- 祝福弹窗 -->
-	<blessingsPopup :show="showBlessingsPopup" :showSuccess="showSuccess" :farmBuyId="farmBuyId" :clockinType="clockinType" @clockinCallback="getBySampleId"></blessingsPopup>
-	</view>
+	<blessingsPopup :show="showBlessingsPopup" :showSuccess="showSuccess" :farmBuyId="farmBuyId"
+		:clockinType="clockinType" @clockinCallback="getBySampleId"></blessingsPopup>
 </template>
 
 <script setup>
 	import config from "@/api/config.js"
-	import { onLoad ,onShareAppMessage} from '@dcloudio/uni-app'
+	import {
+		onLoad,
+		onShareAppMessage
+	} from '@dcloudio/uni-app'
 	import memberLevel from "./components/memberLevel.vue"
 	import treeAlbumPopup from "./components/treeAlbumPopup.vue"
 	import blessingsPopup from "./components/blessingsPopup.vue"
 	import TREE from '@/api/tree.js'
+	import USER from '@/api/user.js'
 	import {
 		ref,
 		reactive,
@@ -90,7 +102,7 @@
 
 	const toolLeftList = [{
 			name: "相册",
-			clickName:'album'
+			clickName: 'album'
 		},
 		{
 			name: "日记",
@@ -99,7 +111,7 @@
 		{
 			name: "海报",
 			className: 'blue',
-			clickName:'poster'
+			clickName: 'poster'
 		},
 		{
 			name: "礼物",
@@ -122,17 +134,17 @@
 			name: "动态",
 			className: 'dynamic',
 			path: 'dynamic',
-			params:'farmBuyId'
+			params: 'farmBuyId'
 		}
 	]
-	
+
 	const showGuardSuccess = ref(false)
-	
+
 	const editNameRef = ref(null)
 	const formatDate = (dateStr) => {
-	    return dateStr.split(" ")[0].replace(/-/g, ".");
+		return dateStr.split(" ")[0].replace(/-/g, ".");
 	};
-	const handleEditName = () =>{
+	const handleEditName = () => {
 		editNameRef.value.showPopup({
 			id: farmBuyId.value,
 			treeName: treeName.value,
@@ -141,40 +153,81 @@
 			createDate: formatDate(treeData.value.buyList[0].createDate),
 		})
 	}
-	
-	onLoad(({successTree})=>{
-		if(successTree){
-			showGuardSuccess.value = true
-		}
+
+	onLoad(() => {
+		featchSessionStore()
+		featchIsLookedGuide()
 		getBySampleId()
 	})
-	
+
+	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.id
+		}).then((({data}) => {
+			if (data?.val == 0) {
+				showGuardSuccess.value = true
+				USER.setSessionStore({
+					key: 'successTree',
+					miniUserId: userInfo.id
+				})
+			}
+		}))
+	}
+
 	const treeData = ref({})
 	const farmBuyId = ref('')
 	const treeName = ref('')
 	const userInfo = uni.getStorageSync('userInfo')
-	const getBySampleId = () =>{
-		TREE.getBySampleId({sampleId:172055}).then(({data}) =>{
+	const getBySampleId = () => {
+		TREE.getBySampleId({
+			sampleId: 172055
+		}).then(({
+			data
+		}) => {
 			treeData.value = data || {}
-			if(userInfo.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{
+			if (userInfo.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
 		})
 	}
-	
+
 	const showPoster = ref(false)
 	const showAlbum = ref(false)
 	const handleToolItem = ({
-		path,clickName,params
+		path,
+		clickName,
+		params
 	}) => {
-		if(clickName === 'album'){
+		if (clickName === 'album') {
 			showAlbum.value = !showAlbum.value
-		}else if(clickName === 'poster'){
+		} else if (clickName === 'poster') {
 			showPoster.value = !showPoster.value
-		}else{
+		} else {
 			uni.navigateTo({
 				url: `/pages/tabBar/tree/subPages/${path}?farmBuyId=${farmBuyId.value}`
 			});
@@ -184,79 +237,105 @@
 	const showBlessingsPopup = ref(false)
 	const showSuccess = ref(false)
 	const clockinType = ref('1')
-	const handleItem = (index) =>{
-		if(index === 0){
+	const handleItem = (index) => {
+		if (index === 0) {
 			clockinType.value = 1
-			if(treeData.value.buyList[0].level.clockinMap['1']){
+			if (treeData.value.buyList[0].level.clockinMap['1']) {
 				uni.showToast({
 					title: '今日已守护',
-					icon:'none',
+					icon: 'none',
 					duration: 2000
 				});
-			}else{
+			} else {
 				showSuccess.value = !showSuccess.value
 			}
-		}else if(index === 1){
+		} else if (index === 1) {
 			clockinType.value = 3
-			if(treeData.value.buyList[0].level.clockinMap['3']){
+			if (treeData.value.buyList[0].level.clockinMap['3']) {
 				uni.showToast({
 					title: '今日已送过祝福',
-					icon:'none',
+					icon: 'none',
 					duration: 2000
 				});
-			}else{
+			} else {
 				showBlessingsPopup.value = !showBlessingsPopup.value
 			}
-		}else if(index === 2){
+		} else if (index === 2) {
 			clockinType.value = 2
-			if(!treeData.value.buyList[0].level.clockinMap['2']){
+			if (!treeData.value.buyList[0].level.clockinMap['2']) {
 				showSuccess.value = !showSuccess.value
 			}
-		}else{
+		} else {
 			console.log('123')
 		}
 	}
-	
+
 	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, // 显示订阅消息开关
-	          });
-	        },
-	      });
-	    })
+		//订阅模板
+		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) => {
-	  if (res.from === 'button') {
-		  const params = {
-		    sampleId:treeData.value.buyList[0].sampleId,
-		    farmId:treeData.value.buyList[0].farmId,
-		  }
-		  return {
-		    title: '我分享了我的果树，快来查看吧～',
-		    path: `/pages/tabBar/tree/subPages/friendTree?params=${JSON.stringify(params)}`, // 分享的小程序页面路径  
-		    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()}`,
-		  }
-	  }
+		if (res.from === 'button') {
+			const params = {
+				sampleId: treeData.value.buyList[0].sampleId,
+				farmId: treeData.value.buyList[0].farmId,
+			}
+			return {
+				title: '我分享了我的果树，快来查看吧～',
+				path: `/pages/tabBar/tree/subPages/friendTree?params=${JSON.stringify(params)}`, // 分享的小程序页面路径  
+				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";
+	@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");
@@ -282,16 +361,17 @@
 		.tree-cont {
 			width: 100%;
 			margin-top: 10rpx;
-			.tree-name{
+
+			.tree-name {
 				position: absolute;
-				z-index: 2;
 				top: 60.45%;
 				left: calc(50% - 32rpx);
 				font-size: 22rpx;
 				font-family: 'SweiSpringCJKtc';
 				text-align: center;
 				width: 88rpx;
-				.edit-icon{
+
+				.edit-icon {
 					width: 44rpx;
 					height: 44rpx;
 					margin-top: 14rpx;
@@ -394,10 +474,12 @@
 			.footer-item {
 				width: 18%;
 				text-align: center;
-				.share-btn{
+
+				.share-btn {
 					background: transparent;
 					display: inline-flex;
-					&::after{
+
+					&::after {
 						border: none;
 					}
 				}

static/style/common.scss

@@ -47,4 +47,13 @@
 	display: -webkit-box !important;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical !important;
+}
+.ellipsis-l1 {
+	white-space: pre-line;
+	overflow: hidden;
+	text-overflow: ellipsis;
+    word-break: break-all;
+	display: -webkit-box !important;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical !important;
 }