qimall/backend/views/components/common/diy/style-components/diy-img-icon-set.php

<template id="diy-img-icon-set">
    <diy-style-contain :title="title" :show-title="showTitle" :contain-style="containStyle">
        <div v-for="(item, index) in iconList" :key="index" :style="[iconSetStyle]" @click="closePop">
            <div class="icon-set-title" v-if="item.title">{{ item.title }}</div>
            <div  class="icon-set-list">
                <!-- 关闭图标 -->
                <div class="icon-set-close" flex="cross:center" @click.stop="closeHandle(item, index)" v-if="showClose">
                    <i class="el-icon-close"></i>
                </div>
                <!-- 删除弹窗 -->
                <diy-confirm-popup 
                    :title="popTitle"
                    :show="cardIndex == index && visible"
                    confirm-text="删除"
                    :show-confrim-btn="showConfrimBtn"
                    @close="closePop" 
                    @confirm="delCards($event, index)"
                ></diy-confirm-popup>
                
                <div v-if="item.slot">
                    <slot :name="item.slot" :item="item" :index="index"></slot>
                </div>

                <!-- 内容 -->
                <div class="icon-set-items" flex="cross:center" v-if="set_style != 'text'">
                    <div class="icon-set-list-name diy-text-font">{{ type == 1 ? '图片' : '图标' }}</div>
                    <div class="icon-set-list-content">
                        <com-attachment :multiple="false" :max="1" type="images" @selected="coverPic($event, item)">
                            <div class="content-upload" :style="{width: widthImg + 'px', height: heightImg + 'px'}" flex="cross:center main:center" v-if="!item.img">
                                <i class="el-icon-plus"></i>
                            </div>

                            <div class="content-img" :style="{width: widthImg + 'px', height: heightImg + 'px'}" flex="cross:center main:center" v-else>
                                <el-image style="width: 100%; height: 100%;border-radius: 8px;" :src="item.img"></el-image>
                                <div class="img-replace">替换</div>
                                <div class="icon-close"  @click.stop="delPic(item, index)">
                                    <i class="el-icon-close"></i>
                                </div>
                            </div>
                        </com-attachment>
                        <div class="tips-text" v-if="suggestText">{{ suggestText }}</div>
                    </div>
                </div>
<!--                <div class="icon-set-items" flex="cross:center" v-if="set_style != 'text' && type == 1 && tagSwitch">-->
<!--                    <div class="icon-set-list-name diy-text-font">标签</div>-->
<!--                    <div class="icon-set-list-content" flex="cross:center">-->
<!--                        <el-switch v-model="item.is_show_tag" active-color="#2D8CF0" inactive-color="#999999" @change="iconSetChange($event, item, 'is_show_tag')"></el-switch>-->
<!--                        <span class="diy-text-font" style="padding-left: 7px;font-weight: 500;">{{ item.is_show_tag ? '开启' : '关闭' }}</span>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="icon-set-items" flex="cross:center" v-if="item.is_show_tag && set_style != 'text' && type == 1">-->
<!--                    <div class="icon-set-list-name diy-text-font">标签内容</div>-->
<!--                    <div class="icon-set-list-content" flex="cross:center">-->
<!--                        <el-input size="small" v-model="item.tags" placeholder="请输入内容" maxlength="2" @input="iconSetChange($event, item, 'tags')" show-word-limit></el-input>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="icon-set-items" flex="cross:center" v-if="item.is_show_tag && set_style != 'text' && type == 1">-->
<!--                    <div class="icon-set-list-name diy-text-font">标签背景</div>-->
<!--                    <div class="icon-set-list-content" flex="cross:center">-->
<!--                        <el-color-picker flex="cross:center" v-model="item.tagsBgColor" :show-alpha="showAlpha" @change="iconSetChange($event, item, 'tagsBgColor')"></el-color-picker>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="icon-set-items" flex="cross:center" v-if="item.is_show_tag && set_style != 'text' && type == 1">-->
<!--                    <div class="icon-set-list-name diy-text-font">标签文字</div>-->
<!--                    <div class="icon-set-list-content" flex="cross:center">-->
<!--                        <el-color-picker flex="cross:center" v-model="item.tagsTextColor" :show-alpha="showAlpha" @change="iconSetChange($event, item, 'tagsTextColor')"></el-color-picker>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="icon-set-items" flex="cross:center" v-if="set_style != 'image'">
                    <div class="icon-set-list-name diy-text-font">文字</div>
                    <div class="icon-set-list-content" flex="cross:center">
                        <el-input size="small" v-model="item.btnText" placeholder="请输入内容" @input="iconSetChange($event, item, 'btnText')" maxlength="5" show-word-limit></el-input>
                    </div>
                </div>
                <div class="icon-set-items" flex="cross:center" v-if="set_style != 'image'">
                    <div class="icon-set-list-name diy-text-font">提示文字</div>
                    <div class="icon-set-list-content" flex="cross:center">
                        <el-input size="small" v-model="item.btnTips" placeholder="请输入内容" @input="iconSetChange($event, item, 'btnTips')" maxlength="6" show-word-limit></el-input>
                    </div>
                </div>
                <div class="icon-set-items" flex="cross:center" v-if="showLink">
                    <div class="icon-set-list-name diy-text-font">链接</div>
                    <div class="icon-set-list-content" flex="cross:center">
                        <com-pick-link @selected="selectedUrl($event, item)" :default-tabs="defaultTabs">
                            <diy-url :text="item.link_params && (item.link_params.title || item.link_params.open_type)" @add="addUrl(index)"></diy-url>
                        </com-pick-link>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="add-btns" @click="addClick" v-if="showAddBtn && list.length < maxIconLength">+ 添加<span v-if="maxIconLength">{{ list.length }}/{{ maxIconLength }}</span></div>
    </diy-style-contain>
