qimall/addons/DepositPresale/backend/views/default/components/common/carousel-img/style.php

<template id="carousel-img-style">
    <div class="carousel-img-style">
        <diy-tabs class="style-com-but" title="组件风格" :default_item="buttonData.typeItem" :list="buttonPattern" :img-style="{height: '30px',width: '30px'}"  radio_text='image' @change="buttonSelect"></diy-tabs>
        <diy-style-contain title="轮播点">
            <el-radio-group v-model="buttonPointData.open" @change="uodateOpenType">
                <el-radio :label="true">打开</el-radio>
                <el-radio :label="false">关闭</el-radio>
            </el-radio-group>
        </diy-style-contain>
        <diy-tabs v-show="buttonPointData.open" class="style-com-but" title="轮播点样式" radio_text='image' :list="pointPattern" :img-style="{height: '30px',width: '30px'}" :default_item="buttonPointData.pointItem" @change="pointSelect"></diy-tabs>
        <diy-style-contain title="轮播点位置" v-show="buttonPointData.open">
            <el-image class="point-site-img" v-for="(item,index) in pointSiteImg" :key="index"  :src="item" 
                :class="{'point-site-img-sel': pointSiteIndex == index}" @click="updatePointSite(index)"></el-image>
        </diy-style-contain>
        <diy-img-setting suggest-size-text="建议图片宽为750，高度420" top-name="轮播图片"
            :open-add-img="true" :def-img-url="imgUrl + 'default_banner.png'"
            :img-infos="carouselImgArr" max-img-length="8" def-img-count="2"
            :default-tabs="['mall', 'other']"
            @change="addIconImg"
        ></diy-img-setting>
        <!-- 公共 -->
        <diy-tabs title="样式" radio_text='text' :default_item="defaultForm.default_color" @change="colorSelect"></diy-tabs>
        <diy-color :color-infos="defaultForm.colorInfos" :def-color="defaultForm.defColor" @chang="updateColor"></diy-color>
        <diy-size-setting top-name="边距" :size-infos-value="[5]" :str-max-size-val="[20]" :size-infos="defaultForm.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>
</template>
<script>
    const CARD_SCALE = 0.83
    Vue.component('carousel-img-style', {
        name: "carousel-img-style",
        mixins: [basicMixins],
        template: '#carousel-img-style',
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                imgUrl: 'resources/img/decorate/',
                buttonPattern: [
                    { label: 'resources/img/decorate/carousel-one.png', value: 'one' },
                    { label: 'resources/img/decorate/carousel-two.png', value: 'two' },
                    { label: 'resources/img/decorate/carousel-three.png', value: 'three' },
                ],
                pointPattern: [
                    { label: 'resources/img/decorate/point-one.png', value: 'one' },
                    { label: 'resources/img/decorate/point-two.png', value: 'two' },
                    { label: 'resources/img/decorate/point-three.png', value: 'three' },
                    { label: 'resources/img/decorate/point-four.png', value: 'four' },
                ],
                pointSiteImg: [
                    "resources/img/decorate/align-left.png",
                    "resources/img/decorate/align-center.png",
                    "resources/img/decorate/align-right.png",
                ],
                buttonData: { //轮播展示风格
                    typeItem: null,
                    typeIndex: 0,
                },
                buttonPointData: { //轮播点
                    open: true, //是否打开
                    pointItem: null,//风格
                    pointIndex: 0, 
                    position: 1,
                },
                pointSiteIndex: 1,
                carouselImgArr: [], //图片

            }
        },
        methods: {
            init() {
                basicMixins.methods.init.call(this); // 以前的数据调用一下
                this.defaultForm.sizeInfos = ['图片间距','上边距', '下边距', '左右边距'];
                if(!this.result.data.buttonData){
                    this.result.data.buttonData = this.buttonData;
                } else {
                    this.buttonData = this.result.data.buttonData;
                    
                }
                if(!this.result.data.buttonPointData){
                    this.result.data.buttonPointData = this.buttonPointData;
                } else {
                    this.buttonPointData = this.result.data.buttonPointData;
                }

                if(this.result.data.pointSiteIndex >= 0){
                    this.pointSiteIndex = this.result.data.pointSiteIndex;
                }
            },
            buttonSelect(val){
                console.info(val);
                if(val.index != 0 && this.defaultForm.sizeInfos){
                    this.defaultForm.sizeInfos[0].hidden = false;
                } else {
                    this.defaultForm.sizeInfos[0].hidden = true;
                }
                this.buttonData.typeItem = val.item;
                this.buttonData.typeIndex = val.index;
                this.result.data.buttonData = this.buttonData;
                this.updateInfos();
            },
            pointSelect(val){
                this.buttonPointData.pointItem = val.item;
                this.buttonPointData.pointIndex = val.index;
                this.result.data.buttonPointData = this.buttonPointData;
                this.updateInfos();
            },
            updatePointSite(index){
                this.pointSiteIndex = index;
                this.result.data.pointSiteIndex = index;
                this.updateInfos();
            },
            uodateOpenType(){
                this.result.data.buttonPointData = this.buttonPointData;
                this.updateInfos();
            },
            addIconImg(val){
                this.carouselImgArr = val;
                if(this.result.data.carouselImgArr){
                    this.carouselImgArr = this.result.data.carouselImgArr;
                } else {
                    this.result.data.carouselImgArr = this.carouselImgArr;
                }
                let imgArr = [];
                this.carouselImgArr.forEach(v => {
                    imgArr.push(v.color);
                })
                this.result.computedStyle.carouselImgArr = imgArr;
                this.updateInfos();
            },
            sliderChange(val){
                if(this.buttonData.typeIndex == 0){
                    val[0].hidden = true;
                }
                if(this.result.data.spaceInfo){
                    this.defaultForm.sizeInfos = this.result.data.spaceInfo;
                } else {
                    this.defaultForm.sizeInfos = val;
                }
                let style = {
                    marginTop: this.defaultForm.sizeInfos[1].value + this.defaultForm.sizeInfos[1].unit,
                    marginBottom: this.defaultForm.sizeInfos[2].value + this.defaultForm.sizeInfos[2].unit,
                    marginLeft: this.defaultForm.sizeInfos[3].value + this.defaultForm.sizeInfos[3].unit,
                    marginRight: this.defaultForm.sizeInfos[3].value + this.defaultForm.sizeInfos[3].unit
                }
                // 图片间距
                this.result.computedStyle.spaceStyle = style;
                this.result.data.spaceInfo = this.defaultForm.sizeInfos 
                this.updateInfos();
            },
            updateInfos(){
                this.$emit("update", this.result)
            }

        }
    });
</script>
<style>

    .carousel-img-style .style-com-but .el-radio-button__inner{
        padding: 0;
    }

    .point-site-img{
        padding: 6px;
        width: 40px;
        height: 40px;
        margin-right: 20px;
    }

    .point-site-img-sel{
        padding: 5px;
        border: 1px solid #2D8CF0;
    }

    .point-site-img:hover{
        cursor:pointer;
    }
    /* .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>