家居场景销售接待

pages/furniture_customer/components/CustomerList.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="customer-list-container">
 		<view class="service-status-toolbar">
-			<text class="toolbar-total">共{{ list.length }}条</text>
+			<text class="toolbar-total">共{{ customerListTotal || list.length }}条</text>
 			<input
 				class="toolbar-input"
 				v-model="salesName"
@@ -61,30 +61,198 @@
 </template>
 
 <script>
+	import { getApiUrl } from '@/common/config.js';
+	
 	export default {
 		name: 'CustomerList',
-		props: {
-			list: {
-				type: Array,
-				default: () => []
-			}
-		},
+		props: {},
 		data() {
 			return {
 				salesName: '',
-				customerName: ''
+				customerName: '',
+				customerList: [],
+				customerListTotal: 0,
+				customerListPage: {
+					current: 1,
+					size: 10
+				}
 			}
 		},
+		computed: {
+			list() {
+				return this.customerList;
+			}
+		},
+		mounted() {
+			// 组件挂载时自动加载数据
+			this.loadCustomerList();
+		},
 		methods: {
 			onInputChange() {
 				// 输入框变化时，可以在这里添加实时搜索逻辑（如果需要）
 			},
 			handleRefresh() {
-				// 触发刷新事件，并传递查询参数
-				this.$emit('filterClick', {
+				// 刷新客户列表
+				this.refreshCustomerList({
 					salesName: this.salesName.trim(),
 					customerName: this.customerName.trim()
 				});
+			},
+			refreshCustomerList(filterParams = {}) {
+				// 重置分页到第一页
+				this.customerListPage.current = 1;
+				// 重新加载数据，传递查询参数
+				this.loadCustomerList(filterParams);
+			},
+			// 加载客户列表
+			async loadCustomerList(params = {}) {
+				try {
+					// 构建查询参数对象（后端使用 @RequestParam，参数需要作为 URL 查询参数传递）
+					const queryParams = {
+						current: this.customerListPage.current,
+						size: this.customerListPage.size
+					};
+					
+					// 添加查询参数：客户姓名、所属销售姓名、销售电话、联系方式
+					const trimmedCustomerName = params.customerName?.trim();
+					const trimmedSalesName = params.salesName?.trim();
+					const trimmedSalesPhone = params.salesPhone?.trim();
+					const trimmedContact = params.contact?.trim();
+					
+					if (trimmedCustomerName) {
+						queryParams.customerName = trimmedCustomerName;
+					}
+					if (trimmedSalesName) {
+						queryParams.salesName = trimmedSalesName;
+					}
+					if (trimmedSalesPhone) {
+						queryParams.salesPhone = trimmedSalesPhone;
+					}
+					if (trimmedContact) {
+						queryParams.contact = trimmedContact;
+					}
+					
+					// 将参数转换为 URL 查询字符串（因为后端使用 @RequestParam）
+					const queryString = Object.keys(queryParams)
+						.filter(key => queryParams[key] !== null && queryParams[key] !== undefined && queryParams[key] !== '')
+						.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(queryParams[key])}`)
+						.join('&');
+					
+					// 调试：打印请求参数
+					console.log('客户列表查询参数:', JSON.stringify(queryParams));
+					console.log('查询字符串:', queryString);
+					
+					// 后端使用 @GetMapping 和 @RequestParam，参数需要作为 URL 查询参数传递
+					const baseUrl = getApiUrl('/api/customerManagement/list');
+					const url = queryString ? `${baseUrl}?${queryString}` : baseUrl;
+					
+					// 获取认证信息
+					let tenantId = '';
+					let token = '';
+					try {
+						tenantId = uni.getStorageSync('backend-tenant-id') || '';
+						token = uni.getStorageSync('backend-token') || '';
+					} catch (e) {
+						console.error('获取认证信息失败:', e);
+					}
+					
+					// 构建请求头
+					const headers = {
+						'Content-Type': 'application/json'
+					};
+					if (token) {
+						headers['Authorization'] = `Bearer ${token}`;
+					}
+					if (tenantId) {
+						headers['X-Tenant-Id'] = tenantId;
+					}
+					
+					const res = await uni.request({
+						url,
+						method: 'GET',
+						header: headers,
+						timeout: 10000
+					});
+					
+					if (res.statusCode === 200 && res.data && res.data.success) {
+						// 转换后端客户数据为显示格式
+						const customerRecords = res.data.data || [];
+						
+						// 将 CustomerManagement 数据映射为显示格式
+						const mappedList = customerRecords.map(item => {
+							// 格式化创建时间
+							let formattedTime = '';
+							if (item.createTime) {
+								const date = new Date(item.createTime);
+								const year = date.getFullYear();
+								const month = String(date.getMonth() + 1).padStart(2, '0');
+								const day = String(date.getDate()).padStart(2, '0');
+								formattedTime = `${year}-${month}-${day}`;
+							}
+							
+							// 构建标签数组（根据业务需求可以从不同字段提取）
+							const tags = [];
+							if (item.remark) {
+								// 从备注中提取标签信息
+								if (item.remark.includes('优惠') || item.remark.includes('活动')) {
+									tags.push({ text: '关注优惠活动', color: 'orange' });
+								}
+								if (item.remark.includes('颜色') || item.remark.includes('搭配')) {
+									tags.push({ text: '关注颜色搭配', color: 'orange' });
+								}
+							}
+							
+							// 根据录音条数或联系次数判断意向程度
+							let intent = '中';
+							const recordingCount = item.recordingCount || 0;
+							const contactCount = item.contactCount || 0;
+							if (recordingCount > 3 || contactCount > 5) {
+								intent = '高';
+							}
+							
+							return {
+								name: item.customerName || '',
+								intent: intent,
+								serviceStaff: item.salesName || '',
+								serviceCount: item.contactCount || item.recordingCount || 0,
+								lastService: formattedTime,
+								lastServiceTime: item.updateTime || item.createTime,
+								tags: tags,
+								phone: item.contact || item.salesPhone || '',
+								budget: item.intendedModel || '', // 意向车型作为预算信息
+								// 保留原始数据字段，方便后续使用
+								rawData: item
+							};
+						});
+						
+						// 按更新时间倒序排序
+						mappedList.sort((a, b) => {
+							if (!a.lastServiceTime) return 1;
+							if (!b.lastServiceTime) return -1;
+							return new Date(b.lastServiceTime) - new Date(a.lastServiceTime);
+						});
+						
+						// 分页：第一页或刷新时重置，其他情况追加
+						if (this.customerListPage.current === 1) {
+							this.customerList = mappedList;
+						} else {
+							this.customerList = this.customerList.concat(mappedList);
+						}
+						this.customerListTotal = res.data.total || mappedList.length;
+					} else {
+						uni.showToast({
+							title: res.data.message || '获取客户列表失败',
+							icon: 'none'
+						});
+					}
+				} catch (error) {
+					console.error('获取客户列表失败:', error);
+					uni.showToast({
+						title: `获取客户列表失败: ${error.errMsg || error.message || '未知错误'}`,
+						icon: 'none',
+						duration: 3000
+					});
+				}
 			}
 		}
 	}