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">
				<!-- <image class="img" src="https://menduner.citupro.com:3443/dev/f7b4ce5cdd4a96286640a88c868c47694fd98b536a79218d1e755498db547725.png"></image>
				<view class="title">{{ calendarInfo.yangli }}</view>
				<view class="d-flex align-center justify-center" style="margin-top: 55px;">
					幸运色：
					<view class="luckyColor" :style="{ 'background-color': currentColor }"></view>
				</view>

				<view class="font-size-12 ss-m-t-30" style="text-align: left; color: #888;">
					<view>阴历：{{ calendarInfo.yinli }}</view>
					<view class="ss-m-y-10">宜：{{ calendarInfo.yi }}</view>
					<view>忌：{{ calendarInfo.ji }}</view>
				</view> -->

				<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>
							<view class="luckyColor ss-m-l-20" :style="{ 'background-color': `${currentColor || '#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>
</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'

	/**
	 * 获取任意时间
	 */
	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(() => {
		// const birthday = uni.getStorageSync('birthday')
		// if (!birthday) {
		// 	uni.reLaunch({
		// 		url: '/pages/drawLots/form'
		// 	})
		// 	return
		// }

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


	const popupRef = ref()
	const currentColor = ref(null)

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

		try {
			const { result } = await getDrawLots({ date: e.fulldate })
			// console.log(result, '成功信息')
			calendarInfo.value = result || {}

			popupRef.value.open()
			currentColor.value = result?.color || e.extraInfo?.color
		} catch (error) {
			console.log(error, '错误信息')
		}
	}

	const handleClose = () => {
		popupRef.value.close()
		currentColor.value = null
		calendarInfo.value = {}
	}
</script>

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

.popupContent {
	position: relative;
	background-color: #fff;
	// border-radius: 12px;
	width: 70vw;
	// height: 400rpx;
	// text-align: center;
	padding: 30rpx;
	.content-box {
		height: 100%;
		border: 1px solid $commonColor;
		border-radius: 6px; 
		// padding: 20rpx;
	}
	.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%;
	}

	.img {
		position: absolute;
		top: -56px;
		left: 50%;
		transform: translateX(-50%);
		width: 150px;
		height: 150px;
	}
	.title {
		position: absolute;
		top: 7px;
		left: 50%;
		color: #F49610;
		font-weight: bold;
		transform: translateX(-50%);
	}
}
</style>