qimall/addons/DepositPresale/backend/views/default/components/common/button-group/style.php

<template id="button-group-style">
    <div>
        <diy-style-contain title="按钮样式" class="fill-border-top">
            <el-radio-group v-model="buttonData.style" @change="radioChange($event, 'style')">
                <el-radio :label="1">{{ buttonData.type == 1 ? '图片' : '图标' }}+文字</el-radio>
                <el-radio :label="2">{{ buttonData.type == 1 ? '图片' : '图标' }}</el-radio>
                <el-radio :label="3">文字</el-radio>
            </el-radio-group>
        </diy-style-contain>
        <diy-style-contain title="按钮形状" class="fill-border-top" v-if="buttonData.style != 3">
            <div class="button-shape-box" flex="cross:center">
                <div class="button-shape-cycle" v-for="(it, i) in shapeList" @click="toggleShape(it, i)">
                    <div class="button-shape-item"
                        :class="buttonData.shape == it ? 'active' : ''"
                        :style="{borderRadius: it == 'square' ? '0px' : it == 'round' ? '3px' : '50%'}" 
                    ></div>
                </div>
            </div>
        </diy-style-contain>
        <diy-style-contain title="按钮类型" class="fill-border-top" v-if="buttonData.style != 3">
            <el-radio-group v-model="buttonData.type" @change="radioChange($event, 'type')">
                <el-radio :label="1">图片</el-radio>
                <!-- <el-radio :label="2">图标</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-tabs title="组件风格" class="fill-border-top" :list="buttonPattern" :default_item="buttonData.patternItem" radio_text='text' @change="patternChange"></diy-tabs>
        
        <diy-style-contain title="单行数量" class="fill-border-top">
            <el-radio-group v-model="buttonData.single_line" @change="radioChange($event, 'single_line')">
                <el-radio :label="3">3个</el-radio>
                <el-radio :label="4">4个</el-radio>
                <el-radio :label="5">5个</el-radio>
            </el-radio-group>
        </diy-style-contain>
        <diy-style-contain title="每页行数" class="fill-border-top" v-if="buttonData.pattern == 'swiper'">
            <el-radio-group v-model="buttonData.line_num" @change="radioChange($event, 'line_num')">
                <el-radio :label="1">1行</el-radio>
                <el-radio :label="2">2行</el-radio>
            </el-radio-group>
        </diy-style-contain>
        <diy-icon-set 
            class="fill-border-top"
            title="图标设置"
            :list="iconList" 
            :type="buttonData.type" 
            suggest-text="建议尺寸：88*88" 
            :tag-switch="true" 
            :btn-style="buttonData.style" 
            :max-icon-length="30" 
            :show-link="true"
            :show-add-btn="true"
            :img-url="defaultImg"
            :default-tabs="[{name: 'marketing',children:['presale_cate'] }]"
            :show-id="false"
            @change="setChange"
        ></diy-icon-set>
        <diy-color class="fill-border-top" :color-infos="colorInfos" :str-color="defColor" @chang="updateColor"></diy-color>
        <diy-size-setting top-name="边距" class="fill-border-top" :size-infos="sizeInfos" :size-infos-value="sizeInfosValue" :max-value="50" @chang="sliderChange"></diy-size-setting>
        <diy-size-setting top-name="圆角设置" class="fill-border-top" :size-infos="defaultForm.radiusInfos" :max-value="20" @chang="RadiusChange"></diy-size-setting>
    </div>
