qimall/addons/Store/backend/views/components/diy/store/preview.php

<template id="store-preview">
    <div class="store-preview" :style="containerStyle">
        <div class="store-preview__header" v-if="diyData.titleRadio" :style="headerStyle">
            <div class="store-preview__title">{{ diyData.title || '推荐商品' }}</div>
            <div class="store-preview__more">
                <div class="store-preview__more--text">
                    更多 >
                </div>
            </div>
        </div>
        <div class="store-preview__content hide-scrollbar" :style="contentStyle">
            <div class="store-preview__store-item" :style="storeItemStyle" v-for="(item, index) in goodsList" :key="index">
                <div class="store-preview__store-logo">
                    <el-image style="width: 100%;height: 100%;" :src="item.logo_img" draggable="false" />
                </div>
                <div class="store-preview__store-name">
                    {{item.store_name}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('store-preview', {
        name: "store-preview",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#store-preview',
        computed: {
            computedStyle() {
                return this.activeItem.computedStyle || {}
            },
            diyData() {
				console.log('store-preview 装修数据',this.activeItem.data)
                return this.activeItem.data || {}
            },
            // 容器内容动态样式
            containerStyle() {
                let {
                    marginTop,
                    marginBottom,
                    aroundMargin,
                    boxBg,
                    searchIpts,
                    tabItem
                } = this.computedStyle
                let style = {
                    margin: `${marginTop} ${aroundMargin} ${marginBottom}`,
                    background: boxBg,
                    ...searchIpts
                }
                if (tabItem) {
                    if (tabItem.value === 'border') {
                        style.border = `1px solid ${tabItem.color || 'transparent'}`;
                    }
                    if (tabItem.value === 'shandow') {
                        style.boxShadow = `0 0 10px ${tabItem.color || 'rgba(226, 231, 244, 0.7)'}`;
                    }
                }
                return style
            },
            // 头部内容动态样式
            headerStyle() {
                 const { paddingTop = 10, paddingBottom = 10 } = this.diyData;
                return {
                    paddingTop: `${paddingTop}px`,
                    paddingBottom: `${paddingBottom}px`
                };
            },
            // 内容动态样式
            contentStyle() {
                return {
                    background: this.computedStyle.goodsBg
                }
            },
            // 内容项间距动态样式
            storeItemStyle() {
                return {
                    marginRight: this.computedStyle.spacing || "12px"
                }
            }
        },
        watch: {
            "activeItem.data.goods": {
                handler(newVal, oldVal) {
                    if (newVal && !deepEqual(newVal, oldVal)) {
                        const ids = newVal.map(item => {
                            return item.params.id
                        })
                        console.log("ids",ids)
                        this.getGoodsList(ids)
                    }
                },
                immediate: true
            },
            goodsList: {
                handler(val) {
                    if (val.length == 0) {
                        this.goodsList = this.defaultList
                    }
                },
                immediate: true
            }
        },
        data() {
            return {
                defaultList: [{
                    logo_img:'',
					store_name:'商店名称'
                }],
                goodsList: []
            }
        },
        methods: {
            getGoodsList(ids) {
                request({
                    params: {
                        r: '/store/diy/store-list',
                        store_ids:ids,
                    },
                    method: 'get'
                }).then(res => {
                    this.goodsList = res.data.data
                })
            }
        }
    });
</script>

<style>
.store-preview {
    position: relative;
    overflow: hidden;
    padding: 16px;
}

.store-preview__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
}

.store-preview__title{
    font-size: 14px;
    font-weight: 800;
    color: #333333;
}

.store-preview__more{
    font-size: 12px;
    font-weight: 400;
    color: #666666;
}

.store-preview__content{
    display: flex;
    width: 100%;
    background-color: #fff;
    overflow-x: auto;
}

.store-preview__store-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80px;
    margin-right: 12px;
}

.store-preview__store-logo{
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
}

.store-preview__store-name{
    margin-top: 6px;
    font-weight: bold;
    font-size: 12px;
    color: #333333;
    text-align: center;
    /* 单行溢出显示省略号 */
    overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	width: 100%;
}

.hide-scrollbar {
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none; /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar { 
    display: none; /* Safari 和 Chrome */
}
</style>