新增路由

api/drawLots.js

@@ -6,7 +6,6 @@ export const getDrawLots = (params) => {
 		url: '/api/parse/get-calendar-info',
 		method: 'GET',
 		params,
-		baseURL: 'http://192.168.3.80',
 		custom: {
 			showLoading: false,
 			auth: false

pages.json

@@ -1,5 +1,11 @@
 {
 	"pages": [
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "每日运势"
+			}
+		},
 		{
 			"path": "pages/drawLots/index",
 			"style": {

pages/index/index.vue

@@ -0,0 +1,290 @@
+<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>