qimall/addons/GroupBuy/backend/views/components/diy/group-goods/style.php

<?php
use common\helpers\ComponentHelper;

$basc_path = Yii::getAlias('@addons') . "/GroupBuy/backend/views/components/diy/style-components";
ComponentHelper::loadComponentView("style1", $basc_path);
ComponentHelper::loadComponentView("style2", $basc_path);
ComponentHelper::loadComponentView("style3", $basc_path);
?>
<template id="group-goods-style">
    <div class="group-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="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:['group_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-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('group-goods-style', {
        name: "group-goods-style",
        mixins: [basicMixins],
        template: '#group-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: "group-goods/group-style1.png",
                    text: "风格1",
                    type: 1
                }, {
                    img: "group-goods/group-style2.png",
                    text: "风格2",
                    type: 2
                }, {
                    img: "group-goods/group-style3.png",
                    text: "风格3",
                    type: 3
                }],
                imgIndex: 0,
                colorInfos: ['背景色', '按钮文字', '按钮背景'],
                defColor: ['transparent', '#fff', '#db0505'],
                sizeInfos: ['商品间距', '上边距', '下边距', '左右边距'],
                sizeInfosValue: [5, 0, 0, 0],
                sizeInfosMax: [50, 50, 50, 20],

                chooseGoods: 1,
                // 选择商品
                pickType: ['group_activity'],
                pickIndex: -1,
                pickImgList: [],
                selectUrl: '',
                showLineList: [{
                    type: "size",
                    label: "显示条数",
                    value: 10,
                    unit: "个",
                    maxValue: 20
                }, ],
                selectList: [],
            }
        },
        methods: {
            init() {
                basicMixins.methods.init.call(this); // 以前的数据调用一下
                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')
            },
            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)
            },
            updateColor(arr) { // 选择颜色
                this.updateSome(arr, 'colorInfos')
                let style = this.result.computedStyle
                let colorArr = ['bgColor', 'btnTextColor', 'btnBackground']
                if (this.imgIndex == 1) {
                    colorArr = ['bgColor']
                }
                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]
                }
            },
            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)
                })
                console.log(this.selectList, '-----------this.selectList')
            },
            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
                        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
            },
        }
    });
</script>
<style>
    .style-goods .exhibit-img {
        width: 190px !important;
        height: 186px !important;
    }

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