qimall/addons/Store/backend/views/components/diy/store-commodity-classify-group/style.php

<template id="store-commodity-classify-group-style">
    <div class="store-commodity-classify-group-style">
        <diy-tabs class="fill-border-top" :default_item="defaultForm.tabItem" title="样式" radio_text='text' :default_color="defaultForm.default_color" @change="colorSelect"></diy-tabs>
        <!-- 公共 -->
<!--        <diy-style-contain title="风格" class="clear-diy-style fill-border-top">-->
<!--            <el-radio-group v-model="style" @change="onStyleList">-->
<!--                <el-radio-button :label="item.label" v-for="(item,index) in styleList" :key="index">-->
<!--                    <div flex="cross:center" class="flex-x-center" style="width: 56px;height: 38px;">-->
<!--                        <img :src="item.src" style="width: 26px;">-->
<!--                    </div>-->
<!--                </el-radio-button>-->
<!--            </el-radio-group>-->
<!--        </diy-style-contain>-->
        <diy-style-contain title="选择商品" class="clear-diy-style fill-border-top">
            <div style="margin-bottom: 10px;">
                <el-radio-group v-model="chooseGoods" @change="updateData($event,'chooseGoods')">
                    <el-radio :label="1">手动选择</el-radio>
                    <el-radio :label="2">选择分类</el-radio>
                    <!-- <el-radio :label="3">选择分组</el-radio> -->
                </el-radio-group>
            </div>
            <div class="pick-goods" v-if="chooseGoods == 1">
                <com-pick-link @selected="selectNavUrl" :default-select-list="defaultSelectList" :pick-type="pickType" :isCustomWidth="true" :default-tabs="[{name: 'marketing',children:['store_goods'] }]">
                    <div class="add-goods-btn">+添加</div>
                </com-pick-link>
                <div flex="cross:center" style="margin-top: 20px;" v-if="pickImgList.length">
                    
					<draggable v-model="pickImgList"  v-if="pickImgList.length" flex="dif:left" style="display:flex;flex-wrap:wrap" @end="changeGoodsList">
					 
						<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>
					</draggable>
                </div>
            </div>
            <div class="pick-goods" v-if="chooseGoods == 2" style="padding: 10px;">
                <div class="icon-set-items" flex="cross:center">
                    <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)" :auto-width="true" :pick-type="pickType" :default-tabs="[{name: 'marketing',children:['store-commodity-cate'] }]">
                            <diy-url text=""></diy-url>
                        </com-pick-link>
                    </div>
                </div>
                <div  class="icon-set-items" :key="index" v-for="(item,index) in selectUrlList">
                    <diy-url :text="item.title+''" ></diy-url>
                    <div class="icon-set-items-close"> 
                        <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="delClassifyUrl(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>
                <diy-operation-list v-if="selectUrlList.length" v-model="showLineList" @on-change="onChange5"> </diy-operation-list>
            </div>
        </diy-style-contain>
