qimall/addons/Store/backend/views/components/diy/store-cate-recommend/preview.php

<template id="store-cate-recommend-preview">
	<div class="store-cate-container">
	   <!--搜索-->
	   <div class="search-box" :style="{background: searchData.searchBox}" v-if="searchData && searchData.show && searchData.show == 1">  
	       <div class="search-ipt" flex="cross:center" :style="{...searchData.inputStyle}">
	           <i class="el-icon-search search-icons" :style="{color: searchData.iconsStyle}"></i>
	           <div class="placeholder" :style="{color: searchData.textStyle}">{{ searchData.name || '请输入关键字' }}</div>
	       </div>
	   </div>
		<div class="diy-store-cate-recommend" :style="{background: computedStyle.searchBox}">
			<div class="store-cate-recommend-boxs" :style="{...inputStyle}">
				<!-- 按钮位置 -->
				<div flex="cross:center" :class="'store-cate-recommend-' + 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}"
							v-if="btn_data.buttonData && btn_data.buttonData.style != 3"
						>
							<el-image style="width: 100%; height: 100%" :src="item.img || default_bg"></el-image>
						</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 style="height:5px;width:100%;" :style="{background: computedStyle.gapStyle}">
			</div>
			<store-recommend-list-preview :active-item="goods_item"></store-recommend-list-preview>
		</div>
	</div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('store-cate-recommend-preview', {
        name: "store-cate-recommend-preview",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#store-cate-recommend-preview',
        computed: {
			searchData(){
				// this.activeItem.data.
				// inputStyle:{
				//     let tabItem = this.computedStyle.tabItem
				//     let style = {
				//         'background': this.computedStyle.iptBg,
				//         ...this.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
				// }
				let data = {}
				return this.activeItem.data.searchStyle
			},
            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
            },
			goods_item() {
				var initData = {
					computedStyle: {},
					data: {}
				}
				try {
					var index = this.activeItem.data.activeIndex || 0
					var item = this.activeItem.data.goodList[index]
					if (item) {
						return item
					} else {
						return initData
					}
				} catch (error) {
					return initData
				}
			},
        },
        watch: {
            activeItem: {
                deep:true,
                immediate: true,
                handler(val) {
					console.log('装修数据',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>
<?php
use common\helpers\ComponentHelper;
use common\helpers\AddonHelper;
ComponentHelper::loadComponentView('preview', AddonHelper::getAddonRootPath('Store') . 'backend/views/components/diy/store-recommend-list');
ComponentHelper::loadComponentView('preview', AddonHelper::getAddonRootPath('Store') . 'backend/views/components/diy/store-search');
?>
<style>
    .diy-store-cate-recommend {
        position: relative;
        overflow: hidden;
    }
    .store-cate-recommend-boxs {
        position: relative;
        padding: 4px 0;
        overflow: hidden;
    }
    

    .store-cate-recommend-scroll {
        overflow-x: auto;
        width: 100%;
        box-sizing: border-box;
        padding: 0 8px;
    }
    .store-cate-recommend-scroll::-webkit-scrollbar {
        height: 5px;
    }
    .store-cate-recommend-fixed {
        flex-wrap: wrap;
    }
    .store-cate-recommend-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%;
    }

    .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;
    }
    .store-cate-recommend-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;
    }
    .store-cate-container .search-ipt{
		border-radius:10px;
	}
</style>