YNMap/src/page/index/components/supplierListBox/supplierListBox.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import './supplierListBox.less'
import shopIcon from '../../../../assets/image/shopIcon.png'
import { handleGetSupplierList, handleGetSupplierListChain, handleGetSupplierTypeList } from '../../service';
import supplierIcon from '../../../../assets/image/supplierIcon.png'

// 供应商列表
let supplierList = ref<any>([])
// 供应商对象
let supplierObj = ref<any>()


onMounted(async () => {
    await handleGetData()
})


// 拿到数据的方法
const handleGetData = async () => {
    const req: any = {
        ProvinceCode: "530000",
        StatisticsMonth: "202505"
    }
    // const data = await handleGetSupplierListChain(req)

    let supplierListBox = sessionStorage.getItem('supplierListBox')
    let data: any = []
    if (supplierListBox) {
        data = JSON.parse(supplierListBox)
    } else {
        data = await handleGetSupplierListChain(req)
        sessionStorage.setItem("supplierListBox", JSON.stringify(data))
    }


    console.log('handleGetSupplierListChainhandleGetSupplierListChain', data);

    supplierList.value = data.slice(0, 11)


    const req2: any = {
        ProvinceCode: "530000",
    }

    let supplierListBox2 = sessionStorage.getItem('supplierListBox2')
    let data2: any = []
    if (supplierListBox2) {
        data2 = JSON.parse(supplierListBox2)
    } else {
        data2 = await handleGetSupplierTypeList(req2)
        sessionStorage.setItem("supplierListBox2", JSON.stringify(data2))
    }

    console.log('data2data2data2data2', data2);

    let obj: any = {}
    if (data2 && data2.length > 0) {
        data2.forEach((item: any) => {
            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
            }
        })
    }
    supplierObj.value = obj
}


defineExpose({
    handleGetData
});
</script>

<template>
    <div class="supplierListBox">
        <div class="supplierMessageBox" style="margin-top: 10px;">
            <div class="supplierMessageBoxTop">
                <div class="supplierMessageBoxTopItem">
                    <div class="supplierMessageBoxTopItemLabel">供应商/家</div>
                    <!-- <div class="supplierMessageBoxTopItemvalue" style="color: #56BCE6;">{{ supplierObj?.dealer || "0" }} -->
                    <div class="supplierMessageBoxTopItemvalue" style="color: #56BCE6;">14</div>
                </div>
                <div class="supplierMessageBoxTopItem">
                    <div class="supplierMessageBoxTopItemLabel">品牌方/家</div>
                    <!-- <div class="supplierMessageBoxTopItemvalue" style="color: #ef5a0d;">{{ supplierObj?.brandSide || "0"
                    }}
                    </div> -->
                    <div class="supplierMessageBoxTopItemvalue" style="color: #ef5a0d;">14</div>
                </div>
            </div>

            <div class="supplierMessageBoxTop" style="margin-top: 10px;">
                <div class="supplierMessageBoxTopItem">
                    <div class="supplierMessageBoxTopItemLabel">自有品牌水/家</div>
                    <!-- <div class="supplierMessageBoxTopItemvalue" style="color: #56BCE6;">{{
                        supplierObj?.privateLabelWater || "0" }}
                    </div> -->
                      <div class="supplierMessageBoxTopItemvalue" style="color: #56BCE6;">2</div>
                </div>
                <div class="supplierMessageBoxTopItem">
                    <div class="supplierMessageBoxTopItemLabel">零售批发类/家</div>
                    <!-- <div class="supplierMessageBoxTopItemvalue" style="color: #ef5a0d;">{{
                        supplierObj?.retailAndWholesale || "0" }}
                    </div> -->
                     <div class="supplierMessageBoxTopItemvalue" style="color: #ef5a0d;">28</div>
                </div>
            </div>
        </div>

        <div style="margin-top: 20px;">
            <div class="supplierListItem" v-for="(item, index) in supplierList" :key="index">
                <!-- <div class="supplierListLeft">
                <img class="supplierIcon" :src="item.Icon" />
            </div> -->

                <div class="supplierListRight">
                    <div class="supplierListNamebox">
                        <img class="supplierListIcon" :src="supplierIcon" />
                        <div class="supplierListName">{{ item.SupplierName || '' }}</div>
                    </div>

                    <div class="supplierListContent">
                        <!-- <img class="shopIcon" :src="shopIcon" /> -->
                        <span class="shopValue">{{ item.VarietyCount }}</span>
                        <span class="shopUnit">种</span>

                        <!-- <span class="shopLabel">送达率</span>
                    <span class="shopValue">{{ item.DeliverRate || '-' }}</span>
                    <span class="shopUnit">%</span> -->
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>