<!--        <diy-style-contain title="显示内容  (划线价和会员价同时选择时，优先显示会员价)" class="show-content fill-border-top">-->
<!--            <!-- <div class="tip">(划线价和会员价同时选择时，优先显示会员价)</div> -->
<!--            <el-checkbox-group v-model="contentCheckList" @change="onContentChange">-->
<!--                <div v-for="(item,index) in showContentList" :key="index">-->
<!--                    <div flex="cross:center" class="flex-y-center" style="margin-bottom: 12px;">-->
<!--                        <el-checkbox :label="item.label">-->
<!--                            <span>{{item.name}}</span>-->
<!--                        </el-checkbox>-->
<!--                        <el-color-picker v-if="!item.disableColor" class="show-content-pick" color-format="colorFormat" :show-alpha="item.showAlpha" v-model="item.color" @change="onPickColor"></el-color-picker>-->
<!--                        <el-input v-if="!item.disableColor" v-model="item.color" @input="updateInput($event,item)" class="diy-text-btn"></el-input>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </el-checkbox-group>-->
<!--        </diy-style-contain>-->
<!--        <diy-style-contain title="购物车按钮" class="show-content fill-border-top">-->
<!--            <el-radio-group v-model="shoppingCart" @change="updateData($event,'showShopCart')">-->
<!--                <el-radio :label="1">显示</el-radio>-->
<!--                <el-radio :label="2">隐藏</el-radio>-->
<!--            </el-radio-group>-->
<!--            <div class="shopping-cart-func" v-show="shoppingCart == 1">-->
<!--                <div class="shop-cart-row" flex="cross:center">-->
<!--                    <div class="leabl">样式</div>-->
<!--                    <diy-tab v-model="shopCartStyleList" :default-index="shopCartStyle" @change="onShopCartStyle">-->
<!--                        <template v-slot="{item, isSelect}">-->
<!--                            <div flex="cross:center" :class="{'shop-cart-col': true,'selected': isSelect}">-->
<!--                                <img :src="item.src" style="width: 32px;">-->
<!--                            </div>-->
<!--                        </template>-->
<!--                    </diy-tab>-->
<!--                </div>-->
<!--                <div class="shop-cart-row" flex="cross:center" v-if="shopCartStyle == 0">-->
<!--                    <div class="leabl">文字</div>-->
<!--                    <el-input style="flex: 1;" v-model="shopCartText" placeholder="请输入内容" maxlength="4" size="small" show-word-limit @input="updateShopCartText($event,'showShopCart')"></el-input>-->
<!--                </div>-->
<!--                <div class="shop-cart-row" flex="cross:center" v-if="shopCartStyle != 3">-->
<!--                    <div class="leabl">颜色</div>-->
<!--                    <div flex="cross:center">-->
<!--                        <el-color-picker class="show-content-pick" color-format="colorFormat" v-model="shopCartColor" @change="onShopCart($event,'color')"></el-color-picker>-->
<!--                        <el-input v-model="shopCartColor" maxlength="8" @input="onShopCart($event,'color')" class="diy-text-btn"></el-input>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="shop-cart-row" flex="cross:center" v-if="shopCartStyle == 0">-->
<!--                    <div class="leabl">圆角</div>-->
<!--                    <div flex="cross:center">-->
<!--                        <el-slider style="width: 165px;" :min="0" :max="20" v-model="shopCartRadius" @change="onShopCart($event,'borderReduis')"></el-slider>-->
<!--                        <div style="margin-left: 16px;" class="diy-text-btn">{{shopCartRadius}}px</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="shop-cart-row" flex="cross:center" v-if="shopCartStyle != 3">-->
<!--                    <div class="leabl">背景</div>-->
<!--                    <div flex="cross:center">-->
<!--                        <el-color-picker class="show-content-pick" color-format="colorFormat" v-model="shopCartBgColor" @change="onShopCart($event,'backgroundColor')"></el-color-picker>-->
<!--                        <el-input v-model="shopCartBgColor" maxlength="8" @input="onShopCart($event,'backgroundColor')" class="diy-text-btn"></el-input>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="shop-cart-row" flex="cross:center" v-if="shopCartStyle <= 1">-->
<!--                    <div class="leabl">边框</div>-->
<!--                    <div flex="cross:center">-->
<!--                        <el-color-picker class="show-content-pick" color-format="colorFormat" v-model="shopCartBorderColor" @change="onShopCart($event,'borderColor')"></el-color-picker>-->
<!--                        <el-input v-model="shopCartBorderColor" maxlength="8" @input="onShopCart($event,'borderColor')" class="diy-text-btn"></el-input>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="shop-cart-row" flex="cross:center">-->
<!--                    <div class="leabl">尺寸</div>-->
<!--                    <el-radio-group v-model="shopCartSize" @change="onShopCart($event,'sizeType')">-->
<!--                        <el-radio :label="item.label" v-for="(item,index) in shopCartSizeList" :key="index">{{item.value}}</el-radio>-->
<!--                    </el-radio-group>-->
<!--                </div>-->
<!--            </div>-->
<!--        </diy-style-contain>-->
<!--        <diy-style-contain title="点击购物车按钮" style="padding-top: 0;">-->
<!--            <el-radio-group v-model="addShopCartBtn" @change="onAddShopCartBtn">-->
<!--                <el-radio :label="item.label" v-for="(item,index) in addShopCartBtnList" :key="index">{{item.value}}</el-radio>-->
<!--            </el-radio-group>-->
<!--        </diy-style-contain>-->
<!--        <diy-style-contain title="角标设置" class="fill-border-top">-->
<!--            <el-radio-group v-model="angleMark" @change="onAngleMark">-->
<!--                <el-radio :label="item.label" v-for="(item,index) in angleMarkList" :key="index">{{item.value}}</el-radio>-->
<!--            </el-radio-group>-->
<!--            <div class="shopping-cart-func" v-show="angleMark == 2">-->
<!--                <div class="shop-cart-row" flex="cross:center">-->
<!--                    <div class="leabl">样式</div>-->
<!--                    <diy-tab v-model="angleMarkStyleList" :default-index="angleMarkStyleIndex" @change="onAngleMarkChange($event, 'angleMarkStyle')">-->
<!--                        <template v-slot="{item, isSelect}">-->
<!--                            <div flex="cross:center" :class="{'shop-cart-col': true,'selected': isSelect}">-->
<!--                                <img :src="item.src" style="width: 28px;">-->
<!--                            </div>-->
<!--                        </template>-->
<!--                    </diy-tab>-->
<!--                </div>-->
<!--                <div class="shop-cart-row" flex="cross:center">-->
<!--                    <div class="leabl">文字</div>-->
<!--                    <el-input style="flex: 1;" v-model="angleMarkText" placeholder="请输入内容" maxlength="2" size="small" show-word-limit @input="onAngleMarkChange($event, 'angleMarkText')"></el-input>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="shopping-cart-func" v-show="angleMark == 3">-->
<!--                <diy-img-setting :img-infos="imageUrl" def-img-count="1" :show-url="false" :suggest-site="2" suggest-size-text="建议图片宽度76，高度76。" :img-contain-style="{padding: 0}" :show-title="false" @change="addIconImg"></diy-img-setting>-->
<!--            </div>-->
<!--        </diy-style-contain>-->
        <diy-color class="fill-border-top" :color-infos="defaultForm.colorInfos" :def-color="defaultForm.defColor" @chang="updateColor"></diy-color>
        <!-- <diy-size-setting class="fill-border-top" top-name="边距" :size-infos="defaultForm.sizeInfos" :max-value="50" @chang="sliderChange($event, 'margin')"></diy-size-setting>
        <diy-size-setting class="fill-border-top" top-name="圆角设置" :size-infos="defaultForm.radiusInfos" :max-value="20" @chang="RadiusChange($event, 'radius')"></diy-size-setting> -->
    </div>