</template>
<script>
    Vue.component('button-group-style', {
        name: "button-group-style",
        mixins: [basicMixins],
        template: '#button-group-style',
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                shapeList: ['square', 'round', 'cricle'], // 按钮形状
                buttonType: 1, // 按钮类型
                buttonPattern: [
                    { label: '固定显示', value: 'fixed' },
                    { label: '单行滑动', value: 'scroll' },
                    { label: '分页滑动', value: 'swiper' },
                ],
                patternCurrent: 'fixed',
                btnType: 1,
                colorInfos: ['底部背景' ,'组件背景', '文字颜色'],
                defColor: ['', '', '#333333'],
                sizeInfos: ['上边距', '下边距', '左右边距'],
                sizeInfosValue: [8,8,0],
                buttonData: {
                    style: 1, // 按钮样式
                    type: 1, // 按钮类型
                    single_line: 3, // 单行数量
                    line_num: 1, // 每页行数
                    shape: 'square', // 当前相中的按钮形状
                    pattern: 'fixed', // 组件风格
                    patternItem: null, // 组件风格对象
                },
                defaultImg: 'resources/img/decorate/default_picture.png',
                iconList: [
                    {
                        img: "<?= Yii::getAlias('@attachurl') ?>"+"/static/addons/DepositPresale/icon1.png",
                        icon: 'el-icon-setting',
                        is_show_tag: false,
                        tags: '热门',
                        tagsBgColor: '#f83287',
                        tagsTextColor: '#ffffff',
                        btnText: '三人团',
                        link_params: null,
                    },
                    {
                        img: "<?= Yii::getAlias('@attachurl') ?>"+"/static/addons/DepositPresale/icon2.png",
                        icon: 'el-icon-setting',
                        is_show_tag: false,
                        tags: '热门',
                        tagsBgColor: '#f83287',
                        tagsTextColor: '#ffffff',
                        btnText: '五人团',
                        link_params: null,
                    },
                    {
                        img: "<?= Yii::getAlias('@attachurl') ?>"+"/static/addons/DepositPresale/icon3.png",
                        icon: 'el-icon-setting',
                        is_show_tag: false,
                        tags: '热门',
                        tagsBgColor: '#f83287',
                        tagsTextColor: '#ffffff',
                        btnText: '十人团',
                        link_params: null,
                    }
                ],
            }
        },
        
        methods: {
            init() {
                basicMixins.methods.init.call(this); // 以前的数据调用一下
                if (this.result.data.buttonData) {
                    this.buttonData = this.result.data.buttonData
                } else {
                    this.result.data.buttonData = this.buttonData
                }
                this.updataInfos()
            },
            updateColor(e) { // 选择颜色
                this.colorInfos = e;
                if(this.result.data.colorInfos){
                    this.colorInfos = this.result.data.colorInfos;
                } else {
                    this.result.data.colorInfos = this.colorInfos;
                }
                this.result.computedStyle.searchBox = this.colorInfos[0].color
                this.result.computedStyle.iptBg = this.colorInfos[1].color
                this.result.computedStyle.textStyle = this.colorInfos[2].color
                this.updataInfos()
            },
            sliderChange(arr) {
                this.sizeInfos = arr
                if (this.result.data.sizeInfos && this.result.data.sizeInfos.length) {
                    this.sizeInfos = this.result.data.sizeInfos
                } else {
                    this.result.data.sizeInfos = this.sizeInfos
                }
                let top = this.sizeInfos[0] && (this.sizeInfos[0].value + this.sizeInfos[0].unit)
                let bottom = this.sizeInfos[1] && (this.sizeInfos[1].value + this.sizeInfos[1].unit)
                let lr = this.sizeInfos[2] && (this.sizeInfos[2].value + this.sizeInfos[2].unit)
                const style = {
                    marginTop: top,
                    marginBottom: bottom,
                    marginLeft: lr,
                    marginRight: lr
                }
                this.searchIpts = Object.assign(this.searchIpts, style)
                this.updataResult(this.searchIpts, 'searchIpts')
            },
            toggleShape(it, i) { // 按钮形状
                this.buttonData.shape = it
                this.updataInfos()
            },
            setChange(arr) { // 图标设置
                this.iconList = arr
                if (this.result.data.iconList && this.result.data.iconList.length) {
                    this.iconList = this.result.data.iconList
                } else {
                    this.result.data.iconList = this.iconList
                }
                this.updataInfos()
            },
            patternChange(e) { // 组件风格
                this.buttonData.pattern = e.item.value
                this.buttonData.patternItem = e.item
                this.updataInfos()
            },
            radioChange(e, name) {
                this.buttonData[name] = e
                this.updataInfos()
            },
            updataInfos() {
                this.$emit("update", this.result)
            }
        }
    });
</script>
<style>
    .button-shape-cycle {
        margin-right: 25px;
    }
    .button-shape-item {
        width: 36px;
        height: 36px;
        background-color: #DFDFDF;
    }
    .button-shape-cycle .active {
        border: 1px solid var(--primary, #2D8CF0);
    }
</style>