</template>

<script>
    /**
     * 图标设置组件
     *
     */
    Vue.component('diy-img-icon-set', {
        template: '#diy-img-icon-set',
        name: 'diy-img-icon-set',
        props: {
            title: { // 组件标题, 传值显示标题, 不传就不显示
                type: String,
                default: ''
            },
            containStyle: { // 包裹容器的样式
                type: Object,
                default: () => {}
            },
            /**
             * list 的数据格式
             * {
                    title: '', // 标题，有就显示，没有就不显示
                    img: 'resources/img/decorate/default_btn1.png', // 图片
                    icon: 'el-icon-setting', // 图标
                    is_show_tag: false, // 是否展示标签
                    tags: '热门', // 标签内容
                    tagsBgColor: '#f83287', // 标签背景色
                    tagsTextColor: '#ffffff', // 标签文字颜色
                    btnText: '按钮文字' // 按钮文字
					btnTips:'提示文字'
                    link_params: null, // 链接内容
                }
             */
            list: {
                type: Array,
                default: () => {
                    return []
                }
            },
            widthImg: { // 图片的宽度
                type: Number,
                default: 50
            },
            heightImg: { // 图片的高度
                type: Number,
                default: 50
            },
            showClose: { // 是否展示删除按钮
                type: Boolean,
                default: true
            },
            tagSwitch: { // 是否需要标签开关
                type: Boolean,
                default: false
            },
            showLink: { // 是否展示链接
                type: Boolean,
                default: false
            },
            type: { // 图标类型，1 图片  || 2 图标
                type: Number,
                default: 1
            },
            showAlpha: { // 透明度
                type: Boolean,
                default: false
            },
            btnStyle: { // 按钮样式 1: 图片加文字  2: 图片  3: text: 文字
                type: Number,
                default: 1
            },
            maxIconLength: { // 最多添加数量
                type: Number,
                default: 0
            },
            showAddBtn: { // 是否展示添加按钮
                type: Boolean,
                default: false
            },
            suggestText: { // 图片建议尺寸
                type: String,
                default: ''
            },
            iconSetStyle: { // 按钮列表的样式
                type: Object,
                default: () => {}
            },
            imgUrl: { // 添加的列表展示的图片
                type: String,
                default: ''
            },
            defaultTabs: {
                type: Array,
                default: () => {
                    return ["mall", "addons", "other"]
                }
            }
        },
        data() {
            return {
                
                visible: false,
                cardIndex: 0,
                is_show_close: false,
                iconList: [],
                popTitle: '确定删除吗',
                showConfrimBtn: true,
                urlPop: false,
                urlIndex: -1,
                // defaultTabs: ["mall", "addons", "other"],
            }
        },
        computed: {
            set_style() {
                return this.btnStyle == 1 ? 'image_text' : this.btnStyle == 2 ? 'image' : 'text'
            },
            showTitle() {
                return this.title ? true : false
            }
        },
        watch: {
            list: {
                deep:true,
                immediate: true,
				handler(val) {
                    console.log(val, '--------')
                    this.iconList = val
                    this.changes()
                }
            }
        },
        created() {
        },
        methods: {
            updatePop(boo){
                console.log(boo)
                this.urlPop = !this.urlPop;
            },
            selectedUrl(e, item) {
                let info = e[0]
                console.log(info, 'info')
                item.link_params = info
                this.$forceUpdate()
                this.$emit('change', this.iconList)
            },
            // 图片添加链接
            addUrl(index){
                this.urlIndex = index;
                this.urlPop=true;
            },
            closeHandle(it, i) {
                if (this.iconList.length == 1) {
                    this.popTitle = '至少保留1个'
                    this.showConfrimBtn = false
                }
                this.cardIndex = i
                this.visible = true
            },
            closePop(){
                this.visible = false
            },
            changes() {
                this.$emit('change', this.iconList)
            },
            coverPic(e, item) {
                let img = e[0].url
                item.img = img
                this.changes()
            },
            delPic(it, i) {
                it.img = ''
                this.changes()
            },
            addClick() {
                if (this.iconList.length >= this.maxIconLength) {
                    return;
                }
                let obj = {
                    // img: this.dynamicImgSrc(this.imgUrl),
                    img: this.imgUrl,
                    icon: 'el-icon-setting',
                    is_show_tag: false,
                    tags: '热门',
                    tagsBgColor: '#f83287',
                    tagsTextColor: '#ffffff',
                    btnText: '按钮文字',
                    btnTips:'按钮提示',
                    link_params: null,
                }
                this.iconList.push(obj)
                console.log(this.iconList, 'hehe')
                this.changes()
            },
            iconSetChange(e, item, name) {
                item[name] = e
                this.changes()
            },
            delCards(e, i) {
                this.visible = false
                this.iconList.splice(i, 1)
                this.changes()
            }
        }
    })
