init project

miniprogram/pages/main/moment/index.json

@@ -0,0 +1,10 @@
+{
+	"usingComponents": {
+		"t-popup": "tdesign-miniprogram/popup/popup",
+		"t-radio": "tdesign-miniprogram/radio/radio",
+		"t-navbar": "tdesign-miniprogram/navbar/navbar",
+		"t-button": "tdesign-miniprogram/button/button",
+		"t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
+		"t-radio-group": "tdesign-miniprogram/radio-group/radio-group"
+	}
+}

miniprogram/pages/main/moment/index.less

@@ -0,0 +1,168 @@
+/* pages/main/moment/index.wxss */
+.moment {
+
+	.tips {
+		padding: 4px 12px;
+		font-size: .8rem;
+		text-align: justify;
+		text-indent: 2em;
+	}
+
+	.action {
+		padding: 8px 12px;
+
+		.line {
+			display: flex;
+			margin-bottom: .5rem;
+			justify-content: space-between;
+
+			.btn {
+				width: 50%;
+				margin-right: 1rem;
+				
+				&:last-child {
+					margin-right: 0;
+				}
+			}
+		}
+	}
+
+	.uploading {
+		padding: 4px 12px;
+		margin-bottom: 12rpx;
+
+		.progress {
+			margin-bottom: 8rpx;
+		}
+
+		.text {
+			color: #777;
+			display: flex;
+			font-size: .8rem;
+			justify-content: space-between;
+		}
+	}
+	
+	.items {
+		column-gap: .25rem;
+		column-count: 4;
+		padding-bottom: 2rem;
+
+		.item {
+			position: relative;
+
+			.thumbnail {
+				width: 100%;
+				display: block;
+				overflow: hidden;
+				background: #FFF;
+				break-inside: avoid;
+				margin-bottom: .25rem;
+
+				&.video {
+					height: auto;
+					position: relative;
+	
+					&::after {
+						content: "";
+						top: 50%;
+						left: 53%;
+						width: 0;
+						height: 0;
+						position: absolute;
+						transform: translate(-50%, -50%);
+						border-top: 16px solid transparent;
+						border-left: 24px solid rgba(255, 255, 255, .9);
+						border-bottom: 16px solid transparent;
+						pointer-events: none;
+					}
+				}
+			}
+
+			.checkbox {
+				top: 0;
+				right: 0;
+				padding: 16rpx 0 16rpx 16rpx;
+				z-index: 2;
+				position: absolute;
+				background: transparent;
+			}
+
+			.checkbox-fill {
+				top: 24rpx;
+				right: 26rpx;
+				width: 16px;
+				height: 16px;
+				z-index: 1;
+				position: absolute;
+				background: #FFF;
+				border-radius: 50%;
+			}
+		}
+	}
+}
+
+.archive-popup {
+
+	.container {
+		width: 100vw;
+		background: var(--td-bg-color-container);
+		border-top-left-radius: 16rpx;
+		border-top-right-radius: 16rpx;
+
+		.header {
+			display: flex;
+			align-items: center;
+			height: 116rpx;
+	
+			.title {
+				flex: 1;
+				color: var(--td-text-color-primary);
+				font-size: 36rpx;
+				text-align: center;
+				font-weight: 600;
+			}
+		
+			.btn {
+				margin: 0 .5rem;
+		
+				&.cancel {
+					color: var(--td-text-color-secondary);
+				}
+			
+				&.confirm {
+					color: #07C160;
+				}
+			}
+		}
+
+		.content {
+			padding: 16rpx 32rpx;
+
+			.section {
+				width: 100%;
+				margin-top: 1.5rem;
+
+				.label {
+					color: #777;
+				}
+
+				&.type {
+					display: flex;
+
+					.radio {
+						margin-right: 1em;
+					}
+				}
+
+				&.time {
+					display: flex;
+					
+					.picker {
+						margin-right: .25rem;
+					}
+				}
+			}
+		}
+	}
+}

miniprogram/pages/main/moment/index.ts

