qimall/addons/Store/backend/views/components/diy/store/style.php

<template id="store-style">
    <div>
        <diy-style-contain title="标题" class="clear-diy-style fill-border-top">
            <el-radio-group v-model="titleRadio" @change="radioChange($event, 'titleRadio')">
                <el-radio :label="0">隐藏</el-radio>
                <el-radio :label="1">显示</el-radio>
            </el-radio-group>
             <div style="padding-top: 10px" v-if="titleRadio == 1">
                 <diy-operation-list v-model="titleList" :label-width="50" @on-change="onChange"></diy-operation-list>
             </div>
        </diy-style-contain>
        <diy-style-contain title="选择商家" class="clear-diy-style fill-border-top">
            <!-- <el-radio-group style="margin-bottom: 10px;" v-model="listType" @change="radioChange($event, 'listType')">
                <el-radio :label="0">指定商品</el-radio>
                <el-radio :label="1">所有商品</el-radio>
            </el-radio-group> -->
            <div class="pick-goods">
                <com-pick-link @selected="selectNavUrl" id-text="商品" :pick-type="pickType" :default-select-list="selectList" :default-tabs="[{name: 'marketing',children:['store'] }]">
                    <div class="add-goods-btn">+添加({{ pickImgList.length + '/' + maxGroupLen }})</div>
                </com-pick-link>
                <div flex="cross:center" style="margin-top: 20px;flex-wrap:wrap" v-if="pickImgList.length">
                    <div class="pickImgItem" v-for="(item,index) in pickImgList" :key="index" @mouseenter="mouseenter(index)" @mouseleave="mouseleave(index)">
                        <el-image style="width: 50px; height: 50px" :src="item.params.img" fit="contain"></el-image>
                        <div v-show="index == pickIndex || item.visible">
                            <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="delModel(index)">删除</el-button>
                                    <el-button size="mini" plain @click="item.visible = false">取消</el-button>
                                </div>
                                <i class="el-icon-close" slot="reference" style="color:#999;"></i>
                            </el-popover>
                        </div>
                    </div>
                </div>
            </div>
        </diy-style-contain>
        <diy-tabs title="组件边框设置" class="fill-border-top" radio_text='text' :default_item="defaultForm.tabItem" @change="colorSelect"></diy-tabs>
        <diy-color class="fill-border-top" :color-infos="colorInfos" :str-color="defColor" @chang="updateColor"></diy-color>
        <diy-size-setting class="fill-border-top" top-name="组件边距" :size-infos="sizeInfos" :size-infos-value="sizeInfosValue" :size-infos-max="sizeInfosMax" @chang="updateSize"></diy-size-setting>
        <diy-size-setting class="fill-border-top" top-name="圆角设置" :size-infos="defaultForm.radiusInfos" :max-value="20" @chang="RadiusChange"></diy-size-setting>
    </div>
