qimall/backend/views/components/common/diy/style-components/group-goods/style1.php

<template id="group-goods-style1">
    <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]" flex v-for="(it, i) in goodsList" :key="i">
                <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>
                            <div class="goods-tags">
                                <span>{{ it.group_size }}人团</span>
                                <span class="tags-text">已拼{{ it.total_num }}件</span>
                            </div>
                        </div>
                        <div>
                            <div class="goods-save">
                                <span>节省了￥{{ it.sheng }}</span>
                                <div class="trnaglre"></div>
                            </div>
                        </div>
                        <div class="goods-price">
                            <span>￥{{ it.group_buy_price }}</span>
                            <span class="price-origin">￥{{ it.price }}</span>
                        </div>
                    </div>
                </div>
                <div class="group-btn" flex="main:center cross:center" :style="[btnStyle]">立即参团</div>
            </div>
        </div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('group-goods-style1', {
        name: "group-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: ''
            }
        },
        template: '#group-goods-style1',
        data() {
            return {}
        }
    });
</script>

<style>
    .group-goods-style {
        position: relative;
        overflow: hidden;
    }
    .group-goods-title {
        text-align: center;
        font-size: 16px;
        color: #0D0C0C;
        font-weight: 700;
    }

    .group-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;
    }
</style>