qimall/backend/views/components/common/diy/style-components/diy-img-setting-drag.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-attachment');
ComponentHelper::loadComponentView('com-pick-link');
?>
<template id="diy-img-setting-drag">
    <diy-style-contain class="diy-img-setting" :title="topName" :show-title="showTitle" :contain-style="imgContainStyle" :style="{'border-top': showTitle? '':'none'}">
        <div class="suggest" v-if="suggestSite == 1">{{suggestSizeText}}</div>
        <div class="diy-img-models">
            <draggable v-if="newImgInfos.length" flex="dif:left" @update="handleDragUpdate">
                <div class="diy-img-model" :style="{'margin-bottom': '10px','padding': showHotZone?'0':''}" v-for="(item,index) in newImgInfos" :key="index" >
                    <div flex="cross:center" style="padding-bottom:10px;">
                        <com-attachment :style="{'width': showHotZone?'100%':''}" display="unset" :multiple="false" :max="1" :type="'images'" @selected="coverPic($event,index)">
                            <div class="card-upload img-upload-bor" :style="{width: showHotZone?'':imgPopSize[0] + 'px',height: showHotZone?'':imgPopSize[1] + 'px'}" v-if="!item.imgUrl.length">
                                <i class="el-icon-plus icon-plugs-center"></i>
                            </div>
                            <div class="diy-sty-img" flex="main:center cross:center" :class="{'diy-img-hot-zone':showHotZone}" v-else  :style="{width: showHotZone?'':imgPopSize[0] + 'px',height: showHotZone?'':imgPopSize[1] + 'px'}">
                                <el-image class="diy-sty-img-u" :src="item.imgUrl"></el-image>
                                <div class="diy-upd-img" :class="{'diy-upd-hot': showHotZone}" >替换</div>
                                <i class="el-icon-close diy-upd-icon" @click.stop="delImg(index)" ></i>
                                <div v-if="showHotZone" class="img-hot-model" @click.stop="updatedHotZone(index)">
                                    <div v-for="(hot,hotIndex) in item.hotZone" :key="hotIndex" flex="main:center cross:center" :style="{'height': (hot.heightPer * 100) + '%','width': (hot.widthPer * 100) + '%','left': (hot.leftPer * 100) + '%','top': (hot.topPer * 100) + '%',}" class="img-hot-zone-model">
                                        {{hot.urlName || '暂无链接'}}
                                    </div>
                                </div>
                            </div>
                        </com-attachment>
                        <div :style="{width:'83%',...getVideoUrlStyle(item.selectType)}">
                            <diy-url :text="item.urlName" @add="addUrl(index)" style="margin-left: 10px;" v-if="showUrl"></diy-url>
                        </div>



                        <div class="diy-img-del-model" v-show="newImgInfos.length > 1">
                            <el-popover placement="bottom" width="120" 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="delModel(index)">删除</el-button>
                                    <el-button size="mini" plain @click.stop="item.visible = false">取消</el-button>
                                </div>
                                <i class="el-icon-close" slot="reference" style="color:#999;"></i>
                            </el-popover>
                        </div>
                    </div>
                    <div v-if="item.selectType == 2" style="display:flex;justify-content:space-between;align-items:center;border-top:3px solid #FFF;padding-top:10px;">
                        <div style="width:160px">
                            上传视频
                        </div>
                        <div style="width:60px;height:60px;display:flex;align-items:center" class="diy-sty-img">
                            <com-attachment :style="{'width': showHotZone?'100%':''}" display="unset" :multiple="false" :max="1" :type="'videos'" @selected="videoUrlPic($event,index)">
                                <div class="card-upload img-upload-bor" :style="{width: showHotZone?'':imgPopSize[0] + 'px',height: showHotZone?'':imgPopSize[1] + 'px'}" v-if="!item.videoUrl">
                                    <i class="el-icon-plus icon-plugs-center"></i>
                                </div>
                                <div class="diy-sty-img" flex="main:center cross:center" :class="{'diy-img-hot-zone':showHotZone}" v-else  :style="{width: showHotZone?'':imgPopSize[0] + 'px',height: showHotZone?'':imgPopSize[1] + 'px'}">
                                    <div style="width: 60px;height: 30px;position: relative">
                                        <video style="width: 60px;height: 30px;" error="预览图加载失败" :id="'app_attachment_'+ _uid + '_' + index" :src="item.videoUrl">
                                        </video>
                                        <div class="com-attachment-video-info" style="margin-left: 3px;">
                                            <i class="el-icon-video-play"></i>
                                            <span>{{item.duration?item.duration:'--:--'}}</span>
                                        </div>
                                    </div>
                                    <div class="diy-upd-img" :class="{'diy-upd-hot': showHotZone}" >替换</div>
                                    <i class="el-icon-close diy-upd-icon" @click.stop="delVideoUrl(index)" ></i>
                                    <div v-if="showHotZone" class="img-hot-model" @click.stop="updatedHotZone(index)">
                                        <div v-for="(hot,hotIndex) in item.hotZone" :key="hotIndex" flex="main:center cross:center" :style="{'height': (hot.heightPer * 100) + '%','width': (hot.widthPer * 100) + '%','left': (hot.leftPer * 100) + '%','top': (hot.topPer * 100) + '%',}" class="img-hot-zone-model">
                                            {{hot.urlName || '暂无链接'}}
                                        </div>
                                    </div>
                                </div>
                            </com-attachment>
                        </div>
                    </div>
                    <div class="img_button_text" v-if="suggestSite == 2">{{suggestSizeText}}</div>
                </div>
            </draggable>

            <el-popover trigger="click" placement="top" width="200" v-model="popoverVisible">
                <div style="display:flex;justify-content:center">
                    <el-button size="mini" type="success" @click="changePopoverVisible(1)">图片</el-button>
                    <el-button size="mini" type="primary" @click="changePopoverVisible(2)">视频</el-button>
                </div>
                <div slot="reference" class="diy-add-img" v-if="openAddImg">
                    +添加 {{maxImgLength >= 999?'':newImgInfos.length + '/' + maxImgLength}}
                </div>
            </el-popover>

        </div>

        <el-dialog width="50%" title="热区编辑器" append-to-body :visible.sync="hotZonePop">
            <div class="diy-hotzone-pop">
                <HotZone :image="selHotZoneImg.imgUrl" :zones-init="selHotZoneImg.hotZone" @add-url="addHotZoneUrl" @save="getSave"></HotZone>
            </div>
        </el-dialog>
        <com-pick-link @close="updatePop" :pop-boo="urlPop" @selected="selectedUrl" :default-tabs="defaultTabs"></com-pick-link>
    </diy-style-contain>
