Explorar el Código

日历选中颜色调整

Xiao_123 hace 1 mes
padre
commit
5667edb00a

+ 34 - 20
components/uni-calendar/components/uni-calendar/uni-calendar-item.vue

@@ -26,26 +26,40 @@
 				'uni-calendar-item--multiple': weeks.multiple,
 				'uni-calendar-item--after-checked':weeks.afterMultiple,
 				'uni-calendar-item--disable':weeks.disable,
-				}">{{weeks.date}}</text>
-
-			<text v-if="!lunar && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
-				'uni-calendar-item--isDay-text':weeks.isDay,
-				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
-				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
-				'uni-calendar-item--before-checked':weeks.beforeMultiple,
-				'uni-calendar-item--multiple': weeks.multiple,
-				'uni-calendar-item--after-checked':weeks.afterMultiple,
-				}">{{todayText}}</text>
-
-			<text v-if="lunar" class="uni-calendar-item__weeks-lunar-text" :class="{
-				'uni-calendar-item--isDay-text':weeks.isDay,
-				'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !weeks.extraInfo?.color,
-				'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay && !weeks.extraInfo?.color,
-				'uni-calendar-item--before-checked':weeks.beforeMultiple,
-				'uni-calendar-item--multiple': weeks.multiple,
-				'uni-calendar-item--after-checked':weeks.afterMultiple,
-				'uni-calendar-item--disable':weeks.disable,
-				}">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
+				}"
+				:style="{'color': weeks.extraInfo?.color && weeks.extraInfo?.color === '#212121' ? '#fff' : weeks.disable ? '#c0c0c0' : '#333'}"
+			>
+				{{weeks.date}}
+			</text>
+
+			<text v-if="!lunar && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" 
+			  :class="{
+					'uni-calendar-item--isDay-text':weeks.isDay,
+					'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
+					'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
+					'uni-calendar-item--before-checked':weeks.beforeMultiple,
+					'uni-calendar-item--multiple': weeks.multiple,
+					'uni-calendar-item--after-checked':weeks.afterMultiple,
+				}"
+				:style="{'color': weeks.extraInfo?.color && weeks.extraInfo?.color === '#212121' ? '#fff' : weeks.disable ? '#c0c0c0' : '#333'}"
+			>
+				{{todayText}}
+			</text>
+
+			<text v-if="lunar" class="uni-calendar-item__weeks-lunar-text" 
+				:class="{
+					'uni-calendar-item--isDay-text':weeks.isDay,
+					'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay && !weeks.extraInfo?.color,
+					'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay && !weeks.extraInfo?.color,
+					'uni-calendar-item--before-checked':weeks.beforeMultiple,
+					'uni-calendar-item--multiple': weeks.multiple,
+					'uni-calendar-item--after-checked':weeks.afterMultiple,
+					'uni-calendar-item--disable':weeks.disable,
+				}"
+				:style="{'color': weeks.extraInfo?.color && weeks.extraInfo?.color === '#212121' ? '#fff' : weeks.disable ? '#c0c0c0' : '#333'}"
+			>
+				{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}
+			</text>
 
 			<!-- <text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
 				'uni-calendar-item--extra':weeks.extraInfo.info,

+ 6 - 3
components/uni-calendar/components/uni-calendar/uni-calendar.vue

@@ -423,7 +423,8 @@
 	}
 
 	.uni-calendar__content {
-		background-color: #fff;
+		// background-color: #fff;
+		background-color: #edf2fa;
 	}
 
 	.uni-calendar__header {
@@ -435,7 +436,8 @@
 		justify-content: center;
 		align-items: center;
 		height: 50px;
-		border-bottom-color: $uni-border-color;
+		// border-bottom-color: $uni-border-color;
+		border-bottom-color: #FFF;
 		border-bottom-style: solid;
 		border-bottom-width: 1px;
 	}
@@ -467,7 +469,8 @@
 		border-top-left-radius: 25px;
 		border-bottom-left-radius: 25px;
 		color: $uni-text-color;