</script>

<style>
    .icon-set-list-content .com-pick-link-content {
        width: 310px;
    }
    .icon-set-list-content .diy-url {
        padding: 9px 15px;
    }
    .popover-tips {
        font-size: 12px;
        text-align: center;
        padding-bottom: 5px;
    }
    .icon-set-list {
        position: relative;
        border-radius: 8px;
        background-color: #F4F3F7;
        /* padding: 18px 12px; */
        padding: 15px 30px 15px 12px;
        margin-bottom: 20px;
    }
    .icon-set-title {
        line-height: 1;
        color: #47565d;
        font-weight: bolder;
        margin-bottom: 20px;
    }
    .icon-set-close {
        display: none;
        position: absolute;
        top: 10px;
        right: 0;
        width: 30px;
        height: 30px;
        color: #999;
        cursor: pointer;
    }
    .icon-set-list:hover .icon-set-close {
        display: block;
    }
    .icon-set-items {
        margin-bottom: 20px;
    }
    .icon-set-items:last-child {
        margin-bottom: 0;
    }
    .icon-set-list-name {
        width: 60px;
        text-align: right;
        padding-right: 8px;
        margin-right: 15px;
    }
    .content-upload {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        cursor: pointer;
        background-color: #E3E3E3;
        color: #fff;
    }
    .content-img {
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 8px;
        cursor: pointer;
    }
    .icon-close {
        display: none;
        position: absolute;
        top: -8px;
        left: 35px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, .3);
        color: #fff;
        text-align: center;
    }
    .img-replace {
        display: none;
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, .3);
        color: #fff;
        text-align: center;
        font-size: 12px;
        padding: 2px 0;
    }
    .content-img:hover .icon-close,
    .content-img:hover .img-replace {
        display: block;
    }
    .icon-set-list-content {
        flex: 1;
    }
    .icon-set-list-content .el-switch__labe {
        font-size: 15px;
        color: #999999 !important;
        font-weight: 700;
        padding-left: 5px;
    }
    .icon-set-items .el-color-picker {
        height: auto;
    }
    .add-btns {
        border: 1px dashed #707070;
        line-height: 32px;
        height: 34px;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
        color: var(--textGray, #999999);
    }
    .diy-url {
        margin-left: 0 !important;
    }
</style>