Initial commit

This commit is contained in:
ZLI263
2025-11-23 11:20:51 +08:00
commit 355e056ae7
1025 changed files with 123077 additions and 0 deletions

View File

@@ -0,0 +1,175 @@
<template>
<view>
<view class="list-header">
<text class="total">共{{ list.length }}条</text>
</view>
<scroll-view class="customer-list" scroll-y>
<view
class="customer-card"
v-for="(item, index) in list"
:key="index"
@click.stop="$emit('itemClick', item)">
<view class="customer-header">
<text class="customer-name-text">{{ item.name }}</text>
<view class="intent-badge" :class="item.intent === '高' ? 'intent-high' : 'intent-medium'">
<text>意向{{ item.intent }}</text>
</view>
</view>
<view class="customer-service-info">
<text>服务人员:{{ item.serviceStaff }} 服务{{ item.serviceCount }}次 上次服务:{{ item.lastService }}</text>
</view>
<view class="customer-tags">
<view
class="tag-item"
:class="'tag-' + tag.color"
v-for="(tag, tagIndex) in item.tags"
:key="tagIndex">
<text>{{ tag.text }}</text>
</view>
</view>
<view class="customer-footer" v-if="item.phone || item.budget">
<text class="customer-phone" v-if="item.phone">{{ item.phone }}</text>
<text class="customer-budget" v-if="item.budget">{{ item.budget }}</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
name: 'CustomerList',
props: {
list: {
type: Array,
default: () => []
}
}
}
</script>
<style scoped>
.list-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 32rpx;
background-color: #FFFFFF;
border-bottom: 1px solid #F0F0F0;
}
.total {
font-size: 28rpx;
color: #666;
}
.customer-list {
height: calc(100vh - 300rpx);
background-color: #F5F5F5;
padding: 24rpx 32rpx;
}
.customer-card {
background-color: #FFFFFF;
border-radius: 16rpx;
padding: 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.customer-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
.customer-name-text {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.intent-badge {
padding: 6rpx 16rpx;
border-radius: 8rpx;
}
.intent-high {
background-color: #E3F2FD;
}
.intent-high text {
font-size: 24rpx;
color: #1976D2;
font-weight: 500;
}
.intent-medium {
background-color: #FFF3E0;
}
.intent-medium text {
font-size: 24rpx;
color: #F57C00;
font-weight: 500;
}
.customer-service-info {
margin-bottom: 20rpx;
}
.customer-service-info text {
font-size: 24rpx;
color: #999;
}
.customer-tags {
display: flex;
flex-wrap: wrap;
margin-bottom: 20rpx;
gap: 12rpx;
}
.tag-item {
padding: 8rpx 16rpx;
border-radius: 8rpx;
}
.tag-orange {
background-color: #FFF3E0;
}
.tag-orange text {
font-size: 24rpx;
color: #F57C00;
}
.tag-blue {
background-color: #E3F2FD;
}
.tag-blue text {
font-size: 24rpx;
color: #1976D2;
}
.customer-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16rpx;
border-top: 1px solid #F0F0F0;
}
.customer-phone {
font-size: 28rpx;
color: #333;
}
.customer-budget {
font-size: 26rpx;
color: #1976D2;
}
</style>

View File

@@ -0,0 +1,368 @@
<template>
<uni-popup ref="popup" type="bottom" :mask-click="false">
<view class="customer-profile-modal">
<!-- 顶部栏 -->
<view class="profile-header">
<view class="profile-close" @click="close">
<uni-icons type="close" size="24" color="#333"></uni-icons>
</view>
<text class="profile-title">客户档案</text>
</view>
<scroll-view class="profile-content" scroll-y>
<!-- 客户基本信息 -->
<view class="profile-section">
<view class="profile-name-row">
<text class="profile-name">{{ profile.name }}</text>
<view class="profile-intent-badge" :class="profile.intent === '高' ? 'intent-high' : 'intent-medium'">
<text>意向{{ profile.intent }}</text>
</view>
</view>
<view class="profile-service-info">
<text>服务{{ profile.serviceCount }}次 {{ profile.lastService }}</text>
</view>
<view class="profile-details">
<view class="detail-row">
<text class="detail-label">电话:</text>
<text class="detail-value">{{ profile.phone }}</text>
</view>
<view class="detail-row">
<text class="detail-label">服务人员:</text>
<text class="detail-value">{{ profile.serviceStaff }}</text>
</view>
<view class="detail-row">
<text class="detail-label">微信状态:</text>
<text class="detail-value">{{ profile.wechatStatus }}</text>
</view>
<view class="detail-row">
<text class="detail-label">客户地址:</text>
<text class="detail-value">{{ profile.address }}</text>
</view>
<view class="detail-row">
<text class="detail-label">客户来源:</text>
<text class="detail-value">{{ profile.source }}</text>
<view class="collapse-btn" @click="toggleCollapse">
<text>{{ collapsed ? '展开' : '收起' }}</text>
<uni-icons :type="collapsed ? 'down' : 'up'" size="14" color="#666"></uni-icons>
</view>
</view>
</view>
</view>
<!-- 跟进阶段 -->
<view class="profile-section" v-if="!collapsed">
<view class="section-header">
<text class="section-title">跟进阶段</text>
<view class="stage-info">
<text>当前: {{ profile.followStage }}</text>
<uni-icons type="right" size="16" color="#999"></uni-icons>
</view>
</view>
</view>
<!-- 客户画像 -->
<view class="profile-section" v-if="!collapsed">
<view class="section-header">
<view class="section-icon">
<uni-icons type="person" size="20" color="#007AFF"></uni-icons>
</view>
<text class="section-title">客户画像</text>
</view>
<view class="profile-tags">
<view
class="profile-tag tag-blue"
v-for="(tag, index) in profile.systemTags"
:key="'system-' + index">
<text>{{ tag }}</text>
</view>
</view>
<view class="custom-label" v-if="profile.customTags && profile.customTags.length > 0">
<text>自定义</text>
</view>
<view class="profile-tags" v-if="profile.customTags && profile.customTags.length > 0">
<view
class="profile-tag tag-yellow"
v-for="(tag, index) in profile.customTags"
:key="'custom-' + index">
<text>{{ tag }}</text>
</view>
</view>
</view>
<!-- 客户意向 -->
<view class="profile-section" v-if="!collapsed">
<view class="section-header">
<view class="section-icon">
<uni-icons type="star" size="20" color="#007AFF"></uni-icons>
</view>
<text class="section-title">客户意向</text>
<view class="intent-level">
<text>意向{{ profile.intent }}</text>
</view>
</view>
<view class="intent-description">
<text>{{ profile.intentDescription }}</text>
</view>
</view>
</scroll-view>
</view>
</uni-popup>
</template>
<script>
export default {
name: 'CustomerProfileModal',
props: {
profile: {
type: Object,
default: () => ({})
}
},
data() {
return {
collapsed: false
}
},
methods: {
open() {
this.$refs.popup.open();
},
close() {
this.$refs.popup.close();
this.$emit('close');
},
toggleCollapse() {
this.collapsed = !this.collapsed;
}
}
}
</script>
<style scoped>
.customer-profile-modal {
background-color: #FFFFFF;
border-radius: 32rpx 32rpx 0 0;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.profile-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx;
border-bottom: 1px solid #F0F0F0;
position: relative;
}
.profile-close {
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
}
.profile-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 36rpx;
font-weight: 600;
color: #333;
}
.profile-content {
flex: 1;
padding: 32rpx;
background-color: #FFFFFF;
}
.profile-section {
margin-bottom: 32rpx;
}
.profile-name-row {
display: flex;
align-items: center;
margin-bottom: 16rpx;
}
.profile-name {
font-size: 36rpx;
font-weight: 600;
color: #333;
margin-right: 16rpx;
}
.profile-intent-badge {
padding: 6rpx 16rpx;
border-radius: 8rpx;
}
.profile-intent-badge.intent-high {
background-color: #E3F2FD;
}
.profile-intent-badge.intent-high text {
font-size: 24rpx;
color: #1976D2;
font-weight: 500;
}
.profile-intent-badge.intent-medium {
background-color: #FFF3E0;
}
.profile-intent-badge.intent-medium text {
font-size: 24rpx;
color: #F57C00;
font-weight: 500;
}
.profile-service-info {
margin-bottom: 24rpx;
}
.profile-service-info text {
font-size: 26rpx;
color: #999;
}
.profile-details {
background-color: #F5F5F5;
border-radius: 16rpx;
padding: 24rpx;
}
.detail-row {
display: flex;
align-items: center;
margin-bottom: 16rpx;
position: relative;
}
.detail-row:last-child {
margin-bottom: 0;
}
.detail-label {
font-size: 28rpx;
color: #666;
width: 160rpx;
flex-shrink: 0;
}
.detail-value {
font-size: 28rpx;
color: #333;
flex: 1;
}
.collapse-btn {
display: flex;
align-items: center;
margin-left: 16rpx;
padding: 4rpx 8rpx;
}
.collapse-btn text {
font-size: 24rpx;
color: #666;
margin-right: 4rpx;
}
.section-header {
display: flex;
align-items: center;
margin-bottom: 24rpx;
}
.section-icon {
margin-right: 8rpx;
}
.section-title {
font-size: 30rpx;
font-weight: 500;
color: #333;
flex: 1;
}
.stage-info {
display: flex;
align-items: center;
}
.stage-info text {
font-size: 28rpx;
color: #333;
margin-right: 8rpx;
}
.profile-tags {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
margin-bottom: 24rpx;
}
.profile-tag {
padding: 8rpx 16rpx;
border-radius: 8rpx;
}
.profile-tag.tag-blue {
background-color: #E3F2FD;
}
.profile-tag.tag-blue text {
font-size: 24rpx;
color: #1976D2;
}
.profile-tag.tag-yellow {
background-color: #FFF3E0;
}
.profile-tag.tag-yellow text {
font-size: 24rpx;
color: #F57C00;
}
.custom-label {
margin-bottom: 16rpx;
}
.custom-label text {
font-size: 26rpx;
color: #666;
}
.intent-level {
padding: 6rpx 16rpx;
background-color: #E3F2FD;
border-radius: 8rpx;
}
.intent-level text {
font-size: 24rpx;
color: #1976D2;
font-weight: 500;
}
.intent-description {
background-color: #F5F5F5;
border-radius: 16rpx;
padding: 24rpx;
}
.intent-description text {
font-size: 28rpx;
color: #333;
line-height: 1.8;
}
</style>

