feat(customer): 添加客户详情和邀请好友功能

- 新增客户详情页面，包括公司信息、合同信息、企业信息和联系记录 - 添加邀请好友功能，包括二维码生成、邀请记录和统计图表 - 优化导航栏和首页网格组件，支持跳转到新页面- 调整 app.config.ts，添加新页面的路由配置
2025-08-28 15:15:13 +08:00
parent 217bfacadd
commit 7834124095
21 changed files with 3311 additions and 20 deletions
--- a/src/pages/customer/list.scss
+++ b/src/pages/customer/list.scss
@@ -0,0 +1,197 @@
+.customer-list-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  position: relative;
+
+  .header-bg {
+    width: 100%;
+    top: 0;
+    position: absolute;
+    z-index: 0;
+  }
+
+  .tabs-container {
+    position: relative;
+    z-index: 10;
+
+    .nut-tabs {
+      background: transparent;
+
+      .nut-tabs__titles {
+        background: transparent;
+        border: none;
+
+        .nut-tabs__titles-item {
+          color: rgba(255, 255, 255, 0.8);
+          padding: 12px 20px;
+
+          &.nut-tabs__titles-item--active {
+            color: #ffffff;
+            font-weight: bold;
+          }
+        }
+      }
+
+      .nut-tabs__line {
+        background: #ffffff;
+        height: 3px;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  .customer-list {
+    position: relative;
+    z-index: 10;
+    padding: 20px 16px 100px;
+    margin-top: 20px;
+
+    .loading-container {
+      text-align: center;
+      padding: 40px 0;
+      color: #999;
+    }
+
+    .customer-item {
+      background: #ffffff;
+      border-radius: 12px;
+      padding: 24px 30px;
+      margin-bottom: 16px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+      .customer-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+
+        .company-name {
+          font-weight: bold;
+          color: #333;
+          flex: 1;
+        }
+
+        .status-tag {
+          font-weight: 500;
+          padding: 4px 8px;
+          border-radius: 4px;
+          background: rgba(0, 0, 0, 0.05);
+        }
+      }
+
+      .customer-info {
+        .info-row {
+          display: flex;
+          align-items: center;
+          margin-bottom: 8px;
+          flex-wrap: wrap;
+
+          .label {
+            color: #666;
+            margin-right: 8px;
+          }
+
+          .contact-label {
+            margin-left: 16px;
+          }
+
+          .value {
+            color: #333;
+            margin-right: 8px;
+          }
+
+          .phone {
+            color: #52c41a;
+          }
+
+          .phone-icon {
+            cursor: pointer;
+            padding: 4px;
+            border-radius: 50%;
+            background: rgba(82, 196, 26, 0.1);
+          }
+        }
+
+        .address-row {
+          display: flex;
+          margin-bottom: 8px;
+
+          .label {
+            color: #666;
+            margin-right: 8px;
+            flex-shrink: 0;
+          }
+
+          .address {
+            color: #333;
+            line-height: 1.4;
+            flex: 1;
+          }
+        }
+
+        .time-row {
+          .time {
+            color: #999;
+          }
+        }
+      }
+
+      .action-buttons {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        margin-top: 12px;
+        padding-top: 12px;
+        border-top: 1px solid #f0f0f0;
+
+        .action-btn {
+          border-radius: 6px;
+          border: none;
+
+          &.sign-btn {
+            background: #52c41a;
+            color: #ffffff;
+          }
+
+          &.cancel-btn {
+            background: #ff4d4f;
+            color: #ffffff;
+          }
+
+          &.detail-btn {
+            background: #1890ff;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+
+  .fixed-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 16px;
+    background: #ffffff;
+    border-top: 1px solid #f0f0f0;
+    z-index: 100;
+
+    .report-btn {
+      width: 100%;
+      background: #52c41a;
+      color: #ffffff;
+      font-weight: bold;
+      border-radius: 24px;
+      border: none;
+      box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
+    }
+  }
+}
+
+// 适配安全区域
+@supports (bottom: env(safe-area-inset-bottom)) {
+  .customer-list-page .fixed-bottom {
+    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+  }
+}