Переглянути джерело

feat:添加果树弹窗和我的日记页面

wangsisi 1 місяць тому
батько
коміт
99d066bcfb

+ 54 - 19
App.vue

@@ -1,19 +1,54 @@
-<script>
-	export default {
-		onLaunch: function() {
-			console.log('App Launch')
-		},
-		onShow: function() {
-			console.log('App Show')
-		},
-		onHide: function() {
-			console.log('App Hide')
-		}
-	}
-</script>
-
-<style lang="scss">
-	/*每个页面公共css */
-	@import "@/uni_modules/uview-plus/index.scss";
-	@import "@/static/style/common.scss"
-</style>
+<script>
+	export default {
+		onLaunch: function() {
+			console.log('App Launch')
+			// #ifdef MP-WEIXIN
+			this.handleWxLogin()
+			// #endif
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		},
+		methods: {
+			async handleWxLogin() {
+				// #ifdef MP-WEIXIN
+				try {
+					// 1. 获取code
+					const loginRes = await new Promise((resolve, reject) => {
+						uni.login({
+							success: resolve,
+							fail: reject
+						});
+					});
+
+					// 2. 获取用户信息
+					// const userInfo = await new Promise((resolve, reject) => {
+					//   uni.getUserProfile({
+					//     desc: '用于登录',
+					//     success: resolve,
+					//     fail: reject
+					//   });
+					// });
+
+					console.log('登录成功:', {
+						code: loginRes.code,
+						// userInfo: userInfo.userInfo
+					});
+
+				} catch (err) {
+					console.error('登录失败:', err);
+				}
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	/*每个页面公共css */
+	@import "@/uni_modules/uview-plus/index.scss";
+	@import "@/static/style/common.scss"
+</style>

+ 1 - 1
components/guardSuccessPopup/guardSuccessPopup.vue

@@ -1,5 +1,5 @@
 <template>
-	<up-popup :show="showPopup" @close="handleClose" mode="center" bgColor="transparent">
+	<up-popup :show="showPopup" @close="handleClose" mode="center" bgColor="transparent" overlayOpacity="0.75">
 		<view class="success-popup">
 			<view class="success-title">恭喜你,已守护成功!</view>
 			<view class="success-content">

+ 213 - 15
pages/tabBar/tree/subPages/diary.vue

@@ -1,17 +1,215 @@
-<template>
-	<view class="sub-base-container">
-		123
+<template>
+	<view class="sub-base-container">
+		<view class="tree-info">
+			<image class="image" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
+			<view class="info-cont">
+				<view class="tree-name">果树档案</view>
+				<view class="text-wrap">
+					<view class="row-text">
+						<text class="label">树木名称</text>
+						<text>茜茜荔</text>
+					</view>
+					<view class="row-text">
+						<text class="label">树木编号</text>
+						<text>LCJGHN-GZCH-LBY0011</text>
+					</view>
+					<view class="row-text">
+						<text class="label">来自农场</text>
+						<text>从化荔枝博览园</text>
+					</view>
+					<view class="row-text">
+						<text class="label">品种树龄</text>
+						<text>井岗红糯-18年</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="tree-diary">
+			<view class="diary-head">
+				<view class="date" @click="handleDate">
+					<image class="img" :src="`${config.BASIC_IMG}img/subTreePage/date-icon.png`"></image>
+					<text>2025年7月28日</text>
+				</view>
+				<view class="arrow-group">
+					<view class="arrow-icon">
+						<up-icon name="arrow-left" size="17" bold color="#fff"></up-icon>
+					</view>
+					<view class="arrow-icon">
+						<up-icon name="arrow-right" size="17" bold color="#fff"></up-icon>
+					</view>
+				</view>
+			</view>
+			<view class="diary-cont">
+				<view class="text">今天是我开花的日子今天是我开花的日子今天是我开花的日子今天是我开花的日子</view>
+				<view class="photo">
+					<image class="img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
+				</view>
+			</view>
+		</view>
 	</view>
-</template>
-
-<script setup>
+	<up-datetime-picker
+		:show="showDatetim"
+		v-model="date"
+		mode="date"
+		@cancel="cancel"
+		@confirm="cancel"
+	></up-datetime-picker>
+</template>
+
+<script setup>
 	import config from "@/api/config.js"
-</script>
-
-<style lang="scss" scoped>
-@import "@/static/style/mixin.scss";
-.sub-base-container{
-	background-image: linear-gradient(0deg,#FFFFFF,rgba(33, 153, 248, 0.6));
-	min-height: 484rpx;
-}
-</style>
+	import {ref} from "vue"
+	
+	const showDatetim = ref(false)
+	const date = ref('')
+	
+	const handleDate = () =>{
+		showDatetim.value = true
+	}
+	const cancel = () =>{
+		showDatetim.value = false
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "@/static/style/mixin.scss";
+
+	.sub-base-container {
+		background-image: linear-gradient(0deg, #FFFFFF, rgba(33, 153, 248, 0.6));
+		max-height: 484rpx;
+		min-height: 484rpx;
+		padding-top: 52rpx;
+
+		.tree-info {
+			display: flex;
+			justify-content: space-between;
+
+			.image {
+				width: 220rpx;
+				height: 220rpx;
+				border: 2rpx solid #fff;
+				border-radius: 16rpx;
+			}
+
+			.info-cont {
+				width: calc(100% - 220rpx - 36rpx);
+				border: 2rpx solid #fff;
+				border-radius: 16rpx;
+				background-image: linear-gradient(180deg, rgba(241, 249, 255, .6), rgba(255, 255, 255, .75));
+
+				.tree-name {
+					font-size: 28rpx;
+					font-family: 'PangMenZhengDao';
+					padding: 8rpx 0;
+					border-radius: 16rpx 4rpx 16rpx 4rpx;
+					background-image: linear-gradient(120deg, #9FD5FF, #2199F8);
+					color: #fff;
+					width: 164rpx;
+					text-align: center;
+				}
+
+				.text-wrap {
+					padding: 8rpx 0 0 20rpx;
+					line-height: 36rpx;
+
+					.row-text {
+						font-size: 24rpx;
+
+						.label {
+							font-weight: 500;
+							margin-right: 20rpx;
+						}
+					}
+				}
+			}
+		}
+
+		.tree-diary {
+			width: 100%;
+			min-height: 960rpx;
+			box-sizing: border-box;
+			padding: 70rpx 0 56rpx 34rpx;
+			@include ossBg("subTreePage/diary-bg.png");
+			.diary-head{
+				display: flex;
+				justify-content: space-between;
+				.date{
+					font-family: 'PangMenZhengDao';
+					font-size: 29rpx;
+					color: #2199F8;
+					display: flex;
+					align-items: center;
+					.img{
+						width: 26rpx;
+						height: 26rpx;
+						margin-right: 10rpx;
+					}
+				}
+				.arrow-group{
+					display: flex;
+					.arrow-icon{
+						border-radius: 50%;
+						background: rgba(33, 153, 248, 0.2);
+						width: 56rpx;
+						height: 56rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+					.arrow-icon + .arrow-icon{
+						margin-left: 20rpx;
+					}
+				}
+			}
+			.diary-cont{
+				padding: 120rpx 60rpx 0 26rpx;
+				.text{
+					width: 72%;
+					margin: auto;
+					font-weight: 500;
+					position: relative;
+					&::before{
+						content: '“';
+						position: absolute;
+						top: -85rpx;
+						left: -90rpx;
+						font-size: 140rpx;
+						color: rgba(33, 153, 248, 0.2);
+					}
+					&::after{
+						content: '”';
+						position: absolute;
+						bottom: -130rpx;
+						right: -110rpx;
+						font-size: 140rpx;
+						color: rgba(33, 153, 248, 0.2);
+					}
+				}
+				.photo{
+					width: 100%;
+					height: 420rpx;
+					margin-top: 90rpx;
+					border: 10rpx solid #d0e6fb;
+					box-shadow:  0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
+					position: relative;
+					&::before{
+						content: '';
+						position: absolute;
+						z-index: 2;
+						right: -34rpx;
+						top: 0;
+						background: rgba(33, 153, 248, 0.56);
+						transform: rotate(38deg);
+						width: 102rpx;
+						height: 30rpx;
+					}
+					.img{
+						width: 100%;
+						height: 100%;
+						object-fit: cover;
+					}
+				}
+			}
+		}
+	}
+</style>

+ 2 - 2
pages/tabBar/tree/tree.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="base-container">
+	<view class="base-container">
 		<member-level>
 			<view class="toogle" @click="handleShow">切换 {{name}}<up-icon class="icon" name="arrow-down" color="#fff"
 					size="12"></up-icon></view>
@@ -65,7 +65,7 @@
 	const handleConfirm = (e) => {
 		name.value = e.value[0]
 		handleCancel()
-	}
+	}
 
 	const toolLeftList = [{
 			name: "相册",