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

<template id="store-cate-recommend-style">
    <div>
		<diy-style-contain title="搜索" class="clear-diy-style fill-border-top">
			<el-radio-group v-model="searchStyle.show" @change="btnChange($event, 'show')">
				<el-radio :label="0">隐藏</el-radio>
				<el-radio :label="1">显示</el-radio>
			</el-radio-group>
			<!-- <div style="padding-top: 10px" v-if="searchStyle.show == 1">
				 <store-search-style :active-item="searchStyle" @update="update" ></store-search-style>
			 </div>-->
		</diy-style-contain>
		<div class="tabs">
			<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="tagswitch"
			    :btn-style="buttonData.style" 
			    :max-icon-length="30" 
			    :show-link="false"
                :show-store-link = "true"
			    :show-add-btn="true"
			    :img-url="defaultImg"
			    :default-tabs="defaultTabs"
			    @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>
        <transition name="el-fade-in-linear">
			<store-recommend-list-style :active-item="childItem" @update="update" v-if="show"></store-recommend-list-style>
		</transition>
    </div>
</template>
<script>
    Vue.component('store-cate-recommend-style', {
        name: "store-cate-recommend-style",
        mixins: [basicMixins],
        template: '#store-cate-recommend-style',
        props: {
            activeItem: {
                type: Object,
                default () {
                    return { }
                }
            }
        },
        data() {
            return {
				searchStyle:{
					show:0,
					
				},
                tagswitch:false,
				childItem: null, // 当前item
				activeIndex: 0, // 当前索引
				show: true,
                shapeList: ['square', 'round', 'cricle'], // 按钮形状
                buttonType: 1, // 按钮类型
                buttonPattern: [
                    { label: '固定显示', value: 'fixed' },
                    { label: '单行滑动', value: 'scroll' },
                    { label: '分页滑动', value: 'swiper' },
                ],
                patternCurrent: 'scroll',
                btnType: 1,
                colorInfos: ['底部背景' ,'组件背景', '文字颜色','选中颜色','间隔颜色'],
                defColor: ['', '', '#333333','#F1DF1F','#f2f2f2'],
                sizeInfos: ['上边距', '下边距', '左右边距'],
                sizeInfosValue: [8,8,0],
                buttonData: {
                    style: 1, // 按钮样式
                    type: 1, // 按钮类型
                    single_line: 3, // 单行数量
                    line_num: 1, // 每页行数
                    shape: 'cricle', // 当前相中的按钮形状
                    pattern: 'scroll', // 组件风格
                    patternItem: null, // 组件风格对象
                },
                defaultImg: 'resources/img/decorate/default_btn1.png',
                iconList: [
                    {
                        img: 'resources/img/decorate/default_btn1.png',
                        icon: 'el-icon-setting',
                        is_show_tag: true,
                        tags: '热门',
                        tagsBgColor: '#f83287',
                        tagsTextColor: '#ffffff',
                        btnText: '按钮文字',
                        link_params: null,
                    },
                    {
                        img: 'resources/img/decorate/default_btn2.png',
                        icon: 'el-icon-setting',
                        is_show_tag: false,
                        tags: '热门',
                        tagsBgColor: '#f83287',
                        tagsTextColor: '#ffffff',
                        btnText: '按钮文字',
                        link_params: null,
                    },
                    {
                        img: 'resources/img/decorate/default_btn3.png',
                        icon: 'el-icon-setting',
                        is_show_tag: false,
                        tags: '热门',
                        tagsBgColor: '#f83287',
                        tagsTextColor: '#ffffff',
                        btnText: '按钮文字',
                        link_params: null,
                    },
                    {
                        img: 'resources/img/decorate/default_btn4.png',
                        icon: 'el-icon-setting',
                        is_show_tag: false,
                        tags: '热门',
                        tagsBgColor: '#f83287',
                        tagsTextColor: '#ffffff',
                        btnText: '按钮文字',
                        link_params: null,
                    }
                ],
                defaultTabs: ["mall", "goods", "addons", "other"],
            }
        },
		watch: {
			activeIndex(newVal, OldVal) {
				this.show = false
				if (newVal !== OldVal) {
					this.updateData("activeIndex", newVal)
				}
				setTimeout(() => {
					this.show = true
				}, 200)
			},
			goodList: {
				handler(newValue) {
					// 监测数据变化去统一update，会更新多次
					if (newValue && newValue.length) {
						this.result.data.goodList = newValue
						this.$emit("update", this.result)
					}
				},
				immediate: true
			}
		},
		 created() {
			// 设置默认值
			this.result = deepClone(this.activeItem)
			if (this.result.data.goodList) {
				console.log(1111111111)
				this.goodList = this.result.data.goodList
				this.activeIndex = this.result.data.activeIndex || 0 // 当前索引
				this.childItem = this.result.data.goodList[this.activeIndex]
				console.log('this.childItem',this.childItem)
			} else {
				console.log(222222222)
				var childItem = this.getChildItem()
				this.goodList = [childItem]
				this.childItem = childItem
				this.activeIndex = 0 // 当前索引
			}
			this.init()
			// 初始列表耦合setKey设置对应属性 -- 以及更新对应updataList
			this.initList("list")
			this.initList("tabList")
			this.initList("selectImgList")
			this.initList("selectBackList")
			this.initList("subtitleList")
			this.initList("bgColorSet")
		},
        methods: {
			updateData(key, value) {
				var obj = this.result.data
				this.result.data = Object.assign(obj, {
					[key]: value
				})
				this.$emit("update", this.result)
			},
			deepMerge(obj1, obj2) {
				let key;
				for (key in obj2) {
					// 如果target(也就是obj1[key])存在，且是对象的话再去调用deepMerge，否则就是obj1[key]里面没这个对象，需要与obj2[key]合并
					obj1[key] = obj1[key] && obj1[key].toString() === "[object Object]" ?
						this.deepMerge(obj1[key], obj2[key]) :
						(obj1[key] = obj2[key]);
				}
				return obj1;
			},
			update(item, index) {
				var list = deepClone(this.goodList) // 克隆一下
				var oldItem = list[this.activeIndex]
				var newItem = this.deepMerge(oldItem, item) // 合并数据

				// 直接全部覆盖
				list[this.activeIndex] = newItem
				this.childItem = newItem
				this.goodList = list

				this.updateData("goodList", list)
			},
			 getChildItem() {
				var item = Object.create(null)
				item.data = {}
				item.computedStyle = {
					aroundMargin:'12px',
					marginBottom:'0',
					marginTop:'12px',
					spacing:'20px'
				}
				return item
			},
			initList(target) {
				var data = this.result.computedStyle
				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
			},
            init() {
                basicMixins.methods.init.call(this); // 以前的数据调用一下
                if (this.result.data.buttonData) {
                    this.buttonData = this.result.data.buttonData
                } else {
                    this.result.data.buttonData = this.buttonData
                }
				if (this.result.data.searchStyle) {
				    this.searchStyle = this.result.data.searchStyle
				} else {
				    this.result.data.searchStyle = this.searchStyle
				}
                if(this.result.data.pickType){
                    this.pickType = this.result.data.pickType
                } else {
                    this.result.data.pickType = this.pickType
                }
                if(this.result.data.defaultTabs){
                    this.defaultTabs = this.result.data.defaultTabs
                } else {
                    this.result.data.defaultTabs = this.defaultTabs
                }
                //设置默认单行滑动的样式
                this.patternChange({
                    index:1,
                    item:{
                        label:'单行滑动',
                        value:'scroll'
                    }
                })
                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.result.computedStyle.selecttextStyle = this.colorInfos[3].color
				this.result.computedStyle.gapStyle = this.colorInfos[4].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()
            },
			btnChange(e,name){
				this.searchStyle[name] = e
				this.result.data.searchStyle = this.searchStyle
				this.updataInfos()
			},
            updataInfos() {
                this.$emit("update", this.result)
            }
        }
    });
</script>
<?php
use common\helpers\ComponentHelper;
use common\helpers\AddonHelper;
ComponentHelper::loadComponentView('style', AddonHelper::getAddonRootPath('Store') . 'backend/views/components/diy/store-recommend-list');
ComponentHelper::loadComponentView('style', AddonHelper::getAddonRootPath('Store') . 'backend/views/components/diy/store-search');
?>
<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>