黄历、手账信息在新的页面展示

components/uni-calendar/components/uni-calendar/uni-calendar-item.vue

@@ -73,7 +73,8 @@
 				}">{{weeks.extraInfo.info}}</text> -->
 		</view>
 		
-		<view v-if="weeks.extraInfo" style="text-align: center; margin-top: 10px;">
+		<!-- 有手账记录的展示 -->
+		<view v-if="weeks.extraInfo?.hasJournal" style="text-align: center; margin-top: 10px;">
 			<image
 				src="https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png"
 				style="width: 20px; height: 20px;"

pages.json

@@ -13,9 +13,9 @@
 			}
 		},
 		{
-			"path": "pages/drawLots/form",
+			"path": "pages/drawLots/fortune",
 			"style": {
-				"navigationBarTitleText": "信息采集"
+				"navigationBarTitleText": "今日运势"
 			}
 		},
 		{

pages/drawLots/form.vue

@@ -1,58 +0,0 @@
-<template>
-  <view class="ss-p-x-30 ss-p-y-30">
-		<!-- <picker mode="date" :value="formData.birthday" start="" end="" @change="bindDateChange">
-			<view class="uni-input">{{ formData.birthday }}</view>
-		</picker> -->
-		<view class="color-primary text-center font-size-18 ss-m-b-100">
-			请选择您的出生日期
-		</view>
-    <uni-forms ref="formRef" :modelValue="formData" :rules="rules" validateTrigger="bind" label-width="76px" label-align="right">
-      <uni-forms-item required label="出生日期" name="birthday">
-        <uni-datetime-picker v-model="formData.birthday" type="date" />
-			</uni-forms-item>
-			<view class="f-horizon-center">
-				<button type="primary" size="default" class="send-button"  @click="handleSubmit">提 交</button>
-			</view>
-		</uni-forms>
-  </view>
-</template>
-
-<script setup>
-import { ref, unref } from 'vue'
-
-const formRef = ref(null)
-const formData = ref({
-	birthday: ''
-})
-const rules = {
-	birthday: {
-		rules: [{required: true, errorMessage: '请选择您的出生日期' }]
-	}
-}
-
-const bindDateChange = (e) => {
-  console.log(e.detail.value, 'change')
-	formData.value.birthday = e.detail.value
-}
-
-const handleSubmit = async () => {
-	const valid = await unref(formRef).validate()
-  if (!valid) return
-
-	console.log('submit', formData.value.birthday)
-
-	uni.setStorageSync('birthday', formData.value.birthday)
-
-	uni.reLaunch({
-		url: `/pages/drawLots/index`
-	})
-}
-</script>
-
-<style lang="scss" scoped>
-:deep {
-	.uni-picker {
-		height: 60px !important;
-	}
-}
-</style>

pages/drawLots/fortune.vue

@@ -0,0 +1,339 @@
+<template>
+  <view class="ss-p-x-30 ss-p-y-30">
+    <!-- 黄历信息 -->
+    <view class="popupContent">
+			<view class="content-box">
+				<view class="text-center ss-p-y-30">
+					<view class="yangli">{{ almanac.yangli }}</view>
+					<view class="yinli">{{ almanac.yinli }}</view>
+					<view class="d-flex align-center justify-center">
+						<span style="color: #7f7f7f;">幸运色</span>
+						<span v-if="almanac.color === '白'" class="ss-m-l-20" style="color: #7f7f7f;">白色</span>
+						<view
+							v-else
+							class="luckyColor ss-m-l-20"
+							:style="{ 'background-color': `${colorDict[almanac.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;">{{ almanac.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;">{{ almanac.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">{{ almanac.wuxing }}</view>
+						</view>
+						<view class="border"></view>
+						<view class="padding">
+							<view class="label">吉神</view>
+							<view class="value">{{ almanac.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">{{ almanac.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">{{ almanac.chongsha }}</view>
+						</view>
+						<view class="border"></view>
+						<view class="padding">
+							<view class="label">凶神</view>
+							<view class="value">{{ almanac.xiongshen }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+    <view class="journal">
+      <uni-section title="手账" type="line"></uni-section>
+			<uni-card v-if="journal && journal?.notes && !isEdit" @click="handleUpdateJournal">
+				<view class="ss-m-t-15">{{ journal.notes }}</view>
+			</uni-card>
+      <view v-if="isEdit" class="ss-m-t-30 journal-content">
+        <uni-easyinput
+          :type="inputType"
+          v-model="notes"
+          clearable
+          :focus="inputType === 'textarea'"
+          maxlength="500"
+          autoHeight
+          placeholder="请输入要记录的内容"
+          @input="handleInput"
+        />
+        <view v-if="inputType === 'textarea'" style="text-align: end;" class="ss-m-t-10 color-999">{{ notes?.length || 0 }}/500</view>
+        <view class="f-horizon-center" v-if="inputType === 'textarea'">
+          <button class="commonBtnStyle delete-button" size="default" @click="handleCancel">取 消</button>
+          <button 
+            size="default" 
+            :class="{'save-button': notes, 'commonBtnStyle': notes, 'send-button': !notes}" 
+            @click="handleSubmit"
+            :disabled="disabled"
+          >保 存</button>
+        </view>
+      </view>
+		</view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getDrawLots, getCalendarRecord, saveCalendarRecord } from '@/api/drawLots.js'
+
+const colorDict = {
+	'白': '#FAFAFA',
+	'黑': '#212121',
+	'绿': '#43A047',
+	'红': '#F44336',
+	'黄': '#FDD835'
+}
+
+const inputType = ref('text')
+const isEdit = ref(false)
+const date = ref(null)
+const notes = ref(null) // 手账内容
+const journal = ref({}) // 当前日期手账记录
+const disabled = ref(false)
+const deleteDisabled = ref(false)
+const userInfo = ref(uni.getStorageSync('wechat_user'))
+
+// 获取黄历信息
+const almanac = ref({})
+const getCalendarInfo = async () => {
+  try {
+    const { result } = await getDrawLots({ date: date.value })
+    if (!result) return uni.showToast({ title: '黄历信息获取失败', icon: 'none' })
+    almanac.value = result || {}
+  } catch (error) {
+    console.log(error, '黄历-错误信息')
+  }
+}
+
+// 获取手账记录
+const calendarRecord = ref([])
+const getCalendarData = async (month_key) => {
+	try {
+		const { result } = await getCalendarRecord({ month_key, openid: userInfo.value.openid })
+		calendarRecord.value = result?.calendar_content || []
+
+    // 当前日期手账记录
+    journal.value = calendarRecord.value.find(item => item.date === date.value) || {}
+
+    // 在手账记录中有黄历信息的则直接展示，没有则从接口获取
+    if (journal.value?.almanac) almanac.value = journal.value.almanac
+    else getCalendarInfo()
+
+    // 没有手账记录的时候，默认为编辑状态展示输入框
+    if (!journal.value?.notes) {
+      isEdit.value = true
+      inputType.value = 'text'
+    }
+	} catch {}
+}
+
+onLoad((options) => {
+  date.value = options?.date || null
+
+  // 获取手账记录
+  getCalendarData(options?.date.slice(0, 7))
+})
+
+const handleUpdateJournal = () => {
+  isEdit.value = true
+  inputType.value = 'textarea'
+  notes.value = journal.value?.notes || ''
+}
+
+const handleInput = () => {
+  if (!notes.value) inputType.value = 'textarea'
+}
+
+const handleCancel = () => {
+  isEdit.value = !journal.value?.notes ? true : false
+  inputType.value = 'text'
+  notes.value = null
+}
+
+// 删除
+const handleDelete = async () => {
+  const index = calendarRecord.value.findIndex((item) => item.date === date.value)
+  if (index === -1) return uni.showToast({ title: '删除失败，当前数据不存在', icon: 'none', duration: 2000 })
+  calendarRecord.value.splice(index, 1)
+  deleteDisabled.value = true
+  disabled.value = true
+
+  try {
+    await saveCalendarRecord({ openid: userInfo.value.openid, month_key: date.value.slice(0, 7), calendar_content: calendarRecord.value })
+    uni.showToast({ title: '删除成功', icon: 'none', duration: 2000 })
+    setTimeout(() => {
+			uni.navigateBack({
+				delta: 1
+			})
+			disabled.value = false
+      deleteDisabled.value = false
+		}, 1000)
+  } catch {
+    deleteDisabled.value = false
+    disabled.value = false
+  }
+}
+
+// 保存
+const handleSubmit = async () => {
+  if (!notes.value) return uni.showToast({ title: '请输入要记录的内容', icon: 'none', duration: 2000 })
+  disabled.value = true
+
+  let list = []
+  if (!calendarRecord.value.length) {
+    // 新增手账
+    list = [{ date: date.value, events: [], notes: notes.value, almanac: almanac.value }]
+  } else {
+    const index = calendarRecord.value.findIndex((item) => item.date === date.value)
+    if (index > -1) {
+      calendarRecord.value[index].notes = notes.value
+      // 没有黄历信息的，保存黄历信息
+      if (!calendarRecord.value[index].almanac) calendarRecord.value[index].almanac = almanac.value
+    } else {
+      calendarRecord.value.push({ date: date.value, events: [], notes: notes.value, almanac: almanac.value })
+    }
+    list = calendarRecord.value
+  }
+  const params = {
+    openid: userInfo.value.openid,
+    month_key: date.value.slice(0, 7),
+    calendar_content: list
+  }
+
+  console.log(params, 'params')
+  try {
+    await saveCalendarRecord(params)
+    uni.showToast({ title: '保存成功', icon: 'none', duration: 2000 })
+    disabled.value = false
+    handleCancel()
+    getCalendarData(date.value.slice(0, 7))
+  } catch {
+    disabled.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$commonColor: #c2a08c;
+$size: 25px;
+
+:deep {
+	.uni-card {
+		margin: 30rpx 0 !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;
+	}
+  &-content {
+    background-color: #f1f1f1;
+    padding: 30rpx;
+    border-radius: 8px;
+  }
+}
+
+.popupContent {
+	position: relative;
+	background-color: #fff;
+	width: 80vw;
+  margin: 0 auto;
+	.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>

pages/drawLots/index.vue

@@ -1,105 +1,15 @@
 <template>
   <layout-page>
-		<view style="position: relative;">
-			<!-- 日历 -->
-			<Calendar
-				:date="date"
-				class="uni-calendar--hook"
-				:selected="selected"
-				:lunar="true"
-				:range="false"
-				:showMonth="true"
-				@change="handleChange"
-				@monthSwitch="handleMonthSwitch"
-			/>
-
-			<!-- <button 
-        size="default" 
-        class="send-button" 
-        @click="handleClear"
-       >
-				清除缓存
-			</button> -->
-
-			<!-- 手账 -->
-			<view class="journal" v-if="calendarRecord && calendarRecord.length > 0">
-				<view class="title">手账</view>
-				<uni-card v-for="(val, index) in calendarRecord.filter(item => item.notes)" :key="index" @tap="handleUpdateJournal(val)">
-					<uni-section :title="val.date" type="line"></uni-section>
-					<view class="description ss-m-t-15">{{ val.notes }}</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 class="border"></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 class="border"></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>
+		<Calendar
+			:date="date"
+			class="uni-calendar--hook"
+			:selected="selected"
+			:lunar="true"
+			:range="false"
+			:showMonth="true"
+			@change="handleChange"
+			@monthSwitch="handleMonthSwitch"
+		/>
 	</layout-page>
 </template>
 
@@ -107,10 +17,9 @@
 	import { onLoad, onShow } 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 } from '@/hooks/useModal'
-	import { getCalendarRecord, saveCalendarRecord } from '@/api/drawLots.js'
+	import { getCalendarRecord } from '@/api/drawLots.js'
 
 	const colorDict = {
 		'白': '#FAFAFA',
@@ -170,53 +79,15 @@
 			getCalendarData(date.value.slice(0, 7))
 		}
 	})
-
-	// const handleClear = () => {
-	// 	selected.value = []
-	// 	calendarRecord.value = []
-	// 	userInfo.value = {}
-	// 	uni.clearStorageSync()
-	// 	showAuthModal()
-	// }
 	
 	// 点击日期查看黄历信息
-	const popupRef = ref()
-	const calendarInfo = ref({})
 	const handleChange = async (e) => {
 		date.value = e.fulldate
 		if (e.isBackToday) return // 点击左上角“今日”按钮不弹窗
-		const index = calendarRecord.value.findIndex(val => val.date === e.fulldate)
 
-		// 有存储过的黄历信息直接使用
-		if (calendarRecord.value[index]?.almanac) {
-			calendarInfo.value = calendarRecord.value[index].almanac
-			popupRef.value.open()
-			return
-		}
-
-		try {
-			const { result } = await getDrawLots({ date: e.fulldate })
-			if (!result) return uni.showToast({ title: '黄历信息获取失败', icon: 'none' })
-			calendarInfo.value = result || {}
-
-			// 将黄历信息存储到手账中
-			if (calendarRecord.value?.length && userInfo.value?.openid) {
-				const month_key = date.value.slice(0, 7)
-				if (index > -1) {
-					calendarRecord.value[index].almanac = result
-				} else calendarRecord.value.push({ date: e.fulldate, notes: '', events: [], almanac: result })
-				await saveCalendarRecord({
-					openid: userInfo.value.openid,
-					month_key,
-					calendar_content: calendarRecord.value
-				})
-				getCalendarData(month_key)
-			}
-
-			popupRef.value.open()
-		} catch (error) {
-			console.log(error, '错误信息')
-		}
+		uni.navigateTo({
+			url: `/pages/drawLots/fortune?date=${e.fulldate}`
+		})
 	}
 
 	// 获取手账记录
@@ -226,7 +97,11 @@
 			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] : '#f8bbd0' }
+				return {
+					date: item.date,
+					color: item?.almanac?.color ? colorDict[item?.almanac?.color] : '',
+					hasJournal: item?.notes ? true : false
+				}
 			}) : []
 		} catch {}
 	}
