menduner-uniapp/pages/drawLots/index.vue

<template>
  <layout-page>
		<view style="position: relative;">
			<Calendar
				class="uni-calendar--hook"
				:selected="selected"
				:lunar="true"
				:range="false"
				:showMonth="true"
				@change="handleChange"
			/>

			<view class="journal" v-if="journalData && Object.keys(journalData).length > 0">
				<view class="title">手账</view>
				<uni-card @tap="handleUpdateJournal(journalData.id, journalData.description)">
					<view class="d-flex align-center">
						<view class="line"></view>
						<view class="date">{{ journalData.date }}</view>
					</view>
					<view class="description ss-m-t-15">{{ journalData.description }}</view>
				</uni-card>
			</view>

			<view class="add-btn" @tap="handleAddJournal">
				<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
			</view>

			<uni-popup ref="popupRef" type="dialog">
				<view class="popupContent">
					<view class="content-box">
						<view class="text-center ss-p-y-30">
							<view class="yangli">{{ calendarInfo.yangli }}</view>
							<view class="yinli">{{ calendarInfo.yinli }}</view>
							<view class="d-flex align-center justify-center">
								<span style="color: #7f7f7f;">幸运色</span>
								<span v-if="calendarInfo.color === '白'" class="ss-m-l-20" style="color: #7f7f7f;">白色</span>
								<view
									v-else
									class="luckyColor ss-m-l-20"
									:style="{ 'background-color': `${colorDict[calendarInfo.color] || '#2979ff'}` }"
								></view>
							</view>
						</view>
						<view class="center-box ss-p-y-30 ss-p-x-30">
							<view class="d-flex">
								<view class="yi d-flex align-center justify-center">宜</view>
								<view class="font-size-15" style="flex: 1; color: #c6b393;">{{ calendarInfo.yi }}</view>
							</view>
							<view class="d-flex ss-m-t-30">
								<view class="ji d-flex align-center justify-center">忌</view>
								<view class="font-size-15" style="flex: 1; color: #7f7f7f;">{{ calendarInfo.ji }}</view>
							</view>
						</view>
						<view class="bottom-box">
							<view class="bottom-box-item d-flex flex-column align-center justify-center">
								<view class="padding">
									<view class="label">五行</view>
									<view class="value">{{ calendarInfo.wuxing }}</view>
								</view>
								<view style="border-top: 1px solid #c2a08c; height: 1px; width: 100%;"></view>
								<view class="padding">
									<view class="label">吉神</view>
									<view class="value">{{ calendarInfo.jishen }}</view>
								</view>
							</view>
							<view class="bottom-box-item d-flex align-center justify-center">
								<view class="padding">
									<view class="label">彭祖</view>
									<view class="value">{{ calendarInfo.baiji }}</view>
								</view>
							</view>
							<view class="bottom-box-item d-flex flex-column align-center justify-center">
								<view class="padding">
									<view class="label">冲煞</view>
									<view class="value">{{ calendarInfo.chongsha }}</view>
								</view>
								<view style="border-top: 1px solid #c2a08c; height: 1px; width: 100%;"></view>
								<view class="padding">
									<view class="label">凶神</view>
									<view class="value">{{ calendarInfo.xiongshen }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="text-center ss-m-t-50">
					<uni-icons type="close" size="40" color="#fff" @click="handleClose"></uni-icons>
				</view>
			</uni-popup>
		</view>
	</layout-page>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import Calendar from '@/components/uni-calendar/components/uni-calendar/uni-calendar.vue'
import { getDrawLots } from '@/api/drawLots.js'
import layoutPage from '@/layout'
import { showAuthModal, closeAuthModal } from '@/hooks/useModal'

const colorDict = {
	'白': '#FAFAFA',
	'黑': '#212121',
	'绿': '#43A047',
	'红': '#F44336',
	'黄': '#FDD835'
}

const journalData = ref({
	id: 1,
	date: '2025-08-27',
	description: '南京金陵酒店管理有限公司隶属于金陵饭店集团酒店业务板块，成立于2004年，已成为品牌化、连锁化、规模化发展的酒店管理专业机构。着力打造多层级品牌体系，构建涵盖高中端精品商务酒店、休闲度假酒店、主题文化酒店、智能公寓酒店等多样化产品线。公司秉承金陵饭店“细意浓情”服务理念，融合国际标准、传承中国文化、深耕本土特色，依托总部强大的支撑体系，为在管运营酒店赋能，为业主提供超值服务。“金陵”相继摘取中国质量奖——“全国质量工作先进单位标兵”，荣膺中国质量领域政府性荣誉——首届“中国质量奖”提名奖，十度蝉联世界品牌实验室评定的全球服务业奖项——“五星钻石奖”，位列中国饭店集团前30强，保持全国国有高星级酒店集团前三甲。国家旅游局在《饭店星评标准访查示范》中，将金陵饭店的管理模式和服务标准作为五星级酒店示范样板并拍摄成教学片，向全国酒店业推广。'
})

	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}

	const selected = ref([])
	const setSelectedDates = () => {
		selected.value = [ 
			{
				date: getDate(new Date(),-20).fullDate,
				color: '#d3e3fd',
				url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
			},
			{
				date: getDate(new Date(),-16).fullDate,
				color: '#f8bbd0',
				url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
			},
			{
				date: getDate(new Date(),-12).fullDate,
				color: '#3bb19b',
				url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
			},
			{
				date: getDate(new Date(),-7).fullDate,
				color: '#facd89',
				url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
			},
			{
				date: getDate(new Date(),-3).fullDate,
				color: '#d7ccc8',
				url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
			},
			{
				date: getDate(new Date(),-2).fullDate,
				color: '#c5cae9',
				url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
			}
		]
	}

	onLoad(() => {
		// showAuthModal()
		// closeAuthModal()

		// 设置选中项
		setTimeout(() => {
			setSelectedDates()
		}, 2000)
	})


	const popupRef = ref()

	const calendarInfo = ref({})
	const handleChange = async (e) => {
		if (e.isBackToday) return // 点击左上角“今日”按钮不弹窗

		try {
			const { result } = await getDrawLots({ date: e.fulldate })
			if (!result) return uni.showToast({ title: '黄历信息获取失败', icon: 'none' })
			calendarInfo.value = result || {}

			popupRef.value.open()
		} catch (error) {
			console.log(error, '错误信息')
		}
	}

	const handleClose = () => {
		popupRef.value.close()
		calendarInfo.value = {}
	}

	// 添加手账
	const handleAddJournal = () => {
		uni.navigateTo({
			url: '/pages/drawLots/journal'
		})
	}

	// 更新手账
	const handleUpdateJournal = (id, text) => {
		uni.navigateTo({
			url: `/pages/drawLots/journal?id=${id}&text=${text}`
		})
	}