-		background-color: $uni-bg-color-hover;
+		// background-color: $uni-bg-color-hover;
+		background-color: #fff;
 	}
 
 	.uni-calendar__header-text {

+ 40 - 20
pages/drawLots/index.vue

@@ -13,18 +13,18 @@
 				@monthSwitch="handleMonthSwitch"
 			/>
 
-			<button 
+			<!-- <button 
         size="default" 
         class="send-button" 
         @click="handleClear"
        >
 				清除缓存
-				</button>
+			</button> -->
 
 			<!-- 手账 -->
 			<view class="journal" v-if="calendarRecord && calendarRecord.length > 0">
 				<view class="title">手账</view>
-				<uni-card v-for="(val, index) in calendarRecord" :key="index" @tap="handleUpdateJournal(val)">
+				<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>
@@ -110,7 +110,7 @@
 	import { getDrawLots } from '@/api/drawLots.js'
 	import layoutPage from '@/layout'
 	import { showAuthModal } from '@/hooks/useModal'
-	import { getCalendarRecord } from '@/api/drawLots.js'
+	import { getCalendarRecord, saveCalendarRecord } from '@/api/drawLots.js'
 
 	const colorDict = {
 		'白': '#FAFAFA',
@@ -151,7 +151,6 @@
 	const userInfo = ref(uni.getStorageSync('wechat_user') || {})
 	onLoad(() => {
 		if (!userInfo.value || !userInfo.value?.openid) return showAuthModal()
-		getCalendarData(date.value.slice(0, 7), 'onLoad')
 	})
 
 	onShow(() => {
@@ -160,7 +159,7 @@
 		if (latestUser?.openid && latestUser?.openid !== userInfo.value?.openid) {
 			userInfo.value = latestUser
 		}
-		if (userInfo.value?.openid) getCalendarData(date.value.slice(0, 7), 'onShow')
+		if (userInfo.value?.openid) getCalendarData(date.value.slice(0, 7))
 	})
 
 	// 监听登录成功事件,立刻刷新数据
@@ -168,17 +167,17 @@
 	uni.$on && uni.$on('auth:login', (user) => {
 		userInfo.value = user || uni.getStorageSync('wechat_user')
 		if (userInfo.value?.openid) {
-			getCalendarData(date.value.slice(0, 7), 'event:auth:login')
+			getCalendarData(date.value.slice(0, 7))
 		}
 	})
 
-	const handleClear = () => {
-		selected.value = []
-		calendarRecord.value = []
-		userInfo.value = {}
-		uni.clearStorageSync()
-		showAuthModal()
-	}
+	// const handleClear = () => {
+	// 	selected.value = []
+	// 	calendarRecord.value = []
+	// 	userInfo.value = {}
+	// 	uni.clearStorageSync()
+	// 	showAuthModal()
+	// }
 	
 	// 点击日期查看黄历信息
 	const popupRef = ref()
@@ -186,12 +185,34 @@
 	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, '错误信息')
@@ -200,13 +221,12 @@
 
 	// 获取手账记录
 	const calendarRecord = ref([])
-	const getCalendarData = async (month_key, type) => {
-		console.log(type, '获取手账记录类型')
+	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: '#f8bbd0' }
+				return { date: item.date, color: item?.almanac?.color ? colorDict[item?.almanac?.color] : '#f8bbd0' }
 			}) : []
 		} catch {}
 	}
@@ -214,7 +234,7 @@
 	// 切换月份
 	const handleMonthSwitch = (e) => {
 		console.log(e, '切换月份')
-		getCalendarData(`${e.year}-${e.month < 10 ? '0' + e.month : e.month}`, 'monthSwitch')
+		getCalendarData(`${e.year}-${e.month < 10 ? '0' + e.month : e.month}`)
 	}
 
 	const handleClose = () => {
@@ -226,8 +246,8 @@
 	const handleAddJournal = () => {
 		let url = `/pages/drawLots/journal?date=${date.value}`
 		const index = calendarRecord.value.findIndex((item) => item.date === date.value)
-		if (index > -1) {
-			uni.showToast({ title: '手账已存在,可进行编辑', icon: 'none' })
+		if (index > -1 && calendarRecord.value[index].notes) {
+			// uni.showToast({ title: '手账已存在,可进行编辑', icon: 'none' })
 			url += `&notes=${calendarRecord.value[index].notes}`
 		}
 		uni.navigateTo({

+ 1 - 1
pages/drawLots/journal.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="ss-p-x-30 ss-p-y-30">
 		<view class="ss-m-b-30">
-      <uni-easyinput v-model="date" type="text" disabled />
+      <uni-section :title="date" type="line"></uni-section>
     </view>
 		<uni-easyinput type="textarea" v-model="journal" clearable maxlength="500" autoHeight placeholder="请输入要记录的内容" />
     <view style="text-align: end;" class="ss-m-t-10 color-999">{{ journal?.length || 0 }}/500</view>