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

<template>
	<view class="sub-base-container">
		<view class="tree-info">
			<image class="image" mode="aspectFill" :src="getImageUrl(treeData.treeImages[0].filename)"></image>
			<view class="info-cont">
				<view class="tree-name">果树档案</view>
				<view class="text-wrap">
					<view class="row-text">
						<text class="label">树木名称</text>
						<text>{{treeName}}</text>
					</view>
					<view class="row-text">
						<text class="label">树木编号</text>
						<text>{{treeData.buyList[0].code}}</text>
					</view>
					<view class="row-text">
						<text class="label">来自农场</text>
						<text>{{treeData.countyName}}{{treeData.farmName}}</text>
					</view>
					<view class="row-text">
						<text class="label">品种树龄</text>
						<text>{{treeData.pz}}-{{treeData.age}}年</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>{{formatDate(dateVal)}}</text>
				</view>
				<view class="arrow-group">
					<view class="arrow-icon" @click="changeDay(-1)">
						<up-icon name="arrow-left" size="17" bold color="#fff"></up-icon>
					</view>
					<view class="arrow-icon" @click="changeDay(+1)">
						<up-icon name="arrow-right" size="17" bold color="#fff"></up-icon>
					</view>
				</view>
			</view>
			<view class="diary-cont">
				<template v-if="active === 0">
					<view class="text">{{diaryData.content}}</view>
					<view class="photo">
						<image class="img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
					</view>
				</template>
				<view class="template-1" v-else-if="active === 1">
					<view class="photo-group">
						<image class="img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
						<image class="img float" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
					</view>
					<view class="text">{{diaryData.content}}</view>
				</view>
				<view class="template-2" v-else="active === 2">
					<view class="photo-group">
						<image class="img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
						<image class="img float" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
					</view>
					<view class="text">{{diaryData.content}}</view>
				</view>
			</view>
		</view>
	</view>
	<up-datetime-picker
		:show="showDatetim"
		v-model="dateVal"
		mode="date"
		:maxDate="Date.now()"
		:formatter="formatter"
		@cancel="cancel"
		@confirm="confirm"
	></up-datetime-picker>
</template>

<script setup>
	import config from "@/api/config.js"
	import {ref} from "vue"
	import TREE from '@/api/tree.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const resize = "?x-oss-process=image/resize,w_1000";
	
	const getImageUrl = (filename) =>{
		if (filename?.startsWith("https")) {
			return filename; // 直接使用完整 URL
		} else {
			return config.BASE_IMG_URL + filename + resize; // 拼接基础 URL
		}
	};
	
	const sampleId = ref('')
	onLoad((options)=>{
		sampleId.value = options.sampleId
		featchGetSampleDiary()
		getBySampleId()
	})
	
	const diaryData = ref({})
	const featchGetSampleDiary = () =>{
		const params = {
			sampleId:110950,
			createDateStart:'2025-04-13',
			createDateEnd:'2025-04-13',
			page:1,
			limit:1
		}
		TREE.getSampleDiary(params).then(res =>{
			if(res.data.length){
				diaryData.value = res.data[0]
			}
		})
	}
	
	const treeData = ref({})
	const treeName = 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) + "荔")
		})
	}
	
	function formatDate(timestamp,type) {
	  const date = new Date(timestamp);
	  const year = date.getFullYear();
	  const month = String(date.getMonth() + 1)
	  const day = String(date.getDate()).padStart(2, '0');         // 日期补零
	  return `${year}${type || '年'}${month}${type || '月'}${day}${type?'':'日'}`;
	}
	
	const currentDate = ref(new Date())
	function changeDay(type) {
		currentDate.value = new Date(currentDate.value);
		currentDate.value.setDate(currentDate.value.getDate() + type);
		if(currentDate.value > new Date()){
			currentDate.value.setDate(currentDate.value.getDate() - 1);
			return
		}
		dateVal.value = Date.parse(currentDate.value);
		//获取 0-2 的随机整数
		const randomInt = Math.floor(Math.random() * 3);
		active.value = randomInt
	}
	
	const showDatetim = ref(false)
	const dateVal = ref(Date.now())
	
	const handleDate = () =>{
		showDatetim.value = true
	}
	const cancel = () =>{
		showDatetim.value = false
	}
	const confirm = ()=>{
		const aaa = formatDate(date.value,'-')
		console.log(date.value,aaa)
		cancel()
	}
	
	const active = ref(2)
	const formatter = (type, value) => {
	  if (type === 'year') {
	    return `${value}年`;
	  }
	  if (type === 'month') {
	    return `${value}月`;
	  }
	  if (type === 'day') {
	    return `${value}日`;
	  }
	  return value;
	};
</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 30rpx;
			@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: 80rpx 60rpx 0 26rpx;
				.text{
					width: 72%;
					margin: 60rpx 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;
					}
				}
				.template-1{
					.photo-group{
						margin:0 -14rpx 240rpx 10rpx;
						.img{
							width: 354rpx;
							height: 240rpx;
							border: 10rpx solid rgba(255, 255, 255, 0.6);
							box-shadow:  0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
						}
						.float{
							width: 400rpx;
							height: 264rpx;
							float: right;
							margin-top: -130rpx;
						}
					}
					.text{
						width: 55%;
						margin: 0 auto;
					}
				}
				.template-2{
					.photo-group{
						margin:0 -10rpx 220rpx 10rpx;
						.img{
							position: relative;
							z-index: 2;
							width: 440rpx;
							height: 300rpx;
							border: 10rpx solid rgba(255, 255, 255, 0.3);
							box-shadow:  0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
						}
						.float{
							width: 332rpx;
							height: 222rpx;
							float: right;
							margin-top: -100rpx;
							transform: rotate(10deg);
							position: relative;
							z-index: 1;
						}
					}
					.text{
						width: 66%;
						margin: 0 auto;
					}
				}
			}
		}
	}
</style>