qimall/addons/Course/backend/views/components/diy/course/style.php

<template id="course-style">
    <div class="course-style">
        <!-- 公共 -->
        <diy-tabs class="fill-border-top" title="样式" radio_text='text' :default_color="defaultForm.default_color" @change="colorSelect"></diy-tabs>
        <diy-style-contain title="风格" class="clear-diy-style fill-border-top">
            <el-radio-group v-model="style" @change="onStyleList">
                <el-radio-button :label="item.label" v-for="(item,index) in styleList" :key="index">
                    <div flex="cross:center" class="flex-x-center" style="width: 56px;height: 38px;">
                        <img :src="item.src" style="width: 26px;">
                    </div>
                </el-radio-button>
            </el-radio-group>
        </diy-style-contain>
        <diy-style-contain title="选择课程" class="clear-diy-style fill-border-top">
            <div class="pick-goods">
                <com-pick-link @selected="selectNavUrl" :default-select-list="selectList" :pick-type="pickType" :default-tabs="[{name: 'marketing',children:['course_cate'] }]">
                    <div class="add-goods-btn">+添加({{ courseList.length + '/' + maxDataLength }})</div>
                </com-pick-link>
                <div flex="cross:center" style="margin-top: 20px;flex-wrap:wrap" v-if="courseList.length">
                    <div class="pickImgItem" v-for="(item,index) in courseList" :key="index" @mouseenter="mouseenter(index)" @mouseleave="mouseleave(index)">
                        <el-image style="width: 50px; height: 50px" :src="item.params.logo" fit="contain"></el-image>
                        <div v-show="index == pickIndex || item.visible">
                            <el-popover placement="bottom" v-model="item.visible">
                                <p class="diy-del-text">确定删除吗？</p>
                                <div flex="cross:center">
                                    <el-button class="diy-del-btn" size="mini" plain @click="delModel(index)">删除</el-button>
                                    <el-button size="mini" plain @click="item.visible = false">取消</el-button>
                                </div>
                                <i class="el-icon-close" slot="reference" style="color:#999;"></i>
                            </el-popover>
                        </div>
                    </div>
                </div>
            </div>
        </diy-style-contain>
        <diy-style-contain title="角标设置" class="fill-border-top">
            <el-radio-group v-model="angleMark" @change="onAngleMark">
                <el-radio :label="item.label" v-for="(item,index) in angleMarkList" :key="index">{{item.value}}</el-radio>
            </el-radio-group>
            <div class="shopping-cart-func" v-show="angleMark == 2">
                <div class="shop-cart-row" flex="cross:center">
                    <div class="leabl">样式</div>
                    <diy-tab v-model="angleMarkStyleList" :default-index="angleMarkStyleIndex" @change="onAngleMarkChange($event, 'angleMarkStyle')">
                        <template v-slot="{item, isSelect}">
                            <div flex="cross:center" :class="{'shop-cart-col': true,'selected': isSelect}">
                                <img :src="item.src" style="width: 28px;">
                            </div>
                        </template>
                    </diy-tab>
                </div>
                <div class="shop-cart-row" flex="cross:center">
                    <div class="leabl">文字</div>
                    <el-input style="flex: 1;" v-model="angleMarkText" placeholder="请输入内容" maxlength="2" size="small" show-word-limit @input="onAngleMarkChange($event, 'angleMarkText')"></el-input>
                </div>
            </div>
            <div class="shopping-cart-func" v-show="angleMark == 3">
                <diy-img-setting :img-infos="imageUrl" def-img-count="1" :show-url="false" :suggest-site="2" suggest-size-text="建议图片宽度76，高度76。" :img-contain-style="{padding: 0}" :show-title="false" @change="addIconImg"></diy-img-setting>
            </div>
        </diy-style-contain>
        <diy-style-contain title="显示内容 " class="show-content fill-border-top">
            <el-checkbox-group v-model="contentCheckList" @change="onContentChange">
                <div v-for="(item,index) in showContentList" :key="index">
                    <div flex="cross:center" class="flex-y-center" style="margin-bottom: 12px;">
                        <el-checkbox :label="item.label">
                            <span>{{item.name}}</span>
                        </el-checkbox>
                        <el-color-picker v-if="!item.disableColor" class="show-content-pick" color-format="colorFormat" v-model="item.color" @change="onContentChange"></el-color-picker>
                        <el-input v-if="!item.disableColor" v-model="item.color" @input="updateInput($event,index)" class="diy-text-btn"></el-input>
                    </div>
                </div>
            </el-checkbox-group>
        </diy-style-contain>
        <diy-color class="fill-border-top" :color-infos="defaultForm.colorInfos" :def-color="defaultForm.defColor" @chang="updateColor"></diy-color>
        <diy-size-setting class="fill-border-top" top-name="边距" :size-infos="sizeInfos" :max-value="50" @chang="marginChange"></diy-size-setting>
        <diy-size-setting class="fill-border-top" top-name="圆角设置" :size-infos="defaultForm.radiusInfos" :max-value="20" @chang="RadiusChange($event, 'radius')"></diy-size-setting>
    </div>
