qimall/backend/views/components/common/diy/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 hide-scrollbar" 
                      :data-id="navComponent.id"
                      @click="onClick(navComponent, 0)"
                    >
                      <div :class="computedItem(navComponent, 0)">
                        <components :is="getName(navComponent)" :active-item="navComponent"></components>
                        <div 
                          v-if="showLocationBtn(navComponent) && isShowLocation" 
                          style="
                            position: absolute;
                            width: 42px;
                            height: 84px;
                            top: 42px;
                            bottom: 0;
                            left: 50%;
                            background: #73767D;
                            margin: auto 0 auto 220px;
                            border-radius: 2px;
                            z-index: 999;
                          "
                        >
                            <div style="position: relative;">
                                <el-tooltip class="item" effect="dark" :content="content" placement="right">
                                    <i class="iconfont-el el-icon-location-outline" style="
                                    height:42px;width:42px;font-size:32px;color:white;display:flex;
                                    justify-content:center;align-items:center;flex-direction:column;flex-wrap:nowrap;
                                    "></i>
                                </el-tooltip>
                                <div class="mask" style="cursor:pointer;" @click.stop="operateReplaceFn('replace')"></div>
                            </div>
                        </div>
                      </div>
                    </div>

                    <div :style="contentStyle" class="scrollbar-container hide-scrollbar">

                      <!-- 头部置顶元素 -->
                      <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)" v-if="index !== 0">
                              <components :is="getName(item)" :active-item="item"></components>
                              <div v-if="showLocationBtn(item) && isShowLocation" style="position: absolute;width: 42px;height: 84px;top: 42px;bottom: 0;left: 50%;background: #73767D;margin: auto 0 auto 220px;border-radius: 2px;z-index: 999;">
                                  <div style="position: relative;">
                                      <el-tooltip class="item" effect="dark" :content="content" placement="right">
                                          <i class="iconfont-el el-icon-location-outline" style="
                                          height:42px;width:42px;font-size:32px;color:white;display:flex;
                                          justify-content:center;align-items:center;flex-direction:column;flex-wrap:nowrap;
                                          "></i>
                                      </el-tooltip>
                                      <div class="mask" style="cursor:pointer;" @click.stop="operateReplaceFn('replace')"></div>
                                  </div>
                              </div>
                          </div>
                      </div>
  
                      <!-- 拖拽容器 - 文档流元素 -->
                      <draggable class="drag-contain" :list="prevArr" group="componentsGroup" :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-show="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>
            </div>
        </el-scrollbar>
        <!-- 操作按钮 -->
        <div class="slide-right" v-if="showButton" :style="{'height': operAuthHideLength() + 'px'}">
            <div style="position: relative;" v-if="!operAuth('show') || buttonHide">
                <el-tooltip class="item" effect="dark" :content="content" placement="right">
                    <i class="iconfont-el el-icon-view" @click="operateFn('show')"></i>
                </el-tooltip>
                <div class="mask" @click.stop v-if="operAuth('show')"></div>
            </div>
            <div style="position: relative;" v-if="!operAuth('up') || buttonHide">
                <el-tooltip class="item" effect="dark" content="上移组件" placement="right">
                    <i class="iconfont-el el-icon-arrow-up" @click="operateFn('up')"></i>
                </el-tooltip>
                <div class="mask" @click.stop v-if="operAuth('up')"></div>
            </div>
            <div style="position: relative;" v-if="!operAuth('down') || buttonHide">
                <el-tooltip class="item" effect="dark" content="下移组件" placement="right">
                    <i class="iconfont-el el-icon-arrow-down" @click="operateFn('down')"></i>
                </el-tooltip>
                <div class="mask" @click.stop v-if="operAuth('down')"></div>
            </div>
            <div style="position: relative;" v-if="!operAuth('copy') || buttonHide">
                <el-tooltip class="item" effect="dark" content="复制组件" placement="right">
                    <i class="iconfont-el el-icon-document-copy" @click="copy"></i>
                </el-tooltip>
                <div class="mask" @click.stop v-if="operAuth('copy')"></div>
            </div>
            <div style="position: relative;" v-if="!operAuth('delete') || buttonHide">
                <el-tooltip class="item" effect="dark" content="删除组件" placement="right">
                    <i class="iconfont-el el-icon-delete" @click="operateFn('delete')"></i>
                </el-tooltip>
                <div class="mask" @click.stop v-if="operAuth('delete')"></div>
            </div>
            <!-- <el-tooltip class="item" effect="dark" content="背景设置" placement="right">
            <i class="iconfont-el el-icon-setting" @click="setBg"></i>
            </el-tooltip> -->
        </div>
    </div>