View File

@@ -0,0 +1,244 @@
<template>
<view>
<view class="list-header">
<text class="total">共{{ total || list.length }}条</text>
<view class="filter-inputs">
<input
class="filter-input"
v-model="salesName"
placeholder="所属销售姓名"
@input="onInputChange" />
<input
class="filter-input"
v-model="customerName"
placeholder="客户姓名"
@input="onInputChange" />
</view>
<view class="refresh-btn" @click="handleRefresh">
<uni-icons type="reload" size="16" color="#007AFF"></uni-icons>
<text>刷新</text>
</view>
</view>
<scroll-view class="service-list" scroll-y>
<view
class="service-item"
v-for="(item, index) in list"
:key="index"
@click="$emit('itemClick', item)">
<view class="service-header">
<text class="service-title">{{ item.title }}</text>
<view class="service-actions">
<text class="archive-text">档案</text>
<uni-icons type="right" size="16" color="#999"></uni-icons>
</view>
</view>
<view class="service-meta">
<text class="service-date">{{ item.date }}</text>
</view>
<view class="service-content">
<text class="service-desc">{{ item.description }}</text>
</view>
<view class="service-customer">
<view class="customer-avatar">
<text class="avatar-text">{{ item.customerName.charAt(0) }}</text>
</view>
<text class="customer-name">{{ item.customerName }}</text>
</view>
<view class="ai-tag">
<text>以上内容由AI生成</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
name: 'ServiceList',
props: {
list: {
type: Array,
default: () => []
},
total: {
type: Number,
default: 0
}
},
data() {
return {
salesName: '',
customerName: ''
}
},
methods: {
onInputChange() {
// 输入框变化时,可以在这里添加实时搜索逻辑(如果需要)
},
handleRefresh() {
// 触发刷新事件,并传递查询参数
this.$emit('filterClick', {
salesName: this.salesName.trim(),
customerName: this.customerName.trim()
});
}
}
}
</script>
<style scoped>
.list-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 32rpx;
background-color: #FFFFFF;
border-bottom: 1px solid #F0F0F0;
gap: 16rpx;
flex-wrap: wrap;
}
.total {
font-size: 28rpx;
color: #666;
flex-shrink: 0;
}
.filter-inputs {
display: flex;
align-items: center;
flex: 1;
gap: 16rpx;
min-width: 0;
}
.filter-input {
flex: 1;
height: 64rpx;
padding: 0 24rpx;
background-color: #F5F5F5;
border-radius: 8rpx;
font-size: 26rpx;
color: #333;
}
.filter-input::placeholder {
color: #999;
}
.refresh-btn {
display: flex;
align-items: center;
padding: 8rpx 16rpx;
background-color: #F5F5F5;
border-radius: 8rpx;
flex-shrink: 0;
}
.refresh-btn text {
font-size: 24rpx;
color: #007AFF;
margin-left: 8rpx;
}
.service-list {
height: calc(100vh - 420rpx);
background-color: #FFFFFF;
}
.service-item {
padding: 32rpx;
border-bottom: 1px solid #F0F0F0;
background-color: #FFFFFF;
}
.service-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
.service-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
.service-actions {
display: flex;
align-items: center;
}
.archive-text {
font-size: 26rpx;
color: #999;
margin-right: 8rpx;
}
.service-meta {
display: flex;
align-items: center;
margin-bottom: 16rpx;
}
.service-date {
font-size: 24rpx;
color: #999;
margin-right: 16rpx;
}
.service-duration {
font-size: 24rpx;
color: #999;
}
.service-content {
margin-bottom: 24rpx;
}
.service-desc {
font-size: 28rpx;
color: #666;
line-height: 1.6;
}
.service-customer {
display: flex;
align-items: center;
margin-bottom: 16rpx;
}
.customer-avatar {
width: 64rpx;
height: 64rpx;
background-color: #2196F3;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
}
.avatar-text {
font-size: 32rpx;
color: #FFFFFF;
font-weight: 500;
}
.customer-name {
font-size: 28rpx;
color: #333;
}
.ai-tag {
padding-top: 16rpx;
border-top: 1px solid #F0F0F0;
}
.ai-tag text {
font-size: 24rpx;
color: #999;
}
</style>