init project

miniprogram/pages/main/portfolio/index.json

@@ -0,0 +1,7 @@
+{
+	"usingComponents": {
+		"t-navbar": "tdesign-miniprogram/navbar/navbar",
+		"t-collapse": "tdesign-miniprogram/collapse/collapse",
+		"t-collapse-panel": "tdesign-miniprogram/collapse-panel/collapse-panel"
+	}
+}

miniprogram/pages/main/portfolio/index.less

@@ -0,0 +1,40 @@
+/* pages/main/portfolio/index.wxss */
+.portfolio-list {
+	width: 100vw;
+	
+	.items {
+		position: relative;
+		font-size: 14px;
+		column-gap: .25rem;
+		column-count: 3;
+		padding-bottom: 2rem;
+
+		.item {
+			overflow: hidden;
+			background: #FFF;
+			break-inside: avoid;
+			margin-bottom: .25rem;
+
+			&.thumbnail {
+				width: 100%;
+				display: block;
+			}
+
+			&.video-container {
+				height: auto;
+				position: relative;
+
+				.play-icon {
+					top: 50%;
+					left: 50%;
+					width: 60rpx;
+					height: 60rpx;
+					z-index: 2;
+					position: absolute;
+					transform: translate(-50%, -50%);
+					pointer-events: none;
+				}
+			}
+		}
+	}
+}

miniprogram/pages/main/portfolio/index.ts

@@ -0,0 +1,151 @@
+// pages/main/portfolio/index.ts
+
+import config from "../../../config/index";
+import Events from "../../../utils/Events";
+import Time from "../../../utils/Time";
+import { Journal, JournalItemType } from "../journal/index";
+
+interface IPortfolioData {
+	page: {
+		index: number;
+		size: number;
+		type: string;
+		orderMap?: object;
+	}
+	list: Journal[];
+	isFetching: boolean;
+	isFinished: boolean;
+	stickyOffset: number;
+}
+
+Page({
+	data: <IPortfolioData>{
+		page: {
+			index: 0,
+			size: 8,
+			type: "PORTFOLIO",
+			orderMap: {
+				createdAt: "DESC"
+			}
+		},
+		list: [],
+		isFetching: false,
+		isFinished: false,
+		stickyOffset: 0
+	},
+	onLoad() {
+		Events.reset("JOURNAL_PORTFOLIO_REFRESH", () => {
+			this.setData({
+				page: {
+					index: 0,
+					size: 8,
+					type: "PORTFOLIO",
+					orderMap: {
+						createdAt: "DESC"
+					}
+				},
+				list: [],
+				isFetching: false,
+				isFinished: false
+			});
+			this.fetch();
+		});
+		this.getCustomNavbarHeight();
+		this.setData({
+			list: []
+		})
+		this.fetch();
+	},
+	onReachBottom() {
+		this.fetch();
+	},
+	getCustomNavbarHeight() {
+		const query = wx.createSelectorQuery();
+		query.select(".custom-navbar").boundingClientRect();
+		query.exec((res) => {
+			const { height = 0 } = res[0] || {};
+			this.setData({ stickyOffset: height });
+		});
+	},
+	fetch() {
+		if (this.data.isFetching || this.data.isFinished) {
+			return;
+		}
+		this.setData({
+			isFetching: true
+		});
+		wx.request({
+			url: `${config.url}/journal/list`,
+			method: "POST",
+			header: {
+				Key: wx.getStorageSync("key")
+			},
+			data: this.data.page,
+			success: async (resp: any) => {
+				const list = resp.data.data.list;
+				if (!list || list.length === 0) {
+					this.setData({
+						isFinished: true
+					})
+					return;
+				}
+				const result = list.map((journal: any) => {
+					return {
+						date: Time.toPassedDate(journal.createdAt),
+						idea: journal.idea,
+						lat: journal.lat,
+						lng: journal.lng,
+						location: journal.location,
+						items: journal.items.filter((item: any) => item.attachType === "THUMB").map((item: any) => {
+							const ext = JSON.parse(item.ext);
+							return {
+								type: ext.isVideo ? JournalItemType.VIDEO : JournalItemType.IMAGE,
+								thumbUrl: `${config.url}/attachment/read/${item.mongoId}`,
+								mongoId: item.mongoId,
+								source: journal.items.find((source: any) => source.id === ext.sourceId)
+							}
+						})
+					}
+				})
+				this.setData({
+					page: {
+						index: this.data.page.index + 1,
+						size: 8,
+						type: "PORTFOLIO",
+						orderMap: {
+							createdAt: "DESC"
+						}
+					},
+					list: this.data.list.concat(result),
+					isFinished: list.length < this.data.page.size
+				});
+			},
+			complete: () => {
+				this.setData({
+					isFetching: false
+				});
+			}
+		});
+	},
+	preview(e: WechatMiniprogram.BaseEvent) {
+		const journalIndex = e.target.dataset.journalIndex;
+		const itemIndex = e.target.dataset.itemIndex;
+		const items = this.data.list[journalIndex].items;
+		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: any) => {
+			return {
+				url: `${config.url}/attachment/read/${item.source.mongoId}`,
+				type: item.type === 0 ? "image" : "video"
+			}
+		}) as any;
+		wx.previewMedia({
+			current: newCurrentIndex,
+			sources
+		})
+	}
+});

miniprogram/pages/main/portfolio/index.wxml

@@ -0,0 +1,36 @@
+<!--pages/main/portfolio/index.wxml-->
+<view class="custom-navbar">
+	<t-navbar class="custom-navbar" title="专拍" />
+</view>
+<view class="portfolio-list">
+	<t-collapse class="collapse" expandMutex expandIcon>
+		<t-collapse-panel
+			class="panel"
+			wx:for="{{list}}"
+			header="{{journal.idea}}"
+			value="{{journalIndex}}"
+			header-right-content="{{journal.date}}"
+			wx:for-item="journal"
+			wx:for-index="journalIndex"
+			wx:key="journalIndex"
+		>
+			<view wx:if="{{journal.items}}" class="items">
+				<block
+					wx:for="{{journal.items}}"
+					wx:for-item="item"
+					wx:for-index="itemIndex"
+					wx:key="itemIndex"
+				>
+					<image
+						class="item thumbnail"
+						src="{{item.thumbUrl}}"
+						mode="widthFix"
+						bindtap="preview"
+						data-journal-index="{{journalIndex}}"
+						data-item-index="{{itemIndex}}"
+					></image>
+				</block>
+			</view>
+		</t-collapse-panel>
+	</t-collapse>
+</view>