qimall/addons/Store/backend/views/components/diy/best-sellers/preview.php

<template id="best-sellers-preview">
    <div class="best-sellers-preview">
        <div class="sellers-box" :style="[bestSellerBox]">
            <div class="sellers-title" v-if="bestSellerData.titleRadio" :style="[titleStyle]">
				<div >{{ bestSellerData.title || '全城热卖' }}</div>
				<div class="best-more">
					更多
					<i class="el-icon-arrow-right"></i>
				</div>
			</div>
            <div class="shop-box" :style="[goodsStyle]">
                <!--  -->
                <div class="shop-list" v-for="(it, i) in (goodsList.length > 0 ? goodsList : defaultList)" :key="i" @tap="navToGroup(it)">
                    <div class="shop-image">
                        <el-image style="width: 100%;height: 100%;" :src="it.cover_pic" draggable="false">></el-image>
                    </div>
                    <div class="shop-name over2">
                        {{it.goods_name}}
                    </div>
					<div class="shop-price">
					    ￥{{it.price}}
					</div>
					<div class="shop-disarea">
                        <span>
                            已抵扣{{it.discount}}元
                        </span>
					</div>
					<div class="shop-sales">
						<div class="origin-price">￥{{it.original_price}}</div>
                        <div>销量：{{it.sales_num}}</div>
					</div>
				</div>
            </div>
        </div>
    </div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('best-sellers-preview', {
        name: "best-sellers-preview",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        template: '#best-sellers-preview',
        computed: {
            computedStyle() {
                return this.activeItem.computedStyle
            },
            bestSellerData() {
				console.log('标题装修数据',this.activeItem.data)
                return this.activeItem.data
            },
            titleStyle() {
                let {
                    paddingTop,
                    paddingBottom
                } = this.bestSellerData
                let style = {
                    'padding-top': paddingTop >= 0 ? `${paddingTop}px` : '10px',
                    'padding-bottom': paddingBottom >= 0 ? `${paddingBottom}px` : '10px'
                }
                return style
            },
            goodsStyle() {
                let {
                    tabItem,
                    searchIpts,
                    goodsBg
                } = this.computedStyle
                let style = {
                    'margin-bottom': this.computedStyle.spacing,
                    background: goodsBg,
                    ...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
            },
            bestSellerBox() {
                let {
                    marginTop,
                    marginBottom,
                    aroundMargin,
                    boxBg
                } = this.computedStyle
                return {
                    padding: `${marginTop} ${aroundMargin} ${marginBottom}`,
                    background: boxBg
                }
            },
        },
        watch: {
            "activeItem.data.goods": {
                handler(newVal, oldVal) {
                    if (newVal && !deepEqual(newVal, oldVal)) {
                        const ids = newVal.map(item => {
                            return item.params.id
                        })
                        this.getGoodsList(ids)
                    }
                },
                immediate: true
            },
            goodsList: {
                handler(val) {
                    if (val.length == 0) {
                        this.goodsList = this.defaultList
                    }
                },
                immediate: true
            }
        },
        data() {
            return {
                defaultList: [
                    {
                    cover_pic:'https://n.sinaimg.cn/sinacn10111/183/w640h343/20190410/27e2-hvntnkq0878753.bmp',
					goods_name:'【广东省东莞市.蛋糕】 198元起抢购麦莎蒂斯烘培套餐，口感细腻，造型精致，甜蜜好滋味！',
					original_price:30,
					discount:10,
					price:20,
					sales_num:66,
                    },
                    {
                    cover_pic:'https://n.sinaimg.cn/sinacn10111/183/w640h343/20190410/27e2-hvntnkq0878753.bmp',
                    goods_name:'【广东省东莞市.蛋糕】 198元起抢购麦莎蒂斯烘培套餐，口感细腻，造型精致，甜蜜好滋味！',
                    original_price:30,
					discount:10,
                    price:20,
                    sales_num:66,
                    },
					{
					cover_pic:'https://n.sinaimg.cn/sinacn10111/183/w640h343/20190410/27e2-hvntnkq0878753.bmp',
					goods_name:'【广东省东莞市.蛋糕】 198元起抢购麦莎蒂斯烘培套餐，口感细腻，造型精致，甜蜜好滋味！',
					original_price:30,
					discount:10,
					price:20,
					sales_num:66,
					},
                ],
                goodsList: []
            }
        },
        methods: {
            getGoodsList(ids) {
                request({
                    params: {
                        r: '/store/diy/good-list',
                        good_ids:ids,
                    },
                    method: 'get'
                }).then(res => {
                    this.goodsList = res.data.data
                })
            }
        }
    });
</script>

<style >
	.sellers-title{
		color:rgb(75,75,75);
		font-weight:700;
		padding-left:12px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;

	}
	.shop-name{
		margin-top:10px;
		font-weight: 500 !important;
	}
	.shop-price{
        color: #eb3d30;
        font-size: 13px;
        margin-top: 10px;
        font-weight: 700;
        padding: 0 5px;
	}
    .shop-disarea{
        font-size: 12px;
        color: rgb(152,84,0);
        margin: 8px 5px;
    }
    .shop-disarea span{
        background: rgb(255,243,213);
        border-radius: 10px;
        padding: 2px 8px;

    }
    .shop-sales{
        display: flex;
        justify-content: space-between;
        color: #9d9d9d;
        padding: 0 5px;
        font-size: 12px;
    }
    .shop-sales .origin-price{
        text-decoration: line-through;
    }
	.best-more{
        padding-right: 12px;
        color: #aaaaaa;
        font-size: 13px;
		font-weight:500;
	}
    .best-sellers-preview {
        position: relative;
        overflow: hidden;
    }
    .shop-box {
		display: flex;
        position: relative;
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
        background-color: #fff;
        overflow: scroll;		
    }
    .shop-list{
		margin-right: 12px;
		position: relative;
		border-radius: 0 0 8px 8px;
	}
    .shop-image {
        width: 160px;
        height: 160px !important;
		border-radius: 8px 8px 0 0;
    }
	.shop-image img{
		border-radius: 8px 8px 0 0;
	}
 

   
   

    @-webkit-keyframes animate-positive {
        0% {
            width: 0;
        }
    }

    @keyframes animate-positive {
        0% {
            width: 0;
        }
    }
</style>