refactor travel

miniprogram/pages/main/travel-location-editor/index.ts

@@ -0,0 +1,501 @@
+// pages/main/travel-location-editor/index.ts
+
+import { Network, WechatMediaItem } from "../../../utils/Network";
+import { TravelLocationApi } from "../../../api/TravelLocationApi";
+import { TravelLocationType } from "../../../types/Travel";
+import { MediaAttachExt, MediaAttachType } from "../../../types/Attachment";
+import config from "../../../config/index";
+import { MediaItem, MediaItemType } from "../../../types/UI";
+
+interface TravelLocationEditorData {
+	/** 模式：create 或 edit */
+	mode: "create" | "edit";
+	/** 旅行地点 ID（编辑模式） */
+	id?: number;
+	/** 关联的旅行计划 ID */
+	travelId: number;
+	/** 地点类型 */
+	type: TravelLocationType;
+	/** 标题 */
+	title: string;
+	/** 说明 */
+	description: string;
+	/** 位置描述 */
+	location: string;
+	/** 纬度 */
+	lat: number;
+	/** 经度 */
+	lng: number;
+	/** 费用 */
+	amount: number;
+	/** 是否需要身份证 */
+	requireIdCard: boolean;
+	/** 必要评分 */
+	score: number;
+	/** 媒体列表（创建和编辑模式使用） */
+	mediaList: (MediaItem | WechatMediaItem)[];
+	/** 新媒体列表（编辑模式使用） */
+	newMediaList: WechatMediaItem[];
+	/** 是否正在加载（编辑模式） */
+	isLoading: boolean;
+	/** 是否正在保存 */
+	isSaving: boolean;
+	/** 是否正在上传 */
+	isUploading: boolean;
+	/** 上传进度信息 */
+	uploadInfo: string;
+	/** 地点类型选项 */
+	locationTypes: { label: string; value: TravelLocationType }[];
+	/** 地点类型选中索引 */
+	locationTypeIndex: number;
+	/** 媒体类型枚举 */
+	mediaItemTypeEnum: any;
+}
+
+Page({
+	data: <TravelLocationEditorData>{
+		mode: "create",
+		id: undefined,
+		travelId: 0,
+		type: TravelLocationType.ATTRACTION,
+		title: "",
+		description: "",
+		location: "",
+		lat: 0,
+		lng: 0,
+		amount: 0,
+		requireIdCard: false,
+		score: 3,
+		mediaList: [],
+		newMediaList: [],
+		isLoading: false,
+		isSaving: false,
+		isUploading: false,
+		uploadInfo: "",
+		mediaItemTypeEnum: {
+			...MediaItemType
+		},
+		locationTypes: [
+			{ label: "景点", value: TravelLocationType.ATTRACTION },
+			{ label: "酒店", value: TravelLocationType.HOTEL },
+			{ label: "餐厅", value: TravelLocationType.RESTAURANT },
+			{ label: "交通站点", value: TravelLocationType.TRANSPORT },
+			{ label: "购物", value: TravelLocationType.SHOPPING },
+			{ label: "其他", value: TravelLocationType.OTHER }
+		],
+		locationTypeIndex: 0
+	},
+
+	onLoad(options: any) {
+		// 获取 travelId（必填）
+		const travelId = options.travelId ? parseInt(options.travelId) : 0;
+		if (!travelId) {
+			wx.showToast({
+				title: "缺少旅行计划 ID",
+				icon: "error"
+			});
+			setTimeout(() => {
+				wx.navigateBack();
+			}, 1500);
+			return;
+		}
+
+		// 判断模式：有 ID 是编辑，无 ID 是创建
+		const id = options.id ? parseInt(options.id) : undefined;
+
+		if (id) {
+			// 编辑模式
+			this.setData({
+				mode: "edit",
+				id,
+				travelId,
+				isLoading: true
+			});
+			this.loadLocationDetail(id);
+		} else {
+			// 创建模式
+			this.setData({
+				mode: "create",
+				travelId,
+				isLoading: false
+			});
+		}
+	},
+
+	/** 加载地点详情（编辑模式） */
+	async loadLocationDetail(id: number) {
+		wx.showLoading({ title: "加载中...", mask: true });
+
+		try {
+			const location = await TravelLocationApi.getDetail(id);
+
+			// 计算地点类型索引
+			const type = location.type || TravelLocationType.ATTRACTION;
+			const locationTypeIndex = this.data.locationTypes.findIndex(
+				item => item.value === type
+			);
+
+			const items = location.items || [];
+			const thumbItems = items.filter((item) => item.attachType === MediaAttachType.THUMB);
+
+			const mediaList: 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;
+			});
+
+			this.setData({
+				type,
+				locationTypeIndex: locationTypeIndex >= 0 ? locationTypeIndex : 0,
+				title: location.title || "",
+				description: location.description || "",
+				location: location.location || "",
+				lat: location.lat || 0,
+				lng: location.lng || 0,
+				amount: location.amount || 0,
+				requireIdCard: location.requireIdCard || false,
+				score: location.score !== undefined ? location.score : 3,
+				mediaList,
+				isLoading: false
+			});
+		} catch (error) {
+			wx.showToast({
+				title: "加载失败",
+				icon: "error"
+			});
+			setTimeout(() => {
+				wx.navigateBack();
+			}, 1500);
+		} finally {
+			wx.hideLoading();
+		}
+	},
+
+	/** 改变地点类型 */
+	onChangeLocationType(e: any) {
+		const index = e.detail.value;
+		this.setData({
+			locationTypeIndex: index,
+			type: this.data.locationTypes[index].value
+		});
+	},
+
+	/** 改变是否需要身份证 */
+	onChangeRequireIdCard(e: any) {
+		this.setData({ requireIdCard: e.detail.value });
+	},
+
+	/** 改变评分 */
+	onChangeScore(e: any) {
+		this.setData({ score: e.detail.value });
+	},
+
+	/** 选择位置 */
+	chooseLocation() {
+		wx.chooseLocation({
+			success: (res) => {
+				const locationName = res.address || res.name;
+				const updateData: any = {
+					location: locationName,
+					lat: res.latitude,
+					lng: res.longitude
+				};
+
+				// 如果标题为空，使用选择的地点名称作为标题
+				if (!this.data.title.trim()) {
+					updateData.title = res.name || locationName;
+				}
+
+				this.setData(updateData);
+			},
+			fail: (err) => {
+				if (err.errMsg.includes("auth deny")) {
+					wx.showToast({
+						title: "请授权位置权限",
+						icon: "error"
+					});
+				}
+			}
+		});
+	},
+
+	/** 添加媒体 */
+	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 newMedia = 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 WechatMediaItem;
+				});
+				if (that.data.mode === "create") {
+					that.setData({
+						mediaList: [...that.data.mediaList, ...newMedia]
+					});
+				} else {
+					that.setData({
+						newMediaList: [...that.data.newMediaList, ...newMedia]
+					});
+				}
+				wx.hideLoading();
+			}
+		});
+	},
+
+	/** 删除媒体（创建模式） */
+	deleteMedia(e: any) {
+		const { index } = e.currentTarget.dataset;
+		const mediaList = this.data.mediaList;
+		mediaList.splice(index, 1);
+		this.setData({ mediaList });
+	},
+
+	/** 删除新媒体（编辑模式） */
+	deleteNewMedia(e: any) {
+		const { index } = e.currentTarget.dataset;
+		const newMediaList = this.data.newMediaList;
+		newMediaList.splice(index, 1);
+		this.setData({ newMediaList });
+	},
+
+	/** 删除已有媒体（编辑模式） */
+	deleteExistingMedia(e: any) {
+		const { index } = e.currentTarget.dataset;
+		const existingMedia = this.data.mediaList;
+		existingMedia.splice(index, 1);
+		this.setData({ existingMedia });
+	},
+
+	/** 预览媒体 */
+	preview(e: WechatMiniprogram.BaseEvent) {
+		const isNewMedia = e.currentTarget.dataset.newMedia;
+		const index = e.currentTarget.dataset.index;
+
+		if (this.data.mode === "create") {
+			// 创建模式：只有 mediaList
+			const sources = (this.data.mediaList as WechatMediaItem[]).map(item => ({
+				url: item.path,
+				type: MediaItemType[item.type].toLowerCase()
+			}));
+
+			const total = sources.length;
+			const startIndex = Math.max(0, index - 25);
+			const endIndex = Math.min(total, startIndex + 50);
+			const newCurrentIndex = index - startIndex;
+
+			wx.previewMedia({
+				current: newCurrentIndex,
+				sources: sources.slice(startIndex, endIndex) as WechatMiniprogram.MediaSource[]
+			});
+		} else {
+			// 编辑模式：mediaList + newMediaList
+			const sources = (this.data.mediaList as MediaItem[]).map(item => ({
+				url: item.sourceURL,
+				type: MediaItemType[item.type].toLowerCase()
+			}));
+			const newSources = this.data.newMediaList.map(item => ({
+				url: item.path,
+				type: MediaItemType[item.type].toLowerCase()
+			}));
+			const allSources = [...sources, ...newSources];
+			const itemIndex = isNewMedia ? this.data.mediaList.length + index : index;
+			const total = allSources.length;
+
+			const startIndex = Math.max(0, itemIndex - 25);
+			const endIndex = Math.min(total, startIndex + 50);
+			const newCurrentIndex = itemIndex - startIndex;
+
+			wx.previewMedia({
+				current: newCurrentIndex,
+				sources: allSources.slice(startIndex, endIndex) as WechatMiniprogram.MediaSource[]
+			});
+		}
+	},
+
+	/** 取消 */
+	cancel() {
+		wx.navigateBack();
+	},
+
+	/** 删除地点 */
+	deleteLocation() {
+		wx.showModal({
+			title: "确认删除",
+			content: "确定要删除这个地点吗？删除后无法恢复。",
+			success: async (res) => {
+				if (res.confirm && this.data.id) {
+					try {
+						await TravelLocationApi.delete(this.data.id);
+						wx.showToast({
+							title: "删除成功",
+							icon: "success"
+						});
+						setTimeout(() => {
+							wx.navigateBack();
+						}, 1000);
+					} catch (error) {
+						wx.showToast({
+							title: "删除失败",
+							icon: "error"
+						});
+					}
+				}
+			}
+		});
+	},
+
+	/** 提交/保存 */
+	submit() {
+		// 验证必填字段
+		if (!this.data.title.trim()) {
+			wx.showToast({
+				title: "请输入标题",
+				icon: "error"
+			});
+			return;
+		}
+
+		if (!this.data.location || !this.data.lat || !this.data.lng) {
+			wx.showToast({
+				title: "请选择位置",
+				icon: "error"
+			});
+			return;
+		}
+
+		if (this.data.mode === "create") {
+			this.createLocation();
+		} else {
+			this.updateLocation();
+		}
+	},
+
+	/** 创建地点 */
+	async createLocation() {
+		this.setData({ isSaving: true });
+
+		try {
+			// 上传媒体文件
+			this.setData({
+				isUploading: true,
+				uploadInfo: "正在上传 0%"
+			});
+			const tempFileIds = await Network.uploadFiles({
+				mediaList: this.data.mediaList as WechatMediaItem[],
+				onProgress: ({ percent }) => {
+					this.setData({
+						uploadInfo: `正在上传 ${percent}%`
+					});
+				}
+			});
+			this.setData({
+				isUploading: false,
+				uploadInfo: ""
+			});
+
+			// 创建地点
+			await TravelLocationApi.create({
+				travelId: this.data.travelId,
+				type: this.data.type,
+				title: this.data.title.trim(),
+				description: this.data.description.trim(),
+				location: this.data.location,
+				lat: this.data.lat,
+				lng: this.data.lng,
+				amount: this.data.amount,
+				requireIdCard: this.data.requireIdCard,
+				score: this.data.score,
+				tempFileIds
+			});
+			wx.showToast({
+				title: "创建成功",
+				icon: "success"
+			});
+			setTimeout(() => {
+				wx.navigateBack();
+			}, 1000);
+		} catch (error) {
+			this.setData({
+				isSaving: false,
+				isUploading: false,
+				uploadInfo: ""
+			});
+		}
+	},
+
+	/** 更新地点 */
+	async updateLocation() {
+		this.setData({ isSaving: true });
+		try {
+			// 保留的附件 ID 列表
+			const attachmentIds = (this.data.mediaList as MediaItem[]).map(item => item.attachmentId);
+			// 上传新媒体文件
+			this.setData({
+				isUploading: true,
+				uploadInfo: "正在上传 0%"
+			});
+			const tempFileIds = await Network.uploadFiles({
+				mediaList: this.data.newMediaList,
+				onProgress: ({ percent }) => {
+					this.setData({
+						uploadInfo: `正在上传 ${percent}%`
+					});
+				}
+			});
+			this.setData({
+				isUploading: false,
+				uploadInfo: ""
+			});
+			// 更新地点
+			await TravelLocationApi.update({
+				id: this.data.id!,
+				travelId: this.data.travelId,
+				type: this.data.type,
+				title: this.data.title.trim(),
+				description: this.data.description.trim(),
+				location: this.data.location,
+				lat: this.data.lat,
+				lng: this.data.lng,
+				amount: this.data.amount,
+				requireIdCard: this.data.requireIdCard,
+				score: this.data.score,
+				attachmentIds,
+				tempFileIds
+			});
+			wx.showToast({
+				title: "保存成功",
+				icon: "success"
+			});
+			setTimeout(() => {
+				wx.navigateBack();
+			}, 1000);
+		} catch (error) {
+			this.setData({
+				isSaving: false,
+				isUploading: false,
+				uploadInfo: ""
+			});
+		}
+	}
+});