300 lines
9.4 KiB
Vue
300 lines
9.4 KiB
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>
|
||
<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>
|
||
</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>
|
||
<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>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 供应商列表 -->
|
||
<view class="supplier-list-content">
|
||
<!-- 供应商列表加载效果 -->
|
||
<ChartLoading v-if="!hasSupplierListData" text="数据加载中..." />
|
||
<!-- 供应商列表内容 -->
|
||
<view v-else>
|
||
<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 {
|
||
// 供应商列表
|
||
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() {
|
||
// 获取供应商列表数据
|
||
await this.getSupplierListData()
|
||
|
||
// 获取供应商类型统计数据
|
||
await this.getSupplierTypeData()
|
||
},
|
||
|
||
// 获取供应商列表数据
|
||
async getSupplierListData() {
|
||
const req = {
|
||
ProvinceCode: "530000",
|
||
type: 'encryption',
|
||
StatisticsMonth: this.selectTime ? moment(this.selectTime).format('YYYYMM') : "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> |