xydata-tools 1.0.48 → 1.0.49

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

@@ -1,853 +1,821 @@
-<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)"
-                    @click="handleClick(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)"></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)"></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' }">
-                    <view class="add-wrap"
-                        :style="{ width: childWidth, height: childWidth, borderRadius: borderRadius + 'rpx' }">
-                        <slot name="add-button" :childWidth="childWidth" :borderRadius="borderRadius"></slot>
-                    </view>
-                </view>
-            </movable-area>
-
-        </template>
-    </view>
-</template>
-
-<script>
-export default {
-    emits: ['input', 'update:modelValue', 'add-click'],
-    props: {
-        // 排序图片
-        value: {
-            type: Array,
-            default: function () {
-                return []
-            }
-        },
-        // 排序图片
-        modelValue: {
-            type: Array,
-            default: function () {
-                return []
-            }
-        },
-        // 从 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
-        },
-        // 拖动图片时不透明度
-        opacity: {
-            type: Number,
-            default: 0.7
-        },
-        // 自定义添加
-        addImage: {
-            type: Function,
-            default: null
-        },
-        // 删除确认
-        delImage: {
-            type: Function,
-            default: null
-        },
-        moveType: {
-            type: String,
-            default: 'image', // 'image' 或 'video'
-        },
-        // 是否启用添加按钮功能（由父组件控制是否需要添加按钮功能）
-        enableAddButton: {
-            type: Boolean,
-            default: false
-        },
-        // 对齐方式：'left' 从左往右排列，'right' 从右往左排列
-        align: {
-            type: String,
-            default: 'left',
-            validator: (value) => ['left', 'right'].includes(value)
-        },
-        // 是否可以拖拽排序
-        draggable: {
-            type: Boolean,
-            default: true
-        },
-    },
-    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 的时间，用于避免重复触发
-        }
-    },
-    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'
-        },
-    },
-    watch: {
-        value: {
-            handler(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]))
-                        }
-                    }
-                }
-            },
-            deep: true
-        },
-        modelValue: {
-            handler(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]))
-                        }
-                    }
-                }
-            },
-            deep: true
-        },
-        align() {
-            this.updateRightAlignOffset()
-            if (!this.viewWidth || !this.colsValue) {
-                return
-            }
-            this.recalculateAllPositions()
-            this.updateAddButtonPosition()
-        }
-    },
-    created() {
-        this.width = uni.getSystemInfoSync().windowWidth
-    },
-    mounted() {
-        const query = uni.createSelectorQuery().in(this)
-        query.select('.con').boundingClientRect(data => {
-            this.containerWidth = data.width
-            this.colsValue = this.cols
-            this.viewWidth = data.width / this.cols
-            if (this.imageWidth > 0) {
-                this.viewWidth = this.rpx2px(this.imageWidth)
-                this.colsValue = Math.floor(data.width / this.viewWidth)
-            }
-            if (this.colsValue < 1) {
-                this.colsValue = 1
-            }
-            this.updateRightAlignOffset()
-            let list = this.value
-            // #ifdef VUE3
-            list = this.modelValue
-            // #endif
-            for (let item of list) {
-                this.addProperties(this.getSrc(item))
-            }
-
-            // 初始化添加按钮位置
-            this.updateAddButtonPosition()
-
-            this.first = false
-
-        })
-        query.exec()
-    },
-    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
-            this.timer = setTimeout(() => {
-                item.scale = this.scale
-                item.opacity = this.opacity
-                clearTimeout(this.timer)
-                this.timer = null
-            }, 200)
-        },
-        handleClick(item) {
-            // 设为disable后无法触发touch事件
-            if (!this.draggable) {
-                if (this.moveType === '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
-                }
-            }
-
-            // 判断是否为点击操作（而非拖动）
-            if (this.timer && this.preStatus && this.changeStatus && item.offset < 28.28) {
-                if (this.moveType === 'video') {
-                    this.playVideo(item)
-                } else {
-                    this.previewImage(item)
-                }
-            } else 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
-            const list = this.value || this.modelValue
-            let srcList = list.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) {
-            if (typeof this.delImage === 'function') {
-                this.delImage.bind(this.$parent)(() => {
-                    this.delImageHandle(item, index)
-                })
-            } else {
-                this.delImageHandle(item, index)
-            }
-        },
-        delImageHandle(item, index) {
-            this.imageList.splice(index, 1)
-
-            // 重新计算所有图片的位置和索引
-            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
-
-                // 如果位置有变化，才进行动画
-                if (obj.x !== newX || obj.y !== newY) {
-                    obj.x = obj.oldX
-                    obj.y = obj.oldY
-                    this.$nextTick(() => {
-                        obj.x = newX
-                        obj.y = newY
-                        obj.oldX = newX
-                        obj.oldY = newY
-                    })
-                } else {
-                    obj.oldX = newX
-                    obj.oldY = newY
-                }
-            })
-
-            this.updateAddButtonPosition()
-            this.sortList()
-        },
-        delImageMp(item, index) {
-            //#ifdef MP
-            this.delImages(item, index)
-            //#endif
-        },
-        sortList() {
-            const result = []
-            let source = this.value
-            // #ifdef VUE3
-            source = this.modelValue
-            // #endif
-
-            let list = this.imageList.slice()
-            list.sort((a, b) => {
-                return a.index - b.index
-            })
-            for (let s of list) {
-                let item = source.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);
-        },
-        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,
-                moveEnd: false,
-                loading: true
-            })
-
-            // 如果是右对齐且显示按钮，添加新图片后需要重新计算所有图片位置
-            if (this.align === 'right' && this.showAddButton) {
-                this.recalculateAllPositions()
-            } else {
-                // 否则只计算新图片的位置
-                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()
-        },
-
-        /**
-         * 重新计算所有图片的位置（用于右对齐时添加/删除图片）
-         */
-        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 {
-    // padding: 30rpx;
-
-    .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 20rpx 20rpx;
-
-                    .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>
+<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' }">
+                    <view class="add-wrap"
+                        :style="{ width: childWidth, height: childWidth, borderRadius: borderRadius + 'rpx' }">
+                        <slot name="add-button" :childWidth="childWidth" :borderRadius="borderRadius"></slot>
+                    </view>
+                </view>
+            </movable-area>
+
+        </template>
+    </view>
+</template>
+
+<script>
+export default {
+    emits: ['input', 'add-click'],
+    props: {
+        // 排序图片
+        value: {
+            type: Array,
+            default: function () {
+                return []
+            }
+        },
+        // 从 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
+        },
+        // 拖动图片时不透明度
+        opacity: {
+            type: Number,
+            default: 0.7
+        },
+        // 自定义添加
+        addImage: {
+            type: Function,
+            default: null
+        },
+        // 删除确认
+        delImage: {
+            type: Function,
+            default: null
+        },
+        moveType: {
+            type: String,
+            default: 'image', // 'image' 或 'video'
+        },
+        // 是否启用添加按钮功能（由父组件控制是否需要添加按钮功能）
+        enableAddButton: {
+            type: Boolean,
+            default: false
+        },
+        // 对齐方式：'left' 从左往右排列，'right' 从右往左排列
+        align: {
+            type: String,
+            default: 'left',
+            validator: (value) => ['left', 'right'].includes(value)
+        },
+        // 是否可以拖拽排序
+        draggable: {
+            type: Boolean,
+            default: true
+        },
+    },
+    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 的时间，用于避免重复触发
+        }
+    },
+    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'
+        },
+    },
+    watch: {
+        value: {
+            handler(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]))
+                        }
+                    }
+                }
+            },
+            deep: true
+        },
+        align() {
+            this.updateRightAlignOffset()
+            if (!this.viewWidth || !this.colsValue) {
+                return
+            }
+            this.recalculateAllPositions()
+            this.updateAddButtonPosition()
+        }
+    },
+    created() {
+        this.width = uni.getSystemInfoSync().windowWidth
+    },
+    mounted() {
+        const query = uni.createSelectorQuery().in(this)
+        query.select('.con').boundingClientRect(data => {
+            this.containerWidth = data.width
+            this.colsValue = this.cols
+            this.viewWidth = data.width / this.cols
+            if (this.imageWidth > 0) {
+                this.viewWidth = this.rpx2px(this.imageWidth)
+                this.colsValue = Math.floor(data.width / this.viewWidth)
+            }
+            if (this.colsValue < 1) {
+                this.colsValue = 1
+            }
+            this.updateRightAlignOffset()
+            for (let item of this.value) {
+                this.addProperties(this.getSrc(item))
+            }
+
+            this.first = false
+
+        })
+        query.exec()
+    },
+    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
+            this.timer = setTimeout(() => {
+                item.scale = this.scale
+                item.opacity = this.opacity
+                clearTimeout(this.timer)
+                this.timer = null
+            }, 200)
+        },
+        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
+                }
+            }
+
+            // 判断是否为点击操作（而非拖动）
+            if (this.timer && this.preStatus && this.changeStatus && item.offset < 28.28) {
+                if (this.moveType === 'video') {
+                    this.playVideo(item)
+                } else {
+                    this.previewImage(item)
+                }
+            } else 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.value.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) { 
+            if (typeof this.delImage === 'function') {
+                this.delImage.bind(this.$parent)(() => {
+                    this.delImageHandle(item, index)
+                })
+            } else {
+                this.delImageHandle(item, index)
+            }
+        },
+        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
+            })
+        },
+        delImageMp(item, index) {
+            //#ifdef MP
+            this.delImages(item, index)
+            //#endif
+        },
+        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.value.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);
+        },
+        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,
+                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 {
+    // padding: 30rpx;
+
+    .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>