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 && treeData.treeImages[0].filename)"></image>
			<view class="info-cont">
				<view class="tree-name">果树档案</view>
				<image @click="handleEditName" class="photo-icon"
					:src="`${config.BASIC_IMG}img/treePage/blue-edit.png`"></image>
				<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 && 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-if="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>
		<up-calendar ref="calendar" :show="showDatetime" mode="single" :defaultDate="selectedDate" @confirm="confirm" @close="cancel"
			:minDate="formatDate(new Date(Date.now() - 365 * 24 * 60 * 60 * 1000),'-')" :maxDate="formatDate(new Date(),'-')" monthNum="13"
			:formatter="formatter"></up-calendar>
		<editNamePopup ref="editNameRef" @editEnd="getBySampleId"></editNamePopup>
	</view>
</template>

<script setup>
	import config from "@/api/config.js"
	import { ref } from "vue"
	import TREE from '@/api/tree.js'
	import { onLoad, onReady } from '@dcloudio/uni-app'
	
	const resize = "?x-oss-process=image/resize,w_1000";

	const getImageUrl = (filename) => {
		if (filename?.startsWith("https")) {
			return filename;
		} else {
			return config.BASE_IMG_URL + filename + resize;
		}
	};

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

	const editNameRef = ref(null)
	const formatDatePoint = (dateStr) => {
		return dateStr.split(" ")[0].replace(/-/g, ".");
	};
	
	const handleEditName = () => {
		editNameRef.value.showPopup({
			id: farmBuyId.value,
			treeName: treeName.value,
			nickname: treeData.value.buyList[0].nickname,
			showName: treeData.value.buyList[0].showName,
			createDate: formatDatePoint(treeData.value.buyList[0].createDate),
		})
	}

	const diaryData = ref({})
	const featchGetSampleDiary = () => {
		const currentDateStr = selectedDate.value[0]
		const params = {
			sampleId: sampleId.value,
			createDateStart: currentDateStr,
			createDateEnd: currentDateStr,
			page: 1,
			limit: 1
		}
		TREE.getSampleDiary(params).then(res => {
			if (res.data.length) {
				diaryData.value = res.data[0]
			} else {
				diaryData.value = {}
			}
		})
	}

	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).padStart(2, '0');
		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);
		selectedDate.value = [formatDate(currentDate.value, '-')];
		featchGetSampleDiary();
		const randomInt = Math.floor(Math.random() * 3);
		active.value = randomInt
	}

	const showDatetime = ref(false)
	const dateVal = ref(Date.now())
	const selectedDate = ref([formatDate(Date.now(),'-')])
	const calendar = ref(null)

	const handleDate = () => {
		// 更新选择的日期
		selectedDate.value = [formatDate(dateVal.value, '-')]
		// 显示日历
		showDatetime.value = true
	}
	
	const cancel = () => {
		showDatetime.value = false
	}
	
	const confirm = (e) => {
		selectedDate.value = e
		dateVal.value = Date.parse(e)
		currentDate.value = new Date(e)
		featchGetSampleDiary()
		cancel()
	}

	const active = ref(0)

	// 格式化函数
	const formatter = (day) => {
		// 可以在这里添加自定义的日期格式化逻辑
		return day;
	};

	// 页面渲染完成后初始化
	onReady(()=> {
		// 如果需要兼容微信小程序的话，需要用此写法
		if (calendar.value) {
			calendar.value.setFormatter(formatter);
			console.log('日历组件已初始化')
		}
	}) 
</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;
				position: relative;
				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;
				}

				.photo-icon {
					position: absolute;
					top: 18rpx;
					right: 22rpx;
					width: 28rpx;
					height: 28rpx;
				}

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