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

<template>
	<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">
			<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">
			<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" :src="`${config.BASIC_IMG}img/treePage/b-tree-icon-${index+1}.png`"></image>
					<view class="name">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 切换 -->
	<up-picker :show="showPicker" :columns="columns" :defaultIndex="[0]" @cancel="handleCancel"
		@confirm="handleConfirm"></up-picker>
	<!-- 编辑树名称 -->
	<editNamePopup></editNamePopup>
	<!-- 海报弹窗 -->
	<posterPopup :showPoster="showPoster" :farmBuyId="farmBuyId" :treeName="treeName"></posterPopup>
	<!-- 果树成功弹窗 -->
	<guardSuccessPopup :show="showGuardSuccess"></guardSuccessPopup>
	<!-- 果树相册弹窗 -->
	<tree-album-popup :show="showAlbum"></tree-album-popup>
	<!-- 等级升级成功弹窗 -->
	<levelSuccessPopup></levelSuccessPopup>
	<!-- 祝福弹窗 -->
	<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 memberLevel from "./components/memberLevel.vue"
	import treeAlbumPopup from "./components/treeAlbumPopup.vue"
	import blessingsPopup from "./components/blessingsPopup.vue"
	import TREE from '@/api/tree.js'
	import {
		ref,
		reactive,
	} from 'vue';

	const name = ref('荔枝')
	const showPicker = ref(false)
	const columns = reactive([
		['荔枝', '香蕉', '苹果']
	]);
	const handleShow = () => {
		showPicker.value = true
	}
	const handleCancel = () => {
		showPicker.value = false
	}
	const handleConfirm = (e) => {
		name.value = e.value[0]
		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)
	
	onLoad(({successTree})=>{
		if(successTree){
			showGuardSuccess.value = true
		}
		getBySampleId()
	})
	
	const treeData = ref({})
	const farmBuyId = ref('')
	const treeName = ref('')
	const userInfo = uni.getStorageSync('userInfo')
	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{
				treeName.value = '飞鸟守护'
			}
			farmBuyId.value = data.buyList[0].id
		})
	}
	
	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}`
			});
		}
	}
	const footerList = ["每日阳光", "送ta祝福", "分享转发", "水果订购"]
	const showBlessingsPopup = ref(false)
	const showSuccess = ref(false)
	const clockinType = ref('1')
	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{
			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, // 显示订阅消息开关
	          });
	        },
	      });
	    })
		// #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()}`,
		  }
	  }
	})
</script>

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

	.base-container {
		@include ossBg("tree-bg.png");
		// background-position: top left;
		padding: 22rpx 0;

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

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

			.footer-item {
				width: 18%;
				text-align: center;
				.share-btn{
					background: transparent;
					display: inline-flex;
					&::after{
						border: none;
					}
				}

				.icon {
					width: 96rpx;
					height: 96rpx;
				}

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