menduner-uniapp/pages/drawLots/index.vue

<template>
  <view>
		<Calendar
			class="uni-calendar--hook"
			:selected="selected"
			:lunar="true"
			:range="false"
			:showMonth="true"
			@change="handleChange"
		/>

		<uni-popup ref="popupRef" type="dialog">
			<view class="popupContent">
				<view class="">上上签</view>
				<view class="ss-m-y-10">今日运势：上</view>
				<view class="d-flex align-center justify-center">
					幸运色：
					<view class="luckyColor" :style="{ 'background-color': currentColor }"></view>
				</view>

				<view class="color-666 font-size-13 ss-m-t-30" style="text-align: left;">
					<view>宜：炼丹悟道 结善缘 精心修养</view>
					<view>忌：远行 投资 冲动决策</view>
					<view>今日贵人相助，修行精进</view>
				</view>
			</view>
		</uni-popup>
  </view>
</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'

	/**
	 * 获取任意时间
	 */
	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([])

	onLoad(() => {
		setTimeout(() => {
			selected.value = [
				{
					date: getDate(new Date(),-3).fullDate,
					color: '#2196F3',
					url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
				},
				{
					date: getDate(new Date(),-2).fullDate,
					color: '#ff5252',
					url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
				},
				{
					date: getDate(new Date(),-1).fullDate,
					color: '#26A69A',
					url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
				}
			]
		}, 2000)
	})


	const popupRef = ref()
	const currentColor = ref(null)
	const handleChange = (e) => {
		// console.log('change 返回:', e)
		if (e.isBackToday) return
		if (e.extraInfo) {
			popupRef.value.open()
			currentColor.value = e.extraInfo?.color || '#2979ff'
		}
	}
</script>

<style lang="scss" scoped>
.popupContent {
	background-color: #fff;
	border-radius: 6px;
	width: 400rpx;
	height: 400rpx;
	text-align: center;
	padding: 30rpx;
	.luckyColor {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}
}
</style>