</template>

<script>
    /**
     * 颜色组件
     *
     */
    Vue.component('diy-img-setting-drag', {
        template: '#diy-img-setting-drag',
        name: 'diy-img-setting-drag',
        props: {
            showTitle: { //是否开启标题
                type: Boolean,
                default: true
            },
            imgContainStyle: { //最外层样式
                type: Object,
                default: () => {}
            },
            showHotZone: { //是否有热区：开启需要关闭showUrl
                type: Boolean,
                default: false
            },
            showUrl: { //是否开启链接选择
                type: Boolean,
                default: true
            },
            suggestSite: { //尺寸建议位置 1：在顶部 2：在图片下方
                type: [Number, String],
                default: 1
            },
            suggestSizeText: { //建议尺寸文本
                type: String,
                default: "建议图片宽为750，高度420"
            },
            openAddImg: { //是否开启添加按钮
                type: Boolean,
                default: false
            },
            topName: { //头部标题
                type: String,
                default: "图片设置",
            },
            imgPopSize: { //上传图片框的宽高展示 [宽度，高度]
                type: Array,
                default: () => {
                    return ['60', '60']
                }
            },
            defImgUrl: { //全局默认图片
                type: String,
                default: "",
            },
            maxImgLength: { //最多添加图片数量
                type: [String, Number],
                default: 5
            },
            /**
                是否开启默认创建
             */
            defAddImgBoo: {
                type: Boolean,
                default: false,
            },
            /**
                默认创建多少个
                注：defAddImgBoo需要开启
             */
            defImgCount: {
                type: [String, Number],
                default: 1
            },
            /**
                数据格式
                {
                    url: "", //链接路径
                    urlName: '', //链接名
                    urlType: '', //链接类型
                    imgUrl: "" //图片路径
                    visible: false, //删除弹窗
                    hotZone: [{
                        leftPer: 0,
                        topPer: 0,
                        widthPer: 0.30,
                        heightPer: 0.30,
                        url: '', //链接路径
                        urlName: '', //链接名
                        urlType: '', //链接类型
                    }], //热区数据
                }
                注：可传一个空数组
             */
            imgInfos: { //图片数据
                type: Array,
                default: () => {
                    return []
                }
            },
            defaultTabs: { // 选择需要的tabs栏
                type: Array,
                default () {
                    return ["mall", "goods", "addons", "other"]
                },
            },
        },
        data() {
            return {
                newImgInfos: [],
                selModelIndex: -1, //鼠标移入的模块下标
                selImgIndex: -1, //鼠标移入的图片下标
                visible: false,
                hotZonePop: false,
                selHotZoneIndex: -1, //选中图片下标
                selHotZoneImg: [], //选中图片数据热区
                urlPop: false,
                urlIndex: -1,
                hotZoneIndex: -1, //点击热区的下标
                selectType: 1, //1图片，2视频
                selVideoImgIndex: -1, //鼠标移入的视频图片下标
                popoverVisible: false,
                is_drag_end: false,
                dragImgInfos: [],
            }
        },
        created() {

        },
        watch: {
            imgInfos: {
                deep: true,
                immediate: true,
                handler(val) {
                    // let that = this;
                    // this.newImgInfos = [];
                    if (val.length == 0) {
                        this.addModel();
                    } else {
                        this.newImgInfos = val
                    }
                }
            },
        },
        methods: {
            changePopoverVisible(selectType) {
                this.selectType = selectType
                this.popoverVisible = false
                this.addModel()
            },
            openSelectType() {
                this.popoverVisible = true
            },
            // 添加
            addModel() {
                if (this.newImgInfos.length >= this.maxImgLength) {
                    this.$notify({
                        title: '',
                        message: '最多添加' + this.maxImgLength + '个',
                        type: 'warning'
                    });
                    return;
                }
                let obj = {
                    url: "", //链接路径
                    imgUrl: this.defImgUrl ? this.defImgUrl : "", //图片路径
                    visible: false, //删除弹窗
                    urlName: this.selectType == 1 ? '' : '视频无需配置链接', //链接名
                    urlType: '', //链接类型
                    hotZone: [{
                        leftPer: 0,
                        topPer: 0,
                        widthPer: 0.30,
                        heightPer: 0.30,
                        url: '',
                        urlName: '',
                        urlType: '', //链接类型
                    }], //热区数据
                    selectType: this.selectType,
                    videoUrl: this.defImgUrl ? this.defImgUrl : '', //视频地址
                }

                if (this.newImgInfos.length == 0) {
                    this.newImgInfos = [];
                    for (let i = 0; i < Number(this.defImgCount); i++) {
                        this.newImgInfos.push(JSON.parse(JSON.stringify(obj)));
                    }
                    // 关闭默认创建
                    // this.$emit("closeAddImg",false);
                } else {
                    this.newImgInfos.push(obj);
                }
                this.changImg();
            },
            // 删除
            delModel(index) {
                if (this.newImgInfos.length == 1) {
                    this.newImgInfos[index].visible = false;
                    this.$notify({
                        title: '',
                        message: '最少保留一个',
                        type: 'warning'
                    });
                    return;
                }
                this.newImgInfos.splice(index, 1);
                this.changImg();
            },
            // 添加图片
            coverPic(e, i) {
                console.info(e, i);
                this.newImgInfos[i].imgUrl = e[0].url;
                console.info(this.newImgInfos);
                this.changImg();
            },
            videoUrlPic(e, i) {
                this.newImgInfos[i].videoUrl = e[0].url;
                console.info(this.newImgInfos);
                this.changImg();
            },
            // 删除图片
            delImg(index) {
                this.newImgInfos[index].imgUrl = "";
                this.changImg();
            },
            delVideoUrl(index) {
                this.newImgInfos[index].videoUrl = "";
                this.changImg();
            },
            // 鼠标移入图片
            mouseOverImg(event, index) {
                this.selImgIndex = index;
            },
            // 鼠标移出图片
            mouseLeaveImg() {
                this.selImgIndex = -1;
            },
            // 鼠标移入图片
            mouseOverVideoImg(event, index) {
                this.selVideoImgIndex = index;
            },
            // 鼠标移出图片
            mouseLeaveVideoImg() {
                this.selVideoImgIndex = -1;
            },
            // 鼠标移入模块
            overModel(index) {
                this.selModelIndex = index;
            },
            // 鼠标移出模块
            leaveModel() {
                this.selModelIndex = -1;
            },
            // 编辑热区
            updatedHotZone(index) {
                this.hotZonePop = true;
                // this.selHotZoneImg = [];
                this.selHotZoneImg = JSON.parse(JSON.stringify(this.newImgInfos[index]));
                this.urlIndex = index;
            },
            // 获取热区数据
            getSave(val) {
                this.newImgInfos[this.urlIndex].hotZone = val;
                this.hotZonePop = false;
                this.changImg();
            },
            // 图片添加链接
            addUrl(index) {
                this.urlIndex = index;
                this.urlPop = true;
            },
            updatePop(boo) {
                this.urlPop = boo;
            },
            selectedUrl(val) {
                if (!val.length) {
                    return false
                }
                let urlInfo = val[0];
                if (this.hotZoneIndex == -1) {
                    this.newImgInfos[this.urlIndex].urlName = getOtherUrlName(urlInfo.open_type) || urlInfo.title;
                    this.newImgInfos[this.urlIndex].url = urlInfo.params;
                    this.newImgInfos[this.urlIndex].urlType = urlInfo.open_type;
                    this.urlIndex = -1;
                } else {
                    this.selHotZoneImg.hotZone[this.hotZoneIndex].urlName = getOtherUrlName(urlInfo.open_type) || urlInfo.title;
                    this.selHotZoneImg.hotZone[this.hotZoneIndex].url = urlInfo.params;
                    this.selHotZoneImg.hotZone[this.hotZoneIndex].urlType = urlInfo.open_type;
                    // this.newImgInfos[this.urlIndex].hotZone[this.hotZoneIndex].urlName = urlInfo.title;
                    // this.newImgInfos[this.urlIndex].hotZone[this.hotZoneIndex].url = urlInfo.route;
                    // this.newImgInfos[this.urlIndex].hotZone[this.hotZoneIndex].urlType = urlInfo.open_type;
                }
                this.urlPop = false;
                this.changImg();
            },
            //热区添加链接
            addHotZoneUrl(index) {
                console.log(index);
                this.hotZoneIndex = index;
                this.urlPop = true;
            },
            // 通信
            changImg(type = null) {
                this.$emit("change", this.newImgInfos, type);
            },
            handleDragUpdate(e) {
                let newImgInfos = JSON.parse(JSON.stringify(this.newImgInfos))
                let currentItem = newImgInfos.splice(e.oldIndex, 1)
                newImgInfos.splice(e.newIndex, 0, currentItem[0])
                this.newImgInfos = []
                this.$nextTick(() => {
                    for (let newImgInfosKey in newImgInfos) {
                        this.$set(this.newImgInfos, newImgInfosKey, newImgInfos[newImgInfosKey])
                    }
                    this.changImg(this.newImgInfos)
                })
            },
            getVideoUrlStyle(selectType) {
                let style = {}
                if (selectType == 2) {
                    style['cursor'] = ' not-allowed'
                    style['pointer-events'] = 'none'
                }
                return style
            },
        }
    });