@@ -0,0 +1,535 @@
+// pages/main/moment/index.ts
+import config from "../../../config/index";
+import Events from "../../../utils/Events";
+import IOSize, { Unit } from "../../../utils/IOSize";
+import Time from "../../../utils/Time";
+import Toolkit from "../../../utils/Toolkit";
+import type { Location } from "../journal-creater/index";
+
+type Item = {
+	id: number;
+	type: ItemType;
+	mongoId: string;
+	thumbUrl: string;
+	sourceMongoId: string;
+	checked: boolean;
+}
+
+enum ItemType {
+	IMAGE,
+	VIDEO
+}
+
+type MD5Result = {
+	path: string;
+	md5: string;
+}
+
+interface MomentData {
+	list: Item[];
+	type: string;
+	idea: string;
+	date: string;
+	time: string;
+	location?: Location;
+	qqMapSDK?: any;
+	uploaded: string;
+	hasChecked: boolean;
+	isUploading: boolean;
+	isArchiving: boolean;
+	uploadSpeed: string;
+	uploadTotal: string;
+	uploadProgress: number;
+	isAuthLocation: boolean;
+	isVisibleArchivePopup: boolean;
+}
+
+Page({
+	data: <MomentData>{
+		list: [],
+		type: "NORMAL",
+		idea: "",
+		date: "2025-06-28",
+		time: "16:00",
+		location: undefined,
+		uploaded: "0",
+		hasChecked: false,
+		isUploading: false,
+		isArchiving: false,
+		uploadSpeed: "0 MB / s",
+		uploadTotal: "0 MB",
+		uploadProgress: 0,
+		isAuthLocation: false,
+		isVisibleArchivePopup: false
+	},
+	async onLoad() {
+		this.fetch();
+
+		// 授权定位
+		const setting = await wx.getSetting();
+		wx.setStorageSync("isAuthLocation", setting.authSetting["scope.userLocation"]);
+		let isAuthLocation = JSON.parse(wx.getStorageSync("isAuthLocation"));
+		this.setData({ isAuthLocation });
+		if (!isAuthLocation) {
+			wx.authorize({
+				scope: "scope.userLocation"
+			}).then(() => {
+				isAuthLocation = true;
+				this.setData({ isAuthLocation });
+			});
+		}
+		const unixTime = new Date().getTime();
+		this.setData({
+			idea: this.data.idea,
+			date: Time.toDate(unixTime),
+			time: Time.toTime(unixTime)
+		});
+		// 获取默认定位
+		wx.getLocation({
+			type: "gcj02"
+		}).then(resp => {
+			this.setData({
+				location: {
+					lat: resp.latitude,
+					lng: resp.longitude
+				},
+			});
+			const argLoc = `location=${this.data.location!.lat},${this.data.location!.lng}`;
+			const argKey = "key=WW5BZ-J4LCM-UIT6I-65MXY-Z5HDT-VRFFU";
+			wx.request({
+				url: `https://apis.map.qq.com/ws/geocoder/v1/?${argLoc}&${argKey}`,
+				success: res => {
+					if (res.statusCode === 200) {
+						this.setData({
+							location: {
+								lat: this.data.location!.lat,
+								lng: this.data.location!.lng,
+								text: (res.data as any).result?.formatted_addresses?.recommend
+							}
+						});
+					}
+				}
+			});
+		});
+	},
+	async chooseLocation() {
+		const location = await wx.chooseLocation({});
+		this.setData({
+			location: {
+				lat: location.latitude,
+				lng: location.longitude,
+				text: location.name
+			}
+		});
+	},
+	fetch() {
+		wx.request({
+			url: `${config.url}/journal/moment/list`,
+			method: "POST",
+			header: {
+				Key: wx.getStorageSync("key")
+			},
+			success: async (resp: any) => {
+				const list = resp.data.data;
+				if (!list || list.length === 0) {
+					return;
+				}
+				this.setData({
+					list: list.map((item: any) => {
+						const extData = JSON.parse(item.ext);
+						return {
+							id: item.id,
+							type: extData.isImage ? ItemType.IMAGE : ItemType.VIDEO,
+							mongoId: item.mongoId,
+							thumbUrl: `${config.url}/attachment/read/${item.mongoId}`,
+							sourceMongoId: extData.sourceMongoId,
+							checked: false
+						} as Item;
+					})
+				});
+			}
+		});
+	},
+	updateHasChecked() {
+		this.setData({ hasChecked: this.data.list.some(item => item.checked) });
+	},
+	onCheckChange(e: WechatMiniprogram.BaseEvent) {
+		const index = e.currentTarget.dataset.index;
+		const list = [...this.data.list];
+		list[index].checked = !list[index].checked;
+		this.setData({ list });
+		this.updateHasChecked();
+	},
+	preview(e: WechatMiniprogram.BaseEvent) {
+		const index = e.currentTarget.dataset.index;
+		const total = this.data.list.length;
+		
+		const startIndex = Math.max(0, index - 25);
+		const endIndex = Math.min(total, startIndex + 50);
+		const newCurrentIndex = index - startIndex;
+
+		const sources = this.data.list.slice(startIndex, endIndex).map((item: Item) => {
+			return {
+				url: `${config.url}/attachment/read/${item.sourceMongoId}`,
+				type: item.type === 0 ? "image" : "video"
+			}
+		}) as any;
+		wx.previewMedia({
+			current: newCurrentIndex,
+			sources
+		})
+	},
+	uploadMedia() {
+		const handleFail = (e?: any) => {
+			wx.showToast({ title: "上传失败", icon: "error" });
+			wx.hideLoading();
+			this.setData({
+				isUploading: false,
+			});
+			wx.reportEvent("wxdata_perf_monitor", {
+				wxdata_perf_monitor_id: "MOMENT_UPLOAD",
+				wxdata_perf_monitor_level: 9,
+				wxdata_perf_error_code: 1,
+				wxdata_perf_error_msg: e?.message
+			});
+		};
+		const that = this;
+		wx.chooseMedia({
+			mediaType: ["mix"],
+			sourceType: ["album", "camera"],
+			camera: "back",
+			async success(res) {
+				that.setData({
+					isUploading: true
+				});
+				wx.showLoading({
+					title: "正在读取..",
+					mask: true
+				})
+				let files = res.tempFiles;
+				// 计算 MD5
+				const md5Results: MD5Result[] = [];
+				await Promise.all(files.map(async (file) => {
+					const md5 = await new Promise((resolve, reject) => {
+						wx.getFileSystemManager().getFileInfo({
+							filePath: file.tempFilePath,
+							digestAlgorithm: "md5",
+							success: res => resolve(res.digest),
+							fail: () => reject(`读取失败: ${file.tempFilePath}`)
+						});
+					});
+					md5Results.push({
+						path: file.tempFilePath,
+						md5: md5,
+					} as MD5Result);
+				}));
+				// 查重
+				const filterMD5Result: string[] = await new Promise((resolve, reject) => {
+					wx.request({
+						url: `${config.url}/journal/moment/filter`,
+						method: "POST",
+						header: {
+							Key: wx.getStorageSync("key")
+						},
+						data: md5Results.map(item => item.md5),
+						success: async (resp: any) => {
+							resolve(resp.data.data);
+						},
+						fail: reject
+					});
+				});
+				// 过滤文件
+				const filterPath = md5Results.filter(item => filterMD5Result.indexOf(item.md5) !== -1)
+											 .map(item => item.path);
+				files = files.filter(file => filterPath.indexOf(file.tempFilePath) !== -1);
+				if (files.length === 0) {
+					wx.hideLoading();
+					return;
+				}
+				wx.showLoading({
+					title: "正在上传..",
+					mask: true
+				})
+				// 计算上传大小
+				const sizePromises = files.map(file => {
+					return new Promise<number>((sizeResolve, sizeReject) => {
+						wx.getFileSystemManager().getFileInfo({
+							filePath: file.tempFilePath,
+							success: (res) => sizeResolve(res.size),
+							fail: (err) => sizeReject(err)
+						});
+					});
+				});
+				Promise.all(sizePromises).then(fileSizes => {
+					const totalSize = fileSizes.reduce((acc, size) => acc + size, 0);
+					const uploadTasks: WechatMiniprogram.UploadTask[] = [];
+					let uploadedSize = 0;
+					let lastUploadedSize = 0;
+
+					that.setData({
+						uploadTotal: IOSize.format(totalSize, 2, Unit.MB)
+					});
+
+					// 计算上传速度
+					const speedUpdateInterval = setInterval(() => {
+						const chunkSize = uploadedSize - lastUploadedSize;
+						that.setData({
+							uploadSpeed: `${IOSize.format(chunkSize)} / s`
+						});
+						lastUploadedSize = uploadedSize;
+					}, 1000);
+					// 上传文件
+					const uploadPromises = files.map(file => {
+						return new Promise<string>((uploadResolve, uploadReject) => {
+							const task = wx.uploadFile({
+								url: `${config.url}/temp/file/upload`,
+								filePath: file.tempFilePath,
+								name: "file",
+								success: (resp) => {
+									const result = JSON.parse(resp.data);
+									if (result && result.code === 20000) {
+										// 更新进度
+										const progress = totalSize > 0 ? uploadedSize / totalSize : 1;
+										that.setData({
+											uploadProgress: Math.round(progress * 10000) / 100
+										});
+										uploadResolve(result.data[0].id);
+									} else {
+										uploadReject(new Error(`文件上传失败: ${result?.message || '未知错误'}`));
+									}
+								},
+								fail: (err) => uploadReject(new Error(`文件上传失败: ${err.errMsg}`))
+							});
+							// 监听上传进度事件
+							let prevProgress = 0;
+							task.onProgressUpdate((res) => {
+								const fileUploaded = (res.totalBytesExpectedToSend * res.progress) / 100;
+								const delta = fileUploaded - prevProgress;
+								uploadedSize += delta;
+								// 保存当前进度
+								prevProgress = fileUploaded;
+								// 更新进度条
+								that.setData({
+									uploaded: IOSize.formatWithoutUnit(uploadedSize, 2, Unit.MB),
+									uploadProgress: Math.round((uploadedSize / totalSize) * 10000) / 100
+								});
+							});
+							uploadTasks.push(task);
+						});
+					});
+					Promise.all(uploadPromises).then((tempFileIds) => {
+						wx.showLoading({
+							title: "正在保存..",
+							mask: true
+						})
+						// 清除定时器
+						clearInterval(speedUpdateInterval);
+						uploadTasks.forEach(task => task.offProgressUpdate());
+						that.setData({
+							uploadProgress: 100,
+							uploadSpeed: "0 MB / s"
+						});
+						// 上传完成转附件
+						wx.request({
+							url: `${config.url}/journal/moment/create`,
+							method: "POST",
+							header: {
+								Key: wx.getStorageSync("key")
+							},
+							data: tempFileIds,
+							success: async (resp: any) => {
+								wx.showToast({ title: "上传成功", icon: "success" });
+								const list = resp.data.data;
+								const added = list.map((item: any) => {
+									const extData = JSON.parse(item.ext);
+									return {
+										id: item.id,
+										type: extData.isImage ? ItemType.IMAGE : ItemType.VIDEO,
+										mongoId: item.mongoId,
+										thumbUrl: `${config.url}/attachment/read/${item.mongoId}`,
+										sourceMongoId: extData.sourceMongoId,
+										checked: false
+									} as Item;
+								});
+								// 前插列表
+								that.data.list.unshift(...added);
+								that.setData({
+									list: that.data.list,
+									isUploading: false,
+									uploaded: "0",
+									uploadTotal: "0 MB",
+									uploadProgress: 0
+								});
+								that.updateHasChecked();
+								wx.hideLoading();
+							},
+							fail: handleFail
+						});
+					}).catch((e: Error) => {
+						// 取消所有上传任务
+						uploadTasks.forEach(task => task.abort());
+						that.updateHasChecked();
+						handleFail(e);
+					});
+				}).catch(handleFail);
+			}
+		})
+	},
+	toggleArchivePopup() {
+		this.setData({
+			isVisibleArchivePopup: !this.data.isVisibleArchivePopup
+		});
+	},
+	onArchivePopupVisibleChange(e: any) {
+		this.setData({
+			isVisibleArchivePopup: e.detail.visible
+		});
+	},
+	onChangeArchiveType(e: any) {
+		const { value } = e.detail;
+		this.setData({ type: value });
+	},
+	async archiveChecked() {
+		const handleFail = () => {
+			wx.showToast({ title: "归档失败", icon: "error" });
+			wx.hideLoading();
+			this.setData({
+				isArchiving: false
+			});
+		};
+		this.setData({
+			isArchiving: true
+		});
+		wx.showLoading({
+			title: "正在归档..",
+			mask: true
+		})
+		const openId = await new Promise<string>((resolve, reject) => {
+			wx.login({
+				success: (res) => {
+					if (res.code) {
+						wx.request({
+							url: `${config.url}/journal/openid`,
+							method: "POST",
+							header: {
+								Key: wx.getStorageSync("key")
+							},
+							data: {
+								code: res.code
+							},
+							success: (resp) => {
+								const data = resp.data as any;
+								if (data.code === 20000) {
+									resolve(data.data);
+								} else {
+									reject(new Error("获取 openId 失败"));
+								}
+							},
+							fail: () => reject(new Error("获取 openId 请求失败"))
+						});
+					} else {
+						reject(new Error("获取登录凭证失败"));
+					}
+				},
+				fail: handleFail
+			});
+		});
+		wx.request({
+			url: `${config.url}/journal/moment/archive`,
+			method: "POST",
+			header: {
+				Key: wx.getStorageSync("key")
+			},
+			data: {
+				type: this.data.type,
+				idea: this.data.idea,
+				createdAt: Date.parse(`${this.data.date} ${this.data.time}`),
+				lat: this.data.location?.lat,
+				lng: this.data.location?.lng,
+				location: this.data.location?.text,
+				pusher: openId,
+				thumbIds: this.data.list.filter(item => item.checked).map(item => item.id)
+			},
+			success: async (resp: any) => {
+				if (resp.data && resp.data.code === 20000) {
+					Events.emit("JOURNAL_REFRESH");
+					wx.showToast({ title: "归档成功", icon: "success" });
+					this.setData({
+						idea: "",
+						list: [],
+						hasChecked: false,
+						isArchiving: false
+					});
+					await Toolkit.sleep(1000);
+					this.fetch();
+					this.toggleArchivePopup();
+				} else {
+					wx.showToast({ title: "归档失败", icon: "error" });
+					this.setData({
+						isArchiving: false
+					});
+				}
+			},
+			fail: handleFail
+		});
+	},
+	allChecked() {
+		this.data.list.forEach(item => item.checked = true);
+		this.setData({
+			list: this.data.list
+		});
+		this.updateHasChecked();
+	},
+	clearChecked() {
+		wx.showModal({
+			title: "提示",
+			content: "确认清空已选照片或视频吗？",
+			confirmText: "清空已选",
+			confirmColor: "#E64340",
+			cancelText: "取消",
+			success: res => {
+				if (res.confirm) {
+					this.data.list.forEach(item => {
+						item.checked = false;
+					})
+					this.setData({
+						list: this.data.list
+					});
+					this.updateHasChecked();
+				}
+			}
+		})
+	},
+	deleteChecked() {
+		wx.showModal({
+			title: "提示",
+			content: "确认删除已选照片或视频吗？",
+			confirmText: "删除已选",
+			confirmColor: "#E64340",
+			cancelText: "取消",
+			success: res => {
+				if (res.confirm) {
+					const selected = this.data.list.filter(item => item.checked);
+					wx.request({
+						url: `${config.url}/journal/moment/delete`,
+						method: "POST",
+						header: {
+							Key: wx.getStorageSync("key")
+						},
+						data: selected.map(item => item.id),
+						success: async (resp: any) => {
+							if (resp.data && resp.data.code === 20000) {
+								wx.showToast({ title: "删除成功", icon: "success" });
+								const list = this.data.list.filter(item => !item.checked);
+								this.setData({
+									list
+								});
+								this.updateHasChecked();
+							}
+						},
+					});
+				}
+			}
+		})
+	}
+})