@@ -236,31 +111,6 @@
 		console.log(e, '切换月份')
 		getCalendarData(`${e.year}-${e.month < 10 ? '0' + e.month : e.month}`)
 	}
-
-	const handleClose = () => {
-		popupRef.value.close()
-		calendarInfo.value = {}
-	}
-
-	// 添加手账
-	const handleAddJournal = () => {
-		let url = `/pages/drawLots/journal?date=${date.value}`
-		const index = calendarRecord.value.findIndex((item) => item.date === date.value)
-		if (index > -1 && calendarRecord.value[index].notes) {
-			// uni.showToast({ title: '手账已存在，可进行编辑', icon: 'none' })
-			url += `&notes=${calendarRecord.value[index].notes}`
-		}
-		uni.navigateTo({
-			url
-		})
-	}
-
-	// 更新手账
-	const handleUpdateJournal = (val) => {
-		uni.navigateTo({
-			url: `/pages/drawLots/journal?date=${val.date}&notes=${val.notes}`
-		})
-	}
 </script>
 
 <style lang="scss" scoped>

pages/drawLots/indexCopy.vue

@@ -0,0 +1,377 @@
+<template>
+  <layout-page>
+		<view style="position: relative;">
+			<!-- 日历 -->
+			<Calendar
+				:date="date"
+				class="uni-calendar--hook"
+				:selected="selected"
+				:lunar="true"
+				:range="false"
+				:showMonth="true"
+				@change="handleChange"
+				@monthSwitch="handleMonthSwitch"
+			/>
+
+			<!-- <button 
+        size="default" 
+        class="send-button" 
+        @click="handleClear"
+       >
+				清除缓存
+			</button> -->
+
+			<!-- 手账 -->
+			<view class="journal" v-if="calendarRecord && calendarRecord.length > 0">
+				<view class="title">手账</view>
+				<uni-card v-for="(val, index) in calendarRecord.filter(item => item.notes)" :key="index" @tap="handleUpdateJournal(val)">
+					<uni-section :title="val.date" type="line"></uni-section>
+					<view class="description ss-m-t-15">{{ val.notes }}</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 class="border"></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 class="border"></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, onShow } 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 } from '@/hooks/useModal'
+	import { getCalendarRecord, saveCalendarRecord } 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 handleClear = () => {
+	// 	selected.value = []
+	// 	calendarRecord.value = []
+	// 	userInfo.value = {}
+	// 	uni.clearStorageSync()
+	// 	showAuthModal()
+	// }
+	
+	// 点击日期查看黄历信息
+	const popupRef = ref()
+	const calendarInfo = ref({})
+	const handleChange = async (e) => {
+		date.value = e.fulldate
+		if (e.isBackToday) return // 点击左上角“今日”按钮不弹窗
+		const index = calendarRecord.value.findIndex(val => val.date === e.fulldate)
+
+		// 有存储过的黄历信息直接使用
+		if (calendarRecord.value[index]?.almanac) {
+			calendarInfo.value = calendarRecord.value[index].almanac
+			popupRef.value.open()
+			return
+		}
+
+		try {
+			const { result } = await getDrawLots({ date: e.fulldate })
+			if (!result) return uni.showToast({ title: '黄历信息获取失败', icon: 'none' })
+			calendarInfo.value = result || {}
+
+			// 将黄历信息存储到手账中
+			if (calendarRecord.value?.length && userInfo.value?.openid) {
+				const month_key = date.value.slice(0, 7)
+				if (index > -1) {
+					calendarRecord.value[index].almanac = result
+				} else calendarRecord.value.push({ date: e.fulldate, notes: '', events: [], almanac: result })
+				await saveCalendarRecord({
+					openid: userInfo.value.openid,
+					month_key,
+					calendar_content: calendarRecord.value
+				})
+				getCalendarData(month_key)
+			}
+
+			popupRef.value.open()
+		} catch (error) {
+			console.log(error, '错误信息')
+		}
+	}
+
+	// 获取手账记录
+	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] : '#f8bbd0' }
+			}) : []
+		} catch {}
+	}
+
+	// 切换月份
+	const handleMonthSwitch = (e) => {
+		console.log(e, '切换月份')
+		getCalendarData(`${e.year}-${e.month < 10 ? '0' + e.month : e.month}`)
+	}
+
+	const handleClose = () => {
+		popupRef.value.close()
+		calendarInfo.value = {}
+	}
+
+	// 添加手账
+	const handleAddJournal = () => {
+		let url = `/pages/drawLots/journal?date=${date.value}`
+		const index = calendarRecord.value.findIndex((item) => item.date === date.value)
+		if (index > -1 && calendarRecord.value[index].notes) {
+			// uni.showToast({ title: '手账已存在，可进行编辑', icon: 'none' })
+			url += `&notes=${calendarRecord.value[index].notes}`
+		}
+		uni.navigateTo({
+			url
+		})
+	}
+
+	// 更新手账
+	const handleUpdateJournal = (val) => {
+		uni.navigateTo({
+			url: `/pages/drawLots/journal?date=${val.date}&notes=${val.notes}`
+		})
+	}
+</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>