init project

miniprogram/pages/main/journal-creater/index.json

@@ -0,0 +1,7 @@
+{
+	"component": true,
+	"usingComponents": {
+		"t-button": "tdesign-miniprogram/button/button",
+		"t-navbar": "tdesign-miniprogram/navbar/navbar"
+    }
+}

miniprogram/pages/main/journal-creater/index.less

@@ -0,0 +1,101 @@
+/* pages/main/journal-creater/index.wxss */
+.container {
+	height: 100vh;
+	
+	.content {
+		width: calc(100% - 64px);
+		padding: 0 32px 32px 32px;
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+
+		.label {
+			color: #777;
+		}
+
+		.section {
+			width: 100%;
+			margin-top: 1.5rem;
+
+			&.time {
+				display: flex;
+				
+				.picker {
+					margin-right: .25rem;
+				}
+			}
+
+			&.media {
+
+				.ctrl {
+					display: flex;
+
+					.clear {
+						width: 100px;
+						padding-left: 0;
+						padding-right: 0;
+					}
+				}
+
+				.gallery {
+					gap: 10rpx;
+					display: grid;
+					margin-top: 1rem;
+					grid-template-columns: repeat(3, 1fr);
+
+					.item {
+						height: 200rpx;
+						position: relative;
+						overflow: hidden;
+						background: #FFF;
+						box-shadow: 1px 1px 6px rgba(0, 0, 0, .1);
+						border-radius: 2rpx;
+						
+						.thumbnail {
+							height: 200rpx;
+							display: block;
+						}
+						
+						.video-container {
+							position: relative;
+							
+
+							.play-icon {
+								top: 50%;
+								left: 50%;
+								width: 60rpx;
+								height: 60rpx;
+								z-index: 2;
+								position: absolute;
+								transform: translate(-50%, -50%);
+								pointer-events: none;
+							}
+						}
+							
+
+						.delete {
+							top: 10rpx;
+							right: 10rpx;
+							width: 40rpx;
+							height: 40rpx;
+							z-index: 3;
+							padding: 5rpx;
+							position: absolute;
+							background: rgba(0, 0, 0, 0.5);
+							border-radius: 50%;
+						}
+					}
+				}
+			}
+		}
+
+		.progress {
+			width: 100%;
+		}
+
+		.submit {
+			width: 10rem;
+			margin-top: 1rem;
+		}
+	}
+}

miniprogram/pages/main/journal-creater/index.ts

@@ -0,0 +1,306 @@
+// pages/main/journal-creater/index.ts
+import Events from "../../../utils/Events";
+import Time from "../../../utils/Time";
+import Toolkit from "../../../utils/Toolkit";
+import config from "../../../config/index";
+
+enum MediaItemType {
+	IMAGE,
+	VIDEO
+}
+
+type MediaItem = {
+	type: MediaItemType;
+	path: string;
+	thumbPath: string;
+	size: number;
+	duration: number | undefined;
+	raw: any;
+}
+
+export type Location = {
+	lat: number;
+	lng: number;
+	text?: string;
+}
+
+interface JournalEditorData {
+	idea: string;
+	date: string;
+	time: string;
+	mediaList: MediaItem[];
+	location?: Location;
+	qqMapSDK?: any;
+	isAuthLocation: boolean;
+}
+
+Page({
+	data: <JournalEditorData>{
+		idea: "",
+		date: "2025-06-28",
+		time: "16:00",
+		mediaList: [],
+		location: undefined,
+		submitText: "提交",
+		isSubmitting: false,
+		submitProgress: 0,
+		mediaItemTypeEnum: {
+			...MediaItemType
+		},
+		isAuthLocation: false
+	},
+	async onLoad() {
+		// 授权定位
+		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({
+			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
+			}
+		});
+	},
+	addMedia() {
+		const that = this;
+		wx.chooseMedia({
+			mediaType: ["mix"],
+			sourceType: ["album", "camera"],
+			camera: "back",
+			success(res) {
+				wx.showLoading({
+					title: "加载中..",
+					mask: true
+				})
+				const tempFiles = res.tempFiles;
+				const mediaList = tempFiles.map(item => {
+					return {
+						type: (<any>MediaItemType)[item.fileType.toUpperCase()],
+						path: item.tempFilePath,
+						thumbPath: item.thumbTempFilePath,
+						size: item.size,
+						duration: item.duration,
+						raw: item
+					} as MediaItem;
+				});
+				that.setData({
+					mediaList: [...that.data.mediaList, ...mediaList]
+				});
+				wx.hideLoading();
+			}
+		})
+	},
+	clearMedia() {
+		wx.showModal({
+			title: "提示",
+			content: "确认清空已选照片或视频吗？",
+			confirmText: "清空",
+			confirmColor: "#E64340",
+			cancelText: "取消",
+			success: res => {
+				if (res.confirm) {
+					this.setData({
+						mediaList: []
+					});
+				}
+			}
+		})
+	},
+	preview(e: WechatMiniprogram.BaseEvent) {
+		wx.previewMedia({
+			current: e.currentTarget.dataset.index,
+			sources: this.data.mediaList.map(item => {
+				return {
+					url: item.path,
+					type: MediaItemType[item.type].toLowerCase()
+				} as WechatMiniprogram.MediaSource;
+			})
+		});
+	},
+	deleteMedia(e: WechatMiniprogram.BaseEvent) {
+		const index = e.currentTarget.dataset.index;
+		const mediaList = [...this.data.mediaList];
+		mediaList.splice(index, 1);
+		this.setData({
+			mediaList
+		});
+	},
+	cancel() {
+		wx.switchTab({
+			url: "/pages/main/journal/index",
+		})
+	},
+	submit() {
+		const handleFail = () => {
+			wx.showToast({ title: "上传失败", icon: "error" });
+			this.setData({
+				submitText: "提交",
+				isSubmitting: false
+			})
+		};
+
+		this.setData({
+			submitText: "正在提交..",
+			isSubmitting: true
+		})
+
+		// 获取 openId
+		const getOpenId = 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: () => reject(new Error("登录失败"))
+			});
+		});
+		// 文件上传
+		const uploadFiles = new Promise<string[]>((resolve, reject) => {
+			const mediaList = this.data.mediaList || [];
+			const total = mediaList.length;
+			let completed = 0;
+
+			if (total === 0) {
+				resolve([]);
+				return;
+			}
+			// 更新进度初始状态
+			this.setData({
+				submitProgress: 0,
+			});
+
+			const uploadPromises = mediaList.map((item) => {
+				return new Promise<string>((uploadResolve, uploadReject) => {
+					wx.uploadFile({
+						url: `${config.url}/temp/file/upload`,
+						filePath: item.path,
+						name: "file",
+						success: (resp) => {
+							const result = JSON.parse(resp.data);
+							if (result && result.code === 20000) {
+								completed++;
+								// 更新进度
+								this.setData({
+									submitProgress: (completed / total),
+								});
+								uploadResolve(result.data[0].id);
+							} else {
+								uploadReject(new Error(`文件上传失败: ${result?.message || '未知错误'}`));
+							}
+						},
+						fail: (err) => uploadReject(new Error(`文件上传失败: ${err.errMsg}`))
+					});
+				});
+			});
+			// 并行执行所有文件上传
+			Promise.all(uploadPromises).then((tempFileIds) => {
+				this.setData({
+					submitProgress: 1,
+				});
+				resolve(tempFileIds);
+			}).catch(reject);
+		});
+		// 并行执行获取 openId 和文件上传
+		Promise.all([getOpenId, uploadFiles]).then(([openId, tempFileIds]) => {
+			wx.request({
+				url: `${config.url}/journal/create`,
+				method: "POST",
+				header: {
+					Key: wx.getStorageSync("key")
+				},
+				data: {
+					type: "NORMAL",
+					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,
+					tempFileIds
+				},
+				success: async (resp: any) => {
+					Events.emit("JOURNAL_REFRESH");
+					wx.showToast({ title: "提交成功", icon: "success" });
+					this.setData({
+						idea: "",
+						mediaList: [],
+						submitText: "提交",
+						isSubmitting: false,
+					});
+					await Toolkit.sleep(1000);
+					wx.switchTab({
+						url: "/pages/main/journal/index",
+					})
+				},
+				fail: handleFail
+			});
+		}).catch(handleFail);
+	}
+});

