qimall/addons/DepositPresale/backend/views/default/components/common/presale-goods/preview.php

<template id="presale-goods-preview">
    <div class="presale-goods-preview">
        <components 
            :is="styleName" 
            :goods-list="goodsList"
            :active-item="activeItem" 
            :title-style="titleStyle" 
            :show-title="isShowTitle" 
            :title="comData.title" 
            :group-box="groupBox" 
            :goods-style="goodsStyle" 
            :btn-style="btnStyle" 
            :bg-color="computedStyle.bgColor"
            :goods-bg-color="computedStyle.goodsBgColor"
        ></components>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('presale-goods-preview', {
        name: "presale-goods-preview",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#presale-goods-preview',
        computed: {
            computedStyle() {
                return this.activeItem.computedStyle
            },
            comData() {
                return this.activeItem.data
            },
            styleName() {
                return "presale-goods-style1";
            },
            titleStyle() {
                let {
                    paddingTop,
                    paddingBottom
                } = this.comData
                let style = {
                    'padding-top': paddingTop >= 0 ? `${paddingTop}px` : '10px',
                    'padding-bottom': paddingBottom >= 0 ? `${paddingBottom}px` : '10px'
                }
                return style
            },
            isShowTitle() {
                return this.comData.titleRadio || 0
            },
            groupBox() {
                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,
                    presale_price: 270
                }],
                goodsList: []
            }
        },
        methods: {
            getGoodsList(ids) {
                request({
                    params: {
                        r: '/deposit-presale/default/check-active-list',
                        active_id: JSON.stringify(ids)
                    },
                    method: 'get'
                }).then(res => {
                    this.goodsList = res.data.data
                })
            }
        }
    });
</script>

<style>


</style>