147 lines
3.9 KiB
TypeScript
147 lines
3.9 KiB
TypeScript
// components/journal-detail-panel/index.ts
|
|
import { Journal } from "../../types/Journal";
|
|
import config from "../../config/index";
|
|
import { MediaAttachExt, MediaAttachType } from "../../types/Attachment";
|
|
import { MediaItem, MediaItemType } from "../../types/UI";
|
|
import Time from "../../utils/Time";
|
|
|
|
interface JournalDetailPanelData {
|
|
journals: Journal[];
|
|
currentJournalIndex: number;
|
|
}
|
|
|
|
Component({
|
|
properties: {
|
|
visible: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
ids: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
mode: {
|
|
type: String,
|
|
value: "DATE"
|
|
}
|
|
},
|
|
data: <JournalDetailPanelData>{
|
|
journals: [],
|
|
currentJournalIndex: 0,
|
|
},
|
|
observers: {
|
|
async 'ids, visible'(ids: number[], visible: boolean) {
|
|
if (visible && ids && 0 < ids.length) {
|
|
wx.showLoading({ title: "加载中...", mask: true });
|
|
try {
|
|
const journals: 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
|
|
});
|
|
}) || [];
|
|
journals.forEach(journal => {
|
|
journal.date = Time.toPassedDate(journal.createdAt);
|
|
journal.time = Time.toTime(journal.createdAt);
|
|
journal.datetime = Time.toPassedDateTime(journal.createdAt);
|
|
|
|
const thumbItems = journal.items?.filter((item) => item.attachType === MediaAttachType.THUMB);
|
|
if (!thumbItems) {
|
|
return;
|
|
}
|
|
const mediaItems: MediaItem[] = thumbItems.map((thumbItem) => {
|
|
const ext = thumbItem.ext = JSON.parse(thumbItem.ext!.toString()) as MediaAttachExt;
|
|
const thumbURL = `${config.url}/attachment/read/${thumbItem.mongoId}`;
|
|
const sourceURL = `${config.url}/attachment/read/${ext.sourceMongoId}`;
|
|
return {
|
|
type: ext.isVideo ? MediaItemType.VIDEO : MediaItemType.IMAGE,
|
|
thumbURL,
|
|
sourceURL,
|
|
size: thumbItem.size || 0,
|
|
attachmentId: thumbItem.id
|
|
} as MediaItem;
|
|
});
|
|
journal.mediaItems = mediaItems;
|
|
})
|
|
this.setData({
|
|
journals,
|
|
currentJournalIndex: 0,
|
|
});
|
|
wx.hideLoading();
|
|
} catch (err: any) {
|
|
wx.hideLoading();
|
|
wx.showToast({
|
|
title: err.message || "加载失败",
|
|
icon: "error"
|
|
});
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
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;
|
|
if (!journalIndex && this.properties.mode !== "LOCATION") {
|
|
return;
|
|
}
|
|
const journals = this.properties.journals as Journal[];
|
|
const journal = journals[journalIndex || 0];
|
|
if (journal.lat && journal.lng) {
|
|
wx.openLocation({
|
|
latitude: journal.lat,
|
|
longitude: journal.lng,
|
|
});
|
|
}
|
|
},
|
|
/** 预览媒体 */
|
|
previewMedia(e: WechatMiniprogram.BaseEvent) {
|
|
const journals = this.properties.journals as Journal[];
|
|
if (!journals || journals.length === 0) {
|
|
return;
|
|
}
|
|
const { itemIndex } = e.currentTarget.dataset;
|
|
const items = journals[this.data.currentJournalIndex].mediaItems!;
|
|
const total = items.length;
|
|
|
|
const startIndex = Math.max(0, itemIndex - 25);
|
|
const endIndex = Math.min(total, startIndex + 50);
|
|
const newCurrentIndex = itemIndex - startIndex;
|
|
|
|
const sources = items.slice(startIndex, endIndex).map((item) => {
|
|
return {
|
|
url: item.sourceURL,
|
|
type: item.type === 0 ? "image" : "video"
|
|
}
|
|
}) as any;
|
|
wx.previewMedia({
|
|
current: newCurrentIndex,
|
|
sources
|
|
})
|
|
}
|
|
}
|
|
});
|