268 lines
6.3 KiB
Vue
268 lines
6.3 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- #ifdef APP -->
|
||
<statusBar></statusBar>
|
||
<!-- #endif -->
|
||
|
||
<!-- 导航栏 -->
|
||
<uni-nav-bar
|
||
:fixed="true"
|
||
:statusBar="true"
|
||
title="AI销冠系统"
|
||
leftIcon="left"
|
||
@clickLeft="goBack"
|
||
color="#333"
|
||
backgroundColor="#FFFFFF">
|
||
</uni-nav-bar>
|
||
|
||
<view class="content">
|
||
<!-- 标签页 -->
|
||
<view class="tabs">
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: activeTab === 'service' }"
|
||
@click="switchTab('service')">
|
||
<text>服务记录</text>
|
||
</view>
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: activeTab === 'customer' }"
|
||
@click="switchTab('customer')">
|
||
<text>客户</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务记录列表 -->
|
||
<ServiceList
|
||
v-if="activeTab === 'service'"
|
||
:list="serviceList"
|
||
@itemClick="viewDetail"
|
||
@filterClick="toggleFilter" />
|
||
|
||
<!-- 客户列表 -->
|
||
<CustomerList
|
||
v-if="activeTab === 'customer'"
|
||
:list="customerList"
|
||
@itemClick="viewCustomerDetail" />
|
||
</view>
|
||
|
||
<!-- 客户档案弹窗 -->
|
||
<CustomerProfileModal
|
||
ref="customerProfileModal"
|
||
:profile="currentCustomerProfile"
|
||
@close="onCustomerProfileClose" />
|
||
|
||
<!-- 服务记录详情弹窗 -->
|
||
<ServiceDetailModal
|
||
ref="serviceDetailModal"
|
||
:serviceDetail="currentServiceDetail"
|
||
:summaryList="summaryList"
|
||
:performanceData="performanceData"
|
||
@close="onServiceDetailClose"
|
||
@viewCustomer="onViewCustomerFromService" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// #ifdef APP
|
||
import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
|
||
// #endif
|
||
import CustomerList from './components/CustomerList.vue';
|
||
import ServiceList from './components/ServiceList.vue';
|
||
import CustomerProfileModal from './components/CustomerProfileModal.vue';
|
||
import { initCustomerProfile, initSummaryList, initPerformanceData } from './utils/dataInit.js';
|
||
|
||
export default {
|
||
// #ifdef APP
|
||
components: {
|
||
statusBar
|
||
},
|
||
// #endif
|
||
components: {
|
||
CustomerList,
|
||
ServiceList,
|
||
CustomerProfileModal
|
||
},
|
||
data() {
|
||
return {
|
||
activeTab: 'customer',
|
||
showValidOnly: false,
|
||
currentServiceDetail: {
|
||
title: '',
|
||
date: '',
|
||
duration: '',
|
||
description: '',
|
||
customerName: ''
|
||
},
|
||
currentCustomerProfile: {
|
||
name: '',
|
||
intent: '',
|
||
serviceCount: 0,
|
||
lastService: '',
|
||
phone: '',
|
||
serviceStaff: '',
|
||
wechatStatus: '',
|
||
address: '',
|
||
source: '',
|
||
followStage: '',
|
||
systemTags: [],
|
||
customTags: [],
|
||
intentDescription: ''
|
||
},
|
||
summaryList: [],
|
||
performanceData: {
|
||
totalScore: 81,
|
||
categories: []
|
||
},
|
||
serviceList: [
|
||
{
|
||
title: '三多的服务记录',
|
||
date: '2025-08-17 16:01:04',
|
||
duration: '6分39秒',
|
||
description: '客户为三口之家新房装修，偏好简约现代风格，注重环保和安全，对整体搭配和交付周期敏感，预算约45000，关注活动优惠和售后服务。',
|
||
customerName: '李女士'
|
||
},
|
||
{
|
||
title: '沈易的服务记录',
|
||
date: '2025-09-09 13:54:42',
|
||
duration: '36分14秒',
|
||
description: '客户为四层别墅新房装修，关注真皮、高脚、舒适靠背的床和沙发，偏好灰色和咖啡色系，倾向于购买整屋套餐以获得更大折扣，决策期预计在12月前。',
|
||
customerName: '吴女士'
|
||
},
|
||
{
|
||
title: '服务记录',
|
||
date: '2025-09-09 13:54:24',
|
||
duration: '50分56秒',
|
||
description: '客户为新房装修夫妻关注沙发与床垫的舒活性及健康支撑偏好，注重材质环保性和使用寿命，预算约60000，希望获得专业建议和定制方案。',
|
||
customerName: '张先生'
|
||
}
|
||
],
|
||
customerList: [
|
||
{
|
||
name: '李女士',
|
||
intent: '高',
|
||
serviceStaff: '三多',
|
||
serviceCount: 3,
|
||
lastService: '2025-09-10',
|
||
tags: [
|
||
{ text: '关注优惠活动', color: 'orange' },
|
||
{ text: '关注颜色搭配', color: 'orange' },
|
||
{ text: '夫妻两一起来', color: 'orange' },
|
||
{ text: '新房装修', color: 'blue' },
|
||
{ text: '客厅,卧室', color: 'blue' }
|
||
],
|
||
phone: '185****3677'
|
||
},
|
||
{
|
||
name: '彭总',
|
||
intent: '高',
|
||
serviceStaff: '沈易',
|
||
serviceCount: 3,
|
||
lastService: '2526-09-16',
|
||
tags: [
|
||
{ text: '新房装修', color: 'blue' },
|
||
{ text: '餐厅,客厅,卧室,定制', color: 'blue' },
|
||
{ text: '沙发,床,床垫,茶几,餐桌', color: 'blue' },
|
||
{ text: '关注产品颜值', color: 'blue' }
|
||
],
|
||
budget: '预算2万-3万'
|
||
},
|
||
{
|
||
name: '吴女士',
|
||
intent: '中',
|
||
serviceStaff: '沈易',
|
||
serviceCount: 3,
|
||
lastService: '2025-08-30',
|
||
tags: [
|
||
{ text: '新房装修', color: 'blue' },
|
||
{ text: '客厅,卧室,定制', color: 'blue' }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
switchTab(tab) {
|
||
this.activeTab = tab;
|
||
},
|
||
toggleFilter() {
|
||
this.showValidOnly = !this.showValidOnly;
|
||
},
|
||
viewDetail(item) {
|
||
this.currentServiceDetail = { ...item };
|
||
this.summaryList = initSummaryList(item);
|
||
this.performanceData = initPerformanceData();
|
||
this.$refs.serviceDetailModal.open();
|
||
},
|
||
viewCustomerDetail(item) {
|
||
this.currentCustomerProfile = initCustomerProfile(item);
|
||
this.$refs.customerProfileModal.open();
|
||
},
|
||
onCustomerProfileClose() {
|
||
// 客户档案关闭回调
|
||
},
|
||
onServiceDetailClose() {
|
||
// 服务记录详情关闭回调
|
||
},
|
||
onViewCustomerFromService() {
|
||
// 从服务记录跳转到客户
|
||
this.$refs.serviceDetailModal.close();
|
||
this.switchTab('customer');
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
.page {
|
||
min-height: 100vh;
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
.content {
|
||
padding-top: 88rpx;
|
||
}
|
||
|
||
/* 标签页 */
|
||
.tabs {
|
||
display: flex;
|
||
background-color: #FFFFFF;
|
||
border-bottom: 1px solid #E0E0E0;
|
||
padding: 0 32rpx;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: 24rpx 32rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.tab-item text {
|
||
font-size: 30rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.tab-item.active text {
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tab-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 32rpx;
|
||
right: 32rpx;
|
||
height: 4rpx;
|
||
background-color: #007AFF;
|
||
border-radius: 2rpx;
|
||
}
|
||
</style>
|
||
|