menduner-uniapp/pages/drawLots/index.vue

<template>
  <layout-page>
		<Calendar
			:date="date"
			class="uni-calendar--hook"
			:selected="selected"
			:lunar="true"
			:range="false"
			:showMonth="true"
			@change="handleChange"
			@monthSwitch="handleMonthSwitch"
		/>
	</layout-page>
</template>

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

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

	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 date = ref(getDate(new Date()).fullDate)
	// 设置日期选中内容
	const selected = ref([])

	// 登录信息
	const userInfo = ref(uni.getStorageSync('wechat_user') || {})
	onLoad(() => {
		if (!userInfo.value || !userInfo.value?.openid) return showAuthModal()
	})

	onShow(() => {
		// 刷新一次本地登录信息，防止 onLoad 时未拿到最新登录态
		const latestUser = uni.getStorageSync('wechat_user')
		if (latestUser?.openid && latestUser?.openid !== userInfo.value?.openid) {
			userInfo.value = latestUser
		}
		if (userInfo.value?.openid) getCalendarData(date.value.slice(0, 7))
	})

	// 监听登录成功事件，立刻刷新数据
	uni.$off && uni.$off('auth:login')
	uni.$on && uni.$on('auth:login', (user) => {
		userInfo.value = user || uni.getStorageSync('wechat_user')
		if (userInfo.value?.openid) {
			getCalendarData(date.value.slice(0, 7))
		}
	})
	
	// 点击日期查看黄历信息
	const handleChange = async (e) => {
		date.value = e.fulldate
		if (e.isBackToday) return // 点击左上角“今日”按钮不弹窗

		uni.navigateTo({
			url: `/pages/drawLots/fortune?date=${e.fulldate}`
		})
	}

	// 获取手账记录
	const calendarRecord = ref([])
	const getCalendarData = async (month_key) => {
		try {
			const { result } = await getCalendarRecord({ month_key, openid: userInfo.value.openid })
			calendarRecord.value = result?.calendar_content || []
			selected.value = calendarRecord.value?.length ? calendarRecord.value.map((item) => {
				return {
					date: item.date,
					color: item?.almanac?.color ? colorDict[item?.almanac?.color] : '',
					hasJournal: item?.notes ? true : false
				}
			}) : []
		} catch {}
	}

	// 切换月份
	const handleMonthSwitch = (e) => {
		console.log(e, '切换月份')
		getCalendarData(`${e.year}-${e.month < 10 ? '0' + e.month : e.month}`)
	}
</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: #999;
		margin: 0 30px;
	}
	.description {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		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;
			}
			.border {
				border-top: 1px solid #c2a08c;
				height: 1px;
				width: 100%;
			}
		}
	}
	.luckyColor {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}
}
</style>