qimall/addons/Happiness/backend/views/components/diy/happiness-member-card/style.php

<template id="happiness-member-card-style">
    <div>
        <!-- 公共 -->
        <diy-color class="fill-border-top" :color-infos="colorInfos" :str-color="defColor" @chang="updateColor"></diy-color>
        <diy-size-setting class="fill-border-top" top-name="边距" :size-infos="sizeInfos" :min-value="0" :size-infos-max="sizeInfosMax" @chang="updateSize"></diy-size-setting>
        <diy-size-setting class="fill-border-top" top-name="圆角设置" :size-infos="radiusInfos" :size-infos-value="[4, 4]" :max-value="20" @chang="RadiusChange"></diy-size-setting>
    </div>
</template>
<script>
    Vue.component('happiness-member-card-style', {
        name: "happiness-member-card-style",
        mixins: [basicMixins],
        template: '#happiness-member-card-style',
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                colorInfos: ['背景', '昵称', '资金颜色', '资金值颜色'],
                defColor: ['#FFFFFF', '#2F3033', '#AAAAAA', '#333333'],
                sizeInfos: ['上边距', '下边距', '左右边距','嵌入上面'],
                sizeInfosMax: [50, 50, 20],
                radiusInfos: ['上圆角', '下圆角'],
                
            }
        },
        methods: {
            init() {
                basicMixins.methods.init.call(this); // 以前的数据调用一下
                
            },
            updateColor(arr) { // 选择颜
                this.updateSome(arr, 'colorInfos')
                let style = this.result.computedStyle
                let colorArr = ['background', 'nicknameColor', 'descColor', 'btnColor']
                colorArr.forEach((it, i) => {
                    style = Object.assign(style, { [it]: this.colorInfos[i].color })
                })
                this.$emit("update", this.result)
            },
            updateSize(arr) { // 选择尺寸
                this.updateSome(arr, 'sizeInfos')
                let style = this.result.computedStyle
                let sizeArr = ['marginTop', 'marginBottom', 'aroundMargin','posTop'] // 'spacing', 间距，不知道哪里用到，先去掉
                sizeArr.forEach((it, i) => {
                    style.sizeObj = Object.assign(style.sizeObj || {}, { [it]: this.sizeInfos[i].value + this.sizeInfos[i].unit })
                })
                this.$emit("update", this.result)
            },
            updateSome(arr, name) {
                this[name] = arr
                if (this.result.data[name] && this.result.data[name].length) {
                    this[name] = this.result.data[name]
                } else {
                    this.result.data[name] = this[name]
                }
            },
        }
    });
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 92px;
        height: 92px;
        line-height: 92px;
        text-align: center;
    }

    .avatar {
        width: 92px;
        height: 92px;
        display: block;
    }
</style>