miniprogram/pages/main/journal-creater/index.wxml

@@ -0,0 +1,104 @@
+<!--pages/main/journal-creater/index.wxml-->
+<t-navbar title="新纪录">
+	<text slot="left" bindtap="cancel">取消</text>
+</t-navbar>
+<scroll-view
+	class="container"
+	type="custom"
+	scroll-y
+	show-scrollbar="{{false}}"
+	scroll-into-view="{{intoView}}"
+>
+	<view class="content">
+		<view class="section">
+			<textarea
+				class="idea"
+				placeholder="这一刻的想法..."
+				model:value="{{idea}}"
+			/>
+		</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 class="section media">
+			<view class="ctrl">
+				<t-button
+					class="select"
+					theme="primary"
+					plain="true"
+					disabled="{{isSubmitting}}"
+					bind:tap="addMedia"
+				>选择照片/视频</t-button>
+				<t-button
+					class="clear"
+					theme="danger"
+					variant="outline"
+					disabled="{{isSubmitting}}"
+					bind:tap="clearMedia"
+					disabled="{{mediaList.length === 0}}"
+				>清空已选</t-button>
+			</view>
+			<view class="gallery">
+				<block wx:for="{{mediaList}}" wx:key="index">
+					<view class="item">
+						<!-- 图片 -->
+						<image
+							wx:if="{{item.type === mediaItemTypeEnum.IMAGE}}"
+							src="{{item.path}}"
+							class="thumbnail"
+							mode="aspectFill"
+							bindtap="preview"
+							data-index="{{index}}"
+						></image>
+						<!-- 视频 -->
+						<view wx:if="{{item.type === mediaItemTypeEnum.VIDEO}}" class="video-container">
+							<image
+								src="{{item.thumbPath}}"
+								class="thumbnail"
+								mode="aspectFill"
+								bindtap="preview"
+								data-index="{{index}}"
+							></image>
+							<image class="play-icon" src="/assets/icon/play.png"></image>
+						</view>
+						<!-- 删除 -->
+						<image
+							src="/assets/icon/delete.png"
+							class="delete"
+							bindtap="deleteMedia"
+							data-index="{{index}}"
+						></image>
+					</view>
+				</block>
+			</view>
+		</view>
+		<progress
+			wx:if="{{isSubmitting}}"
+			class="progress"
+			percent="{{submitProgress.toFixed(2) * 100}}"
+			show-info
+			stroke-width="4"
+		/>
+		<t-button
+			class="submit"
+			theme="primary"
+			bind:tap="submit"
+			disabled="{{(!idea && mediaList.length === 0) || isSubmitting}}"
+		>{{submitText}}</t-button>
+	</view>
+</scroll-view>