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

<template id="course-preview">
    <div class="diy-course" :class="{'three-tem': searchData.styleVal == 3,'four-tem':searchData.styleVal == 4}" :style="{background: computedStyle.searchBox,'padding': marginInfos.temp}">
        <!-- 一行一个（1） -->
        <div class="course-style-big" v-if="searchData.styleVal == 1" v-for="(item,index) in courseDataBoo?searchData.courseList:3" :style="{...marginInfos.model,background: computedStyle.iptBg,...inputStyle }">
            <div class="diy-course-image">
                <div :class="hotClass" v-if="isShowHot" :style="hotStyle">{{hotName}}</div>
                <el-image class="big-img" :src="courseDataBoo?item.params.logo:'resources/img/decorate/default_picture.png'" fit="cover"></el-image>
            </div>
            <div class="course-model">
                <div class="course-title over1" :style="[{color: permession['title'].color}]" v-if="permession['title'].showAlpha">{{courseDataBoo?item.params.title:'这里是课程标题'}}</div>
                <div class="course-desc over2" :style="[{color: permession['desc'].color}]" v-if="permession['desc'].showAlpha">{{courseDataBoo?item.params.introduce:'这里是课程副标题'}}</div>
                <div flex v-if="permession['price'].showAlpha">
					<div class="course-price" v-if="courseDataBoo && item.params.sell_type == 2">
						指定会员可看
					</div>
					<div class="course-price" v-else-if="courseDataBoo && (item.params.sell_type == 3 || item.params.price == 0)">
						免费
					</div>
                    <div class="course-price" v-else :style="[{color: permession['price'].color}]">
                        ￥<span style="font-size: 14px;">{{courseDataBoo?item.params.price:'88.88'}}</span>
                    </div>
                    <div class="course-count" :style="[{color: permession['count'].color}]" v-if="permession['count'].showAlpha">
                        <image class="course-hot-img" src="resources/img/decorate/course/hot.png"></image>
                        {{courseDataBoo?item.params.vm_views+item.params.views:0}}人学习
                    </div>
                </div>
            </div>
        </div>
        <!-- 列表模式 （2） -->
        <div class="course-style-list" v-if="searchData.styleVal == 2" v-for="(item,index) in courseDataBoo?searchData.courseList:3" :style="{...marginInfos.model,background: computedStyle.iptBg,...inputStyle }" flex>
            <div class="diy-course-image">
                <div :class="hotClass" v-if="isShowHot" :style="hotStyle">{{hotName}}</div>
                <!-- <el-image :src="default_src"></el-image> -->
                <el-image class="course-list-img" :src="courseDataBoo?item.params.logo:'resources/img/decorate/default_picture.png'" fit="cover"></el-image>
            </div>
            <div class="course-model">
                <div class="course-title over1"  :style="[{color: permession['title'].color,'visibility': permession['title'].showAlpha?'':'hidden'}]">{{courseDataBoo?item.params.title:'这里是课程标题'}}</div>
                <div class="course-desc over2" :style="[{color: permession['desc'].color,'visibility': permession['desc'].showAlpha?'':'hidden'}]">{{courseDataBoo?item.params.introduce:'这里是课程副标题'}}</div>
                <div flex>
                    <template v-if="permession['price'].showAlpha">
                        <div class="course-price" v-if="courseDataBoo && item.params.sell_type == 2">
                            指定会员可看
                        </div>
                        <div class="course-price" v-else-if="courseDataBoo && (item.params.sell_type == 3 || item.params.price == 0)">
                            免费
                        </div>
                        <div class="course-price" v-else :style="[{color: permession['price'].color}]">
                            ￥<span style="font-size: 14px;">{{courseDataBoo?item.params.price:'88.88'}}</span>
                        </div>
                    </template>
                    <div class="course-count" :style="[{color: permession['count'].color}]" v-if="permession['count'].showAlpha">
                        <image class="course-hot-img" src="resources/img/decorate/course/hot.png"></image>
                        {{courseDataBoo?item.params.vm_views+item.params.views:0}}人学习
                    </div>
                </div>
            </div>
        </div>
        <!-- 一行两个 （3） -->
        <div class="course-style-two" v-if="searchData.styleVal == 3" v-for="(item,index) in courseDataBoo?searchData.courseList:3" :style="{...marginInfos.model,background: computedStyle.iptBg,...inputStyle,'max-width': (187.5 - marginInfos.modelVal  - marginInfos.aboutVal) + 'px' }">
            <div class="diy-course-image" :style="{'max-width': (187.5 - marginInfos.modelVal  - marginInfos.aboutVal) + 'px'}">
                <div :class="hotClass" v-if="isShowHot" :style="hotStyle">{{hotName}}</div>
                <el-image :style="[imgRadius]" class="course-two-img" :src="courseDataBoo?item.params.logo:'resources/img/decorate/default_picture.png'" fit="cover"></el-image>
            </div>    
            <div class="course-model">
                <div class="course-title over1" :style="[{color: permession['title'].color}]" v-if="permession['title'].showAlpha">{{courseDataBoo?item.params.title:'这里是课程标题'}}</div>
                <div class="course-desc over2" :style="[{color: permession['desc'].color}]" v-if="permession['desc'].showAlpha">{{courseDataBoo?item.params.introduce:'这里是课程副标题'}}</div>
                <div class="course-count" :style="[{color: permession['count'].color}]" v-if="permession['count'].showAlpha">
                    <image class="course-hot-img" src="resources/img/decorate/course/hot.png"></image>
                    {{courseDataBoo?item.params.vm_views+item.params.views:0}}人学习
                </div>
                <template v-if="permession['price'].showAlpha">
                    <div class="course-price" v-if="courseDataBoo && item.params.sell_type == 2">
                        指定会员可看
                    </div>
                    <div class="course-price" v-else-if="courseDataBoo && (item.params.sell_type == 3 || item.params.price == 0)">
                        免费
                    </div>
                    <div class="course-price" v-else :style="[{color: permession['price'].color}]">
                        ￥<span style="font-size: 14px;">{{courseDataBoo?item.params.price:'88.88'}}</span>
                    </div>
                </template>
            </div>
        </div>
        <!-- 可滑动（4） -->
        <div class="course-style-slide" v-if="searchData.styleVal == 4" v-for="(item,index) in courseDataBoo?searchData.courseList:3" :style="{background: computedStyle.iptBg,...inputStyle }">
            <div class="diy-course-image">
                <div :class="hotClass" v-if="isShowHot" :style="hotStyle">{{hotName}}</div>
                <!-- <el-image :src="default_src"></el-image> -->
                <el-image :style="[imgRadius]" class="course-slide-img" :src="courseDataBoo?item.params.logo:'resources/img/decorate/default_picture.png'" fit="cover"></el-image>
            </div>     
            <div class="course-model">
                <div class="course-title over1" :style="[{color: permession['title'].color}]" v-if="permession['title'].showAlpha">{{courseDataBoo?item.params.title:'这里是课程标题'}}</div>
                <div class="course-desc over2" :style="[{color: permession['desc'].color}]" v-if="permession['desc'].showAlpha">{{courseDataBoo?item.params.introduce:'这里是课程副标题'}}</div>
                <div class="course-count" :style="[{color: permession['count'].color}]" v-if="permession['count'].showAlpha">
                    <image class="course-hot-img" src="resources/img/decorate/course/hot.png"></image>
                    {{courseDataBoo?item.params.vm_views+item.params.views:0}}人学习
                </div>
                <template v-if="permession['price'].showAlpha">
                    <div class="course-price" v-if="courseDataBoo && item.params.sell_type == 2">
                        指定会员可看
                    </div>
                    <div class="course-price" v-else-if="courseDataBoo && (item.params.sell_type == 3 || item.params.price == 0)">
                        免费
                    </div>
                    <div class="course-price" v-else :style="[{color: permession['price'].color}]">
                        ￥<span style="font-size: 14px;">{{courseDataBoo?item.params.price:'88.88'}}</span>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('course-preview', {
        name: "course-preview",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#course-preview',
        computed: {
            // 角标
            isShowHot() {
                var angleMark = this.activeItem.data.angleMarkType || null
                return angleMark && angleMark != 1
            },
            hotStyle() {
                var angleMark = this.activeItem.data.angleMarkType || null
                if (angleMark == 3 && this.activeItem.data.customImgUrl) {
                    return {
                        width: "76px",
                        height: "76px",
                        background: `url(${this.activeItem.data.customImgUrl}) no-repeat`,
                        backgroundSize: "76px"
                    }
                }
                return {}
            },
            hotClass() {
                var angleMark = this.activeItem.data.angleMarkType || null
                var obj = ["diy-goods-hot"]
                if (angleMark) {
                    var name = ["diy-goods-hot3", "diy-goods-hot2", "diy-goods-hot1"]
                    if (angleMark == 2 && this.activeItem.data.angleMarkStyle) {
                        var key = name[this.activeItem.data.angleMarkStyle]
                        obj.push(key)
                    } else if(angleMark == 2) {
                        obj.push("diy-goods-hot3")
                    }
                }
                return obj
            },
            hotName() {
                var angleMark = this.activeItem.data.angleMarkType || null
                if (!this.activeItem.data.angleMarkText && angleMark == 2) {
                    return "热卖"
                }
                return this.activeItem.data.angleMarkText
            },
            // end角标
            // 展示内容
            permession(){
                let obj = {}
                if(this.activeItem.data.showContent){
                    this.activeItem.data.showContent.forEach(v => {
                    obj[v.key] = v;
                })
                }
                return obj;

            },
            // end展示内容
            imgRadius(){
                let obj = {}
                if(this.computedStyle.searchIpts && this.computedStyle.searchIpts['border-top-left-radius']){
                    obj = {
                        'border-top-left-radius': this.computedStyle.searchIpts['border-top-left-radius'],
                        'border-top-right-radius': this.computedStyle.searchIpts['border-top-right-radius'],
                    }
                }
                return obj
            },
            marginBottomTop(){
                let obj = {}
                marginBottom: "4px"
                marginLeft: "0px"
                marginRight: "0px"
                marginTop: "22px"
                if(this.computedStyle.searchIpts && this.computedStyle.searchIpts['border-top-left-radius']){
                    obj = {
                        'border-top-left-radius': this.computedStyle.searchIpts['border-top-left-radius'],
                        'border-top-right-radius': this.computedStyle.searchIpts['border-top-right-radius'],
                    }
                }
                return obj
            },
            computedStyle() {
                console.info(this.activeItem.computedStyle,"this.activeItem.computedStylethis.activeItem.computedStylethis.activeItem.computedStylethis.activeItem.computedStylethis.activeItem.computedStyle");
                return this.activeItem.computedStyle
            },
            searchData() {
                console.info(this.activeItem.data)
                return this.activeItem.data
            },
            courseDataBoo(){
                return this.activeItem.data.courseList && this.activeItem.data.courseList.length?true:false;
            },
            inputStyle() {
                let tabItem = this.computedStyle.tabItem
                let style = {
                    'background': this.computedStyle.iptBg,
                    ...this.computedStyle.searchIpts
                }

                if (tabItem && tabItem.value == 'border') style.border = '1px solid ' + (tabItem ? tabItem.color : 'transparent')
                if (tabItem && tabItem.value == 'shandow') style.boxShadow = tabItem ? '0 0 10px ' + tabItem.color : '0 0 10px rgba(226, 231, 244, 0.7)'
                console.log(style);
                return style
            },
            computedSize() {
                var width = 331;
                var arr = ['computedStyle', 'proportion']
                var result = {
                    width,
                    height: width
                }
                const type = getObjValue(this.activeItem, arr, 1)
                var b = [0, 0.5625, 0.75, 1]
                result.height = width * b[type]
                return {
                    height: result.height + 'px'
                }
            },
            marginInfos(){
                let obj = {
                    model: {},
                    temp: '',
                    modelVal: 0,
                    aboutVal: 0,
                };
                if(this.activeItem.data.marginArr){
                    let reg = /^[\d]+/g;
                    if(this.activeItem.data.styleVal == 1 || this.activeItem.data.styleVal == 2){
                        obj.model['margin-bottom'] = this.activeItem.data.marginArr[0];
                    } else if(this.activeItem.data.styleVal == 3){
                        let str = this.activeItem.data.marginArr[0];
                        let num = str.match(reg)[0];
                        let unit = str.substr(num.length,str.length);
                        obj.model['margin'] = (Number(num) / 2) + unit;
                        obj.modelVal = Number(num) / 2;
                    }
                    let aboutStr = this.activeItem.data.marginArr[3];
                    let abouNum = aboutStr.match(reg)[0];
                    obj.aboutVal = abouNum;
                    obj.temp = `${this.activeItem.data.marginArr[1]} ${aboutStr} ${this.activeItem.data.marginArr[2]}`
                }
                console.info(obj)
                return obj;
            },

        },
        data() {
            return {}
        }
    });