miniprogram/pages/main/moment/index.wxml

@@ -0,0 +1,141 @@
+<!--pages/main/moment/index.wxml-->
+<view class="custom-navbar">
+	<t-navbar class="custom-navbar" title="瞬间" />
+</view>
+<view class="moment">
+	<view class="tips">
+		<text>由于微信限制，一次只能上传 20 张照片或视频，可以先在此页面分批次将所有照片或视频上传，</text>
+		<text style="color: #F30">记得勾选原图</text>
+		<text>。无需担心重复选择，已上传的文件不会再次上传。上传后有空再挑选归档，归档后此页面不再显示该照片或视频。</text>
+	</view>
+	<view class="action">
+		<view class="line">
+			<t-button
+				class="btn upload"
+				theme="primary"
+				plain="true"
+				disabled="{{isSubmitting}}"
+				bind:tap="uploadMedia"
+			>上传照片/视频</t-button>
+			<t-button
+				class="btn archive"
+				theme="primary"
+				plain="true"
+				bind:tap="toggleArchivePopup"
+				disabled="{{isSubmitting || list.length === 0 || !hasChecked}}"
+			>归档已选</t-button>
+		</view>
+		<view class="line">
+			<t-button
+				class="btn clear"
+				theme="primary"
+				variant="outline"
+				bind:tap="allChecked"
+				disabled="{{isSubmitting || list.length === 0}}"
+			>全选</t-button>
+			<t-button
+				class="btn clear"
+				theme="danger"
+				variant="outline"
+				bind:tap="clearChecked"
+				disabled="{{isSubmitting || list.length === 0 || !hasChecked}}"
+			>清空已选</t-button>
+			<t-button
+				class="btn delete"
+				theme="danger"
+				variant="outline"
+				bind:tap="deleteChecked"
+				disabled="{{isSubmitting || list.length === 0 || !hasChecked}}"
+			>删除已选</t-button>
+		</view>
+	</view>
+	<view wx:if="{{isUploading}}" class="uploading">
+		<progress
+			class="progress"
+			percent="{{uploadProgress}}"
+			stroke-width="6"
+		/>
+		<view class="text">
+			<view>{{uploaded}} / {{uploadTotal}}</view>
+			<view>{{uploadSpeed}}</view>
+		</view>
+	</view>
+	<view class="items">
+		<view class="item" wx:for="{{list}}" wx:key="mongoId">
+			<image
+				class="thumbnail {{item.type === 0 ? 'image' : 'video'}}"
+				src="{{item.thumbUrl}}"
+				mode="widthFix"
+				bind:tap="preview"
+				data-index="{{index}}"
+			></image>
+			<t-checkbox
+				class="checkbox"
+				block="{{true}}"
+				checked="{{item.checked}}"
+				bind:change="onCheckChange"
+				data-index="{{index}}"
+			/>
+			<view wx:if="{{item.checked}}" class="checkbox-fill"></view>
+		</view>
+	</view>
+</view>
+<t-popup
+	class="archive-popup"
+	visible="{{isVisibleArchivePopup}}"
+	placement="bottom"
+	usingCustomNavbar
+	bind:visible-change="onArchivePopupVisibleChange"
+>
+	<view class="container">
+		<view class="header">
+			<t-button
+				class="btn cancel"
+				aria-role="button"
+				bind:tap="toggleArchivePopup"
+				variant="text"
+			>取消</t-button>
+			<view class="title">归档已选项</view>
+			<t-button
+				class="btn confirm"
+				aria-role="button"
+				bind:tap="archiveChecked"
+				variant="text"
+			>确定</t-button>
+		</view>
+		<view class="content">
+			<view class="section">
+				<textarea
+					class="idea"
+					placeholder="那一刻的想法..."
+					model:value="{{idea}}"
+				/>
+			</view>
+			<view class="section type">
+				<text class="label">类型：</text>
+				<t-radio-group bind:change="onChangeArchiveType" default-value="NORMAL" borderless t-class="box">
+					<t-radio class="radio" block="{{false}}" label="日常" value="NORMAL" />
+					<t-radio class="radio" block="{{false}}" label="专拍" value="PORTFOLIO" />
+				</t-radio-group>
+			</view>
+			<view class="section time">
+				<text class="label">时间：</text>
+				<picker class="picker" mode="date" model:value="{{date}}">
+					<view class="picker">
+						{{date}}
+					</view>
+				</picker>
+				<picker class="picker" mode="time" model:value="{{time}}">
+					<view class="picker">
+						{{time}}
+					</view>
+				</picker>
+			</view>
+			<view class="section location">
+				<text class="label">位置：</text>
+				<text wx:if="{{location}}" bind:tap="chooseLocation">{{location.text}}</text>
+				<text wx:else bind:tap="chooseLocation">选择位置..</text>
+			</view>
+		</view>
+	</view>
+</t-popup>