客户列表页修改

components/CustomerManagement.vue

@@ -57,46 +57,46 @@
       >
         <!-- 客户信息区域 -->
         <view class="customer-header">
-          <view class="customer-info">
+          <view class="customer-name-wrapper">
             <text class="customer-name">{{ customer.name }}</text>
-            <text class="last-followup">最后跟进: {{ formatDateTime(customer.lastFollowTime) }}</text>
+            <text class="edit-icon" @click.stop="handleEdit(customer)">✎</text>
-          </view>
-          <view class="status-indicator">
-            <view 
-              class="status-dot" 
-              :class="getStatusClass(customer.status)"
-            ></view>
-            <text class="status-text">{{ getStatusText(customer.status) }}</text>
           </view>
         </view>
 
-        
+        <!-- 状态和标签区域 -->
-
+        <view class="tags-section">
-        <!-- 客户详细信息 -->
+          <!-- 状态标签 -->
-        <view class="customer-details">
+          <view 
-          <!-- 客户意向 -->
+            class="status-tag" 
-          <view class="detail-row" v-if="customer.intents && customer.intents.length > 0">
+            :class="getStatusTagClass(customer.status)"
-            <text class="detail-label">客户意向：</text>
+          >
-            <view class="intent-tags">
+            {{ getStatusText(customer.status) }}
-              <text 
-                v-for="(intent, index) in customer.intents" 
-                :key="index"
-                class="intent-tag"
-              >{{ intent }}</text>
-            </view>
           </view>
-
-          <!-- 意向强度 -->
-          <view class="detail-row">
-            <text class="detail-label">意向强度：</text>
-            <text class="detail-value">{{ getIntentLevelText(customer.intentLevel) }}</text>
-          </view>
-
           
+          <!-- 意向强度标签 -->
+          <view 
+            class="intent-level-tag" 
+            v-if="customer.intentLevel"
+          >
+            {{ getIntentLevelText(customer.intentLevel) }}
+          </view>
+
+          <!-- 客户意向标签 -->
+          <view 
+            v-for="(intent, index) in customer.intents" 
+            :key="index"
+            class="intent-tag"
+          >
+            {{ intent }}
+          </view>
+        </view>
+
+        <!-- 客户详细信息区域 -->
+        <view class="customer-details">
           <!-- 微信号 -->
           <view class="detail-row">
             <text class="detail-label">微信号：</text>
-            <text class="detail-value">{{ customer.wechat  || '--' }}</text>
+            <text class="detail-value">{{ customer.wechat || '--' }}</text>
           </view>
 
           <!-- 手机号 -->
@@ -105,18 +105,17 @@
             <text class="detail-value">{{ customer.mobile || '--' }}</text>
           </view>
 
-          <!-- 上次跟进内容 -->
+          <!-- 跟进内容 -->
           <view class="detail-row" v-if="customer.lastFollowRecord && customer.lastFollowRecord.content">
             <text class="detail-label">跟进内容：</text>
             <text class="detail-value follow-content">{{ truncateText(customer.lastFollowRecord.content, 30) }}</text>
           </view>
 
           <!-- 分配用户 -->
-        <view class="detail-row">
+          <view class="detail-row">
-          <text class="detail-label">客户归属：</text>
+            <text class="detail-label">客户归属：</text>
-          <text class="detail-value">{{ customer.followName || '--' }}</text>
+            <text class="detail-value">{{ customer.followName || '--' }}</text>
-          
+          </view>
-        </view>
         </view>
 
         <!-- 操作按钮 -->
