|
@@ -139,19 +139,19 @@
|
|
|
<!-- Quick Stats -->
|
|
<!-- Quick Stats -->
|
|
|
<div class="detail-stats">
|
|
<div class="detail-stats">
|
|
|
<div class="detail-stat-card">
|
|
<div class="detail-stat-card">
|
|
|
- <div class="detail-stat-value" :class="getScoreClass('88')">88</div>
|
|
|
|
|
|
|
+ <div class="detail-stat-value" :class="getScoreClass(selectedCustomer?.customerAnalysisResult?.potentialScore ?? 0)">{{selectedCustomer?.customerAnalysisResult?.potentialScore ?? 0}}</div>
|
|
|
<div class="detail-stat-label">意向分</div>
|
|
<div class="detail-stat-label">意向分</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="detail-stat-card">
|
|
<div class="detail-stat-card">
|
|
|
- <div class="detail-stat-value">0</div>
|
|
|
|
|
|
|
+ <div class="detail-stat-value">{{ selectedCustomer.totalOrderCount }}</div>
|
|
|
<div class="detail-stat-label">累计订单</div>
|
|
<div class="detail-stat-label">累计订单</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="detail-stat-card">
|
|
<div class="detail-stat-card">
|
|
|
- <div class="detail-stat-value success">¥{{ formatNumber(0) }}</div>
|
|
|
|
|
|
|
+ <div class="detail-stat-value success">¥{{ formatNumber(selectedCustomer.totalOrderAmount) }}</div>
|
|
|
<div class="detail-stat-label">累计金额</div>
|
|
<div class="detail-stat-label">累计金额</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="detail-stat-card">
|
|
<div class="detail-stat-card">
|
|
|
- <div class="detail-stat-value">三天前</div>
|
|
|
|
|
|
|
+ <div class="detail-stat-value">{{selectedCustomer.lastContactDays}}天前</div>
|
|
|
<div class="detail-stat-label">最后联系</div>
|
|
<div class="detail-stat-label">最后联系</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -193,16 +193,16 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- AI Insights -->
|
|
<!-- AI Insights -->
|
|
|
- <div class="detail-section">
|
|
|
|
|
|
|
+ <div class="detail-section" >
|
|
|
<h4><i class="fas fa-robot"></i> AI 洞察</h4>
|
|
<h4><i class="fas fa-robot"></i> AI 洞察</h4>
|
|
|
- <div class="ai-insight-cards" v-if="selectedCustomer.aiInsights">
|
|
|
|
|
- <div class="ai-insight-card" v-for="insight in selectedCustomer.aiInsights" :key="insight.type">
|
|
|
|
|
- <div class="insight-icon" :class="insight.level">
|
|
|
|
|
|
|
+ <div class="ai-insight-cards" v-if="selectedCustomer.customerAnalysisResult?.reasonSummary">
|
|
|
|
|
+ <div class="ai-insight-card">
|
|
|
|
|
+ <!-- <div class="insight-icon" :class="insight.level">
|
|
|
<i :class="insight.icon"></i>
|
|
<i :class="insight.icon"></i>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </div> -->
|
|
|
<div class="insight-content">
|
|
<div class="insight-content">
|
|
|
- <div class="insight-title">{{ insight.title }}</div>
|
|
|
|
|
- <div class="insight-desc">{{ insight.description }}</div>
|
|
|
|
|
|
|
+ <div class="insight-title">{{ selectedCustomer.customerAnalysisResult?.reasonSummary }}</div>
|
|
|
|
|
+ <!-- <div class="insight-desc">{{ insight.description }}</div> -->
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -211,15 +211,15 @@
|
|
|
<!-- Interaction Timeline -->
|
|
<!-- Interaction Timeline -->
|
|
|
<div class="detail-section">
|
|
<div class="detail-section">
|
|
|
<h4><i class="fas fa-history"></i> 互动记录</h4>
|
|
<h4><i class="fas fa-history"></i> 互动记录</h4>
|
|
|
- <div class="timeline" v-if="selectedCustomer.interactions">
|
|
|
|
|
- <div class="timeline-item" v-for="record in selectedCustomer.interactions" :key="record.id">
|
|
|
|
|
|
|
+ <div class="timeline" v-if="selectedCustomer.interactionRecordList">
|
|
|
|
|
+ <div class="timeline-item" v-for="record in selectedCustomer.interactionRecordList" :key="record.id">
|
|
|
<div class="timeline-dot" :class="record.type"></div>
|
|
<div class="timeline-dot" :class="record.type"></div>
|
|
|
<div class="timeline-content">
|
|
<div class="timeline-content">
|
|
|
<div class="timeline-header">
|
|
<div class="timeline-header">
|
|
|
- <span class="timeline-action">{{ record.action }}</span>
|
|
|
|
|
- <span class="timeline-time">{{ record.time }}</span>
|
|
|
|
|
|
|
+ <span class="timeline-action">{{ record.subject }}</span>
|
|
|
|
|
+ <span class="timeline-time">{{ record.createTime }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="timeline-detail">{{ record.detail }}</div>
|
|
|
|
|
|
|
+ <div class="timeline-detail">{{ record.firstReplyTheme }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -261,7 +261,7 @@
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import { ref, computed } from 'vue'
|
|
import { ref, computed } from 'vue'
|
|
|
-import { getCustomerList } from '../api/customer'
|
|
|
|
|
|
|
+import { getCustomerList,getCustomerDetail } from '../api/customer'
|
|
|
import {region} from '@/utils/region';
|
|
import {region} from '@/utils/region';
|
|
|
// 引入添加客户组件
|
|
// 引入添加客户组件
|
|
|
import AddCustomerModal from '../components/addCustomer.vue'
|
|
import AddCustomerModal from '../components/addCustomer.vue'
|
|
@@ -327,10 +327,11 @@ const getRegion = (value) => {
|
|
|
getCustomer()
|
|
getCustomer()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-const goOtherProject = () => {
|
|
|
|
|
|
|
+const goOtherProject = (data) => {
|
|
|
|
|
+ console.log(data)
|
|
|
const baseUrl = 'https://sales.test.storlead.com/customer/followPanel' // 销售管理系统
|
|
const baseUrl = 'https://sales.test.storlead.com/customer/followPanel' // 销售管理系统
|
|
|
const params = {
|
|
const params = {
|
|
|
- id: 4525,
|
|
|
|
|
|
|
+ id: data.id,
|
|
|
resourceType: 10,
|
|
resourceType: 10,
|
|
|
customerForm: 10,
|
|
customerForm: 10,
|
|
|
queryRangeType: 0,
|
|
queryRangeType: 0,
|
|
@@ -344,7 +345,6 @@ const goOtherProject = () => {
|
|
|
window.open(jumpUrl, '_blank')
|
|
window.open(jumpUrl, '_blank')
|
|
|
// 当前窗口打开:window.location.href = jumpUrl
|
|
// 当前窗口打开:window.location.href = jumpUrl
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
// const customers = ref([
|
|
// const customers = ref([
|
|
|
// {
|
|
// {
|
|
|
// id: 1, flag: '🇸🇦', name: 'Riyadh Tech Distribution', status: 'prospect', contact: 'Ahmed Al-Rashid',
|
|
// id: 1, flag: '🇸🇦', name: 'Riyadh Tech Distribution', status: 'prospect', contact: 'Ahmed Al-Rashid',
|
|
@@ -451,8 +451,15 @@ const getStatusLabel = (status) => ({
|
|
|
}[status] || status)
|
|
}[status] || status)
|
|
|
|
|
|
|
|
const showCustomerDetail = (customer) => {
|
|
const showCustomerDetail = (customer) => {
|
|
|
- selectedCustomer.value = customer
|
|
|
|
|
- showDetailModal.value = true
|
|
|
|
|
|
|
+ getCustomerDetail({id:customer.id}).then(res => {
|
|
|
|
|
+ console.log(res)
|
|
|
|
|
+ if(res.success){
|
|
|
|
|
+ selectedCustomer.value = res.result
|
|
|
|
|
+ showDetailModal.value = true
|
|
|
|
|
+ }else{
|
|
|
|
|
+ ElMessage.warning(res.message)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const sendEmail = (customer) => {
|
|
const sendEmail = (customer) => {
|
|
@@ -612,7 +619,7 @@ const handleAddCustomer = (customerData) => {
|
|
|
.insight-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
|
|
.insight-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
|
|
|
.insight-icon.high { background: rgba(16, 185, 129, 0.2); color: var(--success); }
|
|
.insight-icon.high { background: rgba(16, 185, 129, 0.2); color: var(--success); }
|
|
|
.insight-icon.medium { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
|
|
.insight-icon.medium { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
|
|
|
-.insight-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
|
|
|
|
|
|
|
+.insight-title { font-size: 13px; margin-bottom: 4px; }
|
|
|
.insight-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
|
|
.insight-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
|
|
|
.timeline { display: flex; flex-direction: column; gap: 12px; position: relative; padding-left: 24px; }
|
|
.timeline { display: flex; flex-direction: column; gap: 12px; position: relative; padding-left: 24px; }
|
|
|
.timeline::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--border); }
|
|
.timeline::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--border); }
|