add journal-date
This commit is contained in:
@ -6,6 +6,7 @@
|
|||||||
"pages/main/journal-search/index",
|
"pages/main/journal-search/index",
|
||||||
"pages/main/journal-editor/index",
|
"pages/main/journal-editor/index",
|
||||||
"pages/main/journal-map/index",
|
"pages/main/journal-map/index",
|
||||||
|
"pages/main/journal-date/index",
|
||||||
"pages/main/portfolio/index",
|
"pages/main/portfolio/index",
|
||||||
"pages/main/travel/index",
|
"pages/main/travel/index",
|
||||||
"pages/main/about/index",
|
"pages/main/about/index",
|
||||||
|
|||||||
6
miniprogram/components/calendar/index.json
Normal file
6
miniprogram/components/calendar/index.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||||
|
}
|
||||||
|
}
|
||||||
114
miniprogram/components/calendar/index.less
Normal file
114
miniprogram/components/calendar/index.less
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
/* components/calendar/index.less */
|
||||||
|
.calendar {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
padding: 32rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.year {
|
||||||
|
display: flex;
|
||||||
|
padding: 16rpx 0;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 64rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
display: flex;
|
||||||
|
background: var(--theme-bg-card);
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: var(--theme-text);
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.weekdays {
|
||||||
|
display: grid;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
grid-template-columns: repeat(7, 1fr);
|
||||||
|
|
||||||
|
.weekday {
|
||||||
|
color: var(--theme-text-secondary);
|
||||||
|
padding: 16rpx 0;
|
||||||
|
font-size: 24rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.months {
|
||||||
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
|
padding-bottom: 256rpx;
|
||||||
|
|
||||||
|
.month {
|
||||||
|
margin-bottom: 48rpx;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: var(--theme-text);
|
||||||
|
padding: 16rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.days {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 8rpx;
|
||||||
|
grid-template-columns: repeat(7, 1fr);
|
||||||
|
|
||||||
|
.day {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
background: var(--theme-bg-card);
|
||||||
|
|
||||||
|
.number {
|
||||||
|
color: var(--theme-text);
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 8rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--theme-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.other-month {
|
||||||
|
opacity: .4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-journal {
|
||||||
|
background: var(--theme-bg-journal);
|
||||||
|
|
||||||
|
.day-number {
|
||||||
|
color: var(--theme-wx);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
210
miniprogram/components/calendar/index.ts
Normal file
210
miniprogram/components/calendar/index.ts
Normal file
@ -0,0 +1,210 @@
|
|||||||
|
// components/calendar/index.ts
|
||||||
|
|
||||||
|
interface DayInfo {
|
||||||
|
date: string; // YYYY-MM-DD
|
||||||
|
year: number;
|
||||||
|
month: number;
|
||||||
|
day: number;
|
||||||
|
isCurrentMonth: boolean;
|
||||||
|
hasJournal: boolean;
|
||||||
|
isToday: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MonthInfo {
|
||||||
|
year: number;
|
||||||
|
month: number;
|
||||||
|
days: DayInfo[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CalendarData {
|
||||||
|
currentYear: number;
|
||||||
|
months: MonthInfo[];
|
||||||
|
scrollIntoView: string; // 滚动到的元素 id
|
||||||
|
}
|
||||||
|
|
||||||
|
Component({
|
||||||
|
properties: {
|
||||||
|
// 日记数据,key 为日期 YYYY-MM-DD,value 为日记 id 数组
|
||||||
|
journalMap: {
|
||||||
|
type: Object,
|
||||||
|
value: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data: <CalendarData>{
|
||||||
|
currentYear: 0,
|
||||||
|
months: [],
|
||||||
|
scrollIntoView: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
lifetimes: {
|
||||||
|
attached() {
|
||||||
|
this.initCalendar();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
observers: {
|
||||||
|
'journalMap.**'(journalMap: Record<string, number[]>) {
|
||||||
|
// 日记数据更新时重新生成所有月份的日期
|
||||||
|
if (this.data.months.length > 0) {
|
||||||
|
this.updateAllMonthsDays(journalMap);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/** 初始化日历 */
|
||||||
|
initCalendar() {
|
||||||
|
const now = new Date();
|
||||||
|
const currentYear = now.getFullYear();
|
||||||
|
const currentMonth = now.getMonth() + 1;
|
||||||
|
|
||||||
|
this.setData({
|
||||||
|
currentYear,
|
||||||
|
months: this.generateYearMonths(currentYear)
|
||||||
|
});
|
||||||
|
|
||||||
|
// 滚动到当前月份
|
||||||
|
this.scrollToMonth(currentMonth);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 生成指定年份的 12 个月 */
|
||||||
|
generateYearMonths(year: number): MonthInfo[] {
|
||||||
|
const months: MonthInfo[] = [];
|
||||||
|
const today = new Date();
|
||||||
|
const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
|
||||||
|
|
||||||
|
for (let month = 1; month <= 12; month++) {
|
||||||
|
months.push({
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
days: this.generateDaysForMonth(year, month, this.data.journalMap || {}, todayStr)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return months;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 更新所有月份的日期数据 */
|
||||||
|
updateAllMonthsDays(journalMap: Record<string, number[]>) {
|
||||||
|
const { months } = this.data;
|
||||||
|
const today = new Date();
|
||||||
|
const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
|
||||||
|
|
||||||
|
const updatedMonths = months.map(monthInfo => ({
|
||||||
|
...monthInfo,
|
||||||
|
days: this.generateDaysForMonth(monthInfo.year, monthInfo.month, journalMap, todayStr)
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.setData({ months: updatedMonths });
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 生成指定月份的日期数据 */
|
||||||
|
generateDaysForMonth(year: number, month: number, journalMap: Record<string, number[]>, todayStr: string): DayInfo[] {
|
||||||
|
const days: DayInfo[] = [];
|
||||||
|
// 当前月第一天
|
||||||
|
const firstDay = new Date(year, month - 1, 1);
|
||||||
|
const firstDayWeek = firstDay.getDay();
|
||||||
|
|
||||||
|
// 当前月最后一天
|
||||||
|
const lastDay = new Date(year, month, 0);
|
||||||
|
const lastDate = lastDay.getDate();
|
||||||
|
|
||||||
|
// 上个月需要显示的日期
|
||||||
|
const prevMonthLastDay = new Date(year, month - 1, 0);
|
||||||
|
const prevMonthLastDate = prevMonthLastDay.getDate();
|
||||||
|
for (let i = firstDayWeek - 1; i >= 0; i--) {
|
||||||
|
const day = prevMonthLastDate - i;
|
||||||
|
const prevMonth = month === 1 ? 12 : month - 1;
|
||||||
|
const prevYear = month === 1 ? year - 1 : year;
|
||||||
|
const dateKey = `${prevYear}-${String(prevMonth).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||||
|
days.push({
|
||||||
|
date: dateKey,
|
||||||
|
year: prevYear,
|
||||||
|
month: prevMonth,
|
||||||
|
day,
|
||||||
|
isCurrentMonth: false,
|
||||||
|
hasJournal: !!journalMap[dateKey],
|
||||||
|
isToday: dateKey === todayStr
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 当前月的日期
|
||||||
|
for (let day = 1; day <= lastDate; day++) {
|
||||||
|
const dateKey = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||||
|
days.push({
|
||||||
|
date: dateKey,
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
day,
|
||||||
|
isCurrentMonth: true,
|
||||||
|
hasJournal: !!journalMap[dateKey],
|
||||||
|
isToday: dateKey === todayStr
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下个月需要显示的日期(补齐到 42 个格子,6 行)
|
||||||
|
const remainingDays = 42 - days.length;
|
||||||
|
for (let day = 1; day <= remainingDays; day++) {
|
||||||
|
const nextMonth = month === 12 ? 1 : month + 1;
|
||||||
|
const nextYear = month === 12 ? year + 1 : year;
|
||||||
|
const dateKey = `${nextYear}-${String(nextMonth).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||||
|
days.push({
|
||||||
|
date: dateKey,
|
||||||
|
year: nextYear,
|
||||||
|
month: nextMonth,
|
||||||
|
day,
|
||||||
|
isCurrentMonth: false,
|
||||||
|
hasJournal: !!journalMap[dateKey],
|
||||||
|
isToday: dateKey === todayStr
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return days;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 切换年份 */
|
||||||
|
changeYear(delta: number) {
|
||||||
|
const newYear = this.data.currentYear + delta;
|
||||||
|
this.setData({
|
||||||
|
currentYear: newYear,
|
||||||
|
months: this.generateYearMonths(newYear)
|
||||||
|
});
|
||||||
|
|
||||||
|
// 滚动到第一个月
|
||||||
|
this.scrollToMonth(1);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 上一年 */
|
||||||
|
prevYear() {
|
||||||
|
this.changeYear(-1);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 下一年 */
|
||||||
|
nextYear() {
|
||||||
|
this.changeYear(1);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 滚动到指定月份 */
|
||||||
|
scrollToMonth(month: number) {
|
||||||
|
// 先清空,然后设置,触发滚动
|
||||||
|
this.setData({ scrollIntoView: '' });
|
||||||
|
wx.nextTick(() => {
|
||||||
|
this.setData({ scrollIntoView: `month-${month}` });
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 点击日期 */
|
||||||
|
onDayTap(e: WechatMiniprogram.BaseEvent) {
|
||||||
|
const { date, year, month, day } = e.currentTarget.dataset;
|
||||||
|
|
||||||
|
// 触发自定义事件,传递选中的日期信息
|
||||||
|
this.triggerEvent('dateselect', {
|
||||||
|
date,
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
day
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
46
miniprogram/components/calendar/index.wxml
Normal file
46
miniprogram/components/calendar/index.wxml
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<!-- components/calendar/index.wxml -->
|
||||||
|
<view class="calendar">
|
||||||
|
<!-- 年份切换器 -->
|
||||||
|
<view class="year">
|
||||||
|
<t-icon class="btn" name="chevron-left" size="40rpx" catchtap="prevYear" />
|
||||||
|
<text class="text">{{currentYear}} 年</text>
|
||||||
|
<t-icon class="btn" name="chevron-right" size="40rpx" catchtap="nextYear" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 星期标题 -->
|
||||||
|
<view class="weekdays">
|
||||||
|
<view class="weekday">日</view>
|
||||||
|
<view class="weekday">一</view>
|
||||||
|
<view class="weekday">二</view>
|
||||||
|
<view class="weekday">三</view>
|
||||||
|
<view class="weekday">四</view>
|
||||||
|
<view class="weekday">五</view>
|
||||||
|
<view class="weekday">六</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 月份列表 -->
|
||||||
|
<scroll-view class="months" scroll-y enhanced show-scrollbar="{{false}}" scroll-into-view="{{scrollIntoView}}" scroll-with-animation>
|
||||||
|
<block wx:for="{{months}}" wx:key="month">
|
||||||
|
<view class="month" id="month-{{item.month}}">
|
||||||
|
<!-- 月份标题 -->
|
||||||
|
<view class="title">{{item.month}} 月</view>
|
||||||
|
<!-- 日期网格 -->
|
||||||
|
<view class="days">
|
||||||
|
<block wx:for="{{item.days}}" wx:key="date" wx:for-item="day">
|
||||||
|
<view
|
||||||
|
class="day {{day.isCurrentMonth ? '' : 'other-month'}} {{day.hasJournal ? 'has-journal' : ''}} {{day.isToday ? 'today' : ''}}"
|
||||||
|
catchtap="onDayTap"
|
||||||
|
data-date="{{day.date}}"
|
||||||
|
data-year="{{day.year}}"
|
||||||
|
data-month="{{day.month}}"
|
||||||
|
data-day="{{day.day}}"
|
||||||
|
>
|
||||||
|
<view class="number">{{day.day}}</view>
|
||||||
|
<view wx:if="{{day.hasJournal}}" class="dot"></view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
9
miniprogram/pages/main/journal-date/index.json
Normal file
9
miniprogram/pages/main/journal-date/index.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {
|
||||||
|
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||||
|
"t-popup": "tdesign-miniprogram/popup/popup",
|
||||||
|
"t-navbar": "tdesign-miniprogram/navbar/navbar",
|
||||||
|
"calendar": "/components/calendar/index"
|
||||||
|
},
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
175
miniprogram/pages/main/journal-date/index.less
Normal file
175
miniprogram/pages/main/journal-date/index.less
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
/* pages/main/journal-date/index.less */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
position: fixed;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--theme-bg);
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
z-index: 1000;
|
||||||
|
position: fixed;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
color: var(--theme-text-secondary);
|
||||||
|
padding: 24rpx 48rpx;
|
||||||
|
background: var(--theme-bg-card);
|
||||||
|
border-radius: 8rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-detail {
|
||||||
|
height: 61.8vh;
|
||||||
|
display: flex;
|
||||||
|
background: var(--theme-bg-card);
|
||||||
|
border-radius: 24rpx 24rpx 0 0;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.detail-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
padding: 24rpx 24rpx 4rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.date {
|
||||||
|
color: var(--theme-text);
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count {
|
||||||
|
color: var(--theme-text-secondary);
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
gap: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.indicator {
|
||||||
|
color: var(--theme-text-secondary);
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
background: var(--theme-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.journals-swiper {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.swiper-item-wrapper {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.journal-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
background: var(--theme-bg);
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.journal-header {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.location {
|
||||||
|
flex: 1;
|
||||||
|
color: var(--theme-text);
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 28rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
color: var(--theme-text-secondary);
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.idea {
|
||||||
|
color: var(--theme-text);
|
||||||
|
display: block;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 1.6;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-scroll {
|
||||||
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
|
||||||
|
.items {
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
position: relative;
|
||||||
|
column-gap: 8rpx;
|
||||||
|
column-count: 3;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
overflow: hidden;
|
||||||
|
break-inside: avoid;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
background: var(--theme-bg-card);
|
||||||
|
|
||||||
|
&.thumbnail {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.video {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: 50%;
|
||||||
|
left: 53%;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border-top: 16rpx solid transparent;
|
||||||
|
border-left: 24rpx solid rgba(255, 255, 255, .9);
|
||||||
|
border-bottom: 16rpx solid transparent;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
247
miniprogram/pages/main/journal-date/index.ts
Normal file
247
miniprogram/pages/main/journal-date/index.ts
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
// pages/main/journal-date/index.ts
|
||||||
|
import config from "../../../config/index";
|
||||||
|
import Time from "../../../utils/Time";
|
||||||
|
import { Journal, JournalPageType } from "../../../types/Journal";
|
||||||
|
import { MediaAttachType } from "../../../types/Attachment";
|
||||||
|
|
||||||
|
interface JournalInfo {
|
||||||
|
id: number;
|
||||||
|
date: string;
|
||||||
|
time: string;
|
||||||
|
location?: string;
|
||||||
|
idea?: string;
|
||||||
|
items: Array<{
|
||||||
|
type: number;
|
||||||
|
thumbURL: string;
|
||||||
|
sourceURL: string;
|
||||||
|
mongoId: string;
|
||||||
|
}>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SelectedDateInfo {
|
||||||
|
displayDate: string;
|
||||||
|
journals: JournalInfo[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface JournalDateData {
|
||||||
|
journalMap: Record<string, number[]>; // 存储每个日期的日记 id 列表
|
||||||
|
selectedDate: SelectedDateInfo | null;
|
||||||
|
isLoading: boolean;
|
||||||
|
currentJournalIndex: number; // 当前日记索引
|
||||||
|
popupVisible: boolean; // popup 显示状态
|
||||||
|
swiperNextMargin: string; // swiper 的 next-margin 值
|
||||||
|
}
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: <JournalDateData>{
|
||||||
|
journalMap: {},
|
||||||
|
selectedDate: null,
|
||||||
|
isLoading: true,
|
||||||
|
currentJournalIndex: 0,
|
||||||
|
popupVisible: false,
|
||||||
|
swiperNextMargin: "0"
|
||||||
|
},
|
||||||
|
|
||||||
|
async onLoad() {
|
||||||
|
await this.loadJournals();
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 加载所有日记 */
|
||||||
|
async loadJournals() {
|
||||||
|
this.setData({ isLoading: true });
|
||||||
|
try {
|
||||||
|
const list: Journal[] = await new Promise((resolve, reject) => {
|
||||||
|
wx.request({
|
||||||
|
url: `${config.url}/journal/list`,
|
||||||
|
method: "POST",
|
||||||
|
header: {
|
||||||
|
Key: wx.getStorageSync("key")
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
page: 0,
|
||||||
|
size: 9007199254740992,
|
||||||
|
type: JournalPageType.PREVIEW
|
||||||
|
},
|
||||||
|
success: (resp: any) => {
|
||||||
|
if (resp.data.code === 20000) {
|
||||||
|
resolve(resp.data.data.list);
|
||||||
|
} else {
|
||||||
|
reject(new Error(resp.data.message || "加载失败"));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: reject
|
||||||
|
});
|
||||||
|
}) || [];
|
||||||
|
|
||||||
|
// 按日期分组,只存储 id
|
||||||
|
const journalMap: Record<string, number[]> = {};
|
||||||
|
list.forEach((journal: any) => {
|
||||||
|
const date = new Date(journal.createdAt);
|
||||||
|
const dateKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||||
|
|
||||||
|
if (!journalMap[dateKey]) {
|
||||||
|
journalMap[dateKey] = [];
|
||||||
|
}
|
||||||
|
journalMap[dateKey].push(journal.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 按 id 倒序排序每天的日记
|
||||||
|
Object.keys(journalMap).forEach(dateKey => {
|
||||||
|
journalMap[dateKey].sort((a, b) => b - a);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.setData({
|
||||||
|
journalMap,
|
||||||
|
isLoading: false
|
||||||
|
});
|
||||||
|
} catch (err: any) {
|
||||||
|
wx.showToast({
|
||||||
|
title: err.message || "加载失败",
|
||||||
|
icon: "error"
|
||||||
|
});
|
||||||
|
this.setData({ isLoading: false });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 日期选择事件(来自 calendar 组件) */
|
||||||
|
onDateSelect(e: WechatMiniprogram.CustomEvent) {
|
||||||
|
const { date, year, month, day } = e.detail;
|
||||||
|
const journalIds = this.data.journalMap[date];
|
||||||
|
|
||||||
|
if (!journalIds || journalIds.length === 0) {
|
||||||
|
wx.showToast({
|
||||||
|
title: "该日期无日记",
|
||||||
|
icon: "none"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用接口获取详情
|
||||||
|
this.loadJournalsByIds(journalIds, `${year} 年 ${month} 月 ${day} 日`);
|
||||||
|
},
|
||||||
|
/** 根据 id 列表加载日记详情 */
|
||||||
|
async loadJournalsByIds(ids: number[], displayDate: string) {
|
||||||
|
wx.showLoading({ title: "加载中...", mask: true });
|
||||||
|
try {
|
||||||
|
const list: Journal[] = await new Promise((resolve, reject) => {
|
||||||
|
wx.request({
|
||||||
|
url: `${config.url}/journal/list/ids`,
|
||||||
|
method: "POST",
|
||||||
|
header: {
|
||||||
|
Key: wx.getStorageSync("key")
|
||||||
|
},
|
||||||
|
data: ids,
|
||||||
|
success: (resp: any) => {
|
||||||
|
if (resp.data.code === 20000) {
|
||||||
|
resolve(resp.data.data);
|
||||||
|
} else {
|
||||||
|
reject(new Error(resp.data.message || "加载失败"));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: reject
|
||||||
|
});
|
||||||
|
}) || [];
|
||||||
|
|
||||||
|
// 转换为 JournalInfo 格式
|
||||||
|
const journals: JournalInfo[] = list.map((journal: any) => {
|
||||||
|
const date = new Date(journal.createdAt);
|
||||||
|
return {
|
||||||
|
id: journal.id,
|
||||||
|
date: Time.toPassedDateTime(journal.createdAt),
|
||||||
|
time: `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`,
|
||||||
|
location: journal.location,
|
||||||
|
idea: journal.idea,
|
||||||
|
items: journal.items
|
||||||
|
.filter((item: any) => item.attachType === MediaAttachType.THUMB)
|
||||||
|
.map((item: any) => {
|
||||||
|
const ext = JSON.parse(item.ext);
|
||||||
|
return {
|
||||||
|
type: ext.isVideo ? 1 : 0,
|
||||||
|
thumbURL: `${config.url}/attachment/read/${item.mongoId}`,
|
||||||
|
sourceURL: `${config.url}/attachment/read/${ext.sourceMongoId}`,
|
||||||
|
mongoId: item.mongoId,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// 按 id 倒序排序
|
||||||
|
journals.sort((a, b) => b.id - a.id);
|
||||||
|
|
||||||
|
this.setData({
|
||||||
|
selectedDate: {
|
||||||
|
displayDate,
|
||||||
|
journals
|
||||||
|
},
|
||||||
|
currentJournalIndex: 0, // 重置索引
|
||||||
|
popupVisible: true, // 显示 popup
|
||||||
|
swiperNextMargin: journals.length > 1 ? "128rpx" : "0" // 设置初始 margin
|
||||||
|
});
|
||||||
|
|
||||||
|
wx.hideLoading();
|
||||||
|
} catch (err: any) {
|
||||||
|
wx.hideLoading();
|
||||||
|
wx.showToast({
|
||||||
|
title: err.message || "加载失败",
|
||||||
|
icon: "error"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 关闭详情 */
|
||||||
|
closeDetail() {
|
||||||
|
this.setData({
|
||||||
|
popupVisible: false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** popup 显示状态变化 */
|
||||||
|
onPopupVisibleChange(e: WechatMiniprogram.CustomEvent) {
|
||||||
|
const { visible } = e.detail;
|
||||||
|
this.setData({
|
||||||
|
popupVisible: visible
|
||||||
|
});
|
||||||
|
// 关闭时清空数据
|
||||||
|
if (!visible) {
|
||||||
|
this.setData({
|
||||||
|
selectedDate: null,
|
||||||
|
currentJournalIndex: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** swiper 切换事件 */
|
||||||
|
onSwiperChange(e: WechatMiniprogram.SwiperChange) {
|
||||||
|
this.setData({
|
||||||
|
currentJournalIndex: e.detail.current
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** swiper 动画完成事件 */
|
||||||
|
onSwiperAnimationFinish(e: WechatMiniprogram.SwiperAnimationFinish) {
|
||||||
|
if (!this.data.selectedDate) return;
|
||||||
|
|
||||||
|
const current = e.detail.current;
|
||||||
|
const total = this.data.selectedDate.journals.length;
|
||||||
|
|
||||||
|
// 动画完成后更新 margin,确保过渡流畅
|
||||||
|
const nextMargin = total > 1 && current < total - 1 ? "128rpx" : "0";
|
||||||
|
this.setData({
|
||||||
|
swiperNextMargin: nextMargin
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 预览媒体 */
|
||||||
|
previewMedia(e: WechatMiniprogram.BaseEvent) {
|
||||||
|
const { mediaIndex } = e.currentTarget.dataset;
|
||||||
|
if (!this.data.selectedDate) return;
|
||||||
|
|
||||||
|
// 使用当前 swiper 的索引
|
||||||
|
const journal = this.data.selectedDate.journals[this.data.currentJournalIndex];
|
||||||
|
const sources = journal.items.map((item: any) => ({
|
||||||
|
url: item.sourceURL,
|
||||||
|
type: item.type === 0 ? "image" : "video"
|
||||||
|
}));
|
||||||
|
|
||||||
|
wx.previewMedia({
|
||||||
|
current: mediaIndex,
|
||||||
|
sources: sources as WechatMiniprogram.MediaSource[]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
68
miniprogram/pages/main/journal-date/index.wxml
Normal file
68
miniprogram/pages/main/journal-date/index.wxml
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<!--pages/main/journal-date/index.wxml-->
|
||||||
|
<t-navbar title="日期查找" left-arrow />
|
||||||
|
<view class="container">
|
||||||
|
<!-- 日历视图 -->
|
||||||
|
<calendar journal-map="{{journalMap}}" bind:dateselect="onDateSelect" />
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<view wx:if="{{isLoading}}" class="loading">
|
||||||
|
<view class="loading-text">加载中...</view>
|
||||||
|
</view>
|
||||||
|
<!-- 详情面板 -->
|
||||||
|
<t-popup
|
||||||
|
visible="{{popupVisible}}"
|
||||||
|
placement="bottom"
|
||||||
|
bind:visible-change="onPopupVisibleChange"
|
||||||
|
>
|
||||||
|
<view class="date-detail">
|
||||||
|
<view class="detail-content">
|
||||||
|
<view class="header">
|
||||||
|
<view class="info">
|
||||||
|
<view class="date">{{selectedDate.displayDate}}</view>
|
||||||
|
<view class="count">{{selectedDate.journals.length}} 条日记</view>
|
||||||
|
</view>
|
||||||
|
<view class="actions">
|
||||||
|
<view wx:if="{{selectedDate.journals.length > 1}}" class="indicator">
|
||||||
|
{{currentJournalIndex + 1}}/{{selectedDate.journals.length}}
|
||||||
|
</view>
|
||||||
|
<t-icon name="close" catchtap="closeDetail" size="48rpx" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<swiper
|
||||||
|
class="journals-swiper"
|
||||||
|
current="{{currentJournalIndex}}"
|
||||||
|
bindchange="onSwiperChange"
|
||||||
|
bindanimationfinish="onSwiperAnimationFinish"
|
||||||
|
previous-margin="{{0}}"
|
||||||
|
next-margin="{{swiperNextMargin}}"
|
||||||
|
>
|
||||||
|
<block wx:for="{{selectedDate.journals}}" wx:key="id">
|
||||||
|
<swiper-item class="swiper-item-wrapper">
|
||||||
|
<view class="journal-item" data-id="{{item.id}}">
|
||||||
|
<view class="journal-header">
|
||||||
|
<view wx:if="{{item.location}}" class="location">📍 {{item.location}}</view>
|
||||||
|
<view class="time">{{item.time}}</view>
|
||||||
|
</view>
|
||||||
|
<view wx:if="{{item.idea}}" class="idea">{{item.idea}}</view>
|
||||||
|
<scroll-view wx:if="{{item.items && item.items.length > 0}}" scroll-y class="items-scroll">
|
||||||
|
<view class="items">
|
||||||
|
<view class="wrapper">
|
||||||
|
<block wx:for="{{item.items}}" wx:key="mongoId" wx:for-item="media">
|
||||||
|
<image
|
||||||
|
class="item thumbnail {{media.type === 1 ? 'video' : 'image'}}"
|
||||||
|
src="{{media.thumbURL}}"
|
||||||
|
mode="widthFix"
|
||||||
|
catchtap="previewMedia"
|
||||||
|
data-media-index="{{mediaIndex}}"
|
||||||
|
/>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</block>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</t-popup>
|
||||||
|
</view>
|
||||||
@ -5,7 +5,6 @@
|
|||||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||||
"t-navbar": "tdesign-miniprogram/navbar/navbar",
|
"t-navbar": "tdesign-miniprogram/navbar/navbar",
|
||||||
"t-indexes": "tdesign-miniprogram/indexes/indexes",
|
"t-indexes": "tdesign-miniprogram/indexes/indexes",
|
||||||
"t-calendar": "tdesign-miniprogram/calendar/calendar",
|
|
||||||
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
|
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
|
||||||
"t-indexes-anchor": "tdesign-miniprogram/indexes-anchor/indexes-anchor"
|
"t-indexes-anchor": "tdesign-miniprogram/indexes-anchor/indexes-anchor"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -19,18 +19,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar {
|
|
||||||
|
|
||||||
// .t-calendar__dates-item {
|
|
||||||
// color: var(--td-text-color-disabled);
|
|
||||||
|
|
||||||
// &.t-calendar__dates-item--selected {
|
|
||||||
// color: var(--td-calendar-title-color);
|
|
||||||
// background: transparent;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
.journal-list {
|
.journal-list {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
|
||||||
|
|||||||
@ -82,20 +82,6 @@ Page({
|
|||||||
list: []
|
list: []
|
||||||
})
|
})
|
||||||
this.fetch();
|
this.fetch();
|
||||||
// 可选日期
|
|
||||||
wx.request({
|
|
||||||
url: `${config.url}/journal/list/date?key=${wx.getStorageSync("key")}`,
|
|
||||||
method: "GET",
|
|
||||||
success: async (resp: any) => {
|
|
||||||
const dates = resp.data.data.sort((a: number, b: number) => a - b);
|
|
||||||
this.setData({
|
|
||||||
// dateFilterMin: dates[0],
|
|
||||||
// dateFilterMax: dates[dates.length - 1],
|
|
||||||
dateFilterAllows: dates,
|
|
||||||
// dateFilterVisible: this.data.dateFilterVisible
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
onReady() {
|
onReady() {
|
||||||
this.getCustomNavbarHeight();
|
this.getCustomNavbarHeight();
|
||||||
@ -121,17 +107,25 @@ Page({
|
|||||||
isShowMoreMenu: !this.data.isShowMoreMenu
|
isShowMoreMenu: !this.data.isShowMoreMenu
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
openDateFilter() {
|
toCreater() {
|
||||||
this.setData({
|
wx.navigateTo({
|
||||||
dateFilterVisible: true
|
"url": "/pages/main/journal-creater/index?from=journal"
|
||||||
});
|
})
|
||||||
},
|
},
|
||||||
tapCalendar(e: any) {
|
toSearch() {
|
||||||
console.log(e);
|
wx.navigateTo({
|
||||||
|
url: "/pages/main/journal-search/index"
|
||||||
|
})
|
||||||
},
|
},
|
||||||
toDateFilter(e: any) {
|
toMap() {
|
||||||
console.log(e);
|
wx.navigateTo({
|
||||||
// console.log(Toolkit.symmetricDiff(this.data.dateFilter.allows, e.detail.value));
|
url: "/pages/main/journal-map/index"
|
||||||
|
})
|
||||||
|
},
|
||||||
|
toDate() {
|
||||||
|
wx.navigateTo({
|
||||||
|
url: "/pages/main/journal-date/index"
|
||||||
|
})
|
||||||
},
|
},
|
||||||
fetch() {
|
fetch() {
|
||||||
if (this.data.isFetching || this.data.isFinished) {
|
if (this.data.isFetching || this.data.isFinished) {
|
||||||
@ -224,19 +218,4 @@ Page({
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
toCreater() {
|
|
||||||
wx.navigateTo({
|
|
||||||
"url": "/pages/main/journal-creater/index?from=journal"
|
|
||||||
})
|
|
||||||
},
|
|
||||||
toSearch() {
|
|
||||||
wx.navigateTo({
|
|
||||||
url: "/pages/main/journal-search/index"
|
|
||||||
})
|
|
||||||
},
|
|
||||||
toMap() {
|
|
||||||
wx.navigateTo({
|
|
||||||
url: "/pages/main/journal-map/index"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|||||||
@ -6,24 +6,13 @@
|
|||||||
<t-cell-group class="content" theme="card">
|
<t-cell-group class="content" theme="card">
|
||||||
<t-cell title="新纪录" leftIcon="add" bind:tap="toCreater" />
|
<t-cell title="新纪录" leftIcon="add" bind:tap="toCreater" />
|
||||||
<t-cell title="按列表查找" leftIcon="view-list" bind:tap="toSearch" />
|
<t-cell title="按列表查找" leftIcon="view-list" bind:tap="toSearch" />
|
||||||
<t-cell title="按日期查找" leftIcon="calendar-1" bind:tap="openDateFilter" />
|
<t-cell title="按日期查找" leftIcon="calendar-1" bind:tap="toDate" />
|
||||||
<t-cell title="按地图查找" leftIcon="location" bind:tap="toMap" />
|
<t-cell title="按地图查找" leftIcon="location" bind:tap="toMap" />
|
||||||
</t-cell-group>
|
</t-cell-group>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</t-navbar>
|
</t-navbar>
|
||||||
</view>
|
</view>
|
||||||
<t-calendar
|
|
||||||
class="calendar"
|
|
||||||
type="multiple"
|
|
||||||
min-date="{{dateFilterMin}}"
|
|
||||||
max-date="{{dateFilterMax}}"
|
|
||||||
value="{{dateFilterAllows}}"
|
|
||||||
visible="{{dateFilterVisible}}"
|
|
||||||
switch-mode="year-month"
|
|
||||||
confirm-btn="{{null}}"
|
|
||||||
bind:tap="tapCalendar"
|
|
||||||
/>
|
|
||||||
<t-indexes
|
<t-indexes
|
||||||
class="journal-list"
|
class="journal-list"
|
||||||
bind:scroll="onScroll"
|
bind:scroll="onScroll"
|
||||||
|
|||||||
@ -12,7 +12,7 @@ page {
|
|||||||
--theme-bg-primary: #FFFFFF;
|
--theme-bg-primary: #FFFFFF;
|
||||||
--theme-bg-secondary: #F5F5F5;
|
--theme-bg-secondary: #F5F5F5;
|
||||||
--theme-bg-card: #FFFFFF;
|
--theme-bg-card: #FFFFFF;
|
||||||
--theme-bg-journal: #FFF8E1;
|
--theme-bg-journal: #fff2c8;
|
||||||
--theme-bg-overlay: rgba(0, 0, 0, .1);
|
--theme-bg-overlay: rgba(0, 0, 0, .1);
|
||||||
--theme-bg-menu: rgba(255, 255, 255, .95);
|
--theme-bg-menu: rgba(255, 255, 255, .95);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user