</template>
<script>
    Vue.component('store-commodity-classify-group-style', {
        name: "store-commodity-classify-group-style",
        mixins: [basicMixins],
        template: '#store-commodity-classify-group-style',
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                showLineList: [{
                    type: "size",
                    label: "显示条数",
                    value: 10,
                    unit: "个",
                    maxValue: 20
                }, ],
                // 选择分类
                picktUrlIndex: -1,
                selectUrlList:[],
                chooseGoods: 1,
                defaultSelectList: [],
                // 风格
                style: 1,
                styleList: [{
                    label: 1,
                    src: "resources/img/decorate/store-commodity-classify-group/style1.png"
                }, {
                    label: 2,
                    src: "resources/img/decorate/store-commodity-classify-group/style2.png"
                }, {
                    label: 3,
                    src: "resources/img/decorate/store-commodity-classify-group/style3.png"
                }, {
                    label: 4,
                    src: "resources/img/decorate/store-commodity-classify-group/style4.png"
                }, {
                    label: 5,
                    src: "resources/img/decorate/store-commodity-classify-group/style5.png"
                }, {
                    label: 6,
                    src: "resources/img/decorate/store-commodity-classify-group/style6.png"
                }, {
                    label: 7,
                    src: "resources/img/decorate/store-commodity-classify-group/style7.png"
                }],
                // 选择商品
                pickType: ['store_goods','store-commodity-cate'],
                pickIndex: -1,
                pickImgList: [],
                // 显示内容
                contentCheckList: [],
                /**
                    {
                        label: 2,
                        name: "副标题",
                        color: "",
                        showAlpha: false
                    }
                 */
                showContentList: [{
                        label: 1,
                        name: "商品标题",
                        color: "",
                        showAlpha: false
                    }, , {
                        label: 3,
                        name: "商品价格",
                        color: "",
                        showAlpha: false
                    }, {
                        label: 4,
                        name: "划线原价",
                        color: "",
                        showAlpha: false
                    }, {
                        label: 5,
                        name: "商品销量",
                        color: "",
                        showAlpha: false
                    }
                    , {
                        label: 6,
                        name: "会员价",
                        disableColor: false,
                    }
                ],
                // 购物车
                shoppingCart: 1,
                shopCartStyle: 0,
                shopCartStyleList: [{
                    label: 1,
                    src: "resources/img/decorate/store-commodity-classify-group/car3.png"
                }, {
                    label: 2,
                    src: "resources/img/decorate/store-commodity-classify-group/car1.png"
                }, {
                    label: 3,
                    src: "resources/img/decorate/store-commodity-classify-group/car2.png"
                }, {
                    label: 4,
                    src: "resources/img/decorate/store-commodity-classify-group/shopping_cart.png"
                }, ],
                angleMarkStyleIndex: -1,
                angleMarkStyleList: [{
                    label: 1,
                    src: "resources/img/decorate/store-commodity-classify-group/hot-1.png"
                }, {
                    label: 2,
                    src: "resources/img/decorate/store-commodity-classify-group/hot-2.png"
                }, {
                    label: 3,
                    src: "resources/img/decorate/store-commodity-classify-group/hot-3.png"
                }, ],
                angleMarkText: "",
                shopCartText: "",
                shopCartRadius: -1,
                shopCartBgColor: "",
                shopCartColor: "",
                shopCartBorderColor: "",
                shopCartSize: 1,
                shopCartSizeList: [{
                    label: 1,
                    value: "小"
                }, {
                    label: 2,
                    value: "中"
                }, {
                    label: 3,
                    value: "大"
                }],
                addShopCartBtn: 1,
                addShopCartBtnList: [{
                    label: 1,
                    value: "进入商品详情页"
                }, {
                    label: 2,
                    value: "商品加购"
                }],
                angleMark: 1,
                angleMarkList: [{
                    label: 1,
                    value: "不显示"
                }, {
                    label: 2,
                    value: "系统图标"
                }, {
                    label: 3,
                    value: "自定义"
                }],
                imageUrl: []
            }
        },
        computed: {
            defaultSelectListIds(newVal) {
                var arr = []
                if (newVal && newVal.length) {
                    arr = newVal.map(item => {
                        return item.params.id
                    })
                }
                return arr
            },
        },
        methods: {
			changeGoodsList(e){
				this.updateData(this.pickImgList, "goods") 
			},
            selectedUrl(value) {
                console.log('多选分类`````',value)
                this.selectUrlList = value.map(item=>item.params)
                this.showLineList[0].value = 10
                console.log('数据---`````',this.selectUrlList)
                this.updateData(10, 'cateNum')
                this.updateData(this.selectUrlList, 'commCate')
            },
            delClassifyUrl(index) {
                this.selectUrlList.splice(index, 1)
                // this.updateData(this.pickImgList, "goods") // 选中列表
            },
            onChange5([{
                value
            }]) {
                this.updateData(value, 'cateNum')
            },
            init() { // 设置默认值
                basicMixins.methods.init.call(this); // 以前的数据调用一下
                let arr10 = ['computedStyle', 'iptBg']
                var comBgColor = {
                    name: '商品背景', //名字
                    color: getObjValue(this.result, arr10, this.defaultForm.defColor), //颜色
                    showAlpha: false, //是否开启透明度
                }
                // 更改mixins初始数据
                this.defaultForm.colorInfos.push(comBgColor)

                // ======================== 首次初始渲染
                let count = 10
                let { commCate } = this.result.data
                if(commCate){
                    if(Array.isArray(commCate)){
                        this.selectUrlList = commCate
                        count = getObjValue(this.result, ['data', 'cateNum'], 10)
                    }else { //兼容原有逻辑
                        count = getObjValue(this.result, ['data', 'commCate', 'count'], 10)
                        this.selectUrlList = [commCate]
                    } 
                }
                console.log('count----------------',count,this.result)
                this.showLineList = [{
                    type: "size",
                    label: "显示条数",
                    value: count,
                    unit: "个",
                    maxValue: 20
                }]
                this.chooseGoods = this.result.data.chooseGoods || 1
                // 风格
                this.style = this.result.data.style || 1
                this.onStyleList(this.style) // 更新视图
                // 选择商品
                let arr = ['data', 'goods']
                this.pickImgList = getObjValue(this.result, arr, [])
                this.defaultSelectList = getObjValue(this.result, arr, []);
                // 显示内容
                let arr1 = ['data', 'showContent']
                let contentCheckList = getObjValue(this.result, arr1)
                if (contentCheckList && contentCheckList.length) {
                    this.showContentList = this.showContentList.map((item) => {
                        let item1 = contentCheckList.find(item1 => {
                            return item.label == item1.label && item1.color
                        })
                        if (item1) {
                            item.color = item1.color
                        }
                        return item
                    })
                }
                this.contentCheckList = contentCheckList ? contentCheckList.map(item => (item.label)) : [1, 2, 3, 4, 5, 6]
                this.filterSelectContentList()
                // 购物车
                this.shoppingCart = this.result.data.showShopCart || 1
                let arr2 = ['data', 'shopCartStyle']
                let arr3 = ['computedStyle', 'shopCartStyle']
                let shopCartData = getObjValue(this.result, arr2, {
                    index: 0,
                    text: "",
                })
                let shopCartStyle = getObjValue(this.result, arr3, {
                    color: "",
                    borderReduis: 0,
                    backgroundColor: "",
                    borderColor: "",
                    sizeType: 1
                })
                this.shopCartStyle = shopCartData.index || 0
                this.onShopCartStyle({}, this.shopCartStyle)
                this.shopCartText = shopCartData.text || ""
                this.shopCartColor = shopCartStyle.color || ""
                this.shopCartRadius = shopCartStyle.borderReduis || 0
                this.shopCartBgColor = shopCartStyle.backgroundColor || ""
                this.shopCartBorderColor = shopCartStyle.borderColor || ""
                this.shopCartSize = shopCartStyle.sizeType || 1
                // 购物车跳转
                let clickShopCartObJ = this.result.data.clickShopCartType
                this.addShopCartBtn = clickShopCartObJ ? clickShopCartObJ.label : 1
                // 角标
                let arr4 = ['data', 'angleMark']
                let angleMark = getObjValue(this.result, arr4, {})
                this.angleMark = angleMark.label || 1
                this.angleMarkText = angleMark.angleMarkText || ""
                if (angleMark.customImgUrl) {
                    this.imageUrl.push({
                        imgUrl: angleMark.customImgUrl
                    })
                }
                let arr5 = ['data', 'angleMark', 'angleMarkStyle']
                let angleMarkStyle = getObjValue(this.result, arr5, {
                    label: 0,
                    src: "resources/img/decorate/store-commodity-classify-group/hot-2.png"
                })
                this.angleMarkStyleIndex = angleMarkStyle.label

                // 尺寸
                let siazArr = ['computedStyle', 'searchIpts', 'marginBottom']
                let siazArr1 = ['computedStyle', 'searchIpts', 'marginLeft']
                let siazArr2 = ['computedStyle', 'searchIpts', 'marginTop']
                var marginArr = [{
                    name: '上边距', //名字
                    value: parseFloat(getObjValue(this.result, siazArr2, 10)), //值
                    unit: "px", //单位
                    disabled: false, //是否禁用
                    maxValue: 50,
                }, {
                    name: '下边距', //名字
                    value: parseFloat(getObjValue(this.result, siazArr, 10)), //值
                    unit: "px", //单位
                    disabled: false, //是否禁用
                    maxValue: 50,
                }, {
                    name: '左右边距', //名字
                    value: parseFloat(getObjValue(this.result, siazArr1, 10)), //值
                    unit: "px", //单位
                    disabled: false, //是否禁用
                    maxValue: 20,
                }]
                this.defaultForm.sizeInfos = marginArr
                this.sliderChange(marginArr, 'margin')
                this.setDefaultSelectIds();
            },
            getContentItem(label) {
                return this.showContentList.find(item => {
                    return item && (item.label === label)
                }) || {}
            },
            onStyleList($event) {
                // 更改操作
                if ($event == 1 || $event == 2) {
                    this.showContentList = [{
                            label: 1,
                            name: "商品标题",
                            color: this.getContentItem(1).color,
                            showAlpha: false
                        }, {
                            label: 2,
                            name: "副标题",
                            color: this.getContentItem(2).color,
                            showAlpha: false
                        }, {
                            label: 3,
                            name: "商品价格",
                            color: this.getContentItem(3).color,
                            showAlpha: false
                        }, {
                            label: 4,
                            name: "划线原价",
                            color: this.getContentItem(4).color,
                            showAlpha: false
                        }, {
                            label: 5,
                            name: "商品销量",
                            color: this.getContentItem(5).color,
                            showAlpha: false
                        }
                        , {
                            label: 6,
                            name: "会员价",
                            disableColor: false,
                        }
                    ]
                } else if ($event == 3) {
                    this.showContentList = [{
                            label: 1,
                            name: "商品标题",
                            color: this.getContentItem(1).color,
                            showAlpha: false
                        }, {
                            label: 3,
                            name: "商品价格",
                            color: this.getContentItem(3).color,
                            showAlpha: false
                        }, {
                            label: 4,
                            name: "划线原价",
                            color: this.getContentItem(4).color,
                            showAlpha: false
                        }, {
                            label: 5,
                            name: "商品销量",
                            color: this.getContentItem(5).color,
                            showAlpha: false
                        }
                        , {
                            label: 6,
                            name: "会员价",
                            disableColor: false,
                        }
                    ]
                } else {
                    this.showContentList = [{
                        label: 1,
                        name: "商品标题",
                        color: this.getContentItem(1).color,
                        showAlpha: false
                    }, {
                        label: 3,
                        name: "商品价格",
                        color: this.getContentItem(3).color,
                        showAlpha: false
                    }, ]
                }
                this.updateData($event, 'style')
            },
            onAngleMark(e) {
                var item = this.angleMarkList.find(it => {
                    return it.label == e
                })
                this.updateData(item, "angleMark")
            },
            onAngleMarkChange(e, type) {
                this.updateData({
                    [type]: e
                }, "angleMark")
            },
            // 图片
            addIconImg(arr) {
                this.imageUrl = arr
                this.updateData({
                    customImgUrl: arr[0].imgUrl
                }, "angleMark")
            },
            onAddShopCartBtn(e) {
                var item = this.addShopCartBtnList.find(it => {
                    return it.label == e
                })
                this.updateData(item, "clickShopCartType")
            },
            updateShopCartText(text) {
                this.updateData({
                    text
                }, "shopCartStyle")
            },
            onShopCartStyle(e, index) {
                this.shopCartStyle = index
                this.updateData(Object.assign({
                    index
                }, e), "shopCartStyle")
            },
            onShopCart(e, type) {
                this.updateStyle({
                    [type]: e
                }, "shopCartStyle")
            },
            updateInput(val, item) {
                if (val.length == 0) {
                    val = "transparent";
                }
                item.color = val
                // 更新
            },
            onContentChange() {
                this.filterSelectContentList()
            },
            onPickColor() {
                // 更新
                this.filterSelectContentList()
            },
            filterSelectContentList() {
                var result = this.showContentList.filter(item => {
                    return this.contentCheckList.indexOf(item.label) !== -1
                })
                this.updateData(result, "showContent") // 选中列表
            },
            mouseenter(index) {
                this.pickIndex = index
            },
            mouseleave() {
                this.pickIndex = -1
            },
            delModel(index) {
                this.pickImgList.splice(index, 1)
                this.defaultSelectList.splice(index, 1);
                this.updateData(this.pickImgList, "goods") // 选中列表
            },
            selectNavUrl(e) {
                let tempList =[...this.pickImgList,...e]
                this.pickImgList = tempList.filter((item, index, self) => {
                return self.findIndex(t => t.params.id === item.params.id) === index;
                });
                this.updateData(this.pickImgList, "goods") // 选中列表
                this.setDefaultSelectIds();
            },
            setDefaultSelectIds() {
                let pickData = this.pickImgList;
                let selectIds = [];
                pickData.forEach(item => {
                    selectIds.push(item.params.id);
                })
                this.defaultSelectList = selectIds.filter((item, index, selectIds) => selectIds.indexOf(item) === index);
            },
            updateColor(e) { // 选择颜色
                this.result.computedStyle.searchBox = e[0].color
                this.result.computedStyle.iptBg = e[1].color
                this.$emit("update", this.result)
            },
            upImgIndex(index, item) {
                this.imgIndex = index;
                this.result.data.titleStyle = item;
                this.$emit("update", this.result);
            },
            isObject(d) {
                if (!d) {
                    return false
                }
                return Object.prototype.toString.call(d) === "[object Object]"
            },
            // 更新数据
            updateData(value, key) {
                if (this.isObject(this.result.data[key])) { // 对象格式
                    var oldData = deepClone(this.result.data[key])
                    this.result.data[key] = Object.assign(oldData, {
                        ...value
                    });
                } else { // 基础类型、数组
                    this.result.data[key] = value;
                }
                this.$emit("update", this.result);
            },
            updateStyle(value, key) {
                if (this.isObject(this.result.computedStyle[key])) { // 对象格式
                    var oldData = deepClone(this.result.computedStyle[key])
                    this.result.computedStyle[key] = Object.assign(oldData, {
                        ...value
                    });
                } else { // 基础类型、数组
                    this.result.computedStyle[key] = value;
                }
                this.$emit("update", this.result);
            },
        }
    });
