qimall/addons/GroupBuy/backend/views/components/diy/style-components/style2.php

<template id="group-goods-style2">
    <div class="group-goods-style" :style="{background: bgColor}">
        <div :style="[groupBox]">
            <div class="group-goods-title" :style="[titleStyle]" v-if="showTitle">{{ title || '商品拼团' }}</div>
            <div class="group-goods-box" :style="[goodsStyle]" v-for="(it, i) in goodsList" :key="i">
                <div flex>
                    <el-image style="width: 106px; height: 106px; border-radius: 8px;" :src="it.cover_pic"></el-image>
                    <div class="group-content" flex="dir:top main:justify">
                        <div class="goods-name over2">{{ it.goods_name }}</div>
                        <div>
                            <div class="goods-time" flex>
                                <div>活动时间：</div>
                                <div style="flex: 1;">{{ it.start_at | dateTimeFormat('Y-m-d H:i:s') }} - {{ it.end_at | dateTimeFormat('Y-m-d H:i:s') }}</div>
                            </div>
                            <div class="goods-origin">￥{{ it.price }}</div>
                            <div class="goods-price" flex>
                                <span>￥{{ it.group_buy_price }}</span>
                                <div class="price-save">节省了￥{{ it.sheng }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="goods-buy-card" flex="cross:center">
                    <div class="goods-buy-img">
                        <el-image style="width: 100%; height: 100%;" :src="imgUrl + 'buy_packagesl.png'"></el-image>
                    </div>
                    <div class="goods-buy-desc">
                        <span class="text-color">{{it.group_size}}人</span>拼团，已团<span  class="text-color">{{ it.total_num }}件</span>
                    </div>
                    <div class="goods-buy-btn" flex="cross:center main:center">
                        <div class="btn-text">立即参团</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('group-goods-style2', {
        name: "group-goods-style2",
        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: ''
            }
        },
        template: '#group-goods-style2',
        data() {
            return {
                imgUrl: '/resources/img/decorate/group-goods/'
            }
        }
    });
</script>

<style>
    .group-goods-style {
        position: relative;
        overflow: hidden;
    }

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

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

    .goods-time {
        color: #6D6A6A;
        font-size: 11px;
        padding: 6px 0;
    }

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

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

    .price-save {
        background: rgba(219, 5, 5, 0.08);
        border-radius: 20px;
        padding: 3px 8px;
        color: #DB0505;
        font-size: 11px;
        margin-left: 10px;
    }

    .price-origin {
        font-size: 11px;
        color: #707070;
    }
    .goods-buy-card {
        width: 100%;
        height: 52px;
        background-color: rgba(219, 5, 5, 0.08);
        border-radius: 8px;
        margin-top: 12px;
    }
    .goods-buy-img {
        width: 36px; 
        height: 36px;
        margin-left: 8px;
    }
    .goods-buy-desc {
        font-size: 13px;
        padding-left: 5px;
        flex: 1;
    }
    .text-color {
        color: #DB0505;
    }
    .goods-buy-btn {
        width: 112px;
        height: 52px;
        background: url('/resources/img/decorate/group-goods/buy_btn.png') no-repeat;
        background-size: 100% 100%;
        color: #fff;
    }
    .btn-text {
        padding-left: 10px;
    }
</style>