caimei-applets-caimei/components/cm-module/homeIndex/supplierList.vue

<template>
    <view class="supplier-content clearfix">
        <view class="tui-group-name">
            <view class="tui-group-title">
                <view class="tui-group-l">优质供应商</view>
                <view class="tui-group-r" @click="handleMoreShop">
                    <text>更多</text> <text class="iconfont icon-xiayibu"></text>
                </view>
            </view>
            <view class="tui-sub__desc">采美正品联盟 质量保证</view>
        </view>
        <view class="supplier-banner">
            <image :src="banner" mode=""
                @click="BannerNavigateTo(supplierObj.linkType,supplierObj.linkParam.id,supplierObj.wwwLink,supplierObj.linkParam.keyword)">
            </image>
        </view>
        <view class="swiper-goods-box">
            <view class="goods-box-item" v-for="(item,index) in supplierList" :key="index"
                @click="NavToDetailPage(item)">
                <image :src="item.image" mode="" class="box-item-image"></image>
                <view class="box-item-mask">{{ item.supplierName }}</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "supplierList",
        props: {
            supplierObj: {
                type: Object
            }
        },
        data() {
            return {
                banner: '',
                supplierList: []
            }
        },
        created() {
            this.initData(this.supplierObj)
        },
        methods: {
            initData(data) {
                this.banner = data.crmImage
                this.supplierList = data.qualitySupplierList.slice(0, 12)
            },
            BannerNavigateTo(linkType, linkId, linkHref, keyword) { //跳转
                this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
            },
            NavToDetailPage(item) { //跳转
                this.$api.navigateTo(`/pages/supplier/user/my-shop?shopId=${item.linkParam.id}`)
            },
            handleMoreShop() {
            	this.$api.navigateTo('/pages/goods/goods-shop-list')
            },
        }
    }
</script>

<style lang="scss">
    .supplier-content {
        background-color: #F7F7F7;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 0 24rpx;
    }

    .tui-group-name {
        width: 100%;
        height: 92rpx;
        padding: 20rpx 0;
    }

    .tui-group-title {
    	width: 100%;
    	float: left;
    	.tui-group-l {
    		float: left;
    		font-size: 34rpx;
    		font-weight: bold;
    		text-align: left;
    		line-height: 49rpx;
    		color: #333;
    	}
    	.tui-group-r {
    		float: right;
    		font-size: $font-size-24;
    		text-align: right;
    		line-height: 49rpx;
    		color: #999999;
    		.icon-xiayibu {
    			font-size: $font-size-30;
    			color: #999999;
    		}
    	}
    }

    .tui-sub__desc {
        width: 100%;
        float: left;
        color: rgba(153, 153, 153, 0.9);
        font-size: $font-size-26;
    }

    .supplier-banner {
        width: 100%;
        height: 240rpx;
        float: left;
        margin-top: 24rpx;
        border-radius: 16rpx;
        overflow: hidden;
        image {
            width: 100%;
            height: 240rpx;
            display: block;
        }
    }

    .swiper-goods-box {
        width: 100%;
        height: auto;
        float: left;
        margin-top: 24rpx;

        .goods-box-item {
            width: 160rpx;
            height: 200rpx;
            float: left;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            background-color: #FFFFFF;

            &:nth-child(4n) {
                margin-right: 0;
            }

            .box-item-image {
                width: 160rpx;
                height: 160rpx;
                display: block;
                float: left;
            }

            .box-item-mask {
                width: 100%;
                height: 40rpx;
                line-height: 40rpx;
                font-size: $font-size-20;
                text-align: center;
                color: #666666;
                background-color: #f9f9f9;
                float: left;
                box-sizing: border-box;
                padding: 0 20rpx;
                white-space: normal;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
            }
        }
    }
</style>