xydata-tools-uniapp 1.0.0

package/dist/components/uni-app/media-picker/media-picker.vue

@@ -0,0 +1,1645 @@
+<template>
+	<view class="media-picker-wrapper">
+		<!-- ==================== 编辑模式 ==================== -->
+		<view class="media-picker-box" v-if="!readonly">
+			<!-- 垂直布局：上传按钮在媒体区域下方 -->
+			<view v-if="actualButtonPosition === 'vertical'" :class="['vertical-layout']">
+				<!-- 图片区域 -->
+				<view v-if="enableImage && showFileList" class="media-section">
+					<shmily-drag-media
+						v-if="imageFileList.length > 0"
+						v-model="imageUrls"
+						:number="imageLimit"
+						:cols="cols"
+						:imageWidth="itemWidth"
+						:padding="10"
+						:borderRadius="itemBorderRadius"
+						:draggable="draggable"
+						moveType="image"
+						@input="handleImageDragChange"
+					>
+					</shmily-drag-media>
+				</view>
+
+				<!-- 视频区域 -->
+				<view v-if="enableVideo && showFileList" class="media-section" :style="{ marginTop: enableImage && videoFileList.length > 0 ? '20rpx' : '0' }">
+					<shmily-drag-media
+						v-if="videoFileList.length > 0"
+						v-model="videoUrls"
+						:number="videoLimit"
+						:cols="cols"
+						:imageWidth="itemWidth"
+						:padding="10"
+						:borderRadius="itemBorderRadius"
+						:draggable="draggable"
+						moveType="video"
+						@input="handleVideoDragChange"
+						@videoClick="handleVideoItemClick"
+					>
+					</shmily-drag-media>
+				</view>
+
+				<!-- 上传按钮区域（both 模式时并排显示） -->
+				<view class="upload-buttons-row">
+					<!-- 图片上传按钮 -->
+					<view v-if="enableImage" class="upload-button-wrapper">
+						<slot name="image-upload-button" :select="selectAndUploadImage" :limit="imageLimit" :count="imageFileList.length">
+							<view
+								class="upload-btn-vertical"
+								:style="{ borderRadius: itemBorderRadius + 'rpx' }"
+								v-if="imageFileList.length < imageLimit"
+								@click="selectAndUploadImage"
+							>
+								<image :src="imageUploadIcon" class="upload-icon"></image>
+								<view class="upload-text">{{ imageButtonTitle }}</view>
+							</view>
+						</slot>
+					</view>
+
+					<!-- 视频上传按钮 -->
+					<view v-if="enableVideo" class="upload-button-wrapper">
+						<slot name="video-upload-button" :select="selectAndUploadVideo" :limit="videoLimit" :count="videoFileList.length">
+							<view
+								class="upload-btn-vertical"
+								:style="{ borderRadius: itemBorderRadius + 'rpx' }"
+								v-if="videoFileList.length < videoLimit"
+								@click="selectAndUploadVideo"
+							>
+								<image :src="videoUploadIcon" class="upload-icon"></image>
+								<view class="upload-text">{{ videoButtonTitle }}</view>
+							</view>
+						</slot>
+					</view>
+				</view>
+			</view>
+
+			<!-- 水平布局：上传按钮跟随媒体（仅单一媒体类型时使用） -->
+			<view v-else class="horizontal-layout">
+				<!-- 图片水平布局 -->
+				<shmily-drag-media
+					v-if="enableImage && !enableVideo && showFileList"
+					v-model="imageUrls"
+					:number="imageLimit"
+					:cols="cols"
+					:imageWidth="itemWidth"
+					:padding="10"
+					:borderRadius="itemBorderRadius"
+					:align="align"
+					:draggable="draggable"
+					:enableAddButton="true"
+					moveType="image"
+					@input="handleImageDragChange"
+					@add-click="selectAndUploadImage"
+				>
+					<template #add-button>
+						<slot name="image-upload-button" :select="selectAndUploadImage" :limit="imageLimit" :count="imageFileList.length">
+							<view class="drag-upload-btn" @click.stop="selectAndUploadImage">
+								<image :src="imageUploadIcon" class="upload-icon" :style="dragIconStyle"></image>
+								<view class="upload-text" :style="dragTextStyle">{{ imageButtonTitle }} </view>
+							</view>
+						</slot>
+					</template>
+				</shmily-drag-media>
+
+				<!-- 视频水平布局 -->
+				<shmily-drag-media
+					v-else-if="enableVideo && !enableImage && showFileList"
+					v-model="videoUrls"
+					:number="videoLimit"
+					:cols="cols"
+					:imageWidth="itemWidth"
+					:padding="10"
+					:borderRadius="itemBorderRadius"
+					:align="align"
+					:draggable="draggable"
+					:enableAddButton="true"
+					moveType="video"
+					@input="handleVideoDragChange"
+					@videoClick="handleVideoItemClick"
+				>
+					<template #add-button>
+						<slot name="video-upload-button" :select="selectAndUploadVideo" :limit="videoLimit" :count="videoFileList.length">
+							<view class="drag-upload-btn" @click="selectAndUploadVideo">
+								<image :src="videoUploadIcon" class="upload-icon" :style="dragIconStyle"></image>
+								<view class="upload-text" :style="dragTextStyle">{{ videoButtonTitle }} </view>
+							</view>
+						</slot>
+					</template>
+				</shmily-drag-media>
+			</view>
+		</view>
+
+		<!-- ==================== 只读模式（混合展示图片和视频） ==================== -->
+		<block v-else-if="allFileList.length && showFileList">
+			<view class="readonly-grid" :class="{ 'align-right': align === 'right' && itemWidth > 0 }" :style="readonlyGridStyle">
+				<view
+					v-for="(file, i) in readonlyDisplayList"
+					:key="i"
+					:style="{ borderRadius: itemBorderRadius + 'rpx' }"
+					:class="['readonly-grid-item', { 'placeholder-item': file.type === 'placeholder' }, { 'filter-avatar': file.type !== 'placeholder' && isLastRealItem(i) }]"
+					:data-count="file.type !== 'placeholder' && isLastRealItem(i) ? '+' + (allFileList.length - maxShowCount) : ''"
+					@click="handleReadonlyItemClick(i, file)"
+				>
+					<!-- 占位元素（不显示任何内容） -->
+					<view v-if="file.type === 'placeholder'" class="placeholder-content"></view>
+
+					<!-- 图片 -->
+					<template v-else>
+						<image
+							v-if="file.type === 'image'"
+							:src="lazyLoadImageSrcs[i]"
+							mode="aspectFill"
+							:style="{ borderRadius: itemBorderRadius + 'rpx' }"
+							:id="componentId + '-imgview-' + i"
+							@load="onMediaLoad('readonly-' + i)"
+							@error="onMediaError('readonly-' + i)"
+						>
+						</image>
+
+						<!-- 视频 -->
+						<video
+							v-else-if="file.type === 'video'"
+							:id="'readonlyVideo' + i"
+							class="readonly-video"
+							:src="file.url"
+							:controls="false"
+							:show-center-play-btn="false"
+							:style="{ borderRadius: itemBorderRadius + 'rpx' }"
+							@loadedmetadata="onMediaLoad('readonly-' + i)"
+							@error="onMediaError('readonly-' + i)"
+						></video>
+
+						<!-- 视频播放图标覆盖层 -->
+						<view v-if="file.type === 'video'" class="video-play-overlay">
+							<image class="play-icon" :src="playIcon"></image>
+						</view>
+
+						<!-- 加载动画遮罩 -->
+						<view class="media-loading-overlay" v-if="!mediaLoadingStatus['readonly-' + i]">
+							<view class="loading-spinner"></view>
+						</view>
+					</template>
+				</view>
+			</view>
+		</block>
+
+		<!-- ==================== 自定义弹窗展示所有媒体（从底部滑出） ==================== -->
+		<view v-if="popupVisible" class="popup-overlay" @click="closePopup" @touchmove.stop.prevent :class="{ 'popup-overlay-show': popupAnimated }">
+			<view class="popup-content" @click.stop @touchmove.stop :class="{ 'popup-content-show': popupAnimated }">
+				<view class="popup-header">
+					<view class="popup-title">{{ popupTitle }}</view>
+					<view class="popup-close" @click="closePopup">✕</view>
+				</view>
+				<scroll-view class="popup-scroll" scroll-y :show-scrollbar="false">
+					<view class="popup-grid" :style="popupGridStyle">
+						<view v-for="(file, i) in allFileList" :key="i" class="popup-grid-item" @click="handlePopupItemClick(file, i)">
+							<!-- 图片 -->
+							<image
+								v-if="file.type === 'image'"
+								:src="popupLazyLoadImageSrcs[i]"
+								mode="aspectFill"
+								:style="{ borderRadius: itemBorderRadius + 'rpx' }"
+								:id="componentId + '-popup-imgview-' + i"
+								@load="onMediaLoad('popup-' + i)"
+								@error="onMediaError('popup-' + i)"
+							>
+							</image>
+
+							<!-- 视频 -->
+							<video
+								v-else-if="file.type === 'video'"
+								class="popup-video"
+								:src="file.url"
+								:controls="false"
+								:show-center-play-btn="false"
+								:style="{ borderRadius: itemBorderRadius + 'rpx' }"
+								@loadedmetadata="onMediaLoad('popup-' + i)"
+								@error="onMediaError('popup-' + i)"
+							></video>
+
+							<!-- 视频播放图标 -->
+							<view v-if="file.type === 'video'" class="video-play-overlay">
+								<image class="play-icon-small" :src="playIcon"></image>
+							</view>
+
+							<!-- 加载动画遮罩 -->
+							<view class="media-loading-overlay" v-if="!mediaLoadingStatus['popup-' + i]">
+								<view class="loading-spinner"></view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+
+		<!-- 专门用于全屏预览的 video，隐藏在视图外 -->
+		<video
+			v-if="enableVideo"
+			id="fullscreenPreviewVideo"
+			class="fullscreen-preview-video"
+			:src="fullscreenVideoSrc"
+			:controls="true"
+			:show-center-play-btn="true"
+			object-fit="contain"
+			style="position: fixed; left: -9999px; top: -9999px; width: 1px; height: 1px"
+		></video>
+
+		<!-- 隐藏的水印绘制 canvas（仅非 H5 平台需要，固定定位移出屏幕而非 display:none，避免小程序无法绘制） -->
+		<!-- #ifndef H5 -->
+		<canvas
+			v-if="watermarkCanvasId"
+			:canvas-id="watermarkCanvasId"
+			:id="watermarkCanvasId"
+			class="watermark-canvas"
+			:style="{ width: watermarkCanvasWidth + 'px', height: watermarkCanvasHeight + 'px' }"
+		></canvas>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+import shmilyDragMedia from './shmily-drag-media.vue';
+import defaultAddPicBg from '../../../assets/defaultAddPicBg.png';
+import uploadVideoBg from '../../../assets/uploadVideoBg.png';
+import videoPlay from '../../../assets/videoPlay.png';
+import { applyImageWatermarkToPath, resolveWatermarkError } from '../watermark/index.js';
+import { normalizeWatermarkConfig } from '../../../utils/watermark-shared.js';
+
+export default {
+	name: 'MediaPicker',
+	components: {
+		shmilyDragMedia
+	},
+	props: {
+		// ==================== 通用配置 ====================
+		/** 上传类型: 'image' - 仅图片, 'video' - 仅视频, 'both' - 图片+视频（必填） */
+		uploadType: {
+			type: String,
+			default: 'image',
+			validator: (value) => ['image', 'video', 'both'].includes(value)
+		},
+		/** 上传地址 */
+		uploadUrl: {
+			type: String,
+			default: ''
+		},
+		/** 只读模式 */
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		/** 上传按钮位置: 'vertical' - 垂直布局, 'horizontal' - 水平布局（仅单一媒体类型时有效） */
+		buttonPosition: {
+			type: String,
+			default: 'horizontal',
+			validator: (value) => ['vertical', 'horizontal'].includes(value)
+		},
+		/** 媒体列数，默认3列 */
+		cols: {
+			type: Number,
+			default: 3
+		},
+		/** 媒体项固定宽度（单位 rpx），如果设置则 cols 无效 */
+		itemWidth: {
+			type: Number,
+			default: 0
+		},
+		/** 媒体项圆角大小（单位 rpx） */
+		itemBorderRadius: {
+			type: Number,
+			default: 16
+		},
+		/** 只读模式下最多显示的媒体数量，超过则显示 +N */
+		maxShowCount: {
+			type: Number,
+			default: 9
+		},
+		/** 对齐方式：'left' 从左往右排列，'right' 从右往左排列  buttonPosition为'horizontal'下有效*/
+		align: {
+			type: String,
+			default: 'left',
+			validator: (value) => ['left', 'right'].includes(value)
+		},
+		/** 弹窗标题 */
+		popupTitle: {
+			type: String,
+			default: '全部媒体'
+		},
+		/** 是否可以拖拽排序（仅编辑模式有效） */
+		draggable: {
+			type: Boolean,
+			default: true
+		},
+		/** 是否展示文件列表 */
+		showFileList: {
+			type: Boolean,
+			default: true
+		},
+
+		// ==================== 图片配置 ====================
+		/** 图片文件列表 */
+		imageFiles: {
+			type: Array,
+			default: () => []
+		},
+		/** 图片最大上传数量限制 */
+		imageLimit: {
+			type: Number,
+			default: 9
+		},
+		/** 图片上传按钮图标 */
+		imageButtonIcon: {
+			type: String,
+			default: ''
+		},
+		/** 图片上传按钮文字 */
+		imageButtonTitle: {
+			type: String,
+			default: '上传图片'
+		},
+		/** 图片选择来源：['album', 'camera'] */
+		imageSourceType: {
+			type: Array,
+			default: () => ['album', 'camera']
+		},
+		/** 图片最大大小限制（单位：MB），0 表示不限制 */
+		imageMaxSize: {
+			type: Number,
+			default: 0
+		},
+		/** 图片上传前水印配置（与 PC 端 UploadFile 的 watermark 参数一致），默认不启用 */
+		watermark: {
+			type: Object,
+			default: null
+		},
+
+		// ==================== 视频配置 ====================
+		/** 视频文件列表 */
+		videoFiles: {
+			type: Array,
+			default: () => []
+		},
+		/** 视频最大上传数量限制 */
+		videoLimit: {
+			type: Number,
+			default: 9
+		},
+		/** 视频上传按钮图标 */
+		videoButtonIcon: {
+			type: String,
+			default: ''
+		},
+		/** 视频上传按钮文字 */
+		videoButtonTitle: {
+			type: String,
+			default: '上传视频'
+		},
+		/** 视频选择来源：['album', 'camera'] */
+		videoSourceType: {
+			type: Array,
+			default: () => ['album', 'camera']
+		},
+		/** 视频最大时长限制（单位：秒），0 表示不限制 */
+		videoMaxDuration: {
+			type: Number,
+			default: 60
+		}
+	},
+	data() {
+		return {
+			imageFileList: [],
+			videoFileList: [],
+			defaultImageIcon: defaultAddPicBg,
+			defaultVideoIcon: uploadVideoBg,
+			playIcon: videoPlay,
+			actualUploadUrl: '',
+			popupVisible: false,
+			popupAnimated: false,
+			mediaLoadingStatus: {},
+			fullscreenVideoSrc: '', // 专门用于全屏播放的视频源
+			windowWidth: uni.getSystemInfoSync ? uni.getSystemInfoSync().windowWidth : 375,
+			lazyLoadImageSrcs: [], // 用于图片懒加载，存储进入视图的图片src
+			observer: null,
+			componentId: null, // 组件实例的唯一ID
+			popupLazyLoadImageSrcs: [], // 用于弹窗中图片懒加载，存储进入视图的图片src
+			popupObserver: null, // 弹窗图片懒加载观察器
+			watermarkCanvasWidth: 300, // 水印 canvas 绘制宽度（px）
+			watermarkCanvasHeight: 300 // 水印 canvas 绘制高度（px）
+		};
+	},
+	created() {
+		this.componentId = 'mp-' + Date.now() + Math.random().toString(36).substr(2, 9);
+	},
+	computed: {
+		// ==================== 媒体类型判断 ====================
+		/** 是否启用图片上传 */
+		enableImage() {
+			return ['image', 'both'].includes(this.uploadType);
+		},
+		/** 是否启用视频上传 */
+		enableVideo() {
+			return ['video', 'both'].includes(this.uploadType);
+		},
+		/** 实际的布局方式（两种类型时强制为 vertical） */
+		actualButtonPosition() {
+			if (this.enableImage && this.enableVideo) {
+				return 'vertical';
+			}
+			return this.buttonPosition;
+		},
+
+		/** 只读模式：需要显示的文件列表（右对齐时包含占位元素） */
+		readonlyDisplayList() {
+			const displayList = this.allFileList.slice(0, this.maxShowCount);
+
+			// 如果是右对齐，需要在最后一行前面添加占位元素
+			if (this.readonly && this.align === 'right' && displayList.length > 0) {
+				const totalCount = displayList.length;
+				const lastRowCount = totalCount % this.cols;
+
+				// 如果最后一行不满，需要在最后一行开始位置插入占位元素
+				if (lastRowCount !== 0) {
+					const placeholderCount = this.cols - lastRowCount;
+					const rows = Math.ceil(totalCount / this.cols);
+					const lastRowStartIndex = (rows - 1) * this.cols;
+
+					// 创建占位元素
+					const placeholders = Array(placeholderCount)
+						.fill(null)
+						.map((_, i) => ({
+							type: 'placeholder',
+							id: `placeholder-${i}`
+						}));
+
+					// 将列表分为：前面几行（满的） + 最后一行
+					const beforeLastRow = displayList.slice(0, lastRowStartIndex);
+					const lastRow = displayList.slice(lastRowStartIndex);
+
+					// 在最后一行前面插入占位元素
+					return [...beforeLastRow, ...placeholders, ...lastRow];
+				}
+			}
+
+			return displayList;
+		},
+
+		// ==================== 图标配置 ====================
+		imageUploadIcon() {
+			return this.imageButtonIcon || this.defaultImageIcon;
+		},
+		videoUploadIcon() {
+			return this.videoButtonIcon || this.defaultVideoIcon;
+		},
+
+		// ==================== URL 列表 ====================
+		imageUrls: {
+			get() {
+				return this.imageFileList.map((file) => file.url);
+			},
+			set(newUrls) {
+				// setter 用于拖拽组件更新时，由 handleImageDragChange 处理
+			}
+		},
+		videoUrls: {
+			get() {
+				return this.videoFileList.map((file) => file.url);
+			},
+			set(newUrls) {
+				// setter 用于拖拽组件更新时，由 handleVideoDragChange 处理
+			}
+		},
+		/** 合并的所有媒体列表（用于只读模式和弹窗） */
+		allFileList() {
+			const combined = [];
+			// 标记每个文件的类型
+			this.imageFileList.forEach((file) => {
+				combined.push({ ...file, type: 'image' });
+			});
+			this.videoFileList.forEach((file) => {
+				combined.push({ ...file, type: 'video' });
+			});
+			return combined;
+		},
+
+		// ==================== 上传地址 ====================
+		finalUploadUrl() {
+			return this.actualUploadUrl || this.uploadUrl || (getApp().globalData && getApp().globalData.uploadUrl) || '';
+		},
+
+		// ==================== 水印 ====================
+		/** 是否启用水印 */
+		watermarkEnabled() {
+			const normalized = normalizeWatermarkConfig(this.watermark);
+			return !!normalized;
+		},
+		/** 水印绘制的 canvas-id（基于 componentId 保证多实例唯一） */
+		watermarkCanvasId() {
+			return this.watermarkEnabled ? `${this.componentId}-wm` : '';
+		},
+
+		// ==================== 动态尺寸计算 ====================
+		uploadIconSize() {
+			if (this.itemWidth > 0) {
+				return Math.floor((this.itemWidth - 20) * 0.3);
+			}
+			const screenWidth = 750;
+			const gap = 20;
+			const containerWidth = (screenWidth - gap * (this.cols + 1)) / this.cols;
+			return Math.floor(containerWidth * 0.3);
+		},
+		uploadTextSize() {
+			return Math.max(20, Math.floor(this.uploadIconSize * 0.38));
+		},
+		// 拖拽模式下的图标和文字样式（预计算好，避免模板中使用方法调用报错）
+		dragIconStyle() {
+			return `width: ${this.uploadIconSize}rpx; height: ${this.uploadIconSize}rpx;`;
+		},
+		dragTextStyle() {
+			return `fontSize:${this.uploadTextSize}rpx`;
+		},
+		// ==================== 只读模式网格样式 ====================
+		readonlyGridStyle() {
+			// 如果指定了 itemWidth，使用固定宽度；否则使用 1fr 自动分配
+			const columnWidth = this.itemWidth ? `${this.itemWidth}rpx` : '1fr';
+			return `display: grid; grid-template-columns: repeat(${this.cols}, ${columnWidth}); gap: 10rpx;`;
+		},
+		// ==================== 弹窗模式网格样式 ====================
+		popupGridStyle() {
+			return `display: grid; grid-template-columns: repeat(${this.cols}, 1fr); gap: 10rpx;`;
+		}
+	},
+	options: {
+		styleIsolation: 'shared'
+	},
+	watch: {
+		imageFiles: {
+			handler(val) {
+				this.imageFileList = val || [];
+			},
+			immediate: true
+		},
+		videoFiles: {
+			handler(val) {
+				this.videoFileList = val || [];
+			},
+			immediate: true
+		},
+		allFileList: {
+			handler() {
+				this.initLazyObserver(); // 当文件列表变化时重新初始化观察器
+			}
+		}
+	},
+	mounted() {
+		if (!this.uploadUrl) {
+			this.actualUploadUrl = (getApp().globalData && getApp().globalData.uploadUrl) || '';
+		}
+		this.initLazyObserver(); // 在mounted时初始化观察器
+	},
+	onShow() {
+		this.initLazyObserver();
+	},
+	// #ifdef VUE3
+	beforeUnmount() {
+		this.clearObservers();
+	},
+	// #endif
+	// #ifndef VUE3
+	beforeDestroy() {
+		this.clearObservers();
+	},
+	// #endif
+	methods: {
+		// ==================== 事件监听辅助方法 ====================
+		/**
+		 * 检查事件是否被监听
+		 * @param {String} eventName - 事件名称
+		 * @returns {Boolean} - 是否被监听
+		 */
+		hasEventListener(eventName) {
+			// #ifdef VUE3
+			// Vue 3 中事件监听器存储在 $attrs 中，且以 'on' 开头
+			const onEventName = 'on' + eventName.charAt(0).toUpperCase() + eventName.slice(1);
+			return !!(this.$attrs[eventName] || this.$attrs[onEventName]);
+			// #endif
+			// #ifndef VUE3
+			return !!(this.$listeners && this.$listeners[eventName]);
+			// #endif
+		},
+
+		// ==================== 图片相关方法 ====================
+		/**
+		 * 检查图片大小是否符合限制
+		 * @param {Number} size - 图片大小（字节）
+		 * @returns {Boolean} - 是否符合限制
+		 */
+		checkImageSize(size) {
+			if (this.imageMaxSize <= 0) {
+				return true;
+			}
+			const maxSizeInBytes = this.imageMaxSize * 1024 * 1024;
+			return size <= maxSizeInBytes;
+		},
+
+		/**
+		 * 获取大小提示文本
+		 * @param {Number} size - 图片大小（字节）
+		 * @returns {String} - 格式化后的大小文本
+		 */
+		formatFileSize(size) {
+			if (size < 1024) {
+				return size + 'B';
+			} else if (size < 1024 * 1024) {
+				return (size / 1024).toFixed(2) + 'KB';
+			} else {
+				return (size / (1024 * 1024)).toFixed(2) + 'MB';
+			}
+		},
+
+		/**
+		 * 对图片路径应用水印，返回处理后的结果。
+		 * 水印失败时按 onWatermarkError 语义降级：返回 false 阻止上传，其余返回原路径。
+		 * @param {String} path - 原始图片路径
+		 * @param {Object} file - 原始文件对象（用于错误上下文与文件名提取）
+		 * @returns {Promise<{path: String, file: File|null, ext: String, canceled: Boolean}>}
+		 */
+		async applyWatermark(path, file) {
+			if (!this.watermarkEnabled) {
+				return { path, file: null, ext: '', canceled: false };
+			}
+
+			const normalized = normalizeWatermarkConfig(this.watermark);
+			// H5 端从原始 File 对象中提取文件名，保证水印后文件名与扩展名正确
+			const fileName = file?.name || (typeof file?.path === 'string' ? file.path.split('/').pop() : '');
+
+			try {
+				const result = await applyImageWatermarkToPath(path, normalized, {
+					canvasId: this.watermarkCanvasId,
+					instance: this,
+					fileName,
+					// 非 H5 平台：绘制前动态设置 canvas 尺寸，等待 DOM 更新后再绘制
+					setCanvasSize: (width, height) => {
+						return new Promise((resolve) => {
+							this.watermarkCanvasWidth = width;
+							this.watermarkCanvasHeight = height;
+							this.$nextTick(() => {
+								setTimeout(resolve, 30);
+							});
+						});
+					}
+				});
+
+				// 兼容多种返回形态：
+				//  - { file, ext, format } 对象：H5 水印渲染层返回 File 对象
+				//  - { url, format } 对象：非 H5 水印渲染层返回临时路径
+				//  - 原始字符串路径：processor 自定义处理器返回
+				if (result && typeof result === 'object' && result.file) {
+					return { path: '', file: result.file, ext: result.ext || '', canceled: false };
+				}
+				if (result && typeof result === 'object' && result.url) {
+					return { path: result.url, file: null, ext: result.format?.ext || '', canceled: false };
+				}
+				return { path: result, file: null, ext: '', canceled: false };
+			} catch (error) {
+				const fallbackResult = await resolveWatermarkError(error, {
+					path,
+					file,
+					watermark: normalized
+				});
+
+				if (fallbackResult === false) {
+					return { path, file: null, ext: '', canceled: true };
+				}
+				return { path, file: null, ext: '', canceled: false };
+			}
+		},
+
+		/**
+		 * 非微信小程序：串行处理图片（应用水印）并上传
+		 * @param {Array<String>} tempFilePaths - 图片临时路径列表
+		 * @param {Array<Object>} tempFiles - 图片临时文件列表
+		 */
+		async uploadImageWithWatermark(tempFilePaths, tempFiles) {
+			try {
+				for (let index = 0; index < tempFilePaths.length; index++) {
+					const path = tempFilePaths[index];
+					const tempFile = tempFiles[index];
+
+					// 应用水印
+					const watermarkResult = await this.applyWatermark(path, tempFile);
+					if (watermarkResult.canceled) {
+						continue;
+					}
+
+					await this.uploadImageFileAsync(this.finalUploadUrl, watermarkResult.path, watermarkResult.file, watermarkResult.ext);
+				}
+			} catch (error) {
+				console.error('[MediaPicker] 上传流程异常', error);
+				uni.hideLoading();
+				uni.showToast({ title: '上传失败', icon: 'none' });
+				this.$emit('imageUploadFail', { error, message: '图片上传失败' });
+			}
+		},
+
+		/**
+		 * 上传图片文件（非微信小程序，Promise 化，串行处理用）
+		 * @returns {Promise<void>}
+		 */
+		uploadImageFileAsync(url, filePath, file, ext) {
+			return new Promise((resolve) => {
+				this.uploadImageFile(url, filePath, file, ext, () => {
+					resolve();
+				});
+			});
+		},
+
+		/**
+		 * 微信小程序：确保用户已同意隐私协议后再调用媒体选择 API。
+		 * @returns {Promise<void>}
+		 */
+		ensureWeixinPrivacyAuthorization() {
+			return new Promise((resolve, reject) => {
+				// #ifdef MP-WEIXIN
+				if (typeof wx === 'undefined' || typeof wx.getPrivacySetting !== 'function') {
+					resolve();
+					return;
+				}
+
+				wx.getPrivacySetting({
+					success: (res) => {
+						if (!res.needAuthorization) {
+							resolve();
+							return;
+						}
+
+						if (typeof wx.requirePrivacyAuthorize !== 'function') {
+							reject(new Error('当前微信基础库不支持隐私授权'));
+							return;
+						}
+
+						wx.requirePrivacyAuthorize({
+							success: resolve,
+							fail: reject
+						});
+					},
+					fail: reject
+				});
+				// #endif
+
+				// #ifndef MP-WEIXIN
+				resolve();
+				// #endif
+			});
+		},
+
+		/**
+		 * 选择并上传图片
+		 */
+		selectAndUploadImage() {
+			if (this.imageFileList.length >= this.imageLimit) {
+				// 触发图片数量限制事件
+				this.$emit('imageLimitReached', {
+					current: this.imageFileList.length,
+					limit: this.imageLimit
+				});
+
+				// 如果用户未监听事件，显示默认提示
+				if (!this.hasEventListener('imageLimitReached')) {
+					uni.showToast({
+						icon: 'none',
+						title: `上传最大限制${this.imageLimit}张`
+					});
+				}
+				return;
+			}
+
+			if (!this.finalUploadUrl) {
+				uni.showToast({
+					title: '请先配置上传地址',
+					icon: 'none'
+				});
+				return;
+			}
+
+			const remainCount = this.imageLimit - this.imageFileList.length;
+			console.log('chooseImage')
+			const chooseImageOptions = {
+				count: remainCount,
+				sizeType: ['original', 'compressed'],
+				sourceType: this.imageSourceType,
+				// #ifndef MP-WEIXIN
+				success: (chooseImageRes) => {
+					if (chooseImageRes.tempFiles.length + this.imageFileList.length > this.imageLimit) {
+						// 触发图片数量限制事件
+						this.$emit('imageLimitReached', {
+							current: this.imageFileList.length,
+							limit: this.imageLimit,
+							attempted: chooseImageRes.tempFiles.length
+						});
+
+						// 如果用户未监听事件，显示默认提示
+						if (!this.hasEventListener('imageLimitReached')) {
+							uni.showToast({
+								icon: 'none',
+								title: `上传最大限制${this.imageLimit}张`
+							});
+						}
+						return;
+					}
+
+					// 检查图片大小
+					if (this.imageMaxSize > 0) {
+						const oversizedFiles = chooseImageRes.tempFiles.filter((file) => !this.checkImageSize(file.size));
+						if (oversizedFiles.length > 0) {
+							const firstOversized = oversizedFiles[0];
+
+							// 触发图片大小超限事件
+							this.$emit('imageSizeExceed', {
+								size: firstOversized.size,
+								maxSize: this.imageMaxSize * 1024 * 1024,
+								file: firstOversized,
+								message: `图片大小不能超过${this.imageMaxSize}MB（当前：${this.formatFileSize(firstOversized.size)}）`
+							});
+
+							// 如果用户未监听事件，显示默认提示
+							if (!this.hasEventListener('imageSizeExceed')) {
+								uni.showToast({
+									icon: 'none',
+									title: `图片大小不能超过${this.imageMaxSize}MB（当前：${this.formatFileSize(firstOversized.size)}）`,
+									duration: 3000
+								});
+							}
+							return;
+						}
+					}
+
+					uni.showLoading({
+						title: '上传中',
+						mask: true
+					});
+
+					this.uploadImageWithWatermark(chooseImageRes.tempFilePaths, chooseImageRes.tempFiles);
+				},
+				// #endif
+
+				// #ifdef MP-WEIXIN
+				success: (chooseImageRes) => {
+					const tempFiles = (chooseImageRes.tempFiles || []).map((file) => ({
+						...file,
+						path: file.path || file.tempFilePath
+					}));
+					const tempFilePaths = tempFiles.map((file) => file.path);
+
+					if (tempFiles.length + this.imageFileList.length > this.imageLimit) {
+						// 触发图片数量限制事件
+						this.$emit('imageLimitReached', {
+							current: this.imageFileList.length,
+							limit: this.imageLimit,
+							attempted: tempFiles.length
+						});
+
+						// 如果用户未监听事件，显示默认提示
+						if (!this.hasEventListener('imageLimitReached')) {
+							uni.showToast({
+								icon: 'none',
+								title: `上传最大限制${this.imageLimit}张`
+							});
+						}
+						return;
+					}
+
+					// 检查图片大小
+					if (this.imageMaxSize > 0) {
+						const oversizedFiles = tempFiles.filter((file) => !this.checkImageSize(file.size));
+						if (oversizedFiles.length > 0) {
+							const firstOversized = oversizedFiles[0];
+
+							// 触发图片大小超限事件
+							this.$emit('imageSizeExceed', {
+								size: firstOversized.size,
+								maxSize: this.imageMaxSize * 1024 * 1024,
+								file: firstOversized,
+								message: `图片大小不能超过${this.imageMaxSize}MB（当前：${this.formatFileSize(firstOversized.size)}）`
+							});
+
+							// 如果用户未监听事件，显示默认提示
+							if (!this.hasEventListener('imageSizeExceed')) {
+								uni.showToast({
+									icon: 'none',
+									title: `图片大小不能超过${this.imageMaxSize}MB（当前：${this.formatFileSize(firstOversized.size)}）`,
+									duration: 3000
+								});
+							}
+							return;
+						}
+					}
+
+					uni.showLoading({
+						title: '上传中',
+						mask: true
+					});
+
+					// 微信小程序分支：先压缩（如需要），再串行应用水印并上传
+					this.uploadWeixinImages(tempFilePaths, tempFiles);
+				},
+				// #endif
+
+				fail: (e) => {
+					console.log(e)
+				}
+			};
+
+			const openImageChooser = () => {
+				// #ifdef MP-WEIXIN
+				uni.chooseMedia({
+					...chooseImageOptions,
+					mediaType: ['image']
+				});
+				// #endif
+				// #ifndef MP-WEIXIN
+				uni.chooseImage(chooseImageOptions);
+				// #endif
+			};
+
+			// #ifdef MP-WEIXIN
+			this.ensureWeixinPrivacyAuthorization()
+				.then(openImageChooser)
+				.catch((error) => {
+					console.error('[MediaPicker] 隐私授权失败', error);
+					uni.showToast({
+						title: '请先同意隐私协议',
+						icon: 'none'
+					});
+				});
+			// #endif
+			// #ifndef MP-WEIXIN
+			openImageChooser();
+			// #endif
+		},
+
+		/**
+		 * 微信小程序：串行处理图片（压缩 + 水印）并上传
+		 */
+		async uploadWeixinImages(tempFilePaths, tempFiles) {
+			try {
+				for (let index = 0; index < tempFilePaths.length; index++) {
+					const tempPath = tempFilePaths[index];
+					const tempFile = tempFiles[index];
+					const lowerPath = tempPath.toLowerCase();
+
+					let targetPath = tempPath;
+
+					// 对 jpg/jpeg 格式的图片进行压缩
+					if (lowerPath.indexOf('.jpg') !== -1 || lowerPath.indexOf('.jpeg') !== -1) {
+						targetPath = await this.compressImageByPath(tempFile.path);
+					}
+
+					// 应用水印
+					const watermarkResult = await this.applyWatermark(targetPath, tempFile);
+					if (watermarkResult.canceled) {
+						continue;
+					}
+
+					await this.uploadImageFileByPathAsync(this.finalUploadUrl, watermarkResult.path, watermarkResult.ext);
+				}
+			} catch (error) {
+				console.error('[MediaPicker] 上传流程异常', error);
+				uni.hideLoading();
+				uni.showToast({ title: '上传失败', icon: 'none' });
+				this.$emit('imageUploadFail', { error, message: '图片上传失败' });
+			}
+		},
+
+		/**
+		 * 上传图片文件（微信小程序，Promise 化，串行处理用）
+		 * @returns {Promise<void>}
+		 */
+		uploadImageFileByPathAsync(url, filePath, ext) {
+			return new Promise((resolve) => {
+				this.uploadImageFileByPath(url, filePath, ext, () => {
+					resolve();
+				});
+			});
+		},
+
+		/**
+		 * 微信小程序：压缩图片（Promise 化）
+		 * @returns {Promise<String>} 压缩后的临时路径
+		 */
+		compressImageByPath(path) {
+			return new Promise((resolve) => {
+				uni.compressImage({
+					src: path,
+					quality: 100,
+					success: (res) => {
+						resolve(res.tempFilePath);
+					},
+					fail: () => {
+						// 压缩失败则返回原路径
+						resolve(path);
+					}
+				});
+			});
+		},
+
+		/**
+		 * 上传图片文件（非微信小程序，使用 File 对象）
+		 * @param {String} url - 上传地址
+		 * @param {String} filePath - 文件路径
+		 * @param {File} [file] - 可选，H5 平台水印处理后的 File 对象（携带正确文件名与 MIME）
+		 * @param {String} [ext] - 可选，文件扩展名
+		 * @param {Function} [onComplete] - 可选，上传完成回调（串行处理用）
+		 */
+		uploadImageFile(url, filePath, file, ext, onComplete) {
+			// H5 平台：水印后拿到的是 File 对象，用 files 参数直接上传，
+			// 保证 multipart 里的 filename 与 MIME 正确，避免后端按扩展名校验失败返回 500。
+			// 非 H5 / 无水印：沿用 filePath 上传。
+			const uploadOptions = file ? { files: [{ name: 'file', file, uri: '' }] } : { filePath, name: 'file' };
+
+			uni.uploadFile({
+				url,
+				...uploadOptions,
+				success: (uploadFileRes) => {
+					if (uploadFileRes.statusCode !== 200) {
+						console.error('HTTP状态码错误：', uploadFileRes.statusCode);
+						uni.showToast({ title: `服务器响应异常(${uploadFileRes.statusCode})`, icon: 'none' });
+						return;
+					}
+
+					try {
+						const result = JSON.parse(uploadFileRes.data);
+
+						if (result.rspCode === '000000') {
+							const fileInfo = {
+								fileName: result.data.fileName,
+								name: result.data.originFileName,
+								url: result.data.pathUrl,
+								type: 'image'
+							};
+							this.imageFileList.push(fileInfo);
+
+							this.$emit('imageUploadSuccess', {
+								uploadFileRes: uploadFileRes,
+								file: fileInfo,
+								response: result
+							});
+						} else {
+							// 后端业务层报错（如：格式不支持、权限不足）
+							uni.showToast({ title: result.rspMsg || '业务处理失败', icon: 'none' });
+							this.$emit('imageUploadFail', { error: result, message: result.rspMsg });
+						}
+					} catch (error) {
+						// 解析 JSON 失败，通常是后端挂了返回了非 JSON 格式
+						console.error('返回数据解析异常：', uploadFileRes.data);
+						uni.showToast({ title: '服务器数据解析失败', icon: 'none' });
+						this.$emit('imageUploadFail', { error: error, message: '解析失败' });
+					}
+				},
+				fail: (error) => {
+					uni.showToast({
+						icon: 'none',
+						title: '上传失败'
+					});
+
+					// 触发图片上传失败事件
+					this.$emit('imageUploadFail', {
+						error: error,
+						message: '图片上传失败'
+					});
+				},
+				complete: () => {
+					uni.hideLoading();
+					this.emitImageChange();
+					if (typeof onComplete === 'function') {
+						onComplete();
+					}
+				}
+			});
+		},
+
+		/**
+		 * 上传图片文件（微信小程序，使用文件路径）
+		 * @param {String} url - 上传地址
+		 * @param {String} filePath - 文件路径
+		 * @param {String} [ext] - 可选，文件扩展名（预留，微信端文件名取自临时路径）
+		 * @param {Function} [onComplete] - 可选，上传完成回调（串行处理用）
+		 */
+		uploadImageFileByPath(url, filePath, ext, onComplete) {
+			uni.uploadFile({
+				url,
+				filePath,
+				name: 'file',
+				success: (uploadFileRes) => {
+					if (uploadFileRes.statusCode !== 200) {
+						console.error('HTTP状态码错误：', uploadFileRes.statusCode, uploadFileRes.data);
+						uni.showToast({ title: `服务器响应异常(${uploadFileRes.statusCode})`, icon: 'none' });
+						return;
+					}
+
+					try {
+						const result = JSON.parse(uploadFileRes.data);
+
+						if (result.rspCode === '000000') {
+							const fileInfo = {
+								fileName: result.data.fileName,
+								name: result.data.originFileName,
+								url: result.data.pathUrl,
+								type: 'image'
+							};
+							this.imageFileList.push(fileInfo);
+
+							// 触发图片上传成功事件
+							this.$emit('imageUploadSuccess', {
+								file: fileInfo,
+								response: result
+							});
+						} else {
+							// 后端业务层报错（如：格式不支持、权限不足）
+							uni.showToast({ title: result.rspMsg || '业务处理失败', icon: 'none' });
+							this.$emit('imageUploadFail', { error: result, message: result.rspMsg });
+						}
+					} catch (error) {
+						console.error('返回数据解析异常：', uploadFileRes.data);
+						uni.showToast({ title: '服务器数据解析失败', icon: 'none' });
+						this.$emit('imageUploadFail', { error, message: '解析失败' });
+					}
+				},
+				fail: (error) => {
+					uni.showToast({
+						icon: 'none',
+						title: '上传失败'
+					});
+
+					// 触发图片上传失败事件
+					this.$emit('imageUploadFail', {
+						error: error,
+						message: '图片上传失败'
+					});
+				},
+				complete: () => {
+					uni.hideLoading();
+					this.emitImageChange();
+					if (typeof onComplete === 'function') {
+						onComplete();
+					}
+				}
+			});
+		},
+
+		/**
+		 * 处理图片拖拽排序变化
+		 */
+		handleImageDragChange(newUrls) {
+			const newFileList = newUrls
+				.map((url) => {
+					return this.imageFileList.find((file) => file.url === url);
+				})
+				.filter(Boolean);
+
+			this.imageFileList = newFileList;
+			this.emitImageChange();
+		},
+
+		/**
+		 * 预览图片
+		 */
+		previewImage(urls, current) {
+			uni.previewImage({
+				current,
+				urls,
+				indicator: 'number'
+			});
+		},
+
+		/**
+		 * 触发图片变更事件
+		 */
+		emitImageChange() {
+			this.$emit('imageChange', this.imageFileList);
+		},
+
+		// ==================== 视频相关方法 ====================
+		/**
+		 * 选择并上传视频
+		 */
+		selectAndUploadVideo() {
+			if (!this.finalUploadUrl) {
+				uni.showToast({
+					title: '请先配置上传地址',
+					icon: 'none'
+				});
+				return;
+			}
+
+			if (this.videoFileList.length >= this.videoLimit) {
+				// 触发视频数量限制事件
+				this.$emit('videoLimitReached', {
+					current: this.videoFileList.length,
+					limit: this.videoLimit
+				});
+
+				// 如果用户未监听事件，显示默认提示
+				if (!this.hasEventListener('videoLimitReached')) {
+					uni.showToast({
+						title: `最多上传${this.videoLimit}个视频`,
+						icon: 'none'
+					});
+				}
+				return;
+			}
+
+			uni.chooseVideo({
+				sourceType: this.videoSourceType,
+				maxDuration: this.videoMaxDuration > 0 ? this.videoMaxDuration : 60,
+				success: (res) => {
+					// 如果设置了时长限制（大于0），则验证时长
+					if (this.videoMaxDuration > 0 && res.duration > this.videoMaxDuration) {
+						// 触发视频时长超限事件
+						this.$emit('videoDurationExceed', {
+							duration: res.duration,
+							maxDuration: this.videoMaxDuration,
+							file: res,
+							message: `视频时长不能超过${this.videoMaxDuration}秒`
+						});
+
+						// 如果用户未监听事件，显示默认提示
+						if (!this.hasEventListener('videoDurationExceed')) {
+							uni.showToast({
+								title: `视频时长不能超过${this.videoMaxDuration}秒`,
+								icon: 'none'
+							});
+						}
+						return;
+					}
+					this.uploadVideo(res.tempFilePath);
+				}
+			});
+		},
+
+		/**
+		 * 上传视频
+		 */
+		uploadVideo(filePath) {
+			const uploadTask = uni.uploadFile({
+				url: this.finalUploadUrl,
+				filePath,
+				name: 'file',
+				success: (uploadFileRes) => {
+					const result = JSON.parse(uploadFileRes.data);
+
+					const fileInfo = {
+						fileName: result.data.fileName,
+						name: result.data.originFileName || 'video',
+						url: result.data.pathUrl,
+						type: 'video'
+					};
+
+					this.videoFileList.push(fileInfo);
+					this.emitVideoChange();
+
+					// 触发视频上传成功事件
+					this.$emit('videoUploadSuccess', {
+						file: fileInfo,
+						response: result
+					});
+				},
+				fail: (err) => {
+					uni.showToast({
+						icon: 'none',
+						title: '视频上传失败'
+					});
+
+					// 触发视频上传失败事件
+					this.$emit('videoUploadFail', {
+						error: err,
+						message: '视频上传失败'
+					});
+				},
+				complete: () => {
+					uni.hideLoading();
+				}
+			});
+
+			uploadTask.onProgressUpdate((res) => {
+				uni.showLoading({
+					title: '已上传' + res.progress + '%',
+					mask: true
+				});
+				console.log('上传进度' + res.progress);
+				console.log('已经上传的数据长度' + res.totalBytesSent);
+				console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
+				// // 测试条件，取消上传任务。
+				if (res.progress === 100) {
+					uni.hideLoading();
+					uni.showLoading({
+						title: '确认中...',
+						mask: true
+					});
+				}
+			});
+		},
+
+		/**
+		 * 处理视频拖拽排序变化
+		 */
+		handleVideoDragChange(newUrls) {
+			const newFileList = newUrls
+				.map((url) => {
+					return this.videoFileList.find((file) => file.url === url);
+				})
+				.filter(Boolean);
+
+			this.videoFileList = newFileList;
+			this.emitVideoChange();
+		},
+
+		/**
+		 * 触发视频变更事件
+		 */
+		emitVideoChange() {
+			this.$emit('videoChange', this.videoFileList);
+		},
+
+		/**
+		 * 处理拖拽组件中的视频点击
+		 */
+		handleVideoItemClick(item) {
+			console.log('点击视频:', item);
+			// shmily-drag-media 传递的是 item.src
+			this.playVideo(item.src);
+		},
+
+		/**
+		 * 播放视频（统一播放方法）
+		 */
+		playVideo(url) {
+			// 设置视频源
+			this.fullscreenVideoSrc = url;
+			// 等待视频组件更新
+			this.$nextTick(() => {
+				const videoContext = uni.createVideoContext('fullscreenPreviewVideo', this);
+				videoContext.requestFullScreen();
+				videoContext.play();
+			});
+		},
+
+		// ==================== 只读模式交互 ====================
+		/**
+		 * 判断是否是最后一个真实元素（用于显示 +N 遮罩）
+		 */
+		isLastRealItem(displayIndex) {
+			const file = this.readonlyDisplayList[displayIndex];
+			if (!file || file.type === 'placeholder') return false;
+
+			// 计算占位元素数量
+			const placeholderCount = this.readonlyDisplayList.filter((f) => f.type === 'placeholder').length;
+			const realIndex = displayIndex - placeholderCount;
+
+			// 判断是否是最后一个真实元素，且总数超过限制
+			return this.allFileList.length > this.maxShowCount && realIndex === this.maxShowCount - 1;
+		},
+
+		/**
+		 * 处理只读模式媒体项点击
+		 */
+		handleReadonlyItemClick(index, file) {
+			// 如果点击的是占位元素，不做任何处理
+			if (!file || file.type === 'placeholder') {
+				return;
+			}
+
+			// 判断是否点击的是遮罩层（最后一项且超出限制）
+			if (this.isLastRealItem(index)) {
+				this.$emit('moreClick', {
+					total: this.allFileList.length,
+					showCount: this.maxShowCount,
+					hiddenCount: this.allFileList.length - this.maxShowCount,
+					allFiles: this.allFileList
+				});
+
+				if (!this.hasEventListener('moreClick')) {
+					this.openPopup();
+				}
+			} else {
+				if (file.type === 'image') {
+					// 预览图片（只提取图片列表）
+					const imageUrls = this.allFileList.filter((f) => f.type === 'image').map((f) => f.url);
+					const imageIndex = this.imageFileList.findIndex((f) => f.url === file.url);
+					this.previewImage(imageUrls, imageIndex);
+				} else if (file.type === 'video') {
+					this.playVideo(file.url);
+				}
+			}
+		},
+
+		/**
+		 * 处理弹窗内媒体项点击
+		 */
+		handlePopupItemClick(file, index) {
+			if (file.type === 'image') {
+				const imageUrls = this.allFileList.filter((f) => f.type === 'image').map((f) => f.url);
+				const imageIndex = this.imageFileList.findIndex((f) => f.url === file.url);
+				this.previewImage(imageUrls, imageIndex);
+			} else if (file.type === 'video') {
+				this.playVideo(file.url);
+			}
+		},
+
+		// ==================== 弹窗控制 ====================
+		openPopup() {
+			this.popupVisible = true;
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.popupAnimated = true;
+					this.initPopupLazyObserver(); // 弹窗打开时初始化懒加载观察器
+				}, 50);
+			});
+		},
+
+		closePopup() {
+			this.popupAnimated = false;
+			setTimeout(() => {
+				this.popupVisible = false;
+				if (this.popupObserver) {
+					this.popupObserver.disconnect(); // 弹窗关闭时断开观察器
+					this.popupObserver = null;
+				}
+			}, 300);
+		},
+
+		// ==================== 加载状态管理 ====================
+		onMediaLoad(key) {
+			// #ifdef VUE3
+			this.mediaLoadingStatus[key] = true;
+			// #endif
+			// #ifndef VUE3
+			this.$set(this.mediaLoadingStatus, key, true);
+			// #endif
+		},
+		onMediaError(key) {
+			// #ifdef VUE3
+			this.mediaLoadingStatus[key] = true;
+			// #endif
+			// #ifndef VUE3
+			this.$set(this.mediaLoadingStatus, key, true);
+			// #endif
+		},
+
+		// ==================== 初始化图片懒加载观察器 ====================
+		/**
+		 * 初始化图片懒加载观察器
+		 */
+		initLazyObserver() {
+			if (this.readonly && this.allFileList.length > 0) {
+				// 确保 observer 每次都被重新创建，以防元素变化
+				if (this.observer) {
+					this.observer.disconnect();
+					this.observer = null;
+				}
+
+				this.lazyLoadImageSrcs = Array(this.allFileList.length).fill(null);
+
+				this.$nextTick(() => {
+					const currentObserver = uni.createIntersectionObserver(this, { observeAll: true });
+					this.observer = currentObserver;
+
+					if (!this.observer) {
+						console.warn('IntersectionObserver failed to create.');
+						return;
+					}
+
+					this.observer.relativeToViewport({ top: 0, bottom: 50 });
+
+					this.allFileList.forEach((file, index) => {
+						if (file.type === 'image') {
+							const sel = '#' + this.componentId + '-imgview-' + index;
+							currentObserver.observe(sel, (res) => {
+								const isVisible = res.intersectionRatio > 0;
+								if (isVisible && !this.lazyLoadImageSrcs[index]) {
+									// #ifdef VUE3
+									this.lazyLoadImageSrcs[index] = file.url;
+									// #endif
+									// #ifndef VUE3
+									this.$set(this.lazyLoadImageSrcs, index, file.url);
+									// #endif
+								}
+							});
+						}
+					});
+				});
+			} else if (this.observer) {
+				this.observer.disconnect();
+				this.observer = null;
+			}
+		},
+
+		/**
+		 * 初始化弹窗图片懒加载观察器
+		 */
+		initPopupLazyObserver() {
+			if (this.popupVisible && this.allFileList.length > 0) {
+				if (this.popupObserver) {
+					this.popupObserver.disconnect();
+					this.popupObserver = null;
+				}
+
+				this.popupLazyLoadImageSrcs = Array(this.allFileList.length).fill(null);
+
+				this.$nextTick(() => {
+					const currentPopupObserver = uni.createIntersectionObserver(this, { observeAll: true });
+					this.popupObserver = currentPopupObserver;
+
+					if (!this.popupObserver) {
+						console.warn('Popup IntersectionObserver failed to create.');
+						return;
+					}
+
+					// 在弹窗的scroll-view中创建观察器
+					// 注意：这里需要确保scroll-view的selector是唯一的，或者使用组件内实例
+					this.popupObserver.relativeToViewport({ top: 0, bottom: 50 });
+
+					this.allFileList.forEach((file, index) => {
+						if (file.type === 'image') {
+							const sel = '#' + this.componentId + '-popup-imgview-' + index;
+							currentPopupObserver.observe(sel, (res) => {
+								const isVisible = res.intersectionRatio > 0;
+								if (isVisible && !this.popupLazyLoadImageSrcs[index]) {
+									// #ifdef VUE3
+									this.popupLazyLoadImageSrcs[index] = file.url;
+									// #endif
+									// #ifndef VUE3
+									this.$set(this.popupLazyLoadImageSrcs, index, file.url);
+									// #endif
+								}
+							});
+						}
+					});
+				});
+			} else if (this.popupObserver) {
+				this.popupObserver.disconnect();
+				this.popupObserver = null;
+			}
+		},
+
+		// ==================== 通用方法 ====================
+		/**
+		 * 获取所有文件列表
+		 */
+		getFileList() {
+			if (this.uploadType === 'both') {
+				return {
+					images: this.imageFileList,
+					videos: this.videoFileList
+				};
+			} else if (this.uploadType === 'image') {
+				return this.imageFileList;
+			} else if (this.uploadType === 'video') {
+				return this.videoFileList;
+			}
+		},
+
+		/**
+		 * 获取参数（不包含 url 字段）
+		 */
+		getParams() {
+			const imageParams = this.imageFileList.map((file) => {
+				const { url, type, ...rest } = file;
+				return rest;
+			});
+			const videoParams = this.videoFileList.map((file) => {
+				const { url, type, ...rest } = file;
+				return rest;
+			});
+			if (this.uploadType === 'both') {
+				return {
+					images: JSON.stringify(imageParams),
+					videos: JSON.stringify(videoParams)
+				};
+			} else if (this.uploadType === 'image') {
+				return {
+					images: JSON.stringify(imageParams)
+				};
+			} else if (this.uploadType === 'video') {
+				return {
+					videos: JSON.stringify(videoParams)
+				};
+			}
+		},
+		// ==================== 私有方法 ====================
+		clearObservers() {
+			if (this.observer) {
+				this.observer.disconnect();
+				this.observer = null;
+			}
+			if (this.popupObserver) {
+				this.popupObserver.disconnect();
+				this.popupObserver = null;
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+@import './styles.scss';
+</style>