xydata-tools-uniapp 1.0.0

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

@@ -0,0 +1,924 @@
+<template>
+	<view class="con">
+		<template v-if="viewWidth">
+			<movable-area class="area" :style="{ height: areaHeight }" @mouseenter="mouseenter" @mouseleave="mouseleave">
+				<movable-view
+					v-for="(item, index) in imageList"
+					:key="item.id"
+					class="view"
+					direction="all"
+					:y="item.y"
+					:x="item.x"
+					:damping="40"
+					:disabled="!draggable"
+					@change="onChange($event, item)"
+					@touchstart="touchstart(item)"
+					@mousedown="touchstart(item)"
+					@touchend="touchend($event, item)"
+					@mouseup="touchend($event, item)"
+					:style="{
+						width: viewWidth + 'px',
+						height: viewWidth + 'px',
+						'z-index': item.zIndex,
+						opacity: item.opacity
+					}"
+				>
+					<view
+						class="area-con"
+						:style="{
+							width: childWidth,
+							height: childWidth,
+							borderRadius: borderRadius + 'rpx',
+							transform: 'scale(' + item.scale + ')'
+						}"
+					>
+						<image
+							v-if="moveType === 'image'"
+							class="pre-image"
+							:src="item.src"
+							mode="aspectFill"
+							@load="handleMediaLoad(item)"
+							@error="handleMediaError(item)"
+							@click="handleClick(item, 'image')"
+						></image>
+						<video
+							v-else-if="moveType === 'video'"
+							:id="'readonlyVideo' + index"
+							class="myVideo"
+							:src="item.src"
+							:controls="false"
+							:show-center-play-btn="true"
+							object-fit="cover"
+							@loadedmetadata="handleMediaLoad(item)"
+							@error="handleMediaError(item)"
+							@click="handleClick(item, 'video')"
+						></video>
+						<view class="media-loading-overlay" v-if="item.loading">
+							<view class="loading-spinner"></view>
+						</view>
+						<view
+							class="del-con"
+							@click="delImages(item, index)"
+							@touchstart.stop="delImageMp(item, index)"
+							@touchend.stop="nothing()"
+							@mousedown.stop="nothing()"
+							@mouseup.stop="nothing()"
+						>
+							<view class="del-wrap">
+								<image
+									class="del-image"
+									src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhdEVYdENyZWF0aW9uIFRpbWUAMjAyMDowNzoyNSAyMTo1NDoyOU4TkJAAAADcSURBVFhH7ZfRCoMwDEXLvkjwwVf/bH/emmAyN6glTW9WBjsgwm28OeCLpj81Sil7zvlJ90UiONS/yY5VogsO6XrBg3IEQ5a/s8vRSWUAKmLqp2w5jz5BiNQEGMo3GbloDLtFXJ1IkaEuhAiiY6gEIqB4yqACSk9piIBiKQ8VUFpLviKg3C2rESKgWERCBZSWiEfgIfffYvrrsAgoISJ3Apy3zuTxcSxLQkV6ykNEPKVQkZEyiAiiZKgDIaC4upACSlcn5fM/+WuDCAHF1E/Z/N9AhkMZnPNDPI+UDjPIXgAQIGjNAAAAAElFTkSuQmCC"
+								>
+								</image>
+							</view>
+						</view>
+					</view>
+				</movable-view>
+				<!-- 添加按钮或自定义插槽 -->
+				<view class="add" v-if="imageList.length < number && showAddButton" :style="{ top: add.y, left: add.x, width: viewWidth + 'px', height: viewWidth + 'px' }" @click="$emit('add-click', $event)">
+					<view class="add-wrap" :style="{ width: childWidth, height: childWidth, borderRadius: borderRadius + 'rpx' }">
+						<slot name="add-button"></slot>
+					</view>
+				</view>
+			</movable-area>
+		</template>
+	</view>
+</template>
+
+<script>
+export default {
+	// #ifdef VUE3
+	emits: ['input', 'add-click', 'del-image-confirm', 'update:modelValue'],
+	// #endif
+	// #ifndef VUE3
+	emits: ['input', 'add-click', 'del-image-confirm'],
+	// #endif
+	props: {
+		// #ifdef VUE3
+		modelValue: {
+			type: Array,
+			default: () => []
+		},
+		// #endif
+		// #ifndef VUE3
+		value: {
+			type: Array,
+			default: () => []
+		},
+		// #endif
+		// 从 list 元素对象中读取的键名
+		keyName: {
+			type: String,
+			default: null
+		},
+		// 选择图片数量限制
+		number: {
+			type: Number,
+			default: 6
+		},
+		// 图片父容器宽度（实际显示的图片宽度为 imageWidth / 1.1 ），单位 rpx
+		// imageWidth > 0 则 cols 无效
+		imageWidth: {
+			type: Number,
+			default: 0
+		},
+		// 图片列数
+		cols: {
+			type: Number,
+			default: 3
+		},
+		// 图片圆角，单位 rpx
+		borderRadius: {
+			type: Number,
+			default: 8
+		},
+		// 图片周围空白填充，单位 rpx
+		padding: {
+			type: Number,
+			default: 10
+		},
+		// 拖动图片时放大倍数 [0, ∞)
+		scale: {
+			type: Number,
+			default: 1.1
+		},
+		// 拖动图片时透明度 [0, 1]
+		opacity: {
+			type: Number,
+			default: 0.7
+		},
+		// 是否可拖动
+		draggable: {
+			type: Boolean,
+			default: true
+		},
+		// 删除前是否询问
+		delConfirm: {
+			type: Boolean,
+			default: false
+		},
+		// 添加按钮 (仅在 horizontal 模式有效)
+		addImage: {
+			type: Function,
+			default: () => null
+		},
+		// 删除按钮
+		delImage: {
+			type: Function,
+			default: () => null
+		},
+		// 媒体类型 image video
+		moveType: {
+			type: String,
+			default: 'image'
+		},
+		// 对齐方式 left center right
+		align: {
+			type: String,
+			default: 'left'
+		},
+		// 拖拽手感，默认 40
+		damping: {
+			type: Number,
+			default: 40
+		},
+		// 是否开启添加按钮（仅在横向模式生效）
+		enableAddButton: {
+			type: Boolean,
+			default: false
+		}, 
+	 
+	},
+	data() {
+		return {
+			imageList: [],
+			width: 0,
+			containerWidth: 0,
+			add: {
+				x: 0,
+				y: 0
+			},
+			colsValue: 0,
+			viewWidth: 0,
+			rightAlignOffset: 0,
+			tempItem: null,
+			timer: null,
+			changeStatus: true,
+			preStatus: true,
+			first: true,
+			lastTouchEndTime: null, // 记录最后一次 touchend 的时间，用于避免重复触发
+			clickThreshold: 20,
+			longPressTime: 300
+		};
+	},
+	computed: {
+		// 是否显示添加按钮（内部自动判断）
+		showAddButton() {
+			return this.enableAddButton && this.imageList.length < this.number;
+		},
+		areaHeight() {
+			let height = '';
+			let totalCount = this.imageList.length;
+
+			// 如果显示添加按钮，需要为按钮预留空间
+			if (this.showAddButton) {
+				totalCount = this.imageList.length + 1;
+			}
+
+			// 至少显示一行
+			const rows = Math.max(1, Math.ceil(totalCount / this.colsValue));
+			height = (rows * this.viewWidth).toFixed() + 'px';
+			return height;
+		},
+		childWidth() {
+			return this.viewWidth - this.rpx2px(this.padding) * 2 + 'px';
+		},
+		// 内部统一使用的值缓存
+		internalValue() {
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+		}
+	},
+	watch: {
+		internalValue: {
+			handler(n) {
+				this.handleValueChange(n);
+			},
+			deep: true,
+			immediate: true
+		},
+		viewWidth(n) {
+			if (n > 0 && this.first) {
+				// 如果是第一次初始化且获取到了有效宽度
+				this.recalculateAllPositions();
+				this.updateAddButtonPosition();
+			}
+		},
+		align() {
+			this.updateRightAlignOffset();
+			if (!this.viewWidth || !this.colsValue) {
+				return;
+			}
+			this.recalculateAllPositions();
+			this.updateAddButtonPosition();
+		}
+	},
+	created() {
+		this.width = uni.getSystemInfoSync().windowWidth;
+	},
+	mounted() {
+		// 使用 nextTick 并延时确保 DOM 已渲染且可测量
+		this.$nextTick(() => {
+			setTimeout(() => {
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.con').boundingClientRect((data) => {
+					if (!data || !data.width) {
+						console.warn('无法获取到容器宽度，可能导致显示异常');
+					}
+					this.containerWidth = data.width || 0;
+					this.colsValue = this.cols;
+					this.viewWidth = (data.width || 0) / this.cols;
+					if (this.imageWidth > 0) {
+						this.viewWidth = this.rpx2px(this.imageWidth);
+						this.colsValue = Math.floor((data.width || 0) / this.viewWidth);
+					}
+					if (this.colsValue < 1) {
+						this.colsValue = 1;
+					}
+					this.updateRightAlignOffset();
+
+					// 初始化图片列表
+					this.imageList = [];
+					// 直接使用计算属性 internalValue，它已经处理了 Vue 2/3 的兼容性
+					const currentVal = this.internalValue || [];
+					for (let item of currentVal) {
+						this.addProperties(this.getSrc(item));
+					}
+
+					this.first = false;
+				});
+				query.exec();
+			}, 100);
+		});
+	},
+	methods: {
+		/**
+		 * 根据索引和总数计算绝对位置（支持左右对齐）
+		 * @param {Number} index - 当前图片索引
+		 * @param {Number} total - 图片总数（如果显示添加按钮，需要包括按钮）
+		 * @returns {Object} { absX, absY }
+		 */
+		calculatePosition(index, total) {
+			const absY = Math.floor(index / this.colsValue);
+
+			if (this.align === 'right') {
+				// 靠右对齐：计算当前行的元素数量（包括按钮），然后从右往左排列
+				const currentRowItemCount = Math.min(total - absY * this.colsValue, this.colsValue);
+				const startX = this.colsValue - currentRowItemCount;
+				const positionInRow = index % this.colsValue;
+				const absX = startX + positionInRow;
+				return { absX, absY };
+			} else {
+				// 靠左对齐（默认）
+				const absX = index % this.colsValue;
+				return { absX, absY };
+			}
+		},
+		getRightOffset() {
+			return this.align === 'right' ? this.rightAlignOffset : 0;
+		},
+		getAlignedX(absX) {
+			return this.getRightOffset() + absX * this.viewWidth;
+		},
+		updateRightAlignOffset() {
+			if (!this.viewWidth || !this.colsValue || !this.containerWidth) {
+				this.rightAlignOffset = 0;
+				return;
+			}
+			if (this.align !== 'right') {
+				this.rightAlignOffset = 0;
+				return;
+			}
+			const theoreticalWidth = this.viewWidth * this.colsValue;
+			this.rightAlignOffset = Math.max(0, this.containerWidth - theoreticalWidth);
+		},
+
+		/**
+		 * 获取总数（如果显示添加按钮，则包括按钮）
+		 */
+		getTotalCount() {
+			// 如果是右对齐且显示添加按钮，则总数需要包括按钮
+			if (this.align === 'right' && this.showAddButton) {
+				return this.imageList.length + 1;
+			}
+			return this.imageList.length;
+		},
+
+		getSrc(item) {
+			if (this.keyName !== null) {
+				return item[this.keyName];
+			}
+			return item;
+		},
+		onChange(e, item) {
+			if (!item) return;
+			item.oldX = e.detail.x;
+			item.oldY = e.detail.y;
+			if (e.detail.source === 'touch') {
+				if (item.moveEnd) {
+					item.offset = Math.sqrt(Math.pow(item.oldX - this.getAlignedX(item.absX), 2) + Math.pow(item.oldY - item.absY * this.viewWidth, 2));
+				}
+				const offsetX = this.getRightOffset();
+				let x = Math.floor((e.detail.x - offsetX + this.viewWidth / 2) / this.viewWidth);
+				if (x < 0) {
+					x = 0;
+				}
+				if (x >= this.colsValue) return;
+				let y = Math.floor((e.detail.y + this.viewWidth / 2) / this.viewWidth);
+				let index = this.colsValue * y + x;
+				if (item.index != index && index < this.imageList.length) {
+					this.changeStatus = false;
+					for (let obj of this.imageList) {
+						if (item.index > index && obj.index >= index && obj.index < item.index) {
+							this.change(obj, 1);
+						} else if (item.index < index && obj.index <= index && obj.index > item.index) {
+							this.change(obj, -1);
+						} else if (obj.id != item.id) {
+							obj.offset = 0;
+							obj.x = obj.oldX;
+							obj.y = obj.oldY;
+							setTimeout(() => {
+								this.$nextTick(() => {
+									obj.x = this.getAlignedX(obj.absX);
+									obj.y = obj.absY * this.viewWidth;
+									obj.oldX = obj.x;
+									obj.oldY = obj.y;
+								});
+							}, 0);
+						}
+					}
+					item.index = index;
+					const totalWithButton = this.getTotalCount();
+					const pos = this.calculatePosition(index, totalWithButton);
+					item.absX = pos.absX;
+					item.absY = pos.absY;
+					if (!item.moveEnd) {
+						setTimeout(() => {
+							this.$nextTick(() => {
+								item.x = this.getAlignedX(item.absX);
+								item.y = item.absY * this.viewWidth;
+								item.oldX = item.x;
+								item.oldY = item.y;
+							});
+						}, 0);
+					}
+					this.sortList();
+				}
+			}
+		},
+		change(obj, i) {
+			obj.index += i;
+			obj.offset = 0;
+			obj.x = obj.oldX;
+			obj.y = obj.oldY;
+			const totalWithButton = this.getTotalCount();
+			const pos = this.calculatePosition(obj.index, totalWithButton);
+			obj.absX = pos.absX;
+			obj.absY = pos.absY;
+			setTimeout(() => {
+				this.$nextTick(() => {
+					obj.x = this.getAlignedX(obj.absX);
+					obj.y = obj.absY * this.viewWidth;
+					obj.oldX = obj.x;
+					obj.oldY = obj.y;
+				});
+			}, 0);
+		},
+		touchstart(item) {
+			// 如果不允许拖拽，则不执行任何操作
+			if (!this.draggable) {
+				return;
+			}
+
+			this.imageList.forEach((v) => {
+				v.zIndex = v.index + 9;
+			});
+			item.zIndex = 99;
+			item.moveEnd = true;
+			this.tempItem = item;
+			
+			// 记录起始坐标，用于通过位移判断点击
+			item.startX = item.oldX;
+			item.startY = item.oldY;
+
+			this.timer = setTimeout(() => {
+				item.scale = this.scale;
+				item.opacity = this.opacity;
+				if (this.timer) {
+					clearTimeout(this.timer);
+					this.timer = null;
+				}
+			}, this.longPressTime);
+		},
+		handleClick(item, type) {
+			// 设为disable后无法触发touch事件
+			if (!this.draggable) {
+				if (type === 'video') {
+					this.playVideo(item);
+				} else {
+					this.previewImage(item);
+				}
+			}
+		},
+		touchend(event, item) {
+			const eventType = event.type; // 'touchend' 或 'mouseup'
+
+			// 如果是触摸事件，标记时间戳，避免后续的 mouseup 重复触发
+			if (eventType === 'touchend') {
+				this.lastTouchEndTime = Date.now();
+			} else if (eventType === 'mouseup') {
+				// 如果 100ms 内已经处理过 touchend，则忽略此 mouseup（避免重复）
+				if (this.lastTouchEndTime && Date.now() - this.lastTouchEndTime < 100) {
+					if (this.timer) {
+						clearTimeout(this.timer);
+						this.timer = null;
+					}
+					// 确保 scale 恢复为 1
+					item.scale = 1;
+					item.opacity = 1;
+					return;
+				}
+			}
+
+			// 判断是否为点击操作（而非拖动）
+			const moveDistance = Math.sqrt(Math.pow(item.oldX - (item.startX || 0), 2) + Math.pow(item.oldY - (item.startY || 0), 2));
+			const isClickAction = this.timer && moveDistance < this.rpx2px(this.clickThreshold);
+
+			if (isClickAction && this.preStatus && this.changeStatus) {
+				if (this.moveType === 'video') {
+					this.playVideo(item);
+				} else {
+					setTimeout(()=>{
+                        this.previewImage(item);
+                    },0)
+				}
+			}
+
+			// 无论是否触发点击，都需清理计时器防止后续意外放大
+			if (this.timer) {
+				clearTimeout(this.timer);
+				this.timer = null;
+			}
+
+			item.scale = 1;
+			item.opacity = 1;
+			item.x = item.oldX;
+			item.y = item.oldY;
+			item.offset = 0;
+			item.moveEnd = false;
+			setTimeout(() => {
+				this.$nextTick(() => {
+					item.x = this.getAlignedX(item.absX);
+					item.y = item.absY * this.viewWidth;
+					item.oldX = item.x;
+					item.oldY = item.y;
+					this.tempItem = null;
+					this.changeStatus = true;
+				});
+			}, 0);
+		},
+		playVideo(item) {
+			clearTimeout(this.timer);
+			this.timer = null;
+			this.$emit('videoClick', item);
+		},
+		previewImage(item) {
+			clearTimeout(this.timer);
+			this.timer = null;
+			let srcList = this.internalValue.map((v) => this.getSrc(v));
+			uni.previewImage({
+				urls: srcList,
+				current: item.src,
+				success: () => {
+					this.preStatus = false;
+					setTimeout(() => {
+						this.preStatus = true;
+					}, 600);
+				},
+				fail: (e) => {
+					console.log(e);
+				}
+			});
+		},
+		mouseenter() {
+			//#ifdef H5
+			this.imageList.forEach((v) => {
+				v.disable = false;
+			});
+			//#endif
+		},
+		mouseleave() {
+			//#ifdef H5
+			if (this.tempItem) {
+				this.imageList.forEach((v) => {
+					v.disable = true;
+					v.zIndex = v.index + 9;
+					v.offset = 0;
+					v.moveEnd = false;
+					if (v.id == this.tempItem.id) {
+						if (this.timer) {
+							clearTimeout(this.timer);
+							this.timer = null;
+						}
+						v.scale = 1;
+						v.opacity = 1;
+						v.x = v.oldX;
+						v.y = v.oldY;
+						this.$nextTick(() => {
+							v.x = this.getAlignedX(v.absX);
+							v.y = v.absY * this.viewWidth;
+							v.oldX = v.x;
+							v.oldY = v.y;
+							this.tempItem = null;
+						});
+					}
+				});
+				this.changeStatus = true;
+			}
+			//#endif
+		},
+		delImages(item, index) {
+			// 检查是否传入了有效的删除 Hook 且不是默认的空函数
+			if (this.delImage && typeof this.delImage === 'function' && this.delImage !== this.$options.props.delImage.default) {
+				this.delImage((confirmed) => {
+					if (confirmed !== false) {
+						this.delImageHandle(item, index);
+					}
+				});
+			} else {
+				this.delImageHandle(item, index);
+			}
+		},
+		delImageMp(item, index) {
+			//#ifdef MP
+			this.delImages(item, index);
+			//#endif
+		},
+		delImageHandle(item, index) {
+			// 设置标志,防止 watch 触发重新初始化
+			this.changeStatus = false;
+
+			// 删除指定图片
+			this.imageList.splice(index, 1);
+
+			// 重新排序：按照当前的 index 排序（保持拖拽后的逻辑顺序）
+			this.imageList.sort((a, b) => a.index - b.index);
+
+			// 更新索引和位置（根据排序后的新位置）
+			const totalWithButton = this.getTotalCount();
+			this.imageList.forEach((obj, i) => {
+				obj.index = i;
+				const pos = this.calculatePosition(i, totalWithButton);
+				obj.absX = pos.absX;
+				obj.absY = pos.absY;
+				const newX = this.getAlignedX(obj.absX);
+				const newY = obj.absY * this.viewWidth;
+
+				// 平滑过渡到新位置
+				obj.x = obj.oldX;
+				obj.y = obj.oldY;
+				this.$nextTick(() => {
+					obj.x = newX;
+					obj.y = newY;
+					obj.oldX = newX;
+					obj.oldY = newY;
+				});
+			});
+
+			this.updateAddButtonPosition();
+			this.sortList();
+
+			// 恢复标志
+			this.$nextTick(() => {
+				this.changeStatus = true;
+			});
+		},
+		sortList() {
+			const result = [];
+			let list = this.imageList.slice();
+			list.sort((a, b) => {
+				return a.index - b.index;
+			});
+			for (let s of list) {
+				let item = this.internalValue.find((d) => this.getSrc(d) == s.src);
+				if (item) {
+					result.push(item);
+				} else {
+					if (this.keyName !== null) {
+						result.push({
+							[this.keyName]: s.src
+						});
+					} else {
+						result.push(s.src);
+					}
+				}
+			}
+
+			this.$emit('input', result);
+			this.$emit('update:modelValue', result);
+		},
+		handleValueChange(n) {
+			if (!this.first && this.changeStatus) {
+				let flag = false;
+				for (let i = 0; i < n.length; i++) {
+					if (flag) {
+						this.addProperties(this.getSrc(n[i]));
+						continue;
+					}
+					if (this.imageList.length === i || this.imageList[i].src !== this.getSrc(n[i])) {
+						flag = true;
+						this.imageList.splice(i);
+						this.addProperties(this.getSrc(n[i]));
+					}
+				}
+			}
+		},
+		addProperties(item) {
+			const newIndex = this.imageList.length;
+
+			// 先添加图片到列表
+			this.imageList.push({
+				src: item,
+				x: 0,
+				y: 0,
+				oldX: 0,
+				oldY: 0,
+				absX: 0,
+				absY: 0,
+				scale: 1,
+				zIndex: 9,
+				opacity: 1,
+				index: newIndex,
+				id: this.guid(16),
+				disable: false,
+				offset: 0,
+				startX: 0,
+				startY: 0,
+				moveEnd: false,
+				loading: true
+			});
+
+			// 计算图片的位置
+			const totalWithButton = this.getTotalCount();
+			const pos = this.calculatePosition(newIndex, totalWithButton);
+			const obj = this.imageList[newIndex];
+			obj.absX = pos.absX;
+			obj.absY = pos.absY;
+			obj.x = this.getAlignedX(pos.absX);
+			obj.y = pos.absY * this.viewWidth;
+			obj.oldX = obj.x;
+			obj.oldY = obj.y;
+
+			this.updateAddButtonPosition();
+			if (this.align === 'right') {
+				this.recalculateAllPositions();
+			}
+		},
+
+		/**
+		 * 重新计算所有图片的位置（用于右对齐时添加/删除图片）
+		 */
+		recalculateAllPositions() {
+			const totalWithButton = this.getTotalCount();
+			this.imageList.forEach((obj, i) => {
+				const pos = this.calculatePosition(i, totalWithButton);
+				const newX = this.getAlignedX(pos.absX);
+				const newY = pos.absY * this.viewWidth;
+
+				// 如果位置有变化，进行动画过渡
+				if (obj.absX !== pos.absX || obj.absY !== pos.absY) {
+					obj.x = obj.oldX;
+					obj.y = obj.oldY;
+					obj.absX = pos.absX;
+					obj.absY = pos.absY;
+					this.$nextTick(() => {
+						obj.x = newX;
+						obj.y = newY;
+						obj.oldX = newX;
+						obj.oldY = newY;
+					});
+				} else {
+					obj.absX = pos.absX;
+					obj.absY = pos.absY;
+					obj.x = newX;
+					obj.y = newY;
+					obj.oldX = newX;
+					obj.oldY = newY;
+				}
+			});
+		},
+		nothing() {},
+		rpx2px(v) {
+			return (this.width * v) / 750;
+		},
+		guid(len = 32) {
+			const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+			const uuid = [];
+			const radix = chars.length;
+			for (let i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
+			uuid.shift();
+			return `u${uuid.join('')}`;
+		},
+		// 更新添加按钮的位置
+		updateAddButtonPosition() {
+			if (!this.viewWidth || !this.colsValue) {
+				console.warn('updateAddButtonPosition called before initialization');
+				return;
+			}
+			const length = this.imageList.length;
+
+			if (this.align === 'right' && this.showAddButton) {
+				// 右对齐且显示按钮：按钮的位置就是"虚拟的第 length 个元素"的位置
+				// 总数包括按钮本身
+				const totalWithButton = length + 1;
+				const pos = this.calculatePosition(length, totalWithButton);
+				this.add.x = this.getAlignedX(pos.absX) + 'px';
+				this.add.y = pos.absY * this.viewWidth + 'px';
+			} else {
+				// 左对齐或不显示按钮：按钮直接跟在最后一个元素后面
+				const absX = length % this.colsValue;
+				const absY = Math.floor(length / this.colsValue);
+				this.add.x = this.getAlignedX(absX) + 'px';
+				this.add.y = absY * this.viewWidth + 'px';
+			}
+		},
+		handleMediaLoad(item) {
+			if (!item) return;
+			item.loading = false;
+		},
+		handleMediaError(item) {
+			if (!item) return;
+			item.loading = false;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.con { 
+	.area {
+		width: 100%;
+
+		.view {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			.area-con {
+				position: relative;
+				overflow: hidden;
+
+				.pre-image {
+					width: 100%;
+					height: 100%;
+				}
+
+				.myVideo {
+					width: 100%;
+					height: 100%;
+					border-radius: 8rpx;
+					position: relative;
+					z-index: 0 !important;
+
+					&::after {
+						content: '';
+						position: absolute;
+						/* background: url('../../static/oxygen/icon_play1.png') no-repeat; */
+						background-size: 100% 100%;
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%, -50%);
+						width: 60%;
+						height: 60%;
+						opacity: 0.9;
+						z-index: 1;
+					}
+				}
+
+				.media-loading-overlay {
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					background-color: rgba(0, 0, 0, 0.05);
+					border-radius: inherit;
+					z-index: 5;
+				}
+
+				.loading-spinner {
+					width: 40rpx;
+					height: 40rpx;
+					border: 4rpx solid rgba(0, 0, 0, 0.1);
+					border-top-color: #007aff;
+					border-radius: 50%;
+					animation: spinner-rotate 0.8s linear infinite;
+				}
+
+				.del-con {
+					position: absolute;
+					top: 0rpx;
+					right: 0rpx;
+					padding: 0 0 12rpx 12rpx;
+
+					.del-wrap {
+						width: 36rpx;
+						height: 36rpx;
+						background-color: rgba(0, 0, 0, 0.4);
+						border-radius: 0 0 0 10rpx;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+
+						.del-image {
+							width: 20rpx;
+							height: 20rpx;
+						}
+					}
+				}
+			}
+		}
+
+		.add {
+			position: absolute;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			.add-wrap {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				background-color: #eeeeee;
+			}
+		}
+	}
+}
+
+@keyframes spinner-rotate {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+</style>