qimall/addons/Bargain/backend/views/default/components/diy-preview.php

<template id="diy-preview">
    <div style="flex:1;position:relative">
        <el-scrollbar class="dp-el-scrollbar" ref="scrollbar">
            <div id="diy-preview-contain" class="dp-contain" ref="diyPreview" :style="mainStyle">
                <div id="diy-test">
                    <div style="position: relative" data-html2canvas-ignore>
                        <!-- :style="{ 'background': topStatusBar.bg}" -->
                        <div class="dp-header-placeholder"></div>
                    </div>
                    <!-- 头部 -->
                    <div class="drag-scroll" :data-id="item.id" v-for="(item,index) in headerArr" :key="item.id" @click="onClick(item, index)">
                        <div :class="computedItem(item,index)">
                            <components :is="getName(item)" :active-item="item"></components>

                            <div class="dp-close" v-if="deleteBtn(item)" @click.stop>
                                <el-popover placement="bottom" v-model="item.visible">
                                    <p class="diy-del-text">确定删除吗？</p>
                                    <div flex="cross:center">
                                        <el-button class="diy-del-btn" size="mini" plain @click.stop="deleteItem">删除</el-button>
                                        <el-button size="mini" plain @click="item.visible = false">取消</el-button>
                                    </div>
                                    <i class="el-icon-close" slot="reference"></i>
                                </el-popover>
                            </div>
                            <div class="dp-hover"></div>
                            <!-- 前端是否显示 -->
                            <div class="show" v-if="!item.isShow">
                                <div>已隐藏</div>
                            </div>
                        </div>
                    </div>

                    <!-- 拖拽容器 - 文档流元素 -->
                    <draggable v-model="prevArr" :animation="300" :options="{filter:'.undraggable',preventOnFilter:false}" @start="start" @end="onEnd">
                        <transition-group>
                            <!-- 请保证生成key唯一 -->
                            <!-- v-if 会影响滚动精准 -->
                            <div class="drag-scroll" :data-id="item.id" v-if="filterArr(item)" v-for="(item,index) in prevArr" :class="[ item.is_drag !== false ? '' : 'undraggable']" :key="item.id" @click="onClick(item, index)">
                                <div :class="computedItem(item,index)">
                                    <components :is="getName(item)" :active-item="item"></components>
                                    <!-- <div class="dp-close" v-if="deleteBtn(item)" @click.stop>
                                        <el-popover placement="bottom" v-model="item.visible">
                                            <p class="diy-del-text">确定删除吗？</p>
                                            <div flex="cross:center">
                                                <el-button class="diy-del-btn" size="mini" plain @click.stop="deleteItem">删除</el-button>
                                                <el-button size="mini" plain @click="item.visible = false">取消</el-button>
                                            </div>
                                            <i class="el-icon-close" slot="reference"></i>
                                        </el-popover>
                                    </div> -->
                                    <div class="dp-hover"></div>
                                    <!-- 前端是否显示 -->
                                    <div class="show" v-if="!item.isShow">
                                        <div>已隐藏</div>
                                    </div>
                                </div>
                            </div>
                        </transition-group>
                    </draggable>

                    <!-- 脱离文档流元素 - 选中效果需要子元素添加.diy-solid-line类名 -->
                    <div id="float">
                        <div class="drag-scroll" :data-id="item.id" v-if="filterFloatArr(item)" v-for="(item,index) in prevArr" :key="item.id" @click="onClick(item, index)" v-show="index != 0">
                            <div :class="computedFloatItem(item,index)">
                                <components :is="getName(item)" :active-item="item">
                                    <!-- 容器里面必须有position不为默认值的情况 - 才生效 -->
                                    <div class="dp-close" v-if="deleteBtn(item)" @click.stop>
                                        <el-popover placement="bottom" v-model="item.visible">
                                            <p class="diy-del-text">确定删除吗？</p>
                                            <div flex="cross:center">
                                                <el-button class="diy-del-btn" size="mini" plain @click.stop="deleteItem">删除</el-button>
                                                <el-button size="mini" plain @click="item.visible = false">取消</el-button>
                                            </div>
                                            <i class="el-icon-close" slot="reference"></i>
                                        </el-popover>
                                    </div>
                                    <div class="dp-hover"></div>
                                    <!-- 前端是否显示 -->
                                    <div class="show" v-if="!item.isShow">
                                        <div>已隐藏</div>
                                    </div>
                                </components>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>
<script src="/resources/js/Sortable.min.js"></script>
<script src="<?= Yii::$app->request->baseUrl ?>/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>

