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

<template id="button-group-preview">
    <div class="diy-button-group" :style="{background: computedStyle.searchBox}">
        <div class="diy-button-boxs" :style="{...inputStyle}">
            <!-- 按钮位置 -->
            <div flex="cross:center" :class="'diy-button-' + pattern">
                <div class="btn-group-list" 
                    :class="'col-' + (btn_data.buttonData && btn_data.buttonData.single_line)" 
                    flex="dir:top main:center cross:center" 
                    v-for="(item, index) in (pattern == 'swiper' ? swiperList : iconList)" :key="index" 
                >
                    <div class="btn-group-image" 
                        flex="main:center cross:center"
                        :style="{borderRadius: borderRadius, backgroundImage: 'url('+ (item.img || default_bg) +')'}"
                        v-if="btn_data.buttonData && btn_data.buttonData.style != 3"
                    >
                        <!-- 展示图标 btn_data.buttonData && btn_data.buttonData.type == 1 ? 'url('+ (item.img || default_bg) +')' : '' -->
                        <!-- <i v-if="btn_data.buttonData && btn_data.buttonData.type == 2" class="iconfont btn-icon-type" :class="item.icon"></i> -->
                    </div>
                    <div class="btn-group-text" 
                        v-if="btn_data.buttonData && btn_data.buttonData.style != 2" 
                        :style="{color: computedStyle.textStyle}"
                    >{{ item.btnText }}</div>
                    <div class="btn-group-tags" 
                        v-if="is_show_tags && item.is_show_tag"
                        :style="{background: item.tagsBgColor, color: item.tagsTextColor}"
                    >{{ item.tags }}</div>
                </div>
            </div>

            <!-- 左右箭头 -->
            <!-- :class="{'showArrow': is_show_arrow}" -->
            <div class="swiper-arrow left" @click.stop="toggleHandle('left')"  v-if="pattern == 'swiper'">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="swiper-arrow right" @click.stop="toggleHandle('right')" v-if="pattern == 'swiper'">
                <i class="el-icon-arrow-right"></i>
            </div>
            <!-- 轮播点 -->
            <div class="swiper-dots" v-if="pattern == 'swiper'">
                <div class="dot-item" v-for="(it, i) in list" :class="i == current ? 'active' : ''" @click.stop="dotClick(i)"></div>
            </div>
        </div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('button-group-preview', {
        name: "button-group-preview",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#button-group-preview',
        computed: {
            btn_data() {
                return this.activeItem.data
            },
            computedStyle() {
                return this.activeItem.computedStyle
            },
            borderRadius() {
                let data = this.btn_data.buttonData.shape
                return data == 'square' ? '0px' : data == 'round' ? '8px' : '50%'
            },
            inputStyle() {
                let tabItem = this.computedStyle.tabItem
                let style = {
                    'background': this.computedStyle.iptBg,
                    ...this.activeItem.computedStyle.searchIpts
                }
                if (tabItem && tabItem.value == 'border') style.border = '1px solid ' + (tabItem ? tabItem.color : 'transparent')
                if (tabItem && tabItem.value == 'shandow') style.boxShadow = tabItem ? '0 0 10px ' + tabItem.color : '0 0 10px rgba(226, 231, 244, 0.7)'
                return style
            },
            is_show_tags() {
                return this.btn_data.buttonData && (this.btn_data.buttonData.style != 3 && this.btn_data.buttonData.type == 1)
            },
            pattern() {
                return this.btn_data.buttonData && this.btn_data.buttonData.pattern
            }
        },
        watch: {
            activeItem: {
                deep:true,
                immediate: true,
                handler(val) {
                    let pattern = val.data.buttonData && val.data.buttonData.pattern
                    this.iconList = val.data.iconList
                    if (pattern == 'swiper') {
                        this.toggleHandle()
                    }
                }
            }
        },
        data() {
            return {
                default_bg: 'resources/img/decorate/default_picture.png',
                iconList: [],
                swiperList: [],
                current: 0,
                list: [],
            }
        },
        mounted() {
            
        },
        methods: {
            toggleHandle(name) {
                let n = this.current
                // 每页行数
                let line_num = this.btn_data.buttonData && this.btn_data.buttonData.line_num
                // 单行数量
                let single_line = this.btn_data.buttonData && this.btn_data.buttonData.single_line
                this.list = this.swiperHandle(line_num, single_line)
                let arr = []
                if (name == 'right' && n < this.list.length - 1) {
                    n++
                } else if (name == 'left' && n > 0) {
                    n--
                }
                this.current = n
                this.swiperList = this.iconList.slice(single_line * line_num * n, single_line* line_num * (n + 1))
            },
            dotClick(i) {
                this.current = i
                this.toggleHandle()
            },
            swiperHandle(line_num, single_line) {
                const arr = deepClone(this.iconList)
                let len = Math.ceil((arr && arr.length) / (line_num * single_line))
                let newArr = []
                for(var i = 0; i < len; i++) {
                    newArr[i] = arr.splice(0, line_num * single_line)
                }
                return newArr
            },
        }
    });
</script>

<style>
    .diy-button-group {
        position: relative;
        overflow: hidden;
    }
    .diy-button-boxs {
        position: relative;
        padding: 4px 0;
        overflow: hidden;
    }
    

    .diy-button-scroll {
        overflow-x: auto;
        width: 100%;
        box-sizing: border-box;
        padding: 0 8px;
    }
    .diy-button-scroll::-webkit-scrollbar {
        height: 5px;
    }
    .diy-button-fixed {
        flex-wrap: wrap;
    }
    .diy-button-swiper {
        overflow: hidden;
        padding-bottom: 20px;
        flex-wrap: wrap;
    }
    .btn-group-list {
        position: relative;
        padding: 8px 0;
        flex-shrink: 0;
    }
    .btn-group-tags {
        position: absolute;
        top: -7px;
        left: 50%;
        width: 53px;
        height: 26px;
        transform: scale(.5);
        color: #fff;
        margin-left: -6px;
        background: #f83287;
        border-radius: 12px 12px 12px 0;
        border: 1px solid #fff;
        text-align: center;
        font-size: 14px;
    }
    .btn-group-image {
        width: 44px;
        height: 44px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50%;
    }
    .btn-group-text {
        font-size: 12px;
        margin-top: 4px;
    }
    .col-3 {
        width: 33.3%;
    }
    .col-4 {
        width: 25%;
    }
    .col-5 {
        width: 20%;
    }
    .diy-button-scroll .col-3 {
        width: 30%;
    }
    .diy-button-scroll .col-4 {
        width: 22%;
    }
    .btn-icon-type {
        font-size: 24px;
        color: #999;
    }

    /* 轮播图 */
    .swiper-arrow {
        position: absolute;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(0,0,0,.4);
        top: 50%;
        z-index: 10;
        left: 10px;
        text-align: center;
        line-height: 32px;
        font-size: 20px;
        cursor: pointer;
        margin-top: -16px;
        color: #fff;
        display: none;
    }
    .diy-button-boxs:hover .swiper-arrow {
        display: block;
    }
    .swiper-arrow.right {
        left: auto;
        right: 10px;
    }
    .swiper-dots {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    .swiper-dots .dot-item {
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        margin: 0 4px;
        background: rgba(0,0,0,.2);
        cursor: pointer;
    }
    .swiper-dots .dot-item.active {
        background: #000;
    }
    
</style>