qimall/addons/Bargain/backend/views/default/components/common/bargain-goods/preview.php

<template id="bargain-goods-preview">
    <div class="bargain-goods-preview" :style="{background: computedStyle.bgColor}">
        <div :style="[bargainBox]">
            <div class="bargain-goods-title" :style="[titleStyle]" v-if="showTitle">{{ comData.title || '砍价商品' }}</div>
            <div class="bargain-goods-item" :style="[goodsStyle]" flex="cross:center" v-for="(item, index) in goodsList" :key="index">
                <div class="goods-img">
                    <el-image style="width: 100%; height: 100%" :src="item.cover_pic"></el-image>
                </div>
                <div class="goods-content">
                    <div class="goods-name over2">{{ item.goods_name }}</div>
                    <div flex="main:justify cross:center">
                        <div class="goods-price">
                            <div class="goods-origin-price">￥{{ item.price }}</div>
                            <div class="goods-min-price">最低￥<span class="price-text" :style="{ color: computedStyle.priceColor }">{{ item.min_price }}</span></div>
                        </div>
                        <div class="goods-btn" :style="[btnStyle]">{{ btnName }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('bargain-goods-preview', {
        name: "bargain-goods-preview",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            },
            btnName: {
                type: String,
                default: '立即参与'
            }
        },
        template: '#bargain-goods-preview',
        computed: {
            computedStyle() {
                console.log(this.activeItem, 'this.activeItem.computedStyle')
                return this.activeItem.computedStyle
            },
            comData() {
                return this.activeItem.data
            },
            showTitle() {
                return this.comData.titleRadio || 0
            },
            styleName() {
                var styleItem = this.activeItem.data.groupStyle || {}
                var name = {
                    1: "bargain-goods-style1",
                    2: "bargain-goods-style2",
                    3: "bargain-goods-style3"
                }
                var index = styleItem.type || 1
                return name[index]
            },
            titleStyle() {
                let {
                    paddingTop,
                    paddingBottom
                } = this.comData
                let style = {
                    'padding-top': paddingTop >= 0 ? `${paddingTop}px` : '10px',
                    'padding-bottom': paddingBottom >= 0 ? `${paddingBottom}px` : '10px'
                }
                return style
            },
            bargainBox() {
                let {
                    marginTop,
                    marginBottom,
                    aroundMargin
                } = this.computedStyle
                return {
                    margin: `${marginTop} ${aroundMargin} ${marginBottom}`,
                    overflow: 'hidden'
                }
            },
            goodsStyle() {
                let {
                    tabItem,
                    searchIpts
                } = this.computedStyle
                let style = {
                    'margin-top': this.computedStyle.spacing,
                    ...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)'
                return style
            },
            btnStyle() {
                return {
                    color: this.computedStyle.btnTextColor,
                    background: this.computedStyle.btnBackground
                }
            },
        },
        watch: {
            "activeItem.data.goods": {
                handler(newVal, oldVal) {
                    if (newVal && !deepEqual(newVal, oldVal)) {
                        const ids = newVal.map(item => {
                            return item.params.id
                        })
                        console.log(ids)
                        this.getGoodsList(ids)
                    }
                },
                immediate: true
            },
            goodsList: {
                handler(val) {
                    if (val.length == 0) {
                        this.goodsList = this.defaultList
                    }
                },
                immediate: true
            }
        },
        data() {
            return {
                defaultList: [{
                    cover_pic: "/resources/img/decorate/default_picture.png",
                    end_at: 1640880000,
                    goods_id: 0,
                    goods_name: "商品名称",
                    group_buy_price: 100,
                    group_size: 3,
                    group_status: 1,
                    id: 22,
                    price: 300,
                    sheng: 200,
                    start_at: 1639238400,
                    total_num: 14
                }],
                goodsList: []
            }
        },
        methods: {
            getGoodsList(ids) {
                request({
                    params: {
                        r: '/bargain/default/check-active-list',
                        active_id: JSON.stringify(ids)
                    },
                    method: 'get'
                }).then(res => {
                    this.goodsList = res.data.data
                })
            }
        }
    });
</script>

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

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

    .bargain-goods-item {
        padding: 10px;
        background-color: #fff;
    }

    .bargain-goods-item .goods-img {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        overflow: hidden;
    }

    .bargain-goods-item .goods-content {
        flex: 1;
        margin-left: 8px;
    }

    .bargain-goods-item .goods-content .goods-name {
        font-size: 13px;
        font-weight: 500;
        color: #000;
        margin-bottom: 5px;
    }
    .goods-origin-price {
        font-size: 13px;
        text-decoration: line-through;
        color: #999;
    }
    .goods-min-price {
        font-size: 13px;
        font-weight: 500;
        color: #666;
    }
    .goods-min-price .price-text {
        font-size: 16px;
        font-weight: 700;
        color: #e12c2e;
    }
    .goods-btn {
        width: 80px;
        height: 25px;
        line-height: 25px;
        font-size: 13px;
        font-weight: 500;
        color: #fff;
        background-color: #db0505;
        border-radius: 14px;
        text-align: center;
    }
</style>