<script>
    Vue.component('diy-preview', {
        name: "diy-preview",
        template: '#diy-preview',
        props: {
            list: {
                type: Array,
                default () {
                    return []
                }
            },
            activeIndex: {
                type: Number,
                default () {
                    return 0
                }
            },
        },
        watch: {
            list: {
                handler(newValue) {
                    this.$nextTick(() => {
                        if (newValue && newValue.length) {
                            this.headerArr = newValue.filter(item => {
                                const e1 = item.funcListItem || {}
                                return e1.is_top
                            })
                            this.prevArr = newValue.slice(0)
                        }
                    })
                },
                deep: true,
                immediate: true
            },
            activeIndex(newVal, oldVal) {
                if (newVal === oldVal) return false
                var el = this.$refs.scrollbar.wrap; // 滚动容器
                var currentTop = this.$refs.scrollbar.wrap.scrollTop;
                var containHeight = el.offsetHeight;
                var halfHeight = containHeight / 2 - 200;
                clearTimeout(this.timerID)
                this.timerID = setTimeout(() => {
                    this.$nextTick(() => {
                        var itemDom = this.getTargetDom(newVal)
                        if (!itemDom) {
                            return
                        }
                        var clientTop = itemDom.offsetTop - currentTop;
                        if (clientTop < halfHeight) { // 往下
                            var addTop = halfHeight - clientTop
                            this.toTop(currentTop, currentTop - addTop)
                        } else { // 往上
                            this.toTop(currentTop, currentTop + clientTop - halfHeight)
                        }
                    })
                }, 200);
            }
        },
        data() {
            return {
                visible: false,
                components: [],
                headerArr: [],
                prevArr: [],
                duration: 0,
                floatArr: ["order-broadcast"],
                timerID: 0
            };
        },
        computed: {
            content() {
                var item = this.list[this.activeIndex]
                return item && item.isShow ? "隐藏" : "显示"
            },
            mainStyle() {
                if (!this.prevArr[0]) {
                    return {}
                }
                var mainPage = this.prevArr[0].data.mainPage || {}
                var style = {
                    backgroundSize: "100%",
                    backgroundRepeat: "no-repeat",
                    backgroundPosition: "left top",
                    backgroundColor: mainPage.defColor
                } // 基类
                if (mainPage.imgUrl) {
                    style.backgroundImage = `url(${mainPage.imgUrl})`
                }
                return style
            }
        },
        methods: {
            getTargetDom(newVal) {
                // 通过id查询对应dom - drag-scroll类名必须对应prevArr顺序
                const domList = document.getElementsByClassName("drag-scroll");
                const item = this.prevArr[newVal]
                const id = item && item.id
                let domTarget = null;
                for (let index = 0; index < domList.length; index++) {
                    let dom = domList[index];
                    if (dom.dataset.id === id) {
                        domTarget = dom
                    }
                }
                return domTarget
            },
            deleteBtn(item) {
                var typeCom = ['nav'] // 过滤肯定不要删除的组件
                return !(typeCom.indexOf(item.funcListItem.type) !== -1) && (!item.disabled || !(item.is_delete === false))
            },
            toTop(startTop = 100, endTop = 0, duration = 400) {
                var start = 0;
                var el = this.$refs.scrollbar;
                const frameFunc = (t) => {
                    if (!start) {
                        start = t
                    }
                    var time = t - start
                    el.wrap.scrollTop = linear(time, startTop, endTop - startTop, duration)
                    if (time > duration) {
                        return false
                    }
                    requestAnimationFrame(frameFunc)
                };
                requestAnimationFrame(frameFunc)

                // 辅助函数
                /** 运动算法
                 * t:动画已经消耗的时间
                 * b:小球初始位置
                 * c:小球的需要移动额距离
                 * d:动画持续的总时间
                 * */
                function linear(t, b, c, d) {
                    return c * t / d + b;
                }

            },
            filterArr(item) {
                var boo = false
                try {
                    if (item.funcListItem.is_top) { // 头部元素
                        boo = false
                    } else { // 浮动元素
                        boo = !this.filterFloatArr(item)
                    }
                } catch (error) {
                    console.log(error);
                }
                return boo
            },
            filterFloatArr(item) {
                var boo = false;
                if (!item) {
                    return boo
                }
                return this.floatArr.some(type => {
                    return type === item.funcListItem.type
                })
            },
            start(e) {
                console.log(e);
                this.duration = 300
            },
            onEnd(e) {
                this.$emit("change-move", {
                    newIndex: e.newIndex,
                    list: this.prevArr
                })
                this.duration = 0
            },
            getName(target) {
                try {
                    return target ? target.funcListItem.type + "-preview" : ''
                } catch (e) {
                    console.log(e);
                    return ""
                }
            },
            computedItem(item, index) {
                return {
                    'dp-list-item': true,
                    'dp-active-item': this.activeIndex == index,
                    'dp-is-show': item.isShow
                }
            },
            computedFloatItem(item, index) {
                return {
                    'float-dp-list-item': true,
                    'float-dp-active-item': this.activeIndex == index,
                    'float-dp-is-show': item.isShow
                }
            },
            onClick(item, index) {
                this.$emit("select-item", this.list[index], index)
            },
            /**
             * 操作相关
             */
            copy() {
                if (this.operAuth("copy")) {
                    return
                }
                this.$eventBus.$emit("diy-preview-copy")
            },
            deleteItem() {
                this.visible = false
                this.operateFn('delete')
            },
            operAuth(type) {
                var item = this.prevArr[this.activeIndex] || {
                    funcListItem: {}
                }
                var typeCom = ['nav'] // 过滤肯定禁用的组件
                var boo = false
                if (item) {
                    boo = (typeCom.indexOf(item.funcListItem.type) !== -1) || this.activeIndex === -1 || item.disabled === false;
                }

                var obj = {
                    show: boo,
                    up: boo || item.is_up === false,
                    down: boo || item.is_down === false,
                    copy: boo || item.is_copy === false,
                    delete: boo || item.is_delete === false
                }
                return obj[type]
            },
            operateFn(type, index) {
                // up - down - show - delete
                if (this.operAuth(type)) {
                    return
                }

                this.$eventBus.$emit("diy-preview-operateFn", {
                    type,
                    index: this.activeIndex
                })
            },
            setBg() {
                this.$eventBus.$emit("diy-back-set")
            },
        },
    });