</script>
<style lang="scss" >
    .pickImgItem {
        position: relative;
        width: 50px;
        height: 50px;
        margin: 0 9px 9px 0;
        background-color: #ddd;
    }

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

    .pick-goods {
        background: #f4f3f7;
        border-radius: 4px;
        padding: 20px;
    }

    .tip {
        position: absolute;
        top: 21px;
        left: 88px;
        font-size: 12px;
        color: rgb(153, 153, 153);
    }

    .show-content-pick {
        margin: 0 10px 0 12px;
    }

    .shoppingCartFunc {
        background: #f4f3f7;
        border-radius: 4px;
        padding: 20px;
        margin-top: 20px;
    }

    .shopping-cart-func {
        margin-top: 20px;
    }

    .shop-cart-row .leabl {
        width: 70px;
        text-align: center;
    }

    .shop-cart-col {
        width: 36px;
        height: 36px;
        box-sizing: border-box;
        justify-content: center;
        border-radius: 4px;
        margin-right: 20px;
    }

    .selected {
        border: 1px solid var(--diy-theme);
    }

    /* 清理组件默认样式 */
    .clear-diy-style .el-radio-button__inner {
        background-color: transparent;
        padding: 0;
    }

    .shop-cart-row .el-radio-group {
        display: flex;
        align-items: center;
    }

    .shop-cart-row .el-radio-button__inner {
        display: flex;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        padding: 0;
    }

    .shop-cart-row {
        margin-bottom: 20px;
    }

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

    .store-commodity-classify-group-style .show-content .el-color-picker {
        height: 30px;
    }

    .store-commodity-classify-group-style .el-checkbox {
        width: 100px;
    }

    /* 修改element基础样式 */
    .store-commodity-classify-group-style .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background-color: transparent;
    }
    .store-commodity-classify-group-style {
        .icon-set-items {
            position: relative;
            .icon-set-items-close {
                position: absolute;
                right: 10px;
                top: 10px;
            }
        }
    }
</style>