feat:添加守护果树页面

pages/tabBar/shopping/shopping.vue

@@ -8,7 +8,8 @@
 
 			<view class="shop-item" v-for="(item,index) in 3" :key="index">
 				<up-checkbox-group>
-					<up-checkbox v-model="shopChecked" shape="circle" label="从化荔博园店铺"></up-checkbox>
+					<up-checkbox v-model="shopChecked" shape="circle" label="从化荔博园店铺" labelColor="#000" labelSize="14"></up-checkbox>
+					<up-icon class="icon" name="arrow-right" color="rgba(137, 137, 137, 0.69)" size="12"></up-icon>
 				</up-checkbox-group>
 				<up-swipe-action>
 					<up-swipe-action-item v-for="(ele,idx) in 3" :key="idx" :options="options1">
@@ -23,8 +24,8 @@
 										<text>海南妃子笑荔枝新鲜采摘</text>
 										<text>x1</text>
 									</view>
-									<up-text size="14" color="#717070" text="3斤装规格"></up-text>
-									<text class="text">坏单包退 包邮</text>
+									<up-text size="12" color="#717070" text="3斤装规格"></up-text>
+									<up-text size="12" color="#AFAFAF" text="坏单包退 包邮"></up-text>
 									<view class="total">
 										<text class="unit">¥</text>
 										<text class="sum">108</text>
@@ -95,7 +96,7 @@
 
 				.commodity-item {
 					width: 100%;
-					padding: 20rpx;
+					padding: 20rpx 0 20rpx 10rpx;
 					box-sizing: border-box;
 					display: flex;
 					align-items: center;
@@ -118,14 +119,10 @@
 								font-size: 28rpx;
 								font-weight: 500;
 							}