</script>

<style>
    .dp-contain {
        position: relative;
        box-sizing: initial;
        display: flex;
        flex-direction: column;
        width: 375px;
        margin: 45px auto 0;
        border: 1px solid #ddd;
        min-height: 900px;
    }

    .dp-el-scrollbar {
        height: 100%;
    }

    .dp-header-placeholder {
        width: 100%;
        height: 44px;
        background-size: 100% 100%;
        z-index: 99;
        background: url("resources/img/decorate/nav/light1.png") no-repeat;
    }

    #float {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        margin-top: 88px;
    }

    .dp-nav-placeholder {
        position: relative;
        height: 44px;
    }

    .dp-list-item {
        position: relative;
    }

    .float-dp-list-item {
        /* position: relative; */
        float: left;
        pointer-events: auto;
    }

    .dp-list-item .dp-close,
    .float-dp-list-item .dp-close {
        display: none;
    }

    .dp-active-item:before,
    .float-dp-active-item .diy-solid-line:before {
        box-sizing: border-box;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid var(--diy-theme);
        height: 100%;
        z-index: 100;
        pointer-events: none;
        cursor: move;
    }

    .dp-active-item .dp-close,
    .float-dp-active-item .dp-close {
        display: block;
    }

    .slide-right {
        position: absolute;
        width: 42px;
        height: 200px;
        top: 0;
        bottom: 0;
        left: 50%;
        background: #73767D;
        margin: auto 0 auto 220px;
        /* margin-left: ; */
        border-radius: 2px;
        z-index: 999;
    }

    .slide-right .iconfont-el {
        color: #fff;
        display: block;
        text-align: center;
        font-size: 24px;
        line-height: 40px;
        cursor: pointer;
        position: relative;
    }

    .slide-right .iconfont-el>p {
        display: none;
    }

    .dp-close {
        position: absolute;
        top: 0;
        right: 0;
        width: 16px;
        height: 16px;
        background-color: var(--diy-theme);
        color: #fff;
        font-size: 12px;
        text-align: center;
        border-bottom-left-radius: 40px;
        z-index: 99;
    }

    .dp-close .el-icon-close {
        transform: translate(2px, -2px);
    }

    .flip-list-move {
        transition: transform 1s;
    }

    .dp-hover:before {
        box-sizing: border-box;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px dashed var(--diy-theme);
        height: 100%;
        z-index: 100;
        pointer-events: none;
        cursor: move;
        display: none;
    }

    .dp-list-item:hover .dp-hover:before,
    .float-dp-list-item .diy-solid-line:hover .dp-hover:before {
        display: block;
    }

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .show {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 10;
    }

    .show div {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 68px;
        height: 24px;
        line-height: 24px;
        margin: auto;
        text-align: center;
        background-color: #000;
        border-radius: 50px;
        color: #fff;
    }
</style>