ccy_DIB/pages/DigitalIntelligenceDashboard/components/SupplierListBox.vue

<template>
    <view class="supplier-list-box">
        <view class="section-header">
            <text class="section-title">供应商列表</text>
        </view>


        <!-- 供应商统计信息 -->
        <view class="supplier-message-box">
            <!-- 第一行：经销商、品牌方 -->
            <view class="supplier-message-box-top">
                <view class="supplier-message-box-top-item">
                    <view class="supplier-message-box-top-item-label">电商及工会福利/家</view>
                    <!-- <view class="supplier-message-box-top-item-value" style="color: #56BCE6;">{{ supplierObj.dealer ||
                        0 }}</view> -->
                    <view class="supplier-message-box-top-item-value" style="color: #56BCE6;">14</view>
                </view>
                <view class="supplier-message-box-top-item">
                    <view class="supplier-message-box-top-item-label">绿色云品品牌厂家/家</view>
                    <!-- <view class="supplier-message-box-top-item-value" style="color: #ef5a0d;">{{ supplierObj.brandSide
                        || 0 }}</view> -->
                    <view class="supplier-message-box-top-item-value" style="color: #ef5a0d;">14</view>
                </view>
            </view>

            <!-- 第二行：自有品牌水、零售批发类 -->
            <view class="supplier-message-box-top" style="margin-top: 20rpx;">
                <view class="supplier-message-box-top-item">
                    <view class="supplier-message-box-top-item-label">自有水品牌厂家/家</view>
                    <!-- <view class="supplier-message-box-top-item-value" style="color: #56BCE6;">{{
                        supplierObj.privateLabelWater || 0 }}</view> -->
                    <view class="supplier-message-box-top-item-value" style="color: #56BCE6;">2</view>
                </view>
                <view class="supplier-message-box-top-item">
                    <view class="supplier-message-box-top-item-label">快消品零售批发/家</view>
                    <!-- <view class="supplier-message-box-top-item-value" style="color: #ef5a0d;">{{
                        supplierObj.retailAndWholesale || 0 }}</view> -->
                    <view class="supplier-message-box-top-item-value" style="color: #ef5a0d;">28</view>
                </view>
            </view>
        </view>

        <!-- 供应商列表 -->
        <view class="supplier-list-content" v-if="isLoading">
            <!-- 供应商列表加载效果 -->
            <ChartLoading text="数据加载中..." />

        </view>
        <view class="supplier-list-content" v-if="!isLoading && supplierList && supplierList.length > 0">
            <!-- 供应商列表内容 -->
            <view>
                <view class="supplier-list-item" v-for="(item, index) in supplierList" :key="index">
                    <view class="supplier-list-right">
                        <view class="supplier-list-namebox">
                            <image class="supplier-list-icon" :src="supplierIcon" mode="aspectFit" />
                            <view class="supplier-list-name">{{ item.SupplierName || '' }}</view>
                        </view>

                        <view class="supplier-list-content2">
                            <text class="shop-value">{{ item.VarietyCount }}</text>
                            <text class="shop-unit">种</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>


    </view>
</template>

<script>
import ChartLoading from './ChartLoading.vue'
import request from "@/util/index.js";
import moment from 'moment'

