117 lines
2.3 KiB
TypeScript
117 lines
2.3 KiB
TypeScript
// components/journal-detail-panel/index.ts
|
|
|
|
interface JournalInfo {
|
|
id: number;
|
|
date: string;
|
|
time: string;
|
|
lat?: number;
|
|
lng?: number;
|
|
location?: string;
|
|
idea?: string;
|
|
items: Array<{
|
|
type: number;
|
|
thumbURL: string;
|
|
sourceURL: string;
|
|
mongoId: string;
|
|
}>;
|
|
}
|
|
|
|
interface JournalDetailPanelData {
|
|
currentJournalIndex: number;
|
|
}
|
|
|
|
Component({
|
|
properties: {
|
|
// 是否显示
|
|
visible: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
// 标题（如 "2024 年 1 月 1 日" 或位置名称）
|
|
title: {
|
|
type: String,
|
|
value: ""
|
|
},
|
|
// 日记列表
|
|
journals: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
// 是否显示标题位置图标
|
|
showLocationIcon: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
// 是否显示每条日记的日期
|
|
showJournalDate: {
|
|
type: Boolean,
|
|
value: true
|
|
},
|
|
// 是否显示每条日记的位置
|
|
showJournalLocation: {
|
|
type: Boolean,
|
|
value: true
|
|
}
|
|
},
|
|
|
|
data: <JournalDetailPanelData>{
|
|
currentJournalIndex: 0,
|
|
},
|
|
|
|
observers: {
|
|
'journals, visible'(journals: JournalInfo[], visible: boolean) {
|
|
if (visible && journals && journals.length > 0) {
|
|
// 显示时重置索引和 margin
|
|
this.setData({
|
|
currentJournalIndex: 0,
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
/** 关闭详情 */
|
|
closeDetail() {
|
|
this.triggerEvent('close');
|
|
},
|
|
|
|
/** swiper 切换事件 */
|
|
onSwiperChange(e: WechatMiniprogram.SwiperChange) {
|
|
this.setData({
|
|
currentJournalIndex: e.detail.current
|
|
});
|
|
},
|
|
|
|
openLocation(e: WechatMiniprogram.BaseEvent) {
|
|
const { journalIndex } = e.currentTarget.dataset;
|
|
const journals = this.properties.journals as JournalInfo[];
|
|
const journal = journals[journalIndex];
|
|
if (journal.lat && journal.lng) {
|
|
wx.openLocation({
|
|
latitude: journal.lat,
|
|
longitude: journal.lng,
|
|
});
|
|
}
|
|
},
|
|
|
|
/** 预览媒体 */
|
|
previewMedia(e: WechatMiniprogram.BaseEvent) {
|
|
const { mediaIndex } = e.currentTarget.dataset;
|
|
const journals = this.properties.journals as JournalInfo[];
|
|
if (!journals || journals.length === 0) return;
|
|
|
|
// 使用当前 swiper 的索引
|
|
const journal = 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[]
|
|
});
|
|
}
|
|
}
|
|
});
|