</template>
<script>
    Vue.component('course-style', {
        name: "course-style",
        mixins: [basicMixins],
        template: '#course-style',
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                // 风格
                style: 1,
                styleList: [{
                    label: 1,
                    src: "resources/img/decorate/commodity-group/style1.png"
                }, {
                    label: 2,
                    src: "resources/img/decorate/commodity-group/style2.png"
                }, {
                    label: 3,
                    src: "resources/img/decorate/commodity-group/style3.png"
                }, {
                    label: 4,
                    src: "resources/img/decorate/commodity-group/style7.png"
                }],
                // 角标
                angleMarkStyleIndex: 0,
                angleMarkStyleList: [{
                    label: 1,
                    src: "resources/img/decorate/commodity-group/hot-1.png"
                }, {
                    label: 2,
                    src: "resources/img/decorate/commodity-group/hot-2.png"
                }, {
                    label: 3,
                    src: "resources/img/decorate/commodity-group/hot-3.png"
                }, ],
                angleMarkText: "",
                angleMark: 1,
                angleMarkList: [{
                    label: 1,
                    value: "不显示"
                }, {
                    label: 2,
                    value: "系统图标"
                }, {
                    label: 3,
                    value: "自定义"
                }],
                imageUrl: [],
                // 显示内容
                contentCheckList: [],
                showContentList: [{
                        label: 1,
                        name: "课程标题",
                        color: "#202021",
                        key: 'title',
                        showAlpha: true
                    }, {
                        label: 2,
                        name: "课程描述",
                        color: "#999ca7",
                        key: 'desc',
                        showAlpha: true
                    }, {
                        label: 3,
                        name: "课程价格",
                        color: "#DB0505",
                        key: 'price',
                        showAlpha: true
                    }, {
                        label: 4,
                        name: "学习人数",
                        color: "#000000",
                        key: 'count',
                        showAlpha: true
                    }
                ],
                //选择商品
                pickType: ['course_cate'],
                pickIndex: -1,
                courseList: [],
                maxDataLength: 20,
                // 间距
                sizeInfos: [
                    {
                        name: "间距", //名字
                        value: 6, //值
                        maxValue: 50, //最大值
                        unit: "px", //单位
                        hidden: false, //是否隐藏
                    },
                    {
                        name: "上边距", //名字
                        value: 0, //值
                        maxValue: 50, //最大值
                        unit: "px", //单位
                        hidden: false, //是否隐藏
                    },
                    {
                        name: "下边距", //名字
                        value: 0, //值
                        maxValue: 50, //最大值
                        unit: "px", //单位
                        hidden: false, //是否隐藏
                    },
                    {
                        name: "左右边距", //名字
                        value: 8, //值
                        maxValue: 20, //最大值
                        unit: "px", //单位
                        hidden: false, //是否隐藏
                    },
                ]

            }
        },
        methods: {
            init() {
                basicMixins.methods.init.call(this); // 以前的数据调用一下
                let arr2 = ['computedStyle', 'iptBg']
                var comBgColor = {
                    name: '组件背景', //名字
                    color: getObjValue(this.result, arr2, this.defaultForm.defColor), //颜色
                    showAlpha: false, //是否开启透明度
                }
                // 更改mixins初始数据
                this.defaultForm.colorInfos.push(comBgColor)
                if(this.result.data.styleVal){
                    this.style = this.result.data.styleVal;
                } else {
                    this.result.data.styleVal = this.style;
                }
                if(this.result.data.showContent){
                    this.showContentList = this.result.data.showContent;
                    this.contentCheckList.push(...this.showContentList.filter(v => v.showAlpha).map((val) =>{ return val.label}))
                } else {
                    this.result.data.showContent = this.showContentList;
                    this.contentCheckList.push(...this.showContentList.map((val) =>{ return val.label}))
                }

                if(!this.result.data.marginArr){
                    this.marginChange();
                } else {
                    this.sizeInfos = this.result.data.marginData;
                }

                if(this.result.data.courseList){
                    this.courseList = this.result.data.courseList;
                } else {
                    this.result.data.courseList = [];
                }
                
                if(this.result.data.angleMarkStyle && this.result.data.angleMarkStyle != -1){
                    this.angleMarkStyleIndex = this.result.data.angleMarkStyle;
                }

                if(this.result.data.angleMarkText){
                    this.angleMarkText = this.result.data.angleMarkText;
                }
                if(this.result.data.angleMarkType){
                    this.angleMark = this.result.data.angleMarkType;
                }

                // 
            },
            updateColor(e) { // 选择颜色
                this.result.computedStyle.searchBox = e[0].color
                this.result.computedStyle.iptBg = e[1].color
                this.$emit("update", this.result)
            },
            // 风格
            onStyleList(val){
                if(val == 4){
                    this.sizeInfos[0].hidden = true;
                } else {
                    this.sizeInfos[0].hidden = false;
                }
                this.updateInfos("styleVal",val);
            },
            // 角标
            onAngleMark(e){
                this.updateInfos('angleMarkType',e);
            },
            onAngleMarkChange(e,key){
                if(key == "angleMarkStyle"){
                    let label = e.label;
                    let index = this.angleMarkStyleList.findIndex(v => v.label == label)
                    e = index;
                }
                this.updateInfos(key,e);
            },
            addIconImg(arr){
                this.imageUrl = arr;
                this.updateInfos("customImgUrl",arr[0].imgUrl);
            },
            // 展示内容
            onContentChange(){
                /* var result = this.showContentList.filter(item => {
                    return this.contentCheckList.indexOf(item.label) !== -1
                })
                console.log(this.showContentList); */
                this.showContentList.forEach(item => {
                    if(this.contentCheckList.indexOf(item.label) == -1){
                        item.showAlpha = false;
                    } else {
                        item.showAlpha = true;
                    }

                })
                console.log(this.showContentList);
                this.updateInfos("showContent",this.showContentList);
            },
            updateInput(val, index){
                if (val.length == 0) {
                    val = "transparent";
                    this.showContentList[index].color = val;
                }
                this.showContentList[index].color = val == "transparent" ? "" : val;
                this.updateInfos("showContent",this.showContentList);
            },
            // 添加
            selectNavUrl(arr) {
                for(let i = 0;i < arr.length;i++){
                    if(this.courseList.length >= this.maxDataLength){
                        this.$message({
                            message: `最多添加${this.maxDataLength}条`,
                            type: 'warning'
                        });
                        return;
                    }
                    this.courseList.push(arr[i]);
                }
                this.updateInfos("courseList",this.courseList);
            },
            // 删除
            delModel(index) {
                this.courseList.splice(index, 1)
                this.updateInfos("courseList",this.courseList);
            },
            mouseenter(index) {
                this.pickIndex = index
            },
            mouseleave() {
                this.pickIndex = -1
            },
            // 边距
            marginChange(arr){
                let that = this;
                let newArr = [];
                arr = arr || this.sizeInfos;
                arr.forEach(v => {
                    newArr.push(v.value + v.unit);
                })
                if(!that.result.data.marginArr){
                    that.$set(that.result.data,'marginArr',newArr)
                } else {
                    that.result.data.marginArr = newArr;
                }
                that.result.data.marginData = arr;
                this.updateInfos();
            },
            updateInfos(key,val){
                if(key){
                    this.result.data[key] = val;
                }
                this.$emit("update", this.result)
            },

        }
    });
</script>
<style>
    


    /* 清理组件默认样式 */
    .clear-diy-style .el-radio-button__inner {
        background-color: transparent;
        padding: 0;
    }

    .shop-cart-row .el-radio-group {
        display: flex;
        align-items: center;
    }

    .shop-cart-row .el-radio-button__inner {
        display: flex;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        padding: 0;
    }

    .shop-cart-row {
        margin-bottom: 20px;
    }

    .clear-diy-style .com-pick-link-content {
        width: 100%;
    }

    .course-style .show-content .el-color-picker {
        height: 30px;
    }

    .course-style .el-checkbox {
        width: 100px;
    }


    /* 修改element基础样式 */
    .course-style .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background-color: transparent;
    }
</style>