qimall/addons/DepositPresale/backend/views/default/components/style-components/diy-store-info.php

<template id="diy-store-info">
    <div>
        <div class="merchant-info-item" :class="borderBottom ? 'has-border' : 'no-border '" v-for="(item, index) in list" :key="index" :style="[componentStyle]">
            <div class="info-item-store" flex>
                <div class="item-logo" :style="{backgroundImage: 'url('+ item.logo +')', width: width + 'px', height: height + 'px'}" v-show="updataCheck('logo')">
                    <div class="item-sales over1" v-show="updataCheck('sales') && saleType == 1">在售{{ item.sales_num }}件</div>
                </div>
                <div class="item-info" flex="dir:top main:justify">
                    <div>
                        <div class="info-name over1" v-show="updataCheck('name')" :style="{color: computedStyle.nameColor}">{{ item.merchant_name }}</div>
                        <div class="info-desc over2" v-show="updataCheck('intro') && showDesc" :style="{color: computedStyle.introColor}">{{ item.merchant_desc }}</div>
                        <div class="info-desc over2" v-show="updataCheck('sales') && saleType == 2">在售商品 {{ item.sales_num }} 件</div>
                    </div>
                    <div class="info-address over1" v-show="updataCheck('address') && showAddress" :style="{color: computedStyle.addrColor}">{{ item.address }}</div>
                </div>
                <div class="item-btn">
                    <div class="item-btn-text" flex="cross:center main:center" :style="[btnStyle]">{{ merchData.input || '进入店铺' }}</div>
                </div>
            </div>
            <slot :goods-title-color="computedStyle.goodsTitleColor" :goods-price-color="computedStyle.goodsPriceColor"></slot>
        </div>
    </div>
</template>
<script>
    Vue.component('diy-store-info', {
        name: "diy-store-info",
        template: '#diy-store-info',
        props: {
            list: {
                type: [Array],
                default: () => []
            },
            computedStyle: {
                type: Object,
                default: () => {}
            },
            componentStyle: {
                type: Object,
                default: () => {}
            },
            merchData: {
                type: Object,
                default: () => {}
            },
            btnStyle: {
                type: Object,
                default: () => {}
            },
            width: {
                type: [String, Number],
                default: 80
            },
            height: {
                type: [String, Number],
                default: 80
            },
            borderBottom: {
                type: Boolean,
                default: false
            },
            showAddress: {
                type: Boolean,
                default: true
            },
            showDesc: {
                type: Boolean,
                default: true
            },
            saleType: {
                type: [Number, String],
                default: 1
            }
        },
        data() {
            return {
                storeList: []
            }
        },
        watch: {
        },
        methods: {
            updataCheck(name) {
                let content = this.merchData && this.merchData.content
                if (content && content.length >= 0) {
                    return content.includes(name)
                } else {
                    return true
                }
            },
        }
    });
</script>
<style>
    .merchant-info-item {
        overflow: hidden;
        box-sizing: border-box;
    }
    .merchant-info-item:last-child {
        margin-bottom: 0 !important;
    }
    .has-border {
        border-bottom: 1px solid #ededed;
    }
    .has-border:last-child,
    .no-border {
        border-bottom: none !important;
    }
    .info-item-store {
        position: relative;
        padding: 13px 12px;
    }
    .merchant-info-item .item-logo {
        position: relative;
        border-radius: 2px;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover;
        margin-right: 10px;
    }
    
    .merchant-info-item  .item-logo .item-sales {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 22px;
        line-height: 22px;
        background-color: rgba(0, 0, 0, .4);
        font-size: 12px;
        text-align: center;
        color: #fff;
    }
    .item-info {
        width: 185px;
    }
    .item-info .info-name {
        color: #3d404d;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 4px;
    }
    .item-info .info-desc {
        color: #999ca7;
        font-size: 13px;
    }
    .item-info .info-address {
        font-size: 13px;
        color: #5e6066;
    }
    .merchant-info-item .item-btn {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    .item-btn-text {
        width: 74px;
        height: 26px;
        border-radius: 26px;
        font-size: 12px;
        color: #fff;
        background-color: rgb(218, 54, 54);
        border: 1px solid rgb(218, 54, 54);
    }
</style>