qimall/addons/DepositPresale/backend/views/components/diy/style-components/style1.php

<template id="presale-goods-style1">


    <div class="presale-goods-style" :style="{background: bgColor}">


        <div class="flex-wrap" :style="{flexWrap: flexWrap}" style="margin:10px;">
            <div :class="[styleTypeClassArr, zoomComputed(i)]" v-for="(it, i) in goodsList" :key="i">
                <div class="diy-goods-basic" :style="[goodsStyle,groupBox,{background: goodsBgColor}]">
                    <div class="diy-goods-image">
                        <div :class="hotClass" v-if="isShowHot" :style="hotStyle">{{hotName}}</div>
                        <el-image :src="it.cover_pic ? it.cover_pic : default_src"></el-image>
                    </div>
                    <div class="detail">
                        <div class="name" :style="{color: permession.goodsName.color }" v-if="permession.goodsName.show">
                            {{ it.goods_name }}
                        </div>
                        <div class="diy-sale-new">
                            <div class="diy-info">
                                <div class="diy-price">
                                    <span class="new-diy-original-price-first" :style="{color: permession.totalNum.color }" v-if="permession.totalNum.show">
                                        {{ it.total_num }}人付款
                                    </span>

                                    <span class="diy-sale-price" :style="{color: permession.price.color }" v-if="permession.price.show">
                                        &nbsp;&nbsp;&nbsp;￥{{ it.presale_price }}
                                    </span>
                                    <span class="new-diy-original-price" :style="{color: permession.presalePrice.color }" v-if="permession.presalePrice.show">

                                        商品售价:￥{{ it.price }}
                                    </span>

                                </div>
                            </div>
                            <div v-if="isShowGoodsBuy" class="goods-buy" :style="goodsBuyStyle">
                                <span v-if="!goodsBuySrc">{{goodsBuyText}}</span>
                                <img :src="goodsBuySrc" v-else>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('presale-goods-style1', {
        name: "presale-goods-style1",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            },
            goodsList: { // 商品列表
                type: Array,
                default: () => []
            },
            showTitle: { // 是否展示标题
                type: Number,
                default: 0
            },
            title: { // 标题
                type: String,
                default: ''
            },
            titleStyle: { // 标题的样式
                type: Object,
                default: () => {}
            },
            groupBox: { // 最外层样式
                type: Object,
                default: () => {}
            },
            goodsStyle: { // 商品的样式
                type: Object,
                default: () => {}
            },
            btnStyle: { // 按钮的样式
                type: Object,
                default: () => {}
            },
            bgColor: {
                type: String,
                default: ''
            },
            goodsBgColor: {
                type: String,
                default: ''
            }
        },
        watch: {
            "activeItem.data": {
                handler(newVal, oldVal) {
                    if (!newVal) {
                        return false
                    }
                    var newCommCate = newVal && newVal.commCate
                    var oldCommCate = oldVal && oldVal.commCate
                    if (newVal.chooseGoods == 2 && newCommCate) {
                        this.defaultList = new Array(newCommCate.count).fill({})
                    } else {
                        this.defaultList = [{}]
                    }
                },
                immediate: true
            }
        },
        template: '#presale-goods-style1',
        data() {
            return {
                defaultList: [],
            }
        },
        computed: {
            hotStyle() {
                var angleMark = this.activeItem.data.angleMark || null
                if (angleMark.label == 3 && angleMark.customImgUrl) {
                    return {
                        width: "76px",
                        height: "76px",
                        background: `url(${angleMark.customImgUrl}) no-repeat`,
                        backgroundSize: "76px"
                    }
                }
                return {}
            },
            // 角标
            isShowHot() {
                var angleMark = this.activeItem.data.angleMark || null
                return angleMark && angleMark.label != 1
            },
            default_src() { // 默认图片
                var type = this.activeItem.data.style || 1
                return type == 1 ? 'resources/img/decorate/default_img.png' : 'resources/img/decorate/default_picture.png'
            },
            hotClass() {
                var angleMark = this.activeItem.data.angleMark || null
                var obj = ["diy-goods-hot"]
                if (angleMark) {
                    var name = ["", "diy-goods-hot3", "diy-goods-hot2", "diy-goods-hot1"]
                    if (angleMark.label == 2 && angleMark.angleMarkStyle) {
                        var key = name[angleMark.angleMarkStyle.label]
                        obj.push(key)
                    }
                }
                return obj
            },
            hotName() {
                var angleMark = this.activeItem.data.angleMark || null
                if (angleMark && !angleMark.angleMarkText && angleMark.label == 2) {
                    return "预售"
                }
                return angleMark.angleMarkText
            },
            // 购物车
            isShowGoodsBuy() { // 是否显示购物车按钮
                var showShopCart = this.activeItem.data.showShopCart
                var type = this.activeItem.data.style || 1
                if (type == 6) {
                    return false
                }
                return !(showShopCart == 2)
            },
            goodsBuyText() {
                var shopCartStyle = this.activeItem.data.shopCartStyle || {}
                if (shopCartStyle.label == 2) {
                    return '+'
                } else if (shopCartStyle.label == 3 || shopCartStyle.label == 4) {
                    return ""
                }
                return shopCartStyle.text || "付定金"
            },
            goodsBuyStyle() {

                var shopCartStyle = this.activeItem.computedStyle.shopCartStyle || {}
                var shopCartData = this.activeItem.data.shopCartStyle || {}
                // 类型1尺寸
                var size = ["", "3px 7px", "6px 10px", "10px 16px"]
                var small = size[shopCartStyle.sizeType] || size[1]
                // 类型2/3/4尺寸
                var size1 = ["", "22px", "28px", " 36px"]
                var small1 = size1[shopCartStyle.sizeType] || size1[1]
                var imgUrl = shopCartData.src

                // 1 2 3 4
                var handleList = [{}, {
                    borderRadius: `${shopCartStyle.borderReduis || 0}px`,
                    backgroundColor: `${shopCartStyle.backgroundColor || '#fd463e'}`,
                    color: `${shopCartStyle.color || '#fff'}`,
                    border: `1px solid ${shopCartStyle.borderColor}`,
                    padding: small
                }, {
                    borderRadius: `50%`,
                    backgroundColor: `${shopCartStyle.backgroundColor || '#fd463e'}`,
                    color: `${shopCartStyle.color || '#fff'}`,
                    border: `1px solid ${shopCartStyle.borderColor}`,
                    width: small1,
                    height: small1,
                    lineHeight: small1
                }, ]
                if (shopCartData.label == 3 || shopCartData.label == 4) {
                    return {
                        width: small1,
                        height: small1,
                        lineHeight: small1
                    }
                }
                var result = handleList[shopCartData.label || 1]
                return result
            },
            styleTypeClassArr() {
                var type = this.activeItem.data.style || 2
                var contentClass = []
                var result = {
                    1: 'diy-goods-contain-full',
                    2: 'diy-goods-contain',
                    3: 'diy-goods-contain1',
                    4: 'diy-goods-contain2',
                    5: 'diy-goods-contain3',
                    6: 'diy-goods-contain4',
                    7: 'diy-goods-contain5'
                }
                return contentClass.concat(result[type])
            },
            contianStyle() {
                var style = this.filterKey(this.computedStyle.searchIpts, ["margin"])
                if (!style.margin) {
                    style.margin = "10px"
                }
                return style
            },
            flexWrap() {
                let acceptArr = [6, 7]
                return acceptArr.indexOf(this.activeItem.data.style) != -1 ? 'nowrap' : ''
            },
            goodsBuySrc() {
                var shopCartData = this.activeItem.data.shopCartStyle || {}
                var imgUrl = shopCartData.src
                if (shopCartData.label == 3 || shopCartData.label == 4) {
                    return imgUrl
                }
                return ""
            },

            // 权限列表
            permession() {
                var obj = {
                    goodsName: {
                        show: true,
                        color: ""
                    },
                    totalNum: {
                        show: true,
                        color: ""
                    },
                    price: {
                        show: true,
                        color: ""
                    },
                    presalePrice: {
                        show: true,
                        color: ""
                    }
                }
                var data = this.activeItem.data.showContent || []
                var style = this.activeItem.data.style
                if (data.length) {
                    for (const key in obj) {
                        obj[key].show = false
                    }
                }
                data.map(item => {
                    var keyObj = {
                        1: {
                            key: 'goodsName',
                            // filter: [1, 2, 3, 4, 5, 6, 7], // style支持的权限标识
                            filter: [1, 2, 3, 4, 5, 6, 7], // style支持的权限标识
                        },
                        5: {
                            key: 'totalNum',
                            // filter: [1, 2],
                            filter: [1, 2, 3, 4, 5, 6, 7],
                        },
                        3: {
                            key: 'price',
                            // filter: [1, 2, 3, 4, 5, 6, 7],
                            filter: [1, 2, 3, 4, 5, 6, 7],
                        },
                        4: {
                            key: 'presalePrice',
                            // filter: [1, 2, 3],
                            filter: [1, 2, 3, 4, 5, 6, 7],
                        }
                    }
                    var target = keyObj[item.label]
                    // 存在选中 - 继续style判断是否支持
                    if (style) {
                        if (target.filter.indexOf(style) != -1) {
                            obj[target.key].show = true
                            obj[target.key].color = item.color
                        }
                    }
                })
                return obj
            }
        },
        methods: {
            zoomComputed(index) {
                const type = this.activeItem.data.style
                if (type == 6) {
                    if (index % 2 == 0) {
                        return "zoom"
                    }
                }
                return ""
            },
        }
    });