-							.text{
-								margin-top: 14rpx;
-								font-size: 24rpx;
-								color: #AFAFAF;
-							}
 							.total{
 								color: #FF7700;
 								font-size: 24rpx;
+								margin-top: 14rpx;
 								.sum{
 									font-weight: 500;
 									font-size: 38rpx;

pages/tabBar/tree/tree.vue

@@ -1,88 +1,367 @@
-<template>
-	<view class="base-container">
-		<view class="tree-head">
-			<view class="user-info">
-				<up-image class="avatar" :fade="false" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" width="96rpx" height="96rpx" shape="circle"></up-image>
-				<view class="level-wrap">
+<template>
+	<view class="base-container">
+		<view class="tree-head">
+			<view class="user-info">
+				<up-image class="avatar" :fade="false"
+					src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" width="96rpx"
+					height="96rpx" shape="circle"></up-image>
+				<view class="level-wrap">
 					<text class="name">V1 青铜守护</text>
-				</view>
+					<view class="progress-wrap">
+						<view class="progress-value">
+							<view class="total"></view>
+						</view>
+						<view class="progress-score">
+							<text class="cur-val">80</text>/100分
+						</view>
+					</view>
+					<view class="level-desc">
+						再累计能量<text class="level-text"> 20分 </text>即可升级到 青铜等级
+					</view>
+				</view>
 			</view>
-			<view class="toogle">切换</view>
-		</view>
-		<view class="tree-cont">
-			
-		</view>
-		<view class="tree-footer">
-			<view class="footer-item" v-for="(item,index) in footerList" :key="index">
-				<image class="icon" :src="`${config.BASIC_IMG}img/treePage/b-tree-icon-${index+1}.png`"></image>
-				<view class="name">{{item}}</view>
-			</view>
-		</view>
+			<view class="toogle" @click="handleShow">切换 {{name}}<up-icon class="icon" name="arrow-down" color="#fff" size="12"></up-icon></view>
+		</view>
+		<view class="tree-cont">
+			<view class="tree-info">
+				<view class="info-text">
+					<view>汕尾妙荔</view>
+					<text>现代农业产业园</text>
+				</view>
+				<view class="info-text">
+					<view>16年老树</view>
+					<text class="text">妃子笑荔枝</text>
+				</view>
+				<view class="info-text">
+					<view>成熟期</view>
+					<text class="text">温度适宜-梢期杀虫</text>
+				</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 toolLeftList" :key="index">
+						<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">
+						<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">
+				<image class="icon" :src="`${config.BASIC_IMG}img/treePage/b-tree-icon-${index+1}.png`"></image>
+				<view class="name">{{item}}</view>
+			</view>
+		</view>
 	</view>
-</template>
-
-<script setup>
-	import config from "@/api/config.js"
+	<!-- 切换 -->
+	<up-picker :show="showPicker" :columns="columns" :defaultIndex="[0]" @cancel="handleCancel" @confirm="handleConfirm"></up-picker>
+</template>
+
+<script setup>
+	import config from "@/api/config.js"
+	import {
+		ref,
+		reactive,
+		onMounted
+	} from 'vue';
 	
-	const footerList = ["每日阳光","送ta祝福","分享转发","水果订购"]
-</script>
-
-<style lang="scss" scoped>
-	@import "@/static/style/mixin.scss";
-	.base-container {
-		@include ossBg("tree-bg.png");
-		padding: 22rpx 0;
-		.tree-head{
-			display: flex;
-			border-radius: 60rpx 0 0 60rpx;
-			padding: 16rpx 20rpx;
+	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: "相册",
+		},
+		{
+			name: "日记",
+		},
+		{
+			name: "海报",
+			className: 'blue'
+		},
+		{
+			name: "礼物",
+			className: 'gift'
+		}
+	]
+	const toolRightList = [{
+			name: "好友",
+			className: 'friend'
+		},
+		{
+			name: "认养",
+		},
+		{
+			name: "果园",
+		},
+		{
+			name: "动态",
+			className: 'dynamic'
+		}
+	]
+	const footerList = ["每日阳光", "送ta祝福", "分享转发", "水果订购"]
+</script>
+
+<style lang="scss" scoped>
+	@import "@/static/style/mixin.scss";
+
+	.base-container {
+		@include ossBg("tree-bg.png");
+		// background-position: top left;
+		padding: 22rpx 0;
+
+		.tree-head {
+			display: flex;
+			border-radius: 70rpx 0 0 70rpx;
+			padding: 16rpx 20rpx;
+			margin-left: 24rpx;
 			position: relative;
-			background-image: linear-gradient(90deg,rgba(255, 255, 255, 0.4), transparent);
-			.user-info{
-				display: flex;
-				.avatar{
-					border: 2rpx solid #fff;
-					border-radius: 50%;
-					margin-right: 20rpx;
-				}
-				.level-wrap{
-					.name{
-						// color: #fff;
-						font-family: 'PangMenZhengDao';
+			width: calc(100% - 24rpx);
+			box-sizing: border-box;
+			background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent);
+
+			.user-info {
+				width: 100%;
+				display: flex;
+
+				.avatar {
+					border: 2rpx solid #fff;
+					border-radius: 50%;
+					margin-right: 20rpx;
+				}
+
+				.level-wrap {
+					line-height: 32rpx;
+					width: 54%;
+					.name {
+						// color: #fff;
+						font-family: 'PangMenZhengDao';
 					}
-				}
-			}
-			.toogle{
-				position: absolute;
+					.progress-wrap{
+						font-size: 20rpx;
+						color: rgba(0, 0, 0, 0.8);
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						.progress-value{
+							width: calc(100% - 120rpx);
+							height: 16rpx;
+							background: #E7E7E7;
+							border-radius: 40rpx;
+							border: 2rpx solid #fff;
+							.total{
+								width: 80%;
+								height: 100%;
+								border-radius: 20rpx;
+								background-image: linear-gradient(120deg,#FDE492,#FB9C03);
+							}
+						}
+						.cur-val{
+							font-size: 26rpx;
+							font-weight: 500;
+							color: #fff;
+						}
+					}
+					.level-desc{
+						font-size: 20rpx;
+						color: rgba(0, 0, 0, 0.84);
+						.level-text{
+							color: #fff;
+						}
+					}
+				}
+			}
+
+			.toogle {
+				position: absolute;
 				right: 0;
-			}
-		}
-		.tree-footer{
-			position: absolute;
-			left: 0;
-			bottom: 76rpx;
-			width: 100%;
-			display: flex;
-			justify-content: center;
-			.footer-item{
-				width: 18%;
-				text-align: center;
+				top: calc(50% - 36rpx);
+				font-size: 24rpx;
+				color: #fff;
+				border-radius: 50rpx 0 0 50rpx;
+				background: rgba(0, 0, 0, 0.2);
+				padding: 12rpx 20rpx;
+				display: flex;
 				.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;
-			}
-		}
-	}
+					margin-left: 10rpx;
+				}
+			}
+		}
+
+		.tree-cont {
+			width: 100%;
+			margin-top: 10rpx;
+
+			.tree-info {
+				width: 95%;
+				height: 160rpx;
+				box-sizing: border-box;
+				padding: 0 50rpx 20rpx;
+				@include ossBg("treePage/tree-info-bg.png");
+				display: flex;
+				justify-content: space-around;
+				align-items: center;
+				font-size: 26rpx;
+				font-weight: 500;
+				margin: auto;
+
+				.info-text {
+					text-align: center;
+					line-height: 32rpx;
+					position: relative;
+
+					.text {
+						font-size: 20rpx;
+					}
+				}
+
+				.info-text+.info-text {
+					&::before {
+						content: '';
+						position: absolute;
+						left: -26rpx;
+						top: 14rpx;
+						width: 1rpx;
+						height: 38rpx;
+						background: rgba(0, 0, 0, 0.26);
+					}
+				}
+			}
+
+			.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;
+
+				.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>