qimall/addons/DepositPresale/backend/views/components/diy/presale-goods/style.php

<?php
use common\helpers\ComponentHelper;

$basc_path = Yii::getAlias('@addons') . "/DepositPresale/backend/views/components/diy/style-components";
ComponentHelper::loadComponentView("style1", $basc_path);
ComponentHelper::loadComponentView("style2", $basc_path);
ComponentHelper::loadComponentView("style3", $basc_path);
?>
<template id="presale-goods-style">
    <div class="presale-goods-style">
        <!-- 公共 -->
        <!-- <diy-style class="style-goods fill-border-top" :img-info="imgInfo" :def-index="imgIndex" :img-style="{ width: '206px', height: 'auto' }" @chang="upImgIndex"></diy-style> -->

        <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: 120px;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">
            <el-radio-group v-model="titleRadio" @change="titleChange">
                <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">
            <div class="pick-goods">
                <com-pick-link @selected="selectNavUrl" :pick-type="pickType" :default-select-list="selectList" :default-tabs="[{name: 'marketing',children:['presale_activity'] }]">
                    <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-style-contain title="显示内容" class="show-content fill-border-top">
            <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="角标设置" 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-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-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="defaultForm.colorInfos" :def-color="defaultForm.defColor" @chang="updateBgColor"></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('presale-goods-style', {
        name: "presale-goods-style",
        mixins: [basicMixins],
        template: '#presale-goods-style',
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                maxGroupLen: 30,
                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,
                }, ],
                imgInfo: [{
                    img: "/static/addons/DepositPresale/group-style1.png",
                    text: "风格1",
                    type: 1
                }, {
                    img: "/static/addons/DepositPresale/group-style2.png",
                    text: "风格2",
                    type: 2
                }, {
                    img: "/static/addons/DepositPresale/group-style3.png",
                    text: "风格3",
                    type: 3
                }],
                imgIndex: 1,
                colorInfos: ['背景色', '按钮文字', '按钮背景'],
                defColor: ['transparent', '#fff', '#db0505'],
                sizeInfos: ['商品间距', '上边距', '下边距', '左右边距'],
                sizeInfosValue: [5, 0, 0, 0],
                sizeInfosMax: [50, 50, 50, 20],

                chooseGoods: 1,
                // 选择商品
                pickType: ['presale_activity'],
                pickIndex: -1,
                pickImgList: [],
                selectUrl: '',
                showLineList: [{
                    type: "size",
                    label: "显示条数",
                    value: 10,
                    unit: "个",
                    maxValue: 20
                }, ],
                selectList: [],
                // 显示内容
                contentCheckList: [],
                showContentList: [{
                    label: 1,
                    name: "商品标题",
                    color: "#fff",
                    showAlpha: false
                }, {
                    label: 3,
                    name: "商品价格",
                    color: "#fff",
                    showAlpha: false
                }, {
                    label: 4,
                    name: "预售价",
                    color: "#fff",
                    showAlpha: false
                }, {
                    label: 5,
                    name: "付款人数",
                    color: "#fff",
                    showAlpha: false
                }],
                angleMark: 1,
                angleMarkStyleIndex: -1,
                angleMarkList: [{
                    label: 1,
                    value: "不显示"
                }, {
                    label: 2,
                    value: "系统图标"
                }, {
                    label: 3,
                    value: "自定义"
                }],
                angleMarkText: "",
                angleMarkStyleList: [{
                    label: 1,
                    src: "resources/img/decorate/commodity-group/hot-1.png"
                }, {
                    label: 2,
                    src: "resources/img/decorate/commodity-group/hot-2.png"
                }, {
                    label: 3,
                    src: "resources/img/decorate/commodity-group/hot-3.png"
                }, ],
                imageUrl: [],
                // 购物车
                shoppingCart: 1,
                shopCartStyle: 0,
                shopCartStyleList: [{
                    label: 1,
                    src: "resources/img/decorate/commodity-group/car3.png"
                }, ],

                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: "商品加购"
                }],
                style: 1,
                styleList: [{
                    label: 2,
                    src: "resources/img/decorate/commodity-group/style2.png"
                }, {
                    label: 3,
                    src: "resources/img/decorate/commodity-group/style3.png"
                }, ],
            }
        },
        methods: {
            init() {
                basicMixins.methods.init.call(this); // 以前的数据调用一下
                let arr10 = ['computedStyle', 'goodsBgColor']
                var comBgColor = {
                    name: '商品背景', //名字
                    color: getObjValue(this.result, arr10, this.defaultForm.defColor), //颜色
                    showAlpha: false, //是否开启透明度
                }
                // 更改mixins初始数据
                this.defaultForm.colorInfos.push(comBgColor)
                let arr11 = ['computedStyle', 'bgColor']
                for (let key in this.defaultForm.colorInfos) {
                    if (this.defaultForm.colorInfos[key].name == '底部背景') {
                        this.defaultForm.colorInfos[key].color = getObjValue(this.result, arr11, this.defaultForm.defColor)
                    }
                }
                this.titleRadio = this.result.data.titleRadio || 0
                // 标题风格
                if (this.result.data.groupStyle) {
                    this.imgIndex = this.imgInfo.findIndex(item => (item.type === this.result.data.groupStyle.type))
                }

                this.chooseGoods = this.result.data.chooseGoods || 1
                // 选择商品
                let arr = ['data', 'goods']
                this.pickImgList = getObjValue(this.result, arr, [])
                // this.getSelectList(this.pickImgList)
                let commCate = ['data', 'commCate', 'title']
                this.selectUrl = getObjValue(this.result, commCate, '')
                this.initList('titleList')
                // 风格
                this.style = this.result.data.style || 2
                this.onStyleList(this.style) // 更新视图

                let arr1 = ['data', 'showContent']

                let contentCheckList = getObjValue(this.result, arr1)

                if (!contentCheckList) {
                    this.updateData(this.showContentList, "showContent")
                }

                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, 3, 4, 5]

                // 角标
                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/commodity-group/hot-2.png"
                })
                this.angleMarkStyleIndex = angleMarkStyle.label
                // 购物车跳转
                let clickShopCartObJ = this.result.data.clickShopCartType
                this.addShopCartBtn = clickShopCartObJ ? clickShopCartObJ.label : 1
                // 购物车
                this.shoppingCart = this.result.data.showShopCart || 1
                if(this.result.data.showShopCart === undefined){
                    this.updateData(this.shoppingCart, "shoppingCart")
                }
                let arr2 = ['data', 'shopCartStyle']
                let arr3 = ['computedStyle', 'shopCartStyle']
                let shopCartData = getObjValue(this.result, arr2, {
                    index: 0,
                    text: "",
                })
                let initShopCartStyle = {
                    color: "",
                    borderReduis: 0,
                    backgroundColor: "",
                    borderColor: "",
                    sizeType: 1
                };
                let judge_exists = getObjValue(this.result, arr3);
                if (!judge_exists) {
                    this.updateStyle(initShopCartStyle, "shopCartStyle");
                }
                let shopCartStyle = getObjValue(this.result, arr3, initShopCartStyle)
                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

            },
            updateInput(val, item) {
                if (val.length == 0) {
                    val = "transparent";
                }
                item.color = val
                // 更新
            },
            titleChange(e) {
                this.result.data.titleRadio = e
                this.$emit("update", this.result)
            },
            upImgIndex(index, item) {
                this.imgIndex = index;
                if (index == 0 || index == 2) {
                    this.colorInfos = [{
                        color: "transparent",
                        name: "背景色",
                        showAlpha: false,
                        value: "transparent",
                    },
                        {
                            color: "#fff",
                            name: "按钮文字",
                            showAlpha: false,
                            value: "#fff"
                        },
                        {
                            color: "#db0505",
                            name: "按钮背景",
                            showAlpha: false,
                            value: "#db0505"
                        }
                    ]
                } else {
                    this.colorInfos = [{
                        color: "transparent",
                        name: "背景色",
                        showAlpha: false,
                        value: "transparent",
                    }]
                }
                if (index == 0 || index == 1) {
                    this.sizeInfos = [{
                        disabled: false,
                        hidden: false,
                        maxValue: 50,
                        name: "商品间距",
                        unit: "px",
                        value: 5
                    },
                        {
                            disabled: false,
                            hidden: false,
                            maxValue: 50,
                            name: "上边距",
                            unit: "px",
                            value: 0
                        },
                        {
                            disabled: false,
                            hidden: false,
                            maxValue: 50,
                            name: "下边距",
                            unit: "px",
                            value: 0
                        },
                        {
                            disabled: false,
                            hidden: false,
                            maxValue: 20,
                            name: "左右边距",
                            unit: "px",
                            value: 0
                        }
                    ]
                } else {
                    this.sizeInfos = [{
                        disabled: false,
                        hidden: false,
                        maxValue: 50,
                        name: "上边距",
                        unit: "px",
                        value: 0
                    },
                        {
                            disabled: false,
                            hidden: false,
                            maxValue: 50,
                            name: "下边距",
                            unit: "px",
                            value: 0
                        },
                    ]
                    this.result.computedStyle.spacing = 0
                }

                this.result.data.colorInfos = this.colorInfos
                this.result.data.sizeInfos = this.sizeInfos
                this.result.data.groupStyle = item;
                this.updateColor(this.colorInfos)
                this.updateSize(this.sizeInfos)
            },

            updateBgColor(e) { // 选择颜色
                this.result.computedStyle.bgColor = e[0].color
                this.result.computedStyle.goodsBgColor = e[1].color
                this.$emit("update", this.result)
            },

            updateColor(arr) { // 选择颜色

                this.updateSome(arr, 'colorInfos')
                let style = this.result.computedStyle
                let colorArr = ['bgColor', 'goodsBgColor', 'btnTextColor', 'btnBackground']
                if (this.imgIndex == 1) {
                    colorArr = ['bgColor', 'goodsBgColor']
                }
                colorArr.forEach((it, i) => {
                    style = Object.assign(style, {
                        [it]: this.colorInfos[i].color
                    })
                })

                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) {
                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]
                }
            },
            onContentChange() {
                this.filterSelectContentList()
            },
            filterSelectContentList() {
                var result = this.showContentList.filter(item => {
                    return this.contentCheckList.indexOf(item.label) !== -1
                })
                this.updateData(result, "showContent") // 选中列表
            },
            onPickColor() {
                // 更新
                this.filterSelectContentList()
            },
            getContentItem(label) {
                return this.showContentList.find(item => {
                    return item && (item.label === label)
                }) || {}
            },
            onShopCartStyle(e, index) {
                this.shopCartStyle = index
                this.updateData(Object.assign({
                    index
                }, e), "shopCartStyle")
            },
            updateShopCartText(text) {
                this.updateData({
                    text
                }, "shopCartStyle")
            },
            onShopCart(e, type) {
                this.updateStyle({
                    [type]: e
                }, "shopCartStyle")
            },
            onStyleList($event) {
                // 更改操作
                if ($event == 1 || $event == 2) {
                    this.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
                    }]
                } else if ($event == 3) {
                    this.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
                    }]
                }
                this.updateData($event, 'style')
            },
            addIconImg(arr) {
                this.imageUrl = arr
                this.updateData({
                    customImgUrl: arr[0].imgUrl
                }, "angleMark")
            },
            onAngleMark(e) {
                var item = this.angleMarkList.find(it => {
                    return it.label == e
                })
                this.updateData(item, "angleMark")
            },

            onAngleMarkChange(e, type) {
                this.updateData({
                    [type]: e
                }, "angleMark")
            },
            mouseenter(index) {
                this.pickIndex = index
            },
            mouseleave() {
                this.pickIndex = -1
            },
            selectNavUrl(e) {
                this.pickImgList.push(...e)
                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)
            },
            getSelectList(arr) {
                if (arr.length == 0) return;
                this.selectList = []
                arr.forEach(item => {
                    this.selectList.push(item.params.id)
                })
            },
            selectedUrl(value) {
                var item = getObjValue(value[0], ["params"], {})
                this.selectUrl = item.title
                this.showLineList[0].value = 10
                this.updateSome(Object.assign({
                    count: 10
                }, item), 'commCate')
            },
            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.getSelectList(this.pickImgList)
                this.$emit("update", this.result)
            },
            onChange(e) {
                this.updataList('titleList')
            },
            updataList(target) {
                this[target].map((item, index) => {
                    var obj = {}
                    if (item.setKey) {
                        const key = item.setKey
                        this.updateTitleStyle(key, item.value)
                    }
                    return obj
                })
            },
            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);

            },
            updateTitleStyle(key, value) {
                var obj = this.result.data
                this.result.data = Object.assign(obj, {
                    [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);
            },
            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
            },
            onAddShopCartBtn(e) {
                var item = this.addShopCartBtnList.find(it => {
                    return it.label == e
                })
                this.updateData(item, "clickShopCartType")
            },
        }
    });
</script>
<style>
    .style-goods .exhibit-img {
        width: 190px !important;
        height: 186px !important;
    }

    .presale-goods-style .tabs-com .el-radio-button__inner {
        padding: 5px 0;
    }

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

    .title-input {
        padding: 10px 0;
    }

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

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

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

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

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

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