</script>

<style>
    .presale-goods-style {
        box-sizing: border-box;
        overflow: hidden;
    }

    /* .commodity-group-preview {
        box-sizing: border-box;
        overflow: hidden;
    } */

    .presale-goods-title {
        text-align: center;
        font-size: 16px;
        color: #0D0C0C;
        font-weight: 700;
    }

    .presale-goods-box {
        position: relative;
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
        padding: 10px;
    }

    .group-content {
        flex: 1;
        padding-left: 8px;
    }

    .goods-tags {
        display: inline-block;
        padding: 2px 1px 2px 8px;
        font-size: 11px;
        background-color: #FFF2F2;
        margin: 4px 0px;
        border-radius: 16px;
        color: #DB0505;
    }

    .tags-text {
        background-color: #fff;
        padding: 1px 5px;
        border-radius: 0 16px 16px 0;
    }

    .goods-save {
        position: relative;
        display: inline-block;
        padding: 2px 8px;
        font-size: 11px;
        color: #F69E19;
        background-color: #FEF4E4;
        border-radius: 16px;
    }

    .goods-save .trnaglre {
        position: absolute;
        bottom: -13px;
        left: 10px;
        width: 0px;
        height: 0px;
        border-top: 8px solid #FEF4E4;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-radius: 2px;
    }

    .goods-price {
        padding-top: 2px;
        font-size: 16px;
        color: #DB0505;
    }

    .price-origin {
        font-size: 11px;
        color: #707070;
    }

    .group-btn {
        position: absolute;
        bottom: 12px;
        right: 12px;
        width: 80px;
        height: 32px;
        background: #DB0505;
        border-radius: 33px;
        font-size: 13px;
        color: #fff;
    }

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

    /* 角标 */
    .diy-goods-hot {
        position: absolute;
        top: 20;
        left: 20;
        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: 20;
        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;
    }

    .goods-buy {
        box-sizing: border-box;
        display: inline-block;
        text-align: center;
        align-self: flex-end;
    }

    .goods-buy img {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* 样式1 */
    .diy-goods-contain-full {
        width: 100%;
        margin: 0;
    }

    .diy-goods-contain-full .detail .name {
        height: 20px;
        max-height: 20px;
        margin-bottom: 4px;
    }

    /* 样式2 */
    .diy-goods-contain {
        width: 100%;
    }

    .diy-goods-contain .detail .name {
        height: 20px;
        max-height: 20px;
        margin-bottom: 4px;
    }

    .diy-goods-contain .diy-goods-image {
        float: left;
        width: 130px;
        height: 130px;
    }

    .diy-goods-contain .detail {
        /* margin-left: 130px; */
        height: 130px;
        padding: 10px;
    }


    .diy-goods-contain .new-diy-original-price {
        display: block;
        padding-top: 13px;
    }

    .diy-goods-contain .new-diy-original-price-first {
        display: block;
        padding-bottom: 13px;
    }

    .diy-goods-image .el-image {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* 样式3 */
    .diy-goods-contain1 {
        width: 50%;
    }

    .diy-goods-contain1 .new-diy-original-price {
        display: block;
        padding-top: 13px;
    }
    .diy-goods-contain1 .new-diy-original-price-first {
        display: block;
        padding-bottom: 13px;
    }

    .diy-goods-contain1 .subtitle {
        display: none;
    }

    /* .diy-goods-contain1 .diy-sale {
        margin-top: 16px;
    } */

    /* 样式4 */

    .diy-goods-contain2 {
        width: 50%;
    }

    .diy-goods-contain2 .diy-goods-image {
        float: left;
        width: 80px;
        height: 80px;
    }

    .diy-goods-contain2 .detail {
        margin-left: 80px;
        padding: 4px;
        height: 80px;
    }

    .diy-goods-contain2 .detail .goods-buy {
        display: none;
    }

    .diy-goods-contain2 .detail .subtitle {
        display: none;
    }

    .diy-goods-contain2 .detail .diy-sold {
        display: none;
    }

    .diy-goods-contain2 .detail .new-diy-original-price {
        display: none;
    }

    /* 样式5 */
    .diy-goods-contain3 {
        width: 33.33%;
    }

    .diy-goods-contain3 .el-image__error {
        min-height: 100px;
    }

    .diy-goods-contain3 .detail .subtitle {
        display: none;
    }

    .diy-goods-contain3 .detail .goods-buy {
        display: none;
    }

    .diy-goods-contain3 .detail .diy-sold {
        display: none;
    }

    .diy-goods-contain3 .detail .new-diy-original-price {
        display: none;
    }

    /* 样式6 */
    .diy-goods-contain4 {
        width: 33.33%;
        flex: 0 0 33.33%;
    }

    /* 样式7 */
    .diy-goods-contain5 {
        width: 30%;
        flex: 0 0 30%;
    }


    .diy-goods-contain5 .name {
        height: 36px;
    }

    .diy-goods-contain5 .el-image__error {
        min-height: 100px;
    }

    .diy-goods-contain5 .detail .subtitle {
        display: none;
    }

    .diy-goods-contain5 .detail .diy-sold {
        display: none;
    }

    .diy-goods-contain5 .detail .new-diy-original-price {
        display: none;
    }

    /* 购物车按钮 */
    .diy-sale-new {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        align-items: flex-end;
        height: 94px;
    }

    .diy-sale-new .diy-info {
        flex: 1;
        height: 80px;
    }

    .diy-info .diy-price {
        display: flex;
        flex-direction: column;
    }

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

    .detail {
        display: flex;
        flex-wrap: wrap;
        padding: 8px 6px;
    }

    .detail .name {
        font-size: 14px;
        line-height: 18px;
        /* height: 36px; */
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .detail .subtitle {
        font-size: 12px;
        height: 16px;
        line-height: 16px;
        width: 100%;
        color: #999ca7;
        margin-bottom: 4px;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
    }

    /* 基础样式 */
    .diy-goods-basic {
        margin: 0 4px 4px 0;
        overflow: hidden;
    }

    .diy-goods-contain-full .diy-goods-basic,
    .diy-goods-contain .diy-goods-basic {
        margin: 0 0 6px 0;
    }

    /* 图片自适应 */
    .img-contain {
        padding-top: 100%;
        position: relative
    }

    .img-contain .test-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
</style>