export default {
    components: {
        ChartLoading
    },

    data() {
        return {
            isLoading: false,
            // 供应商列表
            supplierList: [],

            // 供应商统计数据对象
            supplierObj: {},

            // 供应商图标
            supplierIcon: 'https://eshangtech.com/cyy_DIB/supplierIcon.png'
        }
    },
    props: {
        selectTime: {
            type: String,
            default: ""
        },
    },
    computed: {
        // 检查是否有供应商列表数据
        hasSupplierListData() {
            return this.supplierList && this.supplierList.length > 0;
        }
    },

    onReady() {
        this.handleGetData()
    },

    methods: {
        // 获取供应商数据
        async handleGetData() {
            this.isLoading = true
            // 获取供应商列表数据
            await this.getSupplierListData()

            // 获取供应商类型统计数据
            await this.getSupplierTypeData()
            this.isLoading = false
        },

        // 获取供应商列表数据
        async getSupplierListData() {
            const req = {
                ProvinceCode: "530000",
                type: 'encryption',
                StatisticsMonth: "202505",
            }

            // 这里使用模拟数据，实际应该调用真实的API
            const data = await request.$posPost(
                "CommercialApi/SupplyChain/GetSupplierList",
                req
            );

            this.supplierList = data.Result_Data.List.slice(0, 5) // 只取前11个

        },

        // 获取供应商类型统计数据
        async getSupplierTypeData() {
            const req = {
                ProvinceCode: "530000",
                type: 'encryption',
            }

            // 这里使用模拟数据，实际应该调用真实的API
            const data = await request.$posPost(
                "CommercialApi/SupplyChain/GetSupplierTypeList",
                req
            );
            let list = data.Result_Data.List
            let obj = {}
            if (list && list.length > 0) {
                list.forEach((item) => {
                    if (item.SupplierType_Name === "经销商") {
                        obj.dealer = item.Supplier_count
                    } else if (item.SupplierType_Name === "品牌方") {
                        obj.brandSide = item.Supplier_count
                    } else if (item.SupplierType_Name === "自有品牌水") {
                        obj.privateLabelWater = item.Supplier_count
                    } else if (item.SupplierType_Name === "零售批发类") {
                        obj.retailAndWholesale = item.Supplier_count
                    }
                })
            }


            this.supplierObj = obj

        },

        // 更新数据
        async handleUpdateData() {
            await this.handleGetData()
        }
    }
}
</script>

<style scoped lang="less">
@text-primary: #333;
@text-secondary: #666;
@bg-white: #ffffff;

.supplier-list-box {
    width: 100%;
    margin-top: 24rpx;

    .section-header {
        margin-bottom: 24rpx;

        .section-title {
            font-size: 30rpx;
            font-weight: 600;
            color: @text-primary;
        }
    }

    .supplier-message-box {
        background: #fff;
        border-radius: 16rpx;
        padding: 24rpx;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        margin-bottom: 24rpx;

        .supplier-message-box-top {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24rpx;
            margin-bottom: 20rpx;

            &:last-child {
                margin-bottom: 0;
            }

            .supplier-message-box-top-item {
                flex: 1;
                background: #fff;
                border-radius: 16rpx;
                text-align: center;

                .supplier-message-box-top-item-label {
                    font-size: 24rpx;
                    color: @text-secondary;
                    margin-bottom: 8rpx;
                }

                .supplier-message-box-top-item-value {
                    font-size: 28rpx;
                    font-weight: 600;
                    color: @text-primary;
                    display: block;
                }
            }
        }
    }

    .supplier-list-content {
        background: #fff;
        border-radius: 16rpx;
        padding: 24rpx;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        min-height: 300rpx;
        /* 设置最小高度以显示加载效果 */

        .supplier-list-item {
            width: 100%;
            box-sizing: border-box;
            padding: 24rpx;
            border-radius: 12rpx;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            margin-bottom: 20rpx;
            display: flex;
            align-items: center;

            &:last-child {
                margin-bottom: 0;
            }

            .supplier-list-right {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .supplier-list-namebox {
                    width: 60%;
                    display: flex;
                    align-items: center;

                    .supplier-list-icon {
                        width: 34rpx;
                        height: 28rpx;
                        margin-right: 14rpx;
                    }

                    .supplier-list-name {
                        width: calc(100% - 48rpx);
                        font-size: 24rpx;
                        font-weight: 600;
                        color: @text-primary;
                        text-align: left;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                }

                .supplier-list-content2 {
                    .shop-value {
                        font-size: 24rpx;
                        font-weight: 600;
                        color: #1890FF;
                        margin-right: 8rpx;
                    }

                    .shop-unit {
                        font-size: 24rpx;
                        color: @text-secondary;
                    }
                }
            }
        }
    }
}
</style>