|
|
@@ -36,7 +36,7 @@
|
|
|
<div style="display: flex; gap: 16px; margin-bottom: 20px;">
|
|
|
<div class="search-box" style="flex: 1;">
|
|
|
<i class="fas fa-search search-icon"></i>
|
|
|
- <input type="text" v-model="searchQuery" class="search-input" placeholder="搜索公司名称、联系人、邮箱...">
|
|
|
+ <input type="text" v-model="searchQuery" class="search-input" placeholder="搜索公司名称、联系人、邮箱..." @input="getCustomer">
|
|
|
</div>
|
|
|
<div style="display: flex; gap: 8px;">
|
|
|
<select v-model="regionFilter" class="form-select" style="width: auto; padding: 8px 16px;">
|
|
|
@@ -81,24 +81,25 @@
|
|
|
<div class="customer-flag">{{ customer.flag }}</div>
|
|
|
<div class="customer-info">
|
|
|
<div class="customer-header">
|
|
|
- <span class="customer-name">{{ customer.name }}</span>
|
|
|
- <span class="customer-status" :style="{ background: getStatusBg(customer.status), color: getStatusColor(customer.status) }">
|
|
|
+ <span class="customer-name">{{ customer.customerName }}</span>
|
|
|
+ <!-- 客户类型标识 -->
|
|
|
+ <!-- <span class="customer-status" :style="{ background: getStatusBg(customer.status), color: getStatusColor(customer.status) }">
|
|
|
{{ getStatusLabel(customer.status) }}
|
|
|
- </span>
|
|
|
+ </span> -->
|
|
|
</div>
|
|
|
<div class="customer-contact">
|
|
|
- <i class="fas fa-user"></i> {{ customer.contact }} · {{ customer.role }}
|
|
|
+ <i class="fas fa-user"></i> {{ customer.liaison.name }}<span v-if="customer.liaison.departmentPosition"> · </span>{{ customer.liaison.departmentPosition }}
|
|
|
</div>
|
|
|
<div class="customer-meta">
|
|
|
- <span><i class="fas fa-map-marker-alt"></i> {{ customer.location }}</span>
|
|
|
- <span><i class="fas fa-industry"></i> {{ customer.industry }}</span>
|
|
|
- <span><i class="fas fa-dollar-sign"></i> {{ customer.annualPurchase }}</span>
|
|
|
+ <span><i class="fas fa-map-marker-alt"></i> {{ customer.continent }} · {{ customer.country }}</span>
|
|
|
+ <span><i class="fas fa-industry"></i> {{ customer.customerCompany.industry }}</span>
|
|
|
+ <!-- <span><i class="fas fa-dollar-sign"></i> {{ customer.annualPurchase }}</span> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="customer-score">
|
|
|
+ <!-- <div class="customer-score">
|
|
|
<div class="score-circle" :class="getScoreClass(customer.score)">{{ customer.score }}</div>
|
|
|
<div class="score-label">意向分</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="customer-actions" @click.stop>
|
|
|
<button class="btn btn-secondary btn-sm" @click="showCustomerDetail(customer)"><i class="fas fa-eye"></i>更多详情</button>
|
|
|
</div>
|
|
|
@@ -266,89 +267,100 @@ const showToast = ref(false)
|
|
|
const toastMessage = ref('')
|
|
|
const toastType = ref('success')
|
|
|
|
|
|
-const customerStats = {
|
|
|
- total: 1247,
|
|
|
- prospect: 812,
|
|
|
- intent: 224,
|
|
|
- deal: 156,
|
|
|
- silent: 55
|
|
|
-}
|
|
|
-
|
|
|
-const tabs = [
|
|
|
- { key: 'all', label: '全部客户', count: 1247 },
|
|
|
- { key: 'prospect', label: '潜在客户', count: 812 },
|
|
|
- { key: 'intent', label: '意向客户', count: 224 },
|
|
|
- { key: 'deal', label: '成交客户', count: 156 },
|
|
|
- { key: 'silent', label: '沉默客户', count: 55 }
|
|
|
-]
|
|
|
-
|
|
|
-getCustomerList().then(res => {
|
|
|
- console.log('res :>》》》> ', res);
|
|
|
+const customerStats = ref({
|
|
|
+ total: 0,
|
|
|
+ prospect: 0,
|
|
|
+ intent: 0,
|
|
|
+ deal: 0,
|
|
|
+ silent: 0
|
|
|
})
|
|
|
|
|
|
-const customers = ref([
|
|
|
- {
|
|
|
- id: 1, flag: '🇸🇦', name: 'Riyadh Tech Distribution', status: 'prospect', contact: 'Ahmed Al-Rashid',
|
|
|
- role: '采购总监', location: '沙特·利雅得', industry: '固态硬盘进口商', annualPurchase: '年采购$2M+', score: 92,
|
|
|
- email: 'ahmed@riyahtech.sa', phone: '+966 50 123 4567', website: 'www.riyahtech.sa',
|
|
|
- totalDeals: 3, totalAmount: 4560000, lastContact: '3天前',
|
|
|
- aiInsights: [
|
|
|
- { type: 'purchase', level: 'high', icon: 'fas fa-shopping-cart', title: '采购意愿强烈', description: '近30天内访问官网5次，下载产品手册，建议重点跟进' },
|
|
|
- { type: 'timing', level: 'medium', icon: 'fas fa-clock', title: '最佳联系时间', description: '根据历史数据分析，周二上午10点联系成功率最高' },
|
|
|
- { type: 'decision', level: 'high', icon: 'fas fa-user-tie', title: '决策人已识别', description: 'Ahmed Al-Rashid 为采购决策人，已验证邮箱有效性' }
|
|
|
- ],
|
|
|
- interactions: [
|
|
|
- { id: 1, type: 'email', action: '发送报价单', detail: 'SSD采购报价已发送，等待回复', time: '3天前' },
|
|
|
- { id: 2, type: 'visit', action: '官网访问', detail: '浏览了企业级SSD产品页面，停留8分钟', time: '5天前' },
|
|
|
- { id: 3, type: 'call', action: '电话沟通', detail: '确认了采购需求，数量约5000片', time: '1周前' },
|
|
|
- { id: 4, type: 'email', action: '首次联系', detail: '通过LinkedIn找到联系人，发送介绍邮件', time: '2周前' }
|
|
|
- ],
|
|
|
- opportunities: [
|
|
|
- { id: 1, name: 'SSD批量采购', amount: 850000, stage: '谈判中', statusClass: 'negotiation', statusLabel: '跟进中' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2, flag: '🇦🇪', name: 'Dubai Storage Solutions', status: 'prospect', contact: 'Mohammed Khan',
|
|
|
- role: 'CEO', location: '阿联酋·迪拜', industry: '电子分销商', annualPurchase: '年采购$1.5M', score: 88,
|
|
|
- email: 'mohammed@dubaistorage.ae', phone: '+971 50 987 6543', website: 'www.dubaistorage.ae',
|
|
|
- totalDeals: 2, totalAmount: 2800000, lastContact: '1天前',
|
|
|
- aiInsights: [
|
|
|
- { type: 'purchase', level: 'medium', icon: 'fas fa-chart-line', title: '采购潜力', description: '公司规模扩张中，预计明年需求增长30%' }
|
|
|
- ],
|
|
|
- interactions: [
|
|
|
- { id: 1, type: 'meeting', action: '视频会议', detail: '讨论Q2采购计划，对NVMe SSD感兴趣', time: '1天前' }
|
|
|
- ],
|
|
|
- opportunities: []
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3, flag: '🇰🇼', name: 'Kuwait Data Systems', status: 'intent', contact: 'Faisal Al-Mutairi',
|
|
|
- role: 'IT总监', location: '科威特', industry: '数据中心集成商', annualPurchase: '年采购$2.5M', score: 85,
|
|
|
- email: 'faisal@kwdata.kw', phone: '+965 99 888 777', website: 'www.kwdata.kw',
|
|
|
- totalDeals: 5, totalAmount: 6800000, lastContact: '今天',
|
|
|
- aiInsights: [
|
|
|
- { type: 'timing', level: 'high', icon: 'fas fa-fire', title: '紧急需求', description: '数据中心扩容项目急需采购，建议立即跟进' }
|
|
|
- ],
|
|
|
- interactions: [
|
|
|
- { id: 1, type: 'email', action: '回复询价', detail: '确认了技术规格，要求提供样品', time: '今天' }
|
|
|
- ],
|
|
|
- opportunities: [
|
|
|
- { id: 1, name: '数据中心扩容项目', amount: 1200000, stage: '方案报价', statusClass: 'proposal', statusLabel: '待报价' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4, flag: '🇩🇪', name: 'Berlin Tech GmbH', status: 'deal', contact: 'Hans Mueller',
|
|
|
- role: '采购经理', location: '德国·柏林', industry: '企业级存储', annualPurchase: '年采购$3M+', score: 95,
|
|
|
- email: 'hans@berlintech.de', phone: '+49 30 12345678', website: 'www.berlintech.de',
|
|
|
- totalDeals: 8, totalAmount: 12500000, lastContact: '2天前',
|
|
|
- aiInsights: [],
|
|
|
- interactions: [
|
|
|
- { id: 1, type: 'order', action: '订单确认', detail: 'PO-2026-0315 已确认，金额¥680,000', time: '2天前' }
|
|
|
- ],
|
|
|
- opportunities: [
|
|
|
- { id: 1, name: 'NVMe SSD批量采购', amount: 680000, stage: '已成交', statusClass: 'won', statusLabel: '已成交' }
|
|
|
- ]
|
|
|
- }
|
|
|
+const tabs = ref([
|
|
|
+ { key: 'all', label: '全部客户', count: 0 },
|
|
|
+ // { key: 'prospect', label: '潜在客户', count: 812 },
|
|
|
+ // { key: 'intent', label: '意向客户', count: 224 },
|
|
|
+ // { key: 'deal', label: '成交客户', count: 156 },
|
|
|
+ // { key: 'silent', label: '沉默客户', count: 55 }
|
|
|
])
|
|
|
+const customers = ref([])
|
|
|
+const params = ref({
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ blurry:null,
|
|
|
+})
|
|
|
+const getCustomer = () => {
|
|
|
+ params.value.blurry = searchQuery.value
|
|
|
+ getCustomerList(params.value).then(res => {
|
|
|
+ customerStats.value.total = tabs.value[0].count = res.result.total
|
|
|
+ customers.value = res.result.records
|
|
|
+ })
|
|
|
+}
|
|
|
+getCustomer()
|
|
|
+
|
|
|
+
|
|
|
+// const customers = ref([
|
|
|
+// {
|
|
|
+// id: 1, flag: '🇸🇦', name: 'Riyadh Tech Distribution', status: 'prospect', contact: 'Ahmed Al-Rashid',
|
|
|
+// role: '采购总监', location: '沙特·利雅得', industry: '固态硬盘进口商', annualPurchase: '年采购$2M+', score: 92,
|
|
|
+// email: 'ahmed@riyahtech.sa', phone: '+966 50 123 4567', website: 'www.riyahtech.sa',
|
|
|
+// totalDeals: 3, totalAmount: 4560000, lastContact: '3天前',
|
|
|
+// aiInsights: [
|
|
|
+// { type: 'purchase', level: 'high', icon: 'fas fa-shopping-cart', title: '采购意愿强烈', description: '近30天内访问官网5次，下载产品手册，建议重点跟进' },
|
|
|
+// { type: 'timing', level: 'medium', icon: 'fas fa-clock', title: '最佳联系时间', description: '根据历史数据分析，周二上午10点联系成功率最高' },
|
|
|
+// { type: 'decision', level: 'high', icon: 'fas fa-user-tie', title: '决策人已识别', description: 'Ahmed Al-Rashid 为采购决策人，已验证邮箱有效性' }
|
|
|
+// ],
|
|
|
+// interactions: [
|
|
|
+// { id: 1, type: 'email', action: '发送报价单', detail: 'SSD采购报价已发送，等待回复', time: '3天前' },
|
|
|
+// { id: 2, type: 'visit', action: '官网访问', detail: '浏览了企业级SSD产品页面，停留8分钟', time: '5天前' },
|
|
|
+// { id: 3, type: 'call', action: '电话沟通', detail: '确认了采购需求，数量约5000片', time: '1周前' },
|
|
|
+// { id: 4, type: 'email', action: '首次联系', detail: '通过LinkedIn找到联系人，发送介绍邮件', time: '2周前' }
|
|
|
+// ],
|
|
|
+// opportunities: [
|
|
|
+// { id: 1, name: 'SSD批量采购', amount: 850000, stage: '谈判中', statusClass: 'negotiation', statusLabel: '跟进中' }
|
|
|
+// ]
|
|
|
+// },
|
|
|
+// {
|
|
|
+// id: 2, flag: '🇦🇪', name: 'Dubai Storage Solutions', status: 'prospect', contact: 'Mohammed Khan',
|
|
|
+// role: 'CEO', location: '阿联酋·迪拜', industry: '电子分销商', annualPurchase: '年采购$1.5M', score: 88,
|
|
|
+// email: 'mohammed@dubaistorage.ae', phone: '+971 50 987 6543', website: 'www.dubaistorage.ae',
|
|
|
+// totalDeals: 2, totalAmount: 2800000, lastContact: '1天前',
|
|
|
+// aiInsights: [
|
|
|
+// { type: 'purchase', level: 'medium', icon: 'fas fa-chart-line', title: '采购潜力', description: '公司规模扩张中，预计明年需求增长30%' }
|
|
|
+// ],
|
|
|
+// interactions: [
|
|
|
+// { id: 1, type: 'meeting', action: '视频会议', detail: '讨论Q2采购计划，对NVMe SSD感兴趣', time: '1天前' }
|
|
|
+// ],
|
|
|
+// opportunities: []
|
|
|
+// },
|
|
|
+// {
|
|
|
+// id: 3, flag: '🇰🇼', name: 'Kuwait Data Systems', status: 'intent', contact: 'Faisal Al-Mutairi',
|
|
|
+// role: 'IT总监', location: '科威特', industry: '数据中心集成商', annualPurchase: '年采购$2.5M', score: 85,
|
|
|
+// email: 'faisal@kwdata.kw', phone: '+965 99 888 777', website: 'www.kwdata.kw',
|
|
|
+// totalDeals: 5, totalAmount: 6800000, lastContact: '今天',
|
|
|
+// aiInsights: [
|
|
|
+// { type: 'timing', level: 'high', icon: 'fas fa-fire', title: '紧急需求', description: '数据中心扩容项目急需采购，建议立即跟进' }
|
|
|
+// ],
|
|
|
+// interactions: [
|
|
|
+// { id: 1, type: 'email', action: '回复询价', detail: '确认了技术规格，要求提供样品', time: '今天' }
|
|
|
+// ],
|
|
|
+// opportunities: [
|
|
|
+// { id: 1, name: '数据中心扩容项目', amount: 1200000, stage: '方案报价', statusClass: 'proposal', statusLabel: '待报价' }
|
|
|
+// ]
|
|
|
+// },
|
|
|
+// {
|
|
|
+// id: 4, flag: '🇩🇪', name: 'Berlin Tech GmbH', status: 'deal', contact: 'Hans Mueller',
|
|
|
+// role: '采购经理', location: '德国·柏林', industry: '企业级存储', annualPurchase: '年采购$3M+', score: 95,
|
|
|
+// email: 'hans@berlintech.de', phone: '+49 30 12345678', website: 'www.berlintech.de',
|
|
|
+// totalDeals: 8, totalAmount: 12500000, lastContact: '2天前',
|
|
|
+// aiInsights: [],
|
|
|
+// interactions: [
|
|
|
+// { id: 1, type: 'order', action: '订单确认', detail: 'PO-2026-0315 已确认，金额¥680,000', time: '2天前' }
|
|
|
+// ],
|
|
|
+// opportunities: [
|
|
|
+// { id: 1, name: 'NVMe SSD批量采购', amount: 680000, stage: '已成交', statusClass: 'won', statusLabel: '已成交' }
|
|
|
+// ]
|
|
|
+// }
|
|
|
+// ])
|
|
|
|
|
|
const filteredCustomers = computed(() => {
|
|
|
let result = customers.value
|