</script>

<style>
    .diy-course {
        box-sizing: border-box;
        background: #FFFFFF;
        overflow: hidden;
    }

    .course-style-big{
        padding: 10px 12px;
    }
    /* 一行一个 */
    .big-img{
        height: 168px;
        width: 100%;
        border-radius: 10px;
    }

    .big-img .course-model{
        padding: 10px 2px 0;
    }

    /* 列表模式 */
    .course-style-list{
        padding: 12px 8px;
    }

    .course-list-img{
        width: 140px;
        height: 76px;
        padding-top: 0;
        border-radius: 10px;
        margin-right: 10px;
    }

    .course-style-list .course-model{
        flex-direction: column;
        flex: 1;
    }

    .course-style-list .course-desc{
        flex: 1;
    }

    /* 一行两个 */
    .course-style-two{
        padding: 0;
        /* max-width: 187.5px; */
        width: 100%;
    }

    .course-two-img{
        width: 100%;
        height: 100px;
    }

    .course-style-two:nth-child(odd){
        margin-top: 0 !important;
        margin-left: 0 !important;
    }

    .course-style-two:nth-child(even){
        margin-top: 0 !important;
        margin-right: 0 !important;
    }


    .course-style-two .course-model,.course-style-slide .course-model{
        padding: 8px;
    }

    .course-style-two .course-count,.course-style-slide .course-count{
        justify-content: flex-start;
    }
    
    /* 可滑动的 */
    .course-style-slide{
        padding: 0;
        max-width: 148px;
        margin-right: 8px;
    }

    .course-slide-img{
        min-width: 138px;
        max-width: 138px;
        height: 80px;
    }

    /* 公共的 */
    .course-model>div{
        margin-bottom: 4px;
    }
    .course-title{
        font-size: 16px;
        line-height: 22px;
        color: #202021;
        font-weight: 700;
    }

    .course-desc{
        font-size: 13px;
        line-height: 18px;
        color: #999ca7;
    }

    .course-price{
        font-weight: 700;
        color: #fd463e;
        font-size: 12px;
        color: #DB0505;
    }

    .course-count{
        flex: 1;
        font-size: 12px;
        color: #000;
        align-items: center;
        display: flex;
        justify-content: flex-end;
    }

    .course-hot-img{
        height: 18px;
        width: 18px;
        min-height: 18px;
        min-width: 18px;
    }

    .diy-course-image{
        position: relative;
    }

    /* 角标 */
    .diy-goods-hot {
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(.5);
        transform-origin: top left;
        color: #fff;
        font-size: 22px;
        z-index: 99;
    }

    .diy-goods-hot1 {
        width: 64px;
        height: 44px;
        line-height: 44px;
        padding-left: 4px;
        background: url("resources/img/decorate/commodity-group/common_label2_3.png") no-repeat;
    }

    .diy-goods-hot2 {
        width: 52px;
        height: 56px;
        line-height: 44px;
        text-align: center;
        background: url("resources/img/decorate/commodity-group/common_label2_2.png") no-repeat;
        background-size: 52px 56px;
    }

    .diy-goods-hot3 {
        top: -3px;
        width: 60px;
        height: 60px;
        line-height: 50px;
        background-size: 60px;
        padding-left: 4px;
        background: url("resources/img/decorate/commodity-group/common_label2.png") no-repeat;
    }

    .three-tem{
        display: flex;
        flex-wrap: wrap;
    }

    .four-tem{
        display: flex;
        flex-wrap: nowrap;
    }



</style>