</script>

<style scoped>
    .suggest {
        margin: 20px 0 12px;
        background: #EAF3FE;
        border: 1px solid #2D8CF0;
        opacity: 1;
        border-radius: 3px;
        padding: 14px 17px 17px;
        font-size: 12px;
        font-weight: bold;
        color: #999999;
    }

    .diy-img-models {
        margin-bottom: 6px;
    }

    .diy-img-model {
        padding: 12px 9px 7px;
        background: #F6F5F8;
        position: relative;
        border-radius: 4px;
    }

    .img-upload-bor {
        position: relative;
        border: 1px dashed #D5D5D5;
    }

    .icon-plugs-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .diy-url {
        height: 39px;
        background: #EDF2FC;
        border-radius: 2px;
        font-size: 11px;
        font-weight: bold;
        line-height: 0px;
        color: #999999;
        flex: 1;
        padding: 9px 15px 14px;
        margin-left: 14px;
    }

    .diy-url-icon {
        font-size: 13px;
        margin-right: 10px;
    }

    .diy-add-img {
        font-size: 14px;
        font-weight: bold;
        color: #999999;
        border: 1px dashed #707070;
        border-radius: 5px;
        padding: 9px 0;
        text-align: center;
        margin-top: 24px;
    }

    .diy-sty-img {
        position: relative;
        background: #FFF;
    }

    .diy-upd-img {
        position: absolute;
        bottom: 0;
        left: 0;
        color: #999999;
        background: rgb(0 0 0 / 50%);
        width: 100%;
        text-align: center;
        min-height: 6%;
        z-index: 101;
    }

    .diy-upd-icon {
        position: absolute;
        top: -6px;
        right: -6px;
        background: rgb(0 0 0 / 50%);
        border-radius: 50%;
        color: #FFF;
        padding: 2px;
        font-size: 12px;
    }

    .diy-upd-img:hover,
    .diy-upd-icon:hover,
    .diy-url:hover,
    .diy-add-img:hover {
        cursor: pointer;
    }

    .diy-img-del-model {
        position: absolute;
        top: 10px;
        right: 9px;
        z-index: 101;
    }

    .diy-del-text {
        text-align: center;
        margin-bottom: 10px;
    }

    .diy-del-btn {
        border: 1px solid #bb3f3f;
        color: #bb3f3f;
    }

    .img_button_text {
        font-size: 12px;
        font-weight: bold;
        color: #999999;
        margin-top: 2px;
    }

    .diy-sty-img-u {
        max-height: 100%;
        width: 100%;
    }

    .diy-img-hot-zone {
        width: 100%;
        min-height: 200px;
        max-height: 950px;
    }

    .diy-upd-hot {
        height: 30px;
        line-height: 30px;
    }

    .img-hot-model {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 100;
    }

    .img-hot-model:hover,
    .diy-img-del-model:hover {
        cursor: pointer;
    }

    .img-hot-zone-model {
        border: 1px solid red;
        position: absolute;
        background: rgba(233, 243, 253, 0.8);
        color: #3892F1;
        border: 1px solid #3892F1;
    }

    .diy-img-setting .el-dialog__header {
        border-bottom: 1px solid #f2f2f2;
        padding: 12px 22px;
    }

    .diy-img-setting .el-dialog__body {
        padding: 0;
    }

    .diy-hotzone-pop {
        padding: 10px 20px;
    }
</style>