@@ -203,6 +202,25 @@ const {
 const getStatusClass = getCustomerStatusClass;
 const getStatusText = getCustomerStatusText;
 
+// 获取状态标签样式类
+const getStatusTagClass = (status) => {
+  const statusStr = String(status);
+  return {
+    'status-tag-potential': statusStr === '1',  // 潜在
+    'status-tag-intent': statusStr === '2',     // 意向
+    'status-tag-deal': statusStr === '3',       // 成交
+    'status-tag-invalid': statusStr === '4'     // 失效
+  };
+};
+
+// 处理编辑
+const handleEdit = (customer) => {
+  console.log('编辑客户:', customer);
+  uni.navigateTo({
+    url: `/pages/customer/edit/index?id=${customer.id}`
+  });
+};
+
 // 截断文本
 const truncateText = (text, maxLength) => {
   if (!text) return '--';
@@ -587,122 +605,117 @@ defineExpose({
 
 .customer-header {
   display: flex;
-  justify-content: space-between;
+  align-items: center;
-  align-items: flex-start;
+  margin-bottom: 12px;
-
-  padding-bottom: 12px;
-  border-bottom: 1px solid #f0f2f5;
 }
 
-.customer-info {
+.customer-name-wrapper {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 8px;
-  flex: 1;
-  min-width: 0;
 }
 
 .customer-name {
   font-size: 16px;
   font-weight: 600;
-  color: #303133;
+  color: #2885ff;
   line-height: 1.4;
-  overflow: hidden;
+}
-  text-overflow: ellipsis;
+
+.edit-icon {
+  font-size: 14px;
+  color: #909399;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.3s ease;
+  
+  &:active {
+    opacity: 1;
+  }
+}
+
+/* 标签区域 */
+.tags-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+/* 状态标签 */
+.status-tag {
+  display: inline-block;
+  padding: 4px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 12px;
+  white-space: nowrap;
+  
+  &.status-tag-potential {
+    color: #e6a23c;
+    background-color: #fdf6ec;
+    border: 1px solid #f5dab1;
+  }
+  
+  &.status-tag-intent {
+    color: #409eff;
+    background-color: #ecf5ff;
+    border: 1px solid #b3d8ff;
+  }
+  
+  &.status-tag-deal {
+    color: #67c23a;
+    background-color: #f0f9ff;
+    border: 1px solid #b3e19d;
+  }
+  
+  &.status-tag-invalid {
+    color: #f56c6c;
+    background-color: #fef0f0;
+    border: 1px solid #fbc4c4;
+  }
+}
+
+/* 意向强度标签 */
+.intent-level-tag {
+  display: inline-block;
+  padding: 4px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #e6a23c;
+  background-color: #fef9e7;
+  border: 1px solid #f5dab1;
+  border-radius: 12px;
   white-space: nowrap;
 }
 
-.last-followup {
+/* 客户意向标签 */
-  font-size: 12px;
+.intent-tag {
-  color: #909399;
+  display: inline-block;
-  line-height: 1.4;
+  padding: 4px 12px;
-}
-
-.status-indicator {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-  padding: 4px 10px;
-  background-color: #f5f7fa;
-  border-radius: 12px;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  
-  &.status-potential {
-    background-color: #e6a23c;
-    box-shadow: 0 0 4px rgba(230, 162, 60, 0.4);
-  }
-  
-  &.status-intent {
-    background-color: #409eff;
-    box-shadow: 0 0 4px rgba(64, 158, 255, 0.4);
-  }
-  
-  &.status-deal {
-    background-color: #67c23a;
-    box-shadow: 0 0 4px rgba(103, 194, 58, 0.4);
-  }
-  
-  &.status-invalid {
-    background-color: #f56c6c;
-    box-shadow: 0 0 4px rgba(245, 108, 108, 0.4);
-  }
-}
-
-.status-text {
-  font-size: 12px;
-  color: #606266;
-  font-weight: 500;
-}
-
-/* 分配用户 */
-.assigned-user {
-  display: flex;
-  align-items: center;
-  gap: 10px;
- 
- 
-  background-color: #fafbfc;
-  border-radius: 8px;
-}
-
-.user-avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background-color: #e4e7ed;
-  border: 2px solid #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.user-name {
   font-size: 13px;
-  color: #606266;
   font-weight: 500;
+  color: #67c23a;
+  background-color: #f0f9ff;
+  border: 1px solid #b3e19d;
+  border-radius: 12px;
+  white-space: nowrap;
 }
 
-/* 客户详细信息 */
+/* 客户详细信息区域 */
 .customer-details {
-
+  margin-top: 12px;
-  padding: 12px;
+  margin-bottom: 12px;
-  background-color: #fafbfc;
+  padding-top: 12px;
-  border-radius: 8px;
+  border-top: 1px solid #f0f2f5;
 }
 
 .detail-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
-
+  margin-bottom: 8px;
-  flex-wrap: wrap;
+  font-size: 14px;
-  margin-bottom: 10px;
+  line-height: 1.5;
-  font-size: 13px;
-  line-height: 1.6;
   
   &:last-child {
     margin-bottom: 0;
@@ -711,41 +724,19 @@ defineExpose({
 
 .detail-label {
   color: #909399;
-  font-weight: 500;
+  margin-right: 8px;
   flex-shrink: 0;
-  margin-right: 4px;
+  min-width: 70px;
-  white-space: nowrap;
 }
 
 .detail-value {
-  color: #606266;
-  word-break: break-all;
-  flex: 1;
-  min-width: 0;
-}
-
-.follow-content {
   color: #303133;
-  line-height: 1.6;
-}
-
-/* 客户意向标签 */
-.intent-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
   flex: 1;
-}
+  word-break: break-all;
-
+  
-.intent-tag {
+  &.follow-content {
-  display: inline-block;
+    color: #606266;
-  padding: 4px 10px;
+  }
-  font-size: 12px;
-  color: #2885ff;
-  background-color: #e6f2ff;
-  border-radius: 12px;
-  border: 1px solid #b3d8ff;
-  white-space: nowrap;
 }
 
 /* 操作按钮 */