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

<template id="store-search-style">
    <div>
        <div>
            <diy-tabs title="样式" 
                radio_text='text' 
                :default_item="defaultForm.tabItem"
                @change="colorSelect" 
            ></diy-tabs>
            <diy-color top-name="选择颜色" 
                :color-infos="colorInfos" 
                :str-color="defColor" 
                @chang="updateColor"
            ></diy-color>
            <diy-align title="文字位置" 
                :current="defaultForm.alignCurrent" 
                @change="updataText"
            ></diy-align>
            <diy-style-contain title="默认文字">
                <div flex="cross:center" class="diy-words color-info">
                    <div class="diy-name">文字</div>
                    <el-input style="flex: 1" @input="textChange" type="text" placeholder="请输入内容" v-model="defaultForm.name" maxlength="10" size="small" show-word-limit></el-input>
                </div>
<!--                <div flex="cross:center main:center" class="diy-word-tips">*手机端随机显示推荐搜索关键字，<el-link type="primary" :underline="false">去创建</el-link></div>-->
            </diy-style-contain>
            <diy-size-setting top-name="边距" 
                :size-infos="sizeInfos" 
                :max-value="50" 
                @chang="sliderChange($event, 'margin')"
            ></diy-size-setting>
            <diy-size-setting top-name="圆角设置" 
                :size-infos="defaultForm.radiusInfos" 
                :max-value="20" 
                @chang="RadiusChange($event, 'radius')"
            ></diy-size-setting>
        </div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传数据/更新方法 - activeItem/$emit('update')
     */
    Vue.component('store-search-style', {
        name: "store-search-style",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#store-search-style',
        mixins: [basicMixins],
        data() {
            return {
                result: {},
                defaultForm: {
                    defColor: 'transparent',
                    alignCurrent: 'left', // 文字位置
                    colorInfos: ['底部背景', '组件背景', '图标颜色', '文字颜色'],
                    name: '',
                },
                searchIpts: {},
                colorInfos: ['底部背景' ,'组件背景', '图标颜色', '文字颜色'],
                defColor: ['', '', '', ''],
                sizeInfos: ['上边距', '下边距']
            }
        },
        methods: {
            init() { // 设置默认值
                basicMixins.methods.init.call(this)

                // 文字位置
                let textArr = ['computedStyle', 'searchIpts', 'justify-content']
                this.defaultForm.alignCurrent = getObjValue(this.result, textArr, this.defaultForm.alignCurrent)
                // 文字内容
                let textCont = ['data', 'name']
                this.defaultForm.name = getObjValue(this.result, textCont, this.defaultForm.name)
                
            },
            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.iconsStyle = this.colorInfos[2].color
                this.result.computedStyle.textStyle = this.colorInfos[3].color
                this.$emit("update", this.result)
            },
            updataText(type) { // 文字位置
                const style = {
                    'justify-content': type == 'left' ? 'flex-start' : type == 'center' ? 'center' : 'flex-end'
                }
                this.searchIpts = Object.assign(this.searchIpts, style)
                this.updataResult(this.searchIpts, 'searchIpts')
            },
            textChange(e) { // 文字内容
                this.result.data.name = e
                this.$emit("update", this.result)
            },
            sliderChange(arr, type) { // 上下边距
                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')
            },
        }
    });
</script>

<style>
    .style-title {
        font-weight: 700;
        color: var(--textGray, #999);
        padding-left: 10px;
    }

    .top-icons {
        width: 32px;
        height: 20px;
        background: var(--primary, #2D8CF0);
        border-radius: 10px;
        color: #fff;
    }

    .diy-word-tips {
        font-size: 14px;
        color: #999999;
        font-weight: 700;
        padding-top: 19px;
    }

    .diy-word-link {
        cursor: pointer;
        color: var(--primary, #2D8CF0);
    }
</style>