</template>
<script src="/resources/js/Sortable.min.js"></script>
<!-- 更改了v-if => v-show -->
<script src="/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<!-- <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
                }
            },
            showButton: { //是否显示操作按钮组
                type: Boolean,
                default: true,
            },
            buttonHide: { //指定按钮隐藏
                type: Boolean,
                default: false,
            },
            isShowLocation: {
                type: Boolean,
                default: true,
            }
        },
        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)

                            try {
                                // 打印新值
                                console.log("list newValue", newValue);

                                // 复制数组到 prevArr
                                this.prevArr = [...newValue];
                                console.log('this.prevArr', this.prevArr);

                                // 设置导航栏组件数据
                                this.navComponent = newValue[0];
                                console.log('this.navComponent', this.navComponent);

                                // 筛选头部置顶组件
                                this.headerArr = newValue.filter(item => item.funcListItem?.is_top);
                                console.log('this.headerArr', this.headerArr);

                            } catch (error) {
                                console.log('error :>> ', error);
                            }
                      }
                    })
                },
                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 {
                static_img_prefix: '<?= Yii::getAlias('@attachurl') ?>'+'/static',
                visible: false,
                // 导航栏组件
                navComponent: {},
                // 头部组件
                headerArr: [],
                // 所有装修预览组件
                prevArr: [],
                // 可以显示的浮动组件
                floatArr: ["order-broadcast","bg-music"],
                // 可以显示的弹窗组件
                alertArr: ['popup-advertisement','bargain-popup'],
                duration: 0,
                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) {
                    let backgroundImageUrl = mainPage.imgUrl;
                    if(mainPage.imgUrl.indexOf('http')==-1){
                        backgroundImageUrl = this.static_img_prefix+mainPage.imgUrl
                    }
                    style.backgroundImage = `url(${backgroundImageUrl})`
                }
                return style
            },
            contentStyle() {
                try {
                    if (!this.prevArr[0]) {
                        return {}
                    }
                    const mainPage = this.prevArr[0].data.mainPage || {}
                    const {
                        paddingTop,
                        paddingBottom,
                        paddingLeft,
                        paddingRight
                    } = mainPage
                    return {
                        paddingTop,
                        paddingBottom,
                        paddingLeft,
                        paddingRight
                    }
                } catch (error) {
                    return {}
                }
            }
        },
        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', 'goods-parse'] // 过滤肯定不要删除的组件
                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) {
                try {
                    if (!item || !item.funcListItem) {
                        return false;
                    }

                    // 过滤头部元素、浮动元素、弹窗元素
                    if (item.funcListItem.is_top || this.filterFloatArr(item) || this.filterAlertArr(item)) {
                        return false;
                    }

                    return true;
                } catch (error) {
                    console.error(error);
                    return false;
                }
            },
            // 过滤非弹窗元素
            filterAlertArr(item) {
                if (!item || !item.funcListItem || !item.funcListItem.type) {
                    return false;
                }
                return this.alertArr.includes(item.funcListItem.type);
            },
            // 过滤非浮动元素
            filterFloatArr(item) {
              if (!item || !item.funcListItem || !item.funcListItem.type) {
                  return false;
              }
              return this.floatArr.includes(item.funcListItem.type);
            },
            start(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) {
                    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) {
                console.log("onClick", item, index);
                this.$emit("select-item", item, 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', 'nav-location','member-info','goods-info'] // 过滤肯定禁用的组件
                var boo = false
                if (item) {
                    boo = (typeCom.indexOf(item.funcListItem.type) !== -1) || this.activeIndex === -1 || item.disabled === false;
                }
                // console.info(type,"type",item);
                var obj = {
                    show: boo || item.is_show === false,
                    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]
            },
            operAuthHideLength(){
                let arr = ["show","up","down","copy","delete"];
                let count = 0;
                let that = this;
                arr.forEach(v => {
                    if(!that.operAuth(v) || that.buttonHide){
                        count++;
                    }
                })
                return count * 40;
            },
            operateFn(type, index) {
                // up - down - show - delete
                if (this.operAuth(type)) {
                    return
                }

                this.$eventBus.$emit("diy-preview-operateFn", {
                    type,
                    index: this.activeIndex
                })
            },
            operateReplaceFn(type, index) {
                this.$eventBus.$emit("diy-preview-operateFn", {
                    type,
                    index: this.activeIndex
                })
            },
            setBg() {
                this.$eventBus.$emit("diy-back-set")
            },
            showLocationBtn(item) {
                let func_list = ['nav', 'nav-location'];
                return this.activeIndex == 0 && func_list.indexOf(item.funcListItem.type) > -1;
            }
        },
    });
</script>

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

    /* TODO：后面适配手机套壳后再优化手机尺寸问题 */
    .dp-contain {
        position: relative;
        box-sizing: initial;
        display: flex;
        flex-direction: column;
        border: 1px solid #ddd;
        /* 按照 iPhone SE 尺寸 */
        margin: 20px auto;
        width: 375px;
        max-width: 375px;
        /* min-height: 667px; */
        /* max-height: 667px; */
    }

    .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;
    }


    .dp-el-scrollbar .sortable-chosen {
        float: none !important;
        width: 100% !important;
        background: #fff;
    }

    .scrollbar-container {
        min-height: 623px;
        max-height: 623px;
        overflow-x: scroll;
    }

    #diy-tes,
    .drag-contain {
        min-height: 100%;
    }

    .hide-scrollbar {
        overflow: -moz-scrollbars-none;
        -ms-overflow-style: none;
        scrollbar-width: none; /* Firefox */
    }

    .hide-scrollbar::-webkit-scrollbar { 
        display: none; /* Safari 和 Chrome */
    }
</style>