</script>

<style lang="scss" scoped>
$commonColor: #c2a08c;
$size: 25px;

:deep {
	.uni-card {
		border-radius: 10px !important;
	}
}
.journal {
	margin-top: 30rpx;
	padding-bottom: 100px;
	.title {
		// color: #2979ff;
		color: #999;
		margin: 0 30px;
	}
	.date {
		font-size: 17px;
		font-weight: bold;
	}
	.line {
		width: 5px;
		height: 15px;
		border-radius: 4px;
		background-color: #2979ff;
		margin-right: 10px;
	}
	.description {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 6;
		overflow: hidden;
	}
}

.add-btn {
	position: fixed;
	right: 20px;
	bottom: 50px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #2979ff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popupContent {
	position: relative;
	background-color: #fff;
	width: 70vw;
	padding: 30rpx;
	.content-box {
		height: 100%;
		border: 1px solid $commonColor;
		border-radius: 6px; 
	}
	.yangli {
		font-weight: bold;
		color: $commonColor;
		font-size: 30px;
	}
	.yinli {
		color: #7f7f7f;
		margin: 10px 0;
	}
	.center-box {
		border-top: 1px solid $commonColor;
		border-bottom: 1px solid $commonColor;
		.yi {
			width: $size;
			height: $size;
			background-color: #c39c87;
			border-radius: 50%;
			color: #fff;
			margin-right: 10px;
			font-size: 14px;
		}
		.ji {
			width: $size;
			height: $size;
			background-color: #bfbfbf;
			border-radius: 50%;
			color: #fff;
			margin-right: 10px;
			font-size: 14px;
		}
	}
	.bottom-box {
		display: flex;
		&-item {
			width: 33.3%;
			text-align: center;
			border-right: 1px solid $commonColor;
			&:nth-child(3n) {
				border-right: none;
			}
			.label {
				font-size: 17px;
			}
			.value {
				color: #7f7f7f;
				font-size: 14px;
				margin-top: 10px;
			}
			.padding {
				padding: 10px;
			}
		}
	}
	.luckyColor {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}
}
</style>