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

<template>
	<view class="base-template">
		<view class="sub-base-container">
			<member-level :treeData="treeData">
				<template #add-btn v-if="userName !== userInfo.name">
					<view class="add-btn" @click="handleAddFriend">添加好友</view>
				</template>
			</member-level>
			<view class="tree-cont">
				<view class="tree-name">
					<view>{{treeName}}</view>
				</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 toolList" :key="index">
							<image class="icon" :src="`${config.BASIC_IMG}img/treePage/${item.icon}.png`"></image>
							<view class="name">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tree-footer">
				<view class="blessing" @click="handleBlessing" v-if="userName !== userInfo.name">
					<image class="icon" :src="`${config.BASIC_IMG}img/treePage/b-tree-icon-2.png`"></image>
					<text>送ta祝福</text>
				</view>
				<view class="button" @click="handlePage">{{userInfo.tel?'去看看我的树':'开启我的守护'}}</view>
			</view>
		</view>
		<!-- 祝福弹窗 -->
		<blessingsPopup :show="showBlessingsPopup" clockinType="3" :farmBuyId="farmBuyId" @clockinCallback="getBySampleId" isFriend></blessingsPopup>
	</view>
</template>

<script setup>
	import config from "@/api/config.js"
	import memberLevel from "../components/memberLevel.vue"
	import blessingsPopup from "../components/blessingsPopup.vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import TREE from '@/api/tree.js'
	import {
		ref,
	} from 'vue';

	const userInfo = uni.getStorageSync('userInfo')
	const handlePage = () => {
		if (userInfo.tel) {
			uni.switchTab({
				url: '/pages/tabBar/tree/tree'
			})
		} else {
			uni.navigateTo({
				url: `/pages/tabBar/home/subPages/gardenMap?enterSelectTree=true`
			});
		}
	}

	const handleAddFriend = () => {
		console.log('添加好友')
	}

	const sampleId = ref('')
	onLoad((options) => {
		sampleId.value = options.sampleId
		getBySampleId()
	})

	const treeData = ref({})
	const treeName = ref('')
	const farmBuyId = ref('')
	const userName = ref('')
	const getBySampleId = () => {
		TREE.getBySampleId({
			sampleId: sampleId.value
		}).then(({
			data
		}) => {
			treeData.value = data || {}
			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) + "荔")
			farmBuyId.value = data.buyList[0].id
			userName.value = data.buyList[0].owner
		})
	}

	const showBlessingsPopup = ref(false)
	const handleBlessing = () => {
		if(treeData.value.buyList[0].level.clockinMap['3']){
			uni.showToast({
				title: '今日已送过祝福',
				icon: 'none',
				duration: 2000
			});
		}else{
			showBlessingsPopup.value = !showBlessingsPopup.value
		}
	}

	const toolList = [{
			name: "相册",
			icon: 'l-tree-icon-1'
		},
		{
			name: "日记",
			icon: 'l-tree-icon-2'
		},
		{
			name: "果园",
			icon: 'r-tree-icon-3'
		}
	]

	const handleToolItem = ({
		path
	}) => {
		uni.navigateTo({
			url: `/pages/tabBar/tree/subPages/${path}`
		});
	}
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";

	.sub-base-container {
		@include ossBg("tree-bg.png");
		padding: 22rpx 0;

		.add-btn{
			margin-left: 14rpx;
			font-size: 22rpx;
			color: #fff;
			border-radius: 40rpx;
			padding: 2rpx 16rpx;
			border: 2rpx solid #fff;
		}

		.tree-cont {
			width: 100%;
			margin-top: 10rpx;

			.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;
			}

			.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-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;


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

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

		.tree-footer {
			position: absolute;
			left: 0;
			bottom: 130rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #fff;

			.blessing {
				display: flex;
				align-items: center;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 50rpx;
				padding: 6rpx 60rpx;
				border: 1rpx solid rgba(255, 255, 255, 0.6);

				.icon {
					width: 86rpx;
					height: 86rpx;
					margin-right: 10rpx;
				}
			}

			.button {
				padding: 26rpx 80rpx;
				border-radius: 50rpx;
				border: 2rpx solid #fff;
				background-image: linear-gradient(120deg, #FFD887, #ED9E1E);
				margin-top: 20rpx;
			}
		}
	}
</style>