</template>
<script>
    Vue.component('store-style', {
        name: "store-style",
        mixins: [basicMixins],
        template: '#store-style',
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                titleRadio: 0,
                titleList: [{
                    type: 'input',
                    label: "文字",
                    value: '新品推荐',
                    max: 6,
                    showLimit: true,
                    setKey: "title",
                }, {
                    type: "size",
                    label: "上边距",
                    value: 10,
                    setKey: "paddingTop",
                    maxValue: 20,
                }, {
                    type: "size",
                    label: "下边距",
                    value: 10,
                    setKey: "paddingBottom",
                    maxValue: 20,
                }, ],
                // 选择商品
                listType: 0,
                pickType: ['store'],
                selGoodsList: [],
                maxGroupLen: 30,
                pickIndex: -1,
                btnData: {
                    style: 0,
                    name: '新品推荐'
                },
                // btnStyle: 0,
                // btnName: '立即拼团',
                colorInfos: ['底部背景', '内容背景'],
                defColor: ['#FAFAFA', '#FFFFFF'],
                sizeInfos: ['内容间距', '上边距', '下边距', '左右边距'],
                sizeInfosValue: [0, 0, 0, 0],
                sizeInfosMax: [50, 50, 50, 20],
                pickImgList: [],
                selectList: []
            }
        },
        methods: {
            init() {
                basicMixins.methods.init.call(this); // 以前的数据调用一下
                this.titleRadio = this.result.data.titleRadio || 0
                this.listType = this.result.data.listType || 0
                if (this.result.data.btnData) {
                    this.btnData = this.result.data.btnData
                } else {
                    this.result.data.btnData = this.btnData
                }
                // 选择商品
                let arr = ['data', 'goods']
                this.pickImgList = getObjValue(this.result, arr, [])
                this.initList('titleList')
                this.setDefaultSelectIds();
            },
            radioChange(e, name) {
                this.result.data[name] = e
                this.$emit("update", this.result)
            },
            btnChange(e, name) {
				console.log('55555输入内容',e,name)
                this.result.data.btnData[name] = e
                this.$emit("update", this.result)
            },
            onChange(e) {
                this.updataList('titleList')
            },
            selectNavUrl(e) {
                let self = this;
                e = e.filter(function (item) {
                    if (self.selectList.length > 0) {
                        return !self.selectList.includes(item.params.id);
                    }
                    return item;
                });
                this.pickImgList.push(...e)
                this.pickImgList = this.unique(this.pickImgList)
                if (this.pickImgList.length > this.maxGroupLen) {
                    this.$message({
                        message: `最多添加${this.maxGroupLen}件商品噢`,
                        type: 'warning'
                    });
                }
                this.pickImgList = this.pickImgList.slice(0, this.maxGroupLen)
                this.result.data.goods = this.pickImgList
                this.$emit("update", this.result)
                this.setDefaultSelectIds();
            },
            setDefaultSelectIds() {
                let pickData = this.pickImgList;
                let selectIds = [];
                pickData.forEach(item => {
                    selectIds.push(item.params.id);
                })
                this.selectList = selectIds.filter((item, index, selectIds) => selectIds.indexOf(item) === index);
            },
            unique(arr) {
                for (var i = 0; i < arr.length; i++) { 
                    for (var j = i + 1; j < arr.length; j++) { 
                        if (arr[i].params.id == arr[j].params.id) {
                            arr.splice(j, 1); 
                            j--;
                        }
                    }
                }
                return arr
            },
            getSelectList(arr) {
                if (arr.length == 0) return;
                this.selectList = []
                arr.forEach(item => {
                    this.selectList.push(item.params.id)
                })
                console.log(this.selectList, '-----------this.selectList')
            },
            delModel(index) {
                // let arr = []
                // this.pickImgList.forEach((it, i) => {
                //     if (i == index) {
                //         arr.push(it)
                //     }
                // })
                this.pickImgList.splice(index, 1)
                this.result.data.goods = this.pickImgList
                this.selectList.splice(index, 1);
                // this.getSelectList(this.pickImgList)
                this.$emit("update", this.result)
            },
            updataList(target) {
                this[target].map((item, index) => {
                    var obj = {}
                    if (item.setKey) {
                        const key = item.setKey
                        console.log(key, item.value)
                        this.updateStyle(key, item.value)
                    }
                    return obj
                })
            },
            updateStyle(key, value) {
                var obj = this.result.data
                this.result.data = Object.assign(obj, {
                    [key]: value
                })
                console.log(this.result.data)
                this.$emit("update", this.result)
            },
            initList(target) {
                var data = this.result.data
                if (this[target] && !this[target].length) {
                    return false
                }
                var arr = this[target].map(item => {
                    var obj = Object.assign(item, {
                        value: item.value
                    })
                    if ((item.setKey in data) && data[item.setKey] !== "") {
                        obj.value = data[item.setKey]
                    }
                    return obj
                });
                this[target] = arr
            },
            mouseenter(index) {
                this.pickIndex = index
            },
            mouseleave() {
                this.pickIndex = -1
            },
            delModel(index) {
                this.pickImgList.splice(index, 1)
                this.result.data.goods = this.pickImgList
                this.$emit("update", this.result)
            },
            updateColor(data) { // 选择颜色
                console.log("updateColor parent", data)
                this.updateSome(data, 'colorInfos')
                let style = this.result.computedStyle
                let colorArr = ['boxBg', 'goodsBg']
                colorArr.forEach((it, i) => {
                    this.result.computedStyle = Object.assign(style, {
                        [it]: this.colorInfos[i].color
                    })
                })
                console.log("this.result", this.result);
                this.$emit("update", this.result)
            },
            updateSize(arr) { // 选择尺寸
                this.updateSome(arr, 'sizeInfos')
                let style = this.result.computedStyle
                let sizeArr = ['spacing', 'marginTop', 'marginBottom', 'aroundMargin']
                if (this.imgIndex == 2) {
                    sizeArr = ['marginTop', 'marginBottom']
                }
                sizeArr.forEach((it, i) => {
                    style = Object.assign(style, {
                        [it]: this.sizeInfos[i].value + this.sizeInfos[i].unit
                    })
                })
                this.$emit("update", this.result)
            },
            updateSome(val, name) {
                console.log("updateSome", val);
                this[name] = val
                if (this.result.data[name] && this.result.data[name].length) {
                    this[name] = this.result.data[name]
                } else {
                    this.result.data[name] = this[name]
                }
            },
        }
    });
</script>
<style>
    .lucky-btn-text {
        margin-top: 15px;
    }
    .lucky-btn-text-name {
        width: 60px;
        text-align: right;
        padding-right: 8px;
        margin-right: 15px;
        color: #333;
        font-weight: 500;
    }
    .lucky-btn-text-content {
        flex: 1;
    }
    .pick-goods {
        background: #f4f3f7;
        border-radius: 4px;
        padding: 20px;
    }

    .pickImgItem {
        position: relative;
        width: 50px;
        height: 50px;
        margin: 0 9px 9px 0;
        background-color: #ddd;
        cursor: pointer;
    }
    .pickImgItem .el-icon-close {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 12px;
    }
    .add-goods-btn {
        border: 1px dashed #6b7685;
        line-height: 32px;
        height: 32px;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
    }

    .clear-diy-style .com-pick-link-content {
        width: 100%;
    }
</style>