feat(crm): 添加相关图片

# Conflicts:
#	src/App.vue
#	src/api/menuApi.ts
#	src/components/core/layouts/art-header-bar/index.vue
#	src/router/routes/asyncRoutes.ts
#	src/router/routesAlias.ts
#	src/typings/api.d.ts
#	src/views/system/user-center/index.vue

.env.development

@@ -5,10 +5,10 @@ VITE_BASE_URL = /
 
 # API 地址前缀
 # VITE_API_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default
-# VITE_API_URL = http://219.157.255.213:25702
+VITE_API_URL = http://219.157.255.213:25703
 # VITE_API_URL = https://mzl.dev.hnxinyouhe.com
 # VITE_API_URL = https://fdesk.hnxinyouhe.com
-VITE_API_URL = https://x-server.hnxinyouhe.com
+# VITE_API_URL = https://x-server.hnxinyouhe.com
 
 
 # Delete console

src/App.vue

@@ -59,3 +59,60 @@
     }
   }
 </script>
+<style>
+.boxshadow {
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 10, 118, 0.1);
+    background: var(--art-main-bg-color);
+    padding: 10px;
+    margin-bottom: 10px;
+}
+.border{
+    width: 6px;
+    height: 22px;
+    border-radius: 3px;
+    background: #3471FF;
+    display: inline-block;
+    vertical-align: bottom;
+}
+.el-dialog {
+  position: relative;
+  overflow: hidden;
+}
+.el-dialog::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: linear-gradient(180deg, #E4ECFF 0%, #FFFFFF 50%);
+  pointer-events: none;
+}
+.el-dialog__header,
+.el-dialog__body,
+.el-dialog__footer {
+  background: transparent !important;
+  position: relative;
+  z-index: 1;
+}
+.el-dialog__header{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding-right: 40px; 
+}
+
+.el-dialog__title{
+  flex: 1;
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.el-dialog__headerbtn{
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>

src/api/crmApi.ts

@@ -0,0 +1,156 @@
+import request from '@/utils/http'
+
+export class CrmService {
+  // 客户管理
+  //客户列表
+  static getcustomerList(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Crm.CrmListData>({
+      url: '/crm/customer/list',
+      params
+    })
+  }
+  // 获取客户列表详情
+  static getcustomerdetail(params: any) {
+    return request.get<Api.Crm.CrmListData>({
+      url: '/crm/customer/detail',
+      params
+    })
+  }
+  //添加客户
+  static customerAdd(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/crm/customer/add',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //删除客户
+  static getcustomerdelete(params: any) {
+    return request.get<Api.Crm.CrmListData>({
+      url: '/crm/customer/delete',
+      params
+    })
+  }
+  //切换等级crm/customer/grade
+  static customergrade(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/crm/customer/grade',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  
+  //渠道下拉
+  static getChannel() {
+    return request.get<Api.Brand.BrandInfo>({
+      url: '/crm/customer/getChannel'
+    })
+  }
+  //国家下拉
+  static getCountry() {
+    return request.get<Api.Brand.BrandInfo>({
+      url: '/crm/customer/getCountry'
+    })
+  }
+  //商机
+  static getMagnitude() {
+    return request.get<Api.Brand.BrandInfo>({
+      url: '/crm/customer/getMagnitude'
+    })
+  }
+  //等级
+  static getGrade() {
+    return request.get<Api.Brand.BrandInfo>({
+      url: '/crm/customer/getGrade'
+    })
+  }
+  //标签列表/crm/tagGroup/list
+  static tagGrouplist() {
+    return request.get<any>({
+      url: '/crm/tagGroup/list'
+    })
+  }
+  //更新客户标签 /crm/tagGroup/updatePivot
+  static tagGroupupdatePivot(params: any) {
+    return request.get<Api.Work.AddResponse>({
+      url: '/crm/tagGroup/updatePivot',
+      params
+    })
+  }
+  //跟进列表crm/follow/list
+  static getfollowlist(params: any) {
+    return request.get<any>({
+      url: '/crm/follow/list',
+      params
+    })
+  }
+  //添加跟进 /crm/follow/add
+  static followAdd(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/crm/follow/add',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //待跟进  /crm/customer/waitFollow
+  static waitFollow(params: any) {
+    return request.get<any>({
+      url: '/crm/customer/waitFollow',
+      params
+    })
+  }
+//设置下次跟进时间 followNext  crm/customer/followNext
+static followNext(params: any) {
+  return request.post<Api.Work.AddResponse>({
+    url: '/crm/customer/followNext',
+    params
+    // showErrorMessage: false // 不显示错误消息
+  })
+}
+
+  //crm 个人信息修改 
+  static crmuseredit(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/crm/user/edit',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //领取公海crm/customer/claim
+  static customerclaim(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/crm/customer/claim',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //客户回收 恢复  /crm/customer/restore
+  static customerrestore(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/crm/customer/restore',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //crm  获取用户信息 common/user/get
+  static userget() {
+    return request.get<any>({
+      url: '/common/user/get'
+    })
+  }
+  //修改密码 crm/user/savePassword
+  static savePassword(params: any) {
+    return request.post<Api.Work.AddResponse>({
+      url: '/crm/user/savePassword',
+      params
+      // showErrorMessage: false // 不显示错误消息
+    })
+  }
+  //首页统计
+  static homestatistics(params: any) {
+    return request.get<any>({
+      url: '/crm/customer/statistics',
+      params
+    })
+  }
+}

src/api/menuApi.ts

@@ -5,7 +5,28 @@ import { useUserStore } from '@/store/modules/user'
 interface MenuResponse {
   menuList: AppRouteRecord[]
 }
-
+// 合并方法
+function mergeRoutes(dynamicRoutes: AppRouteRecord[] = [], staticRoutes: AppRouteRecord[] = []): AppRouteRecord[] {
+  // 深度合并逻辑
+  const merged = [...staticRoutes]
+  
+  dynamicRoutes.forEach(dynamicRoute => {
+    const existingIndex = merged.findIndex(r => r.path === dynamicRoute.path)
+    if (existingIndex >= 0) {
+      // 合并children（如果存在）
+      if (dynamicRoute.children) {
+        merged[existingIndex].children = [
+          ...(merged[existingIndex].children || []),
+          ...dynamicRoute.children
+        ]
+      }
+    } else {
+      merged.push(dynamicRoute)
+    }
+  })
+  
+  return merged
+}
 // 菜单接口
 export const menuService = {
   async getMenuList(delay = 300): Promise<MenuResponse> {
@@ -17,6 +38,8 @@ export const menuService = {
       }
       // 模拟接口返回的菜单数据
       const menuData = userStore.info.menu
+      // 2. 合并静态菜单
+      const finalRoutes = mergeRoutes(menuData, asyncRoutes)
       // 验证菜单数据
       if (!menuData || !Array.isArray(menuData) || menuData.length === 0) {
         ElMessage.error('暂无系统菜单权限')
@@ -24,7 +47,7 @@ export const menuService = {
       }
       
       // 处理菜单数据
-      const menuList = menuData.map((route: any) => menuDataToRouter(route))
+      const menuList = finalRoutes.map((route: any) => menuDataToRouter(route))
       
       // 验证处理后的菜单列表
       if (!menuList || menuList.length === 0) {

src/components/core/layouts/art-header-bar/index.vue

@@ -156,6 +156,14 @@
                   </div>
                 </div> -->
                 <ul class="user-menu">
+                  <li @click="goPage('/system/user-center')">
+                    <i class="menu-icon iconfont-sys">&#xe734;</i>
+                    <span class="menu-txt">{{ $t('topBar.user.userCenter') }}</span>
+                  </li>
+                  <li @click="goPage('/crmpc/recycle')">
+                    <i class="menu-icon iconfont-sys">&#xe828;</i>
+                    <span class="menu-txt">回收站</span>
+                  </li>
                   <!-- <li @click="goPage('/system/user-center')">
                     <i class="menu-icon iconfont-sys">&#xe734;</i>
                     <span class="menu-txt">{{ $t('topBar.user.userCenter') }}</span>

src/router/routes/asyncRoutes copy.ts

@@ -0,0 +1,363 @@
+import { RoutesAlias } from '../routesAlias'
+import { AppRouteRecord } from '@/types/router'
+import { WEB_LINKS } from '@/utils/constants'
+
+/**
+ * 菜单列表、异步路由
+ *
+ * 支持两种模式:
+ * 1. 前端静态配置 - 直接使用本文件中定义的路由配置
+ * 2. 后端动态配置 - 后端返回菜单数据，前端解析生成路由
+ *
+ * 菜单标题（title）:
+ * 可以是 i18n 的 key，也可以是字符串，比如：'用户列表'
+ */
+export const asyncRoutes: AppRouteRecord[] = [
+  {
+    name: 'Dashboard',
+    path: '/dashboard',
+    component: RoutesAlias.Home,
+    meta: {
+      title: 'menus.dashboard.title',
+      icon: ''
+    },
+    children: [
+      {
+        path: 'console',
+        name: 'Console',
+        component: RoutesAlias.Dashboard,
+        meta: {
+          title: 'menus.dashboard.console',
+          keepAlive: false,
+          fixedTab: true
+        }
+      },
+      {
+        path: 'analysis',
+        name: 'Analysis',
+        component: RoutesAlias.Analysis,
+        meta: {
+          title: 'menus.dashboard.analysis',
+          keepAlive: false
+        }
+      },
+      {
+        path: 'ecommerce',
+        name: 'Ecommerce',
+        component: RoutesAlias.Ecommerce,
+        meta: {
+          title: 'menus.dashboard.ecommerce',
+          keepAlive: false
+        }
+      }
+    ]
+  },
+  {
+    path: '/work',
+    name: 'Work',
+    component: RoutesAlias.Home,
+    // component:'/work',
+    meta: {
+      title: 'menus.work.title',
+      icon: '',
+      roles: ['R_SUPER', 'R_ADMIN']
+    },
+    children: [
+      {
+        path: 'order',
+        name: '工单列表',
+        component: RoutesAlias.Order,
+        meta: {
+          title: 'menus.work.order',
+          keepAlive: true,
+          roles: ['R_SUPER', 'R_ADMIN']
+        }
+      },
+      {
+        path: 'type',
+        name: 'Type',
+        component: RoutesAlias.OrderType,
+        meta: {
+          title: 'menus.work.type',
+          keepAlive: true,
+          roles: ['R_SUPER', 'R_ADMIN']
+        }
+      }
+    ]
+  },
+  {
+    path: '/system',
+    name: 'System',
+    component: RoutesAlias.Home,
+    meta: {
+      title: 'menus.system.title',
+      icon: '',
+      roles: ['R_SUPER', 'R_ADMIN']
+    },
+    children: [
+      {
+        path: 'user',
+        name: 'User',
+        component: RoutesAlias.User,
+        meta: {
+          title: 'menus.system.user',
+          keepAlive: true,
+          roles: ['R_SUPER', 'R_ADMIN']
+        }
+      },
+      {
+        path: 'role',
+        name: 'Role',
+        component: RoutesAlias.Role,
+        meta: {
+          title: 'menus.system.role',
+          keepAlive: true,
+          roles: ['R_SUPER']
+        }
+      },
+      {
+        path: 'user-center',
+        name: 'UserCenter',
+        component: RoutesAlias.UserCenter,
+        meta: {
+          title: 'menus.system.userCenter',
+          isHide: true,
+          keepAlive: true,
+          isHideTab: true
+        }
+      },
+      {
+        path: 'menu',
+        name: 'Menus',
+        component: RoutesAlias.Menu,
+        meta: {
+          title: 'menus.system.menu',
+          keepAlive: true,
+          roles: ['R_SUPER'],
+          authList: [
+            {
+              title: '新增',
+              auth_mark: 'add'
+            },
+            {
+              title: '编辑',
+              auth_mark: 'edit'
+            },
+            {
+              title: '删除',
+              auth_mark: 'delete'
+            }
+          ]
+        }
+      },
+      {
+        path: 'nested',
+        name: 'Nested',
+        component: '',
+        meta: {
+          title: 'menus.system.nested',
+          keepAlive: true
+        },
+        children: [
+          {
+            path: 'menu1',
+            name: 'NestedMenu1',
+            component: RoutesAlias.NestedMenu1,
+            meta: {
+              title: 'menus.system.menu1',
+              icon: '',
+              keepAlive: true
+            }
+          },
+          {
+            path: 'menu2',
+            name: 'NestedMenu2',
+            component: '',
+            meta: {
+              title: 'menus.system.menu2',
+              icon: '',
+              keepAlive: true
+            },
+            children: [
+              {
+                path: 'menu2-1',
+                name: 'NestedMenu2-1',
+                component: RoutesAlias.NestedMenu21,
+                meta: {
+                  title: 'menus.system.menu21',
+                  icon: '',
+                  keepAlive: true
+                }
+              }
+            ]
+          },
+          {
+            path: 'menu3',
+            name: 'NestedMenu3',
+            component: '',
+            meta: {
+              title: 'menus.system.menu3',
+              icon: '',
+              keepAlive: true
+            },
+            children: [
+              {
+                path: 'menu3-1',
+                name: 'NestedMenu3-1',
+                component: RoutesAlias.NestedMenu31,
+                meta: {
+                  title: 'menus.system.menu31',
+                  icon: '',
+                  keepAlive: true
+                }
+              },
+              {
+                path: 'menu3-2',
+                name: 'NestedMenu3-2',
+                component: '',
+                meta: {
+                  title: 'menus.system.menu32',
+                  icon: '',
+                  keepAlive: true
+                },
+                children: [
+                  {
+                    path: 'menu3-2-1',
+                    name: 'NestedMenu3-2-1',
+                    component: RoutesAlias.NestedMenu321,
+                    meta: {
+                      title: 'menus.system.menu321',
+                      icon: '',
+                      keepAlive: true
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    path: '/car',
+    name: 'Car',
+    component: RoutesAlias.Home,
+    meta: {
+      title: 'menus.car.title',
+      icon: '',
+      roles: ['R_SUPER', 'R_ADMIN']
+    },
+    children: [
+      {
+        path: 'usedcar',
+        name: 'Usedcar',
+        component: RoutesAlias.Usedcar,
+        meta: {
+          title: 'menus.car.used',
+          keepAlive: true,
+          roles: ['R_SUPER', 'R_ADMIN']
+        }
+      },
+      {
+        path: 'newcar',
+        name: 'Newcar',
+        component: RoutesAlias.Newcar,
+        meta: {
+          title: 'menus.car.newcar',
+          keepAlive: true,
+          roles: ['R_SUPER']
+        }
+      }
+    ]
+  },
+  {
+    path: '/article',
+    name: 'Article',
+    component: RoutesAlias.Home,
+    meta: {
+      title: 'menus.article.title',
+      icon: '',
+      roles: ['R_SUPER', 'R_ADMIN']
+    },
+    children: [
+      {
+        path: 'article-list',
+        name: 'ArticleList',
+        component: RoutesAlias.ArticleList,
+        meta: {
+          title: 'menus.article.articleList',
+          keepAlive: true,
+          authList: [
+            {
+              title: '新增',
+              auth_mark: 'add'
+            },
+            {
+              title: '编辑',
+              auth_mark: 'edit'
+            }
+          ]
+        }
+      },
+
+      {
+        path: 'detail',
+        name: 'ArticleDetail',
+        component: RoutesAlias.ArticleDetail,
+        meta: {
+          title: 'menus.article.articleDetail',
+          isHide: true,
+          keepAlive: true,
+          activePath: '/article/article-list' // 激活菜单路径
+        }
+      },
+      {
+        path: 'comment',
+        name: 'ArticleComment',
+        component: RoutesAlias.Comment,
+        meta: {
+          title: 'menus.article.comment',
+          keepAlive: true
+        }
+      },
+      {
+        path: 'publish',
+        name: 'ArticlePublish',
+        component: RoutesAlias.ArticlePublish,
+        meta: {
+          title: 'menus.article.articlePublish',
+          keepAlive: true,
+          authList: [
+            {
+              title: '发布',
+              auth_mark: 'article/article-publish/add'
+            }
+          ]
+        }
+      }
+    ]
+  },
+
+  {
+    path: '/safeguard',
+    name: 'Safeguard',
+    component: RoutesAlias.Home,
+    meta: {
+      title: 'menus.safeguard.title',
+      icon: '',
+      keepAlive: false
+    },
+    children: [
+      {
+        path: 'server',
+        name: 'SafeguardServer',
+        component: RoutesAlias.Server,
+        meta: {
+          title: 'menus.safeguard.server',
+          keepAlive: true
+        }
+      }
+    ]
+  }
+]

src/router/routes/asyncRoutes.ts

@@ -14,350 +14,52 @@ import { WEB_LINKS } from '@/utils/constants'
  */
 export const asyncRoutes: AppRouteRecord[] = [
   {
-    name: 'Dashboard',
-    path: '/dashboard',
-    component: RoutesAlias.Home,
+    path: '/crmpc/customer/add',
+    name: 'CrmpcustomerAdd',
+    component: RoutesAlias.CrmpcustomerAdd,
     meta: {
-      title: 'menus.dashboard.title',
-      icon: ''
-    },
-    children: [
-      {
-        path: 'console',
-        name: 'Console',
-        component: RoutesAlias.Dashboard,
-        meta: {
-          title: 'menus.dashboard.console',
-          keepAlive: false,
-          fixedTab: true
-        }
-      },
-      {
-        path: 'analysis',
-        name: 'Analysis',
-        component: RoutesAlias.Analysis,
-        meta: {
-          title: 'menus.dashboard.analysis',
-          keepAlive: false
-        }
-      },
-      {
-        path: 'ecommerce',
-        name: 'Ecommerce',
-        component: RoutesAlias.Ecommerce,
-        meta: {
-          title: 'menus.dashboard.ecommerce',
-          keepAlive: false
-        }
-      }
-    ]
+      title: '新增客户资料',
+      isHide: true,
+      // isHideTab: true
+    }
   },
   {
-    path: '/work',
-    name: 'Work',
-    component: RoutesAlias.Home,
-    // component:'/work',
+    path: '/crmpc/customer/show',
+    name: 'CrmpcustomerShow',
+    component: RoutesAlias.CrmpcustomerShow,
     meta: {
-      title: 'menus.work.title',
-      icon: '',
-      roles: ['R_SUPER', 'R_ADMIN']
-    },
-    children: [
-      {
-        path: 'order',
-        name: '工单列表',
-        component: RoutesAlias.Order,
-        meta: {
-          title: 'menus.work.order',
-          keepAlive: true,
-          roles: ['R_SUPER', 'R_ADMIN']
-        }
-      },
-      {
-        path: 'type',
-        name: 'Type',
-        component: RoutesAlias.OrderType,
-        meta: {
-          title: 'menus.work.type',
-          keepAlive: true,
-          roles: ['R_SUPER', 'R_ADMIN']
-        }
-      }
-    ]
+      title: '客户资料',
+      isHide: true,
+      // isHideTab: true
+    }
   },
   {
-    path: '/system',
-    name: 'System',
-    component: RoutesAlias.Home,
+    path: '/crmpc/customer/edit',
+    name: 'CrmpcustomerEdit',
+    component: RoutesAlias.CrmpcustomerEdit,
     meta: {
-      title: 'menus.system.title',
-      icon: '',
-      roles: ['R_SUPER', 'R_ADMIN']
-    },
-    children: [
-      {
-        path: 'user',
-        name: 'User',
-        component: RoutesAlias.User,
-        meta: {
-          title: 'menus.system.user',
-          keepAlive: true,
-          roles: ['R_SUPER', 'R_ADMIN']
-        }
-      },
-      {
-        path: 'role',
-        name: 'Role',
-        component: RoutesAlias.Role,
-        meta: {
-          title: 'menus.system.role',
-          keepAlive: true,
-          roles: ['R_SUPER']
-        }
-      },
-      {
-        path: 'user-center',
-        name: 'UserCenter',
-        component: RoutesAlias.UserCenter,
-        meta: {
-          title: 'menus.system.userCenter',
-          isHide: true,
-          keepAlive: true,
-          isHideTab: true
-        }
-      },
-      {
-        path: 'menu',
-        name: 'Menus',
-        component: RoutesAlias.Menu,
-        meta: {
-          title: 'menus.system.menu',
-          keepAlive: true,
-          roles: ['R_SUPER'],
-          authList: [
-            {
-              title: '新增',
-              auth_mark: 'add'
-            },
-            {
-              title: '编辑',
-              auth_mark: 'edit'
-            },
-            {
-              title: '删除',
-              auth_mark: 'delete'
-            }
-          ]
-        }
-      },
-      {
-        path: 'nested',
-        name: 'Nested',
-        component: '',
-        meta: {
-          title: 'menus.system.nested',
-          keepAlive: true
-        },
-        children: [
-          {
-            path: 'menu1',
-            name: 'NestedMenu1',
-            component: RoutesAlias.NestedMenu1,
-            meta: {
-              title: 'menus.system.menu1',
-              icon: '',
-              keepAlive: true
-            }
-          },
-          {
-            path: 'menu2',
-            name: 'NestedMenu2',
-            component: '',
-            meta: {
-              title: 'menus.system.menu2',
-              icon: '',
-              keepAlive: true
-            },
-            children: [
-              {
-                path: 'menu2-1',
-                name: 'NestedMenu2-1',
-                component: RoutesAlias.NestedMenu21,
-                meta: {
-                  title: 'menus.system.menu21',
-                  icon: '',
-                  keepAlive: true
-                }
-              }
-            ]
-          },
-          {
-            path: 'menu3',
-            name: 'NestedMenu3',
-            component: '',
-            meta: {
-              title: 'menus.system.menu3',
-              icon: '',
-              keepAlive: true
-            },
-            children: [
-              {
-                path: 'menu3-1',
-                name: 'NestedMenu3-1',
-                component: RoutesAlias.NestedMenu31,
-                meta: {
-                  title: 'menus.system.menu31',
-                  icon: '',
-                  keepAlive: true
-                }
-              },
-              {
-                path: 'menu3-2',
-                name: 'NestedMenu3-2',
-                component: '',
-                meta: {
-                  title: 'menus.system.menu32',
-                  icon: '',
-                  keepAlive: true
-                },
-                children: [
-                  {
-                    path: 'menu3-2-1',
-                    name: 'NestedMenu3-2-1',
-                    component: RoutesAlias.NestedMenu321,
-                    meta: {
-                      title: 'menus.system.menu321',
-                      icon: '',
-                      keepAlive: true
-                    }
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    ]
+      title: '编辑客户资料',
+      isHide: true,
+      // isHideTab: true
+    }
   },
   {
-    path: '/car',
-    name: 'Car',
-    component: RoutesAlias.Home,
+    path: '/crmpc/customer/followadd',
+    name: 'CustomerFollowAdd',
+    component: RoutesAlias.CrmpcustomerFollowadd,
     meta: {
-      title: 'menus.car.title',
-      icon: '',
-      roles: ['R_SUPER', 'R_ADMIN']
-    },
-    children: [
-      {
-        path: 'usedcar',
-        name: 'Usedcar',
-        component: RoutesAlias.Usedcar,
-        meta: {
-          title: 'menus.car.used',
-          keepAlive: true,
-          roles: ['R_SUPER', 'R_ADMIN']
-        }
-      },
-      {
-        path: 'newcar',
-        name: 'Newcar',
-        component: RoutesAlias.Newcar,
-        meta: {
-          title: 'menus.car.newcar',
-          keepAlive: true,
-          roles: ['R_SUPER']
-        }
-      }
-    ]
+      title: '添加跟进',
+      isHide: true,
+      // isHideTab: true
+    }
   },
   {
-    path: '/article',
-    name: 'Article',
-    component: RoutesAlias.Home,
+    path: '/crmpc/recycle',
+    name: 'Recycle',
+    component: RoutesAlias.recycle,
     meta: {
-      title: 'menus.article.title',
-      icon: '',
-      roles: ['R_SUPER', 'R_ADMIN']
-    },
-    children: [
-      {
-        path: 'article-list',
-        name: 'ArticleList',
-        component: RoutesAlias.ArticleList,
-        meta: {
-          title: 'menus.article.articleList',
-          keepAlive: true,
-          authList: [
-            {
-              title: '新增',
-              auth_mark: 'add'
-            },
-            {
-              title: '编辑',
-              auth_mark: 'edit'
-            }
-          ]
-        }
-      },
-
-      {
-        path: 'detail',
-        name: 'ArticleDetail',
-        component: RoutesAlias.ArticleDetail,
-        meta: {
-          title: 'menus.article.articleDetail',
-          isHide: true,
-          keepAlive: true,
-          activePath: '/article/article-list' // 激活菜单路径
-        }
-      },
-      {
-        path: 'comment',
-        name: 'ArticleComment',
-        component: RoutesAlias.Comment,
-        meta: {
-          title: 'menus.article.comment',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'publish',
-        name: 'ArticlePublish',
-        component: RoutesAlias.ArticlePublish,
-        meta: {
-          title: 'menus.article.articlePublish',
-          keepAlive: true,
-          authList: [
-            {
-              title: '发布',
-              auth_mark: 'article/article-publish/add'
-            }
-          ]
-        }
-      }
-    ]
+      title: '回收站',
+      isHide: true
+    }
   },
-
-  {
-    path: '/safeguard',
-    name: 'Safeguard',
-    component: RoutesAlias.Home,
-    meta: {
-      title: 'menus.safeguard.title',
-      icon: '',
-      keepAlive: false
-    },
-    children: [
-      {
-        path: 'server',
-        name: 'SafeguardServer',
-        component: RoutesAlias.Server,
-        meta: {
-          title: 'menus.safeguard.server',
-          keepAlive: true
-        }
-      }
-    ]
-  }
 ]

src/router/routesAlias.ts

@@ -42,7 +42,6 @@ export enum RoutesAlias {
   Role = '/system/role', // 角色
   Usedcar = '/car/usedcar', // 角色
   Newcar = '/car/newcar', // 角色
-  UserCenter = '/system/user-center', // 用户中心
   Menu = '/system/menu', // 菜单
   NestedMenu1 = '/system/nested/menu1', // 嵌套菜单1
   NestedMenu21 = '/system/nested/menu2', // 嵌套菜单2-1
@@ -51,7 +50,16 @@ export enum RoutesAlias {
   Server = '/safeguard/server', // 服务器
   ChangeLog = '/change/log', // 更新日志
   Order = '/work/order', // 工单
-  OrderType = '/work/type' // 工单
+  OrderType = '/work/type', // 工单
+  Crmpchome = '/crmpc/home', // crm首页
+  Crmphighseas = '/crmpc/highseas', // crm公海
+  Crmpcustomer = '/crmpc/customer', // crm客户
+  CrmpcustomerAdd = '/crmpc/customer/Add',//客户添加
+  CrmpcustomerEdit = '/crmpc/customer/Edit',//客户编辑
+  CrmpcustomerShow = '/crmpc/customer/Show',//客户详情
+  CrmpcustomerFollowadd = '/crmpc/customer/Followadd',//添加跟进
+  recycle = '/crmpc/recycle',//回收站
+  UserCenter = '/system/user-center', // 用户中心
 }
 
 // 主页路由

src/types/components.d.ts

@@ -74,15 +74,9 @@ declare module 'vue' {
     ContainerSettings: typeof import('./../components/core/layouts/art-settings-panel/widget/ContainerSettings.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
-    ElCalendar: typeof import('element-plus/es')['ElCalendar']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
@@ -92,36 +86,24 @@ declare module 'vue' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElProgress: typeof import('element-plus/es')['ElProgress']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es')['ElTag']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     ElWatermark: typeof import('element-plus/es')['ElWatermark']
     HorizontalSubmenu: typeof import('./../components/core/layouts/art-menus/art-horizontal-menu/widget/HorizontalSubmenu.vue')['default']
     LoginLeftView: typeof import('./../components/core/views/login/LoginLeftView.vue')['default']

src/typings/api.d.ts

@@ -157,4 +157,18 @@ declare namespace Api {
       total: number
     }
   }
+  namespace Crm {
+    /** 信息 */
+    interface CrmInfo {
+      data: never[]
+    }
+
+    /** 列表数据 */
+    interface CrmListData {
+      data: CrmInfo[]
+      current: number
+      size: number
+      total: number
+    }
+  }
 }

src/views/crmpc/customer/Add.vue

@@ -16,55 +16,55 @@
     >
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="客户渠道" prop="channel">
-            <el-select v-model="form.channel" placeholder="请选择客户渠道">
-              <el-option v-for="item in channelOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-form-item label="客户渠道" prop="channel_id">
+            <el-select v-model="form.channel_id" filterable placeholder="请选择客户渠道">
+              <el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
           </el-form-item>
-          <el-form-item label="客户商机" prop="opportunity">
-            <el-select v-model="form.opportunity" placeholder="请选择客户商机">
-              <el-option v-for="item in opportunityOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-form-item label="客户商机" prop="magnitude">
+            <el-select v-model="form.magnitude" placeholder="请选择客户商机">
+              <el-option v-for="item in opportunityOptions" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
           </el-form-item>
-          <el-form-item label="客户名称" prop="name">
-            <el-input v-model="form.name" placeholder="请输入客户名称" />
+          <el-form-item label="客户名称" prop="contacts">
+            <el-input v-model="form.contacts" placeholder="请输入客户名称" />
           </el-form-item>
-          <el-form-item label="客户商机" prop="gender" >
-            <el-radio-group v-model="form.gender" style="justify-content: flex-end;width: 100%;">
-              <el-radio label="未知">未知</el-radio>
-              <el-radio label="男">男</el-radio>
-              <el-radio label="女">女</el-radio>
+          <el-form-item label="客户性别" prop="sex" >
+            <el-radio-group v-model="form.sex" style="justify-content: flex-end;width: 100%;">
+              <el-radio label="0">未知</el-radio>
+              <el-radio label="1">男</el-radio>
+              <el-radio label="2">女</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="联系方式" prop="contact">
-            <el-input v-model="form.contact" placeholder="请输入联系方式" />
+          <el-form-item label="联系方式" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入联系方式" />
           </el-form-item>
           <el-form-item label="Email" prop="email">
             <el-input v-model="form.email" placeholder="请输入Email" />
           </el-form-item>
-          <el-form-item label="WhatsApp" prop="whatsapp">
-            <el-input v-model="form.whatsapp" placeholder="请输入WhatsApp" />
+          <el-form-item label="WhatsApp" prop="WhatsApp">
+            <el-input v-model="form.WhatsApp" placeholder="请输入WhatsApp" />
           </el-form-item>
-          <el-form-item label="客户意向" prop="intention">
-            <el-select v-model="form.intention" placeholder="请选择客户意向">
-              <el-option v-for="item in intentionOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <!-- <el-form-item label="客户偏好" prop="car_type_id">
+            <el-select v-model="form.car_type_id" placeholder="请选择客户偏好">
+              <el-option v-for="item in intentionOptions" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item> -->
+          <el-form-item label="客户分级" prop="grade">
+            <el-select v-model="form.grade" placeholder="请选择客户分级">
+              <el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
           </el-form-item>
-          <el-form-item label="客户分级" prop="level">
-            <el-select v-model="form.level" placeholder="请选择客户分级">
-              <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="国家" prop="country">
-            <el-select v-model="form.country" placeholder="请选择国家">
-              <el-option v-for="item in countryOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-form-item label="国家" prop="country_id">
+            <el-select v-model="form.country_id" filterable placeholder="请选择国家">
+              <el-option v-for="item in countryOptions" :key="item.id" :label="item.cn_addr" :value="item.id" />
             </el-select>
           </el-form-item>
           <el-form-item label="公司" prop="company">
-            <el-input v-model="form.company" placeholder="请输入公司" />
+            <el-input v-model="form.company" placeholder="请输入公司" @click="showMapDialog = true" readonly />
           </el-form-item>
-          <el-form-item label="备注" prop="remark">
-            <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+          <el-form-item label="备注" prop="describe">
+            <el-input v-model="form.describe" type="textarea" :rows="3" placeholder="请输入备注" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -73,70 +73,189 @@
      </el-form-item>
     </el-form>
   </div>
+  <!-- 谷歌地图选点弹窗 -->
+  <el-dialog v-model="showMapDialog" title="选择公司地址" width="800px">
+    <div style="height:400px;position:relative;">
+      <!-- <input id="map-search" type="text" placeholder="搜索地点" style="position:absolute;z-index:2;top:10px;left:10px;width:300px;" /> -->
+      <div id="google-map" style="width:100%;height:100%;"></div>
+    </div>
+    <template #footer>
+      <el-button @click="showMapDialog = false">取消</el-button>
+      <el-button type="primary" @click="confirmMapSelect">确定</el-button>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, watch, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
+import { CrmService } from '@/api/crmApi'
 
 const router = useRouter()
 const formRef = ref()
 const form = ref({
-  channel: '',
-  opportunity: '',
-  name: '',
-  gender: '未知',
-  contact: '',
+  channel_id: '',
+  magnitude: '',
+  contacts: '',
+  sex: '0',
+  phone: '',
   email: '',
-  whatsapp: '',
-  intention: '',
-  level: '',
-  country: '',
+  WhatsApp: '',
+  grade: '',
+  country_id: '',
   company: '',
-  remark: ''
+  describe: ''
 })
 
 const rules = {
   channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
   name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
-  intention: [{ required: true, message: '请选择客户意向', trigger: 'change' }]
+  // car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
 }
 
-const channelOptions = [
-  { label: '渠道A', value: 'A' },
-  { label: '渠道B', value: 'B' }
-]
-const opportunityOptions = [
-  { label: '商机A', value: 'A' },
-  { label: '商机B', value: 'B' }
-]
-const intentionOptions = [
-  { label: '意向A', value: 'A' },
-  { label: '意向B', value: 'B' }
-]
-const levelOptions = [
-  { label: '高', value: 'high' },
-  { label: '中', value: 'mid' },
-  { label: '低', value: 'low' }
-]
-const countryOptions = [
-  { label: '中国', value: 'china' },
-  { label: '美国', value: 'usa' }
-]
-
+const channelOptions = ref<any>()
+const opportunityOptions = ref<any>()
+const intentionOptions = ref<any>()
+const levelOptions = ref<any>()
+const countryOptions = ref<any>()
+onMounted(() => {
+  getgetChannel()
+  getMagnitude()
+  getGrade()
+  getarea()
+})
+//渠道
+const getgetChannel = async () => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const res = await CrmService.getChannel()
+    channelOptions.value = res||[]
+  } catch (error) { channelOptions.value = [] }
+}
+//商机
+const getMagnitude = async () => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const res = await CrmService.getMagnitude()
+    opportunityOptions.value = res||[]
+  } catch (error) { opportunityOptions.value = [] }
+}
+//客户等级 
+const getGrade = async () => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const res = await CrmService.getGrade()
+    levelOptions.value = res||[]
+  } catch (error) { levelOptions.value = [] }
+}
+//国家
+const getarea = async () => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const res = await CrmService.getCountry()
+    countryOptions.value = res||[]
+  } catch (error) { countryOptions.value = [] }
+}
 function goBack() {
   router.back()
 }
 
 function submitForm() {
-  formRef.value.validate((valid: boolean) => {
+  formRef.value.validate(async (valid: boolean) => {
     if (valid) {
-      ElMessage.success('提交成功！')
-      // 这里可以提交表单数据到后端
+      try {
+        const res = await CrmService.customerAdd(form.value)
+        ElMessage.success(res?.message || '提交成功！')
+        router.push('/crmpc/customer')
+      } catch (e: any) {
+        ElMessage.error(e?.message || '提交失败')
+      }
     }
   })
 }
+
+const showMapDialog = ref(false)
+const selectedAddress = ref('')
+const selectedLatLng = ref({ lat: null, lng: null })
+
+function confirmMapSelect() {
+  form.value.company = selectedAddress.value
+  // 你也可以保存 selectedLatLng.value 到 form
+  showMapDialog.value = false
+}
+
+let map: any, marker: any, autocomplete: any
+
+function initMap() {
+  const google = (window as any).google;
+  const input = document.getElementById('map-search') as HTMLInputElement;
+  if (!input) {
+    setTimeout(initMap, 100);
+    return;
+  }
+  map = new google.maps.Map(document.getElementById('google-map'), {
+    center: { lat: 39.9042, lng: 116.4074 }, // 默认北京
+    zoom: 12
+  })
+
+  marker = new google.maps.Marker({
+    map,
+    draggable: true
+  })
+
+  map.addListener('click', (e: any) => {
+    marker.setPosition(e.latLng)
+    getAddressByLatLng(e.latLng)
+  })
+
+  marker.addListener('dragend', (e: any) => {
+    getAddressByLatLng(e.latLng)
+  })
+
+  autocomplete = new google.maps.places.Autocomplete(input)
+  autocomplete.bindTo('bounds', map)
+  autocomplete.addListener('place_changed', () => {
+    const place = autocomplete.getPlace()
+    if (!place.geometry) return
+    map.panTo(place.geometry.location)
+    marker.setPosition(place.geometry.location)
+    getAddressByLatLng(place.geometry.location)
+  })
+}
+
+function getAddressByLatLng(latlng: any) {
+  const google = (window as any).google;
+  const geocoder = new google.maps.Geocoder()
+  geocoder.geocode({ location: latlng }, (results: any, status: any) => {
+    if (status === 'OK' && results[0]) {
+      selectedAddress.value = results[0].formatted_address
+      selectedLatLng.value = {
+        lat: latlng.lat(),
+        lng: latlng.lng()
+      }
+    }
+  })
+}
+
+watch(showMapDialog, (val) => {
+  if (val) {
+    nextTick(() => {
+      setTimeout(() => {
+        const google = (window as any).google;
+        if (!google || !google.maps) {
+          const script = document.createElement('script')
+          script.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I&libraries=places`
+          script.async = true
+          script.onload = initMap
+          document.head.appendChild(script)
+        } else {
+          initMap()
+        }
+      }, 100)
+    })
+  }
+})
 </script>
 
 <style scoped>

src/views/crmpc/customer/Edit.vue

@@ -16,55 +16,55 @@
     >
       <el-row :gutter="24">
         <el-col :span="24">
-          <el-form-item label="客户渠道" prop="channel">
-            <el-select v-model="form.channel" placeholder="请选择客户渠道">
-              <el-option v-for="item in channelOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-form-item label="客户渠道" prop="channel_id">
+            <el-select v-model="form.channel_id" filterable placeholder="请选择客户渠道">
+              <el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
           </el-form-item>
-          <el-form-item label="客户商机" prop="opportunity">
-            <el-select v-model="form.opportunity" placeholder="请选择客户商机">
-              <el-option v-for="item in opportunityOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-form-item label="客户商机" prop="magnitude">
+            <el-select v-model="form.magnitude" placeholder="请选择客户商机">
+              <el-option v-for="item in opportunityOptions" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
           </el-form-item>
-          <el-form-item label="客户名称" prop="name">
-            <el-input v-model="form.name" placeholder="请输入客户名称" />
+          <el-form-item label="客户名称" prop="contacts">
+            <el-input v-model="form.contacts" placeholder="请输入客户名称" />
           </el-form-item>
-          <el-form-item label="客户商机" prop="gender" >
-            <el-radio-group v-model="form.gender" style="justify-content: flex-end;width: 100%;">
-              <el-radio label="未知">未知</el-radio>
-              <el-radio label="男">男</el-radio>
-              <el-radio label="女">女</el-radio>
+          <el-form-item label="客户性别" prop="sex" >
+            <el-radio-group v-model="form.sex" style="justify-content: flex-end;width: 100%;">
+              <el-radio :label="0">未知</el-radio>
+              <el-radio :label="1">男</el-radio>
+              <el-radio :label="2">女</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="联系方式" prop="contact">
-            <el-input v-model="form.contact" placeholder="请输入联系方式" />
+          <el-form-item label="联系方式" prop="phone">
+            <el-input v-model="form.phone" placeholder="请输入联系方式" />
           </el-form-item>
           <el-form-item label="Email" prop="email">
             <el-input v-model="form.email" placeholder="请输入Email" />
           </el-form-item>
-          <el-form-item label="WhatsApp" prop="whatsapp">
-            <el-input v-model="form.whatsapp" placeholder="请输入WhatsApp" />
+          <el-form-item label="WhatsApp" prop="WhatsApp">
+            <el-input v-model="form.WhatsApp" placeholder="请输入WhatsApp" />
           </el-form-item>
-          <el-form-item label="客户意向" prop="intention">
-            <el-select v-model="form.intention" placeholder="请选择客户意向">
-              <el-option v-for="item in intentionOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <!-- <el-form-item label="客户偏好" prop="car_type_id">
+            <el-select v-model="form.car_type_id" placeholder="请选择客户偏好">
+              <el-option v-for="item in intentionOptions" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item> -->
+          <el-form-item label="客户分级" prop="grade">
+            <el-select v-model="form.grade" placeholder="请选择客户分级">
+              <el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" />
             </el-select>
           </el-form-item>
-          <el-form-item label="客户分级" prop="level">
-            <el-select v-model="form.level" placeholder="请选择客户分级">
-              <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="国家" prop="country">
-            <el-select v-model="form.country" placeholder="请选择国家">
-              <el-option v-for="item in countryOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-form-item label="国家" prop="country_id">
+            <el-select v-model="form.country_id" filterable placeholder="请选择国家">
+              <el-option v-for="item in countryOptions" :key="item.id" :label="item.cn_addr" :value="item.id" />
             </el-select>
           </el-form-item>
           <el-form-item label="公司" prop="company">
             <el-input v-model="form.company" placeholder="请输入公司" />
           </el-form-item>
-          <el-form-item label="备注" prop="remark">
-            <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+          <el-form-item label="备注" prop="describe">
+            <el-input v-model="form.describe" type="textarea" :rows="3" placeholder="请输入备注" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -76,64 +76,97 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
-
+import { CrmService } from '@/api/crmApi'
+const route = useRoute()
+const customerId = route.query.id
 const router = useRouter()
 const formRef = ref()
-const form = ref({
-  channel: '',
-  opportunity: '',
-  name: '',
-  gender: '未知',
-  contact: '',
-  email: '',
-  whatsapp: '',
-  intention: '',
-  level: '',
-  country: '',
-  company: '',
-  remark: ''
-})
+
 
 const rules = {
   channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
   name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
-  intention: [{ required: true, message: '请选择客户意向', trigger: 'change' }]
+  // car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
 }
 
-const channelOptions = [
-  { label: '渠道A', value: 'A' },
-  { label: '渠道B', value: 'B' }
-]
-const opportunityOptions = [
-  { label: '商机A', value: 'A' },
-  { label: '商机B', value: 'B' }
-]
-const intentionOptions = [
-  { label: '意向A', value: 'A' },
-  { label: '意向B', value: 'B' }
-]
-const levelOptions = [
-  { label: '高', value: 'high' },
-  { label: '中', value: 'mid' },
-  { label: '低', value: 'low' }
-]
-const countryOptions = [
-  { label: '中国', value: 'china' },
-  { label: '美国', value: 'usa' }
-]
-
+const channelOptions = ref<any>()
+const opportunityOptions = ref<any>()
+const intentionOptions = ref<any>()
+const levelOptions = ref<any>()
+const countryOptions = ref<any>()
+onMounted(async () => {
+  await getgetChannel()
+  await getMagnitude()
+  await getGrade()
+  await getarea()
+  await getdetilfn()
+})
+// 定义客户详情类型
+interface CustomerInfo {
+  contacts?: string
+  // 可根据实际接口补充更多字段
+  [key: string]: any
+}
+const form = ref<CustomerInfo>({})
+const customerInfo = ref<CustomerInfo>({})
+//获取详情
+const getdetilfn = async() => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const res = await CrmService.getcustomerdetail({id:customerId})
+    customerInfo.value = res
+    form.value = res
+  } catch (error) { }
+}
+//渠道
+const getgetChannel = async () => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const res = await CrmService.getChannel()
+    channelOptions.value = res||[]
+  } catch (error) { channelOptions.value = [] }
+}
+//商机
+const getMagnitude = async () => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const res = await CrmService.getMagnitude()
+    opportunityOptions.value = res||[]
+  } catch (error) { opportunityOptions.value = [] }
+}
+//客户等级 
+const getGrade = async () => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const res = await CrmService.getGrade()
+    levelOptions.value = res||[]
+  } catch (error) { levelOptions.value = [] }
+}
+//国家
+const getarea = async () => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const res = await CrmService.getCountry()
+    countryOptions.value = res||[]
+  } catch (error) { countryOptions.value = [] }
+}
 function goBack() {
   router.back()
 }
 
 function submitForm() {
-  formRef.value.validate((valid: boolean) => {
+  formRef.value.validate(async (valid: boolean) => {
     if (valid) {
-      ElMessage.success('提交成功！')
-      // 这里可以提交表单数据到后端
+      try {
+        const res = await CrmService.customerAdd(form.value)
+        ElMessage.success(res?.message || '提交成功！')
+        router.push('/crmpc/customer')
+      } catch (e: any) {
+        ElMessage.error(e?.message || '提交失败')
+      }
     }
   })
 }

src/views/crmpc/customer/Followadd.vue

@@ -8,38 +8,37 @@
     </div>
     <div class="edit-header boxshadow" style="position:relative;">
       <!-- 右上角三角形角标 -->
-      <div class="corner-tag"><span class="corner-text">跟进中</span></div>
+      <div class="corner-tag"><span class="corner-text">{{customerInfo.follow_txt}}</span></div>
       <el-row :gutter="20" style="flex: 1;">
-            <el-col :sm="24" :md="6" :lg="4">
-                <span>客户名称：{{ customerName }}</span>
-            </el-col>
-            <el-col :sm="24" :md="6" :lg="4">
-                <span>渠道：阿里</span>
-            </el-col>
-            <el-col :sm="24" :md="6" :lg="5">
-                <span>联系方式：16532014121</span>
-            </el-col>
-            <el-col :sm="24" :md="6" :lg="4">
-                <span>客户偏好：小轿车</span>
-            </el-col>
-            <el-col :sm="24" :md="6" :lg="4">
-                <span>客户商机：金牌商机</span>
-            </el-col>
+          <el-col :sm="24" :md="6" :lg="4">
+              <span>客户名称：{{ customerInfo.contacts }}</span>
+          </el-col>
+          <el-col :sm="24" :md="6" :lg="4">
+              <span>渠道：{{customerInfo.channel_name}}</span>
+          </el-col>
+          <el-col :sm="24" :md="6" :lg="5">
+              <span>联系方式：{{customerInfo.phone}}</span>
+          </el-col>
+          <el-col :sm="24" :md="6" :lg="4">
+              <span>客户偏好：{{customerInfo.car_type_name}}</span>
+          </el-col>
+          <el-col :sm="24" :md="6" :lg="4">
+              <span>客户商机：{{customerInfo.magnitude_txt}}</span>
+          </el-col>
         </el-row>
     </div>
     <el-card class="info-card" shadow="never" style="margin-top: 16px;">
       <div class="info-row">
         <span class="edit-title">客户分级</span>
-        <el-select v-model="customerLevel" placeholder="客户需求" style="width: 120px; margin-left: 16px;">
-          <el-option label="A" value="A" />
-          <el-option label="B" value="B" />
+        <el-select v-model="customerInfo.grade" placeholder="请选择客户分级" style="width: 120px; margin-left: 16px;" @change="handleGradeChange">
+          <el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </div>
     </el-card>
     <el-card class="info-card" shadow="never" style="margin-top: 16px;">
       <div class="info-row">
         <span class="edit-title">跟进方式</span>
-        <el-radio-group v-model="followType">
+        <el-radio-group v-model="form.type">
           <el-radio label="1">在线跟进</el-radio>
           <el-radio label="0">拜访</el-radio>
         </el-radio-group>
@@ -48,49 +47,60 @@
     <el-card class="info-card" shadow="never" style="margin-top: 16px;">
       <div class="info-row">
         <span class="edit-title">跟进时间</span>
-        <el-date-picker v-model="followTime" type="datetime" style="width: 200px;" />
+        <el-date-picker v-model="form.firstFollowtime" type="datetime" :value-format="'YYYY-MM-DD HH:mm:ss'" style="width: 200px;" />
       </div>
     </el-card>
-    <el-card v-if="followType=='1'" class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card v-if="form.type=='1'" class="info-card" shadow="never" style="margin-top: 16px;">
       <div class="info-top">
         <span class="edit-title">上传跟进截图/聊天截图</span>
         <el-upload
           class="upload-demo"
-          action="#"
+          :action="actionImageUplode" 
+          :headers="uploadHeaders"
+          :on-success="handleUploadSuccess"
           :show-file-list="false"
         >
           <img :src="imageUrl" class="avatar" />
         </el-upload>
       </div>
     </el-card>
-    <el-card v-if="followType=='1'" class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card v-if="form.type=='1'" class="info-card" shadow="never" style="margin-top: 16px;">
       <div class="info-top">
         <span class="edit-title">跟进描述</span>
-        <el-input v-model="followDesc" type="textarea" placeholder="请输入跟进描述" />
+        <el-input v-model="form.audio_text" type="textarea" placeholder="请输入跟进描述"  />
       </div>
     </el-card>
-    <el-card v-if="followType=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card v-if="form.type=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
+      <div class="info-row">
+        <span class="edit-title">当前位置</span>
+        <el-input v-model="followDesc" type="input" placeholder="请输入当前位置" style="width: 200px;" disabled>
+        </el-input>
+      </div>
+    </el-card>
+    <el-card v-if="form.type=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
       <div class="info-top">
         <span class="edit-title">当前位置拍照上传</span>
         <el-upload
           class="upload-demo"
-          action="#"
+          :action="actionImageUplode" 
+          :headers="uploadHeaders"
+          :on-success="handleUploadSuccess1"
           :show-file-list="false"
         >
-          <img :src="imageUrl" class="avatar" />
+          <img :src="imageUrls" class="avatar" />
         </el-upload>
       </div>
     </el-card>
-    <el-card v-if="followType=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card v-if="form.type=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
       <div class="info-top">
         <span class="edit-title">拜访内容</span>
-        <el-input v-model="followDesc" type="textarea" placeholder="请输入拜访内容" />
+        <el-input v-model="form.audio_text" type="textarea" placeholder="请输入拜访内容" />
       </div>
     </el-card>
     <el-card class="info-card" shadow="never" style="margin-top: 16px;">
       <div class="info-top">
         <span class="edit-title">备注</span>
-        <el-input v-model="remark" type="textarea" placeholder="请输入备注" />
+        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
       </div>
     </el-card>
     <el-card class="info-card" shadow="never" style="margin-top: 16px;">
@@ -111,10 +121,10 @@
                 <div class="timeline-item">
                   <div class="timeline-content-row">
                     <div class="timeline-content">
-                      <p class="timeline-text">在线跟进  <span class="timeline-mom">{{ item.time }}</span></p>
-                      <p class="timeline-mom">跟进描述 {{ item.content }}</p>
+                      <p class="timeline-text">{{item.type_txt}}  <span class="timeline-mom">{{ item.created_at }}</span></p>
+                      <p class="timeline-mom"><span v-if="item.type==1">跟进描述</span><span v-else>拜访内容</span>  {{ item.audio_text }}</p>
                     </div>
-                    <img v-if="item.img" :src="item.img" class="timeline-img" alt="图片" />
+                    <img v-if="item.picture_full" :src="item.picture_full" class="timeline-img" alt="图片" />
                   </div>
                 </div>
               </ElTimelineItem>
@@ -174,23 +184,92 @@
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import emptyimg from '@/assets/img/crm/empty.png'
-import imageUrl from '@/assets/img/crm/upimg.png'
+import imageUrl1 from '@/assets/img/crm/upimg.png'
 import { ElMessage } from 'element-plus'
 import { ElTimeline, ElTimelineItem, ElScrollbar } from 'element-plus'
+import { CrmService } from '@/api/crmApi'
+import { useUploadHeaders } from '@/composables/useUploadHeaders'
+const { uploadHeaders } = useUploadHeaders()
+let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
 const TIMELINE_PLACEMENT = 'top'
 const router = useRouter()
 const route = useRoute()
-const customerName = route.query.name || '王先生'
-const customerLevel = ref('需求沟通')
-const followType = ref('1')
-const followTime = ref(new Date())
+const customerId = route.query.id
+const levelOptions = ref<any>()
 const followDesc = ref('')
-const remark = ref('')
 const activecolor = "#3471FF"
-const followList: any[] = []
-const successDialogVisible = ref(true) // 控制弹窗显示
+
+const successDialogVisible = ref(false) // 控制弹窗显示
 const remindValue = ref('1')
 const customDate = ref('')
+const imageUrl = ref(imageUrl1)
+const imageUrls = ref(imageUrl1)
+function getNowStr() {
+  const d = new Date()
+  const pad = (n: any) => n < 10 ? '0' + n : n
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+}
+const form=ref({
+    customer_id:route.query.id,
+    type: '1',
+    address: '',
+    lat: '',
+    lng: '',
+    firstFollowtime: getNowStr(),
+    audio_text:'',
+    remark:'',
+    picture:''
+  })
+
+// 定义客户详情类型
+interface CustomerInfo {
+  contacts?: string
+  // 可根据实际接口补充更多字段
+  [key: string]: any
+}
+const customerInfo = ref<CustomerInfo>({})
+const followList = ref<CustomerInfo>({})
+//获取详情
+const getdetilfn = async() => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const res = await CrmService.getcustomerdetail({id:customerId})
+    customerInfo.value = res
+    console.log(res)
+  } catch (error) { }
+}
+//客户等级 
+const getGrade = async () => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const res = await CrmService.getGrade()
+    levelOptions.value = res||[]
+  } catch (error) { levelOptions.value = [] }
+}
+onMounted(async () => {
+  await getGrade()
+  await getdetilfn()
+  getCurrentLocation()
+  getfollowlist()
+})
+//修改等级
+function handleGradeChange(newGrade: number) {
+  if (!customerId) return
+  CrmService.customergrade({ id: customerId, grade: newGrade }).then(res => {
+    ElMessage.success(res?.message || '修改成功')
+  }).catch(() => {
+    ElMessage.error('修改失败')
+  })
+}
+//跟进记录getfollowlist
+const getfollowlist = async () => {
+  try {
+    const res = await CrmService.getfollowlist({customer_id:route.query.id})
+    followList.value = res||[]
+  } catch (error) { followList.value = [] }
+}
+
+
 
 const remindOptions = [
   { label: '1天后', value: '1' },
@@ -201,37 +280,92 @@ const remindOptions = [
 function disabledPastDate(time: Date) {
   return time.getTime() < Date.now() - 86400000
 }
-
-function formatDate(val: any) {
-  if (!val) return ''
-  const d = new Date(val)
-  const pad = (n: number) => n < 10 ? '0' + n : n
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
-}
-
-function handleSuccessConfirm() {
+const handleSuccessConfirm = async () =>{
+  let remindTimestamp = null
   if (remindValue.value === 'custom') {
     if (!customDate.value) {
       return ElMessage.warning('请选择自定义日期时间')
     }
-    // 处理自定义日期时间
-    console.log('自定义日期时间:', customDate.value)
+    // 自定义日期转时间戳
+    remindTimestamp = Math.floor(new Date(customDate.value).getTime() / 1000)
   } else {
-    // 处理固定天数
-    console.log('天数:', remindValue.value)
+    // 固定天数，当前时间加天数
+    const days = Number(remindValue.value)
+    remindTimestamp = Math.floor((Date.now() + days * 24 * 60 * 60 * 1000) / 1000)
   }
+  const res = await CrmService.followNext({id:customerId,follow_next:remindTimestamp})
+  ElMessage.success(res?.message || '提交成功！')
   successDialogVisible.value = false
+  setTimeout(() => {
+    router.push('/crmpc/customer')
+    }, 1000);
 }
 function goBack() {
   router.back()
 }
-function handleSubmit() {
-  // 提交逻辑
-  alert('提交成功')
+const handleSubmit = async () => {
+  try {
+    form.value.address=followDesc.value
+    const res = await CrmService.followAdd(form.value)
+    ElMessage.success(res?.message || '提交成功！')
+    successDialogVisible.value=true
+    // router.push('/crmpc/customer')
+  } catch (e: any) {
+    ElMessage.error(e?.message || '提交失败')
+  }
+}
+// 在 <script setup> 里添加获取地理位置方法
+function getCurrentLocation() {
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(
+      async (position) => {
+        const { latitude, longitude } = position.coords
+        // 可选：调用第三方逆地理编码API获取详细地址
+        const googleKey = 'AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I'
+        const url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${googleKey}`
+        try {
+          const res = await fetch(url)
+          const data = await res.json()
+          if (data.status === 'OK' && data.plus_code) {
+            followDesc.value = data.plus_code.compound_code
+          } else {
+            followDesc.value = `纬度: ${latitude}, 经度: ${longitude}`
+          }
+        } catch (e) {
+          followDesc.value = `纬度: ${latitude}, 经度: ${longitude}`
+        }
+      },
+      (error) => {
+        followDesc.value = '无法获取当前位置'
+      }
+    )
+  } else {
+    followDesc.value = '浏览器不支持定位功能'
+  }
+}
+function handleUploadSuccess(response: any) {
+  // 假设返回图片地址字段为 response.url 或 response.data.url
+  imageUrl.value = response.url || (response.data && response.data.file_url) || ''
+  // 如需同步到 form.picture
+  form.value.picture = response.url || (response.data && response.data.file_name) || ''
+}
+function handleUploadSuccess1(response: any) {
+  // 假设返回图片地址字段为 response.url 或 response.data.url
+  imageUrls.value = response.url || (response.data && response.data.file_url) || ''
+  // 如需同步到 form.picture
+  form.value.picture = response.url || (response.data && response.data.file_name) || ''
 }
 </script>
 
 <style scoped>
+.timeline-content-row{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.avatar,.timeline-img{
+  width: 80px;
+}
 .border{
   margin-left: 30px;
 }

src/views/crmpc/customer/Show.vue

@@ -8,23 +8,23 @@
     <div class="edit-header boxshadow pad20" style="position:relative;">
       <span class="border"></span><span class="edit-title">客户资料</span>
       <!-- 右上角三角形角标 -->
-      <div class="corner-tag"><span class="corner-text">跟进中</span></div>
+      <div class="corner-tag"><span class="corner-text">{{customerInfo.follow_txt}}</span></div>
       <div class="info-row-bar">
         <el-row :gutter="20" style="flex: 1;">
                 <el-col :sm="24" :md="6" :lg="4">
-                    <span>客户名称：{{ customerName }}</span>
+                    <span>客户名称：{{ customerInfo.contacts }}</span>
                 </el-col>
                 <el-col :sm="24" :md="6" :lg="4">
-                    <span>渠道：阿里</span>
+                    <span>渠道：{{customerInfo.channel_name}}</span>
                 </el-col>
                 <el-col :sm="24" :md="6" :lg="5">
-                    <span>联系方式：16532014121</span>
+                    <span>联系方式：{{customerInfo.phone}}</span>
                 </el-col>
                 <el-col :sm="24" :md="6" :lg="4">
-                    <span>客户偏好：小轿车</span>
+                    <span>客户偏好：{{customerInfo.car_type_name}}</span>
                 </el-col>
                 <el-col :sm="24" :md="6" :lg="4">
-                    <span>客户商机：金牌商机</span>
+                    <span>客户商机：{{customerInfo.magnitude_txt}}</span>
                 </el-col>
             </el-row>
         <el-button @click="goEdit" type="primary" class="edit-btn" size="small"><i class="iconfont-sys"> &#xe6bf;</i> 编辑资料</el-button>
@@ -34,21 +34,18 @@
     <el-card class="info-card" shadow="never" style="margin-top: 16px;">
       <div class="">
         <span class="border"></span><span class="edit-title">客户画像</span>
-        <el-button @click="tagDialogVisible = true" type="primary" size="small" style="float: right;">添加标签</el-button>
+        <el-button @click="addtag" type="primary" size="small" style="float: right;">添加标签</el-button>
       </div>
       <div class="tag-list">
-        <el-tag type="primary">潜在高价值</el-tag>
-        <el-tag type="primary">新客户</el-tag>
-        <el-tag type="primary">Tag 1</el-tag>
+        <el-tag type="primary" v-for="(item, index) in customerInfo.tags" :key="index">{{item.name}}</el-tag>
       </div>
     </el-card>
 
     <el-card class="info-card" shadow="never" style="margin-top: 16px;">
       <div class="info-row">
         <span class="edit-title">客户分级</span>
-        <el-select v-model="customerLevel" placeholder="客户需求" style="width: 120px; margin-left: 16px;">
-          <el-option label="A" value="A" />
-          <el-option label="B" value="B" />
+        <el-select v-model="customerInfo.grade" placeholder="请选择客户分级" style="width: 120px; margin-left: 16px;" @change="handleGradeChange">
+          <el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </div>
     </el-card>
@@ -56,7 +53,7 @@
     <el-card class="info-card" shadow="never" style="margin-top: 16px;">
       <div class="info-row">
         <span class="edit-title">跟进记录</span>
-        <el-button type="primary" size="small" style="float: right;">+ 添加跟进</el-button>
+        <el-button type="primary" size="small" style="float: right;" @click="goAddFollow">+ 添加跟进</el-button>
       </div>
       <div class="follow-list">
         <ElScrollbar >
@@ -72,10 +69,10 @@
                 <div class="timeline-item">
                   <div class="timeline-content-row">
                     <div class="timeline-content">
-                      <p class="timeline-text">在线跟进  <span class="timeline-mom">{{ item.time }}</span></p>
-                      <p class="timeline-mom">跟进描述 {{ item.content }}</p>
+                      <p class="timeline-text">{{item.type_txt}}  <span class="timeline-mom">{{ item.created_at }}</span></p>
+                      <p class="timeline-mom"><span v-if="item.type==1">跟进描述</span><span v-else>拜访内容</span>  {{ item.audio_text }}</p>
                     </div>
-                    <img v-if="item.img" :src="item.img" class="timeline-img" alt="图片" />
+                    <img v-if="item.picture_full" :src="item.picture_full" class="timeline-img" alt="图片" />
                   </div>
                 </div>
               </ElTimelineItem>
@@ -107,7 +104,7 @@
             class="col4 tagitem"
             style="cursor: pointer;"
             v-for="(item1, index1) in group.tags"
-            :class="{ 'tagactive': isActive(item1.group_id, item1.id) }"
+            :class="{ 'tagactive': activeMap[group.id] === item1.id }"
             @click="tagSelect(item1)"
             :key="index1"
           >
@@ -129,569 +126,124 @@
 import { ref,reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import emptyimg from '@/assets/img/crm/empty.png'
+import { CrmService } from '@/api/crmApi'
+import { ElMessage } from 'element-plus'
 // 常量配置
 const TIMELINE_PLACEMENT = 'top'
 const router = useRouter()
 const route = useRoute()
 const customerLevel = ref('A')
 const activecolor = "#3471FF"
-const followList: any[] = []
-// const followList = ref([
-//   {
-//     type: '在线跟进',
-//     time: '2025-07-01 09:20:10',
-//     content: '跟进描述：111111111111111111111111111111111111111111111111111111111111111111',
-//     img: 'https://img0.baidu.com/it/u=123456789,123456789&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
-//   },
-//   {
-//     type: '拜访',
-//     time: '2025-07-01 09:20:10',
-//     content: '跟进描述：111111111111111111111111111111111111111111111111111111111111111111',
-//     img: 'https://img0.baidu.com/it/u=123456789,123456789&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
-//   }
-// ])
 const tagDialogVisible = ref(false)
 const selectedTags = ref<string[]>([])
-
-// 标签分组数据
-const tagGroups = [
-    {
-        "id": 1,
-        "name": "价值标签",
-        "names": {
-            "zh_CN": "价值标签",
-            "en": "Value tags",
-            "ru": "Значок стоимости"
-        },
-        "type": "radio",
-        "created_at": "2025-03-27T01:49:11.000000Z",
-        "updated_at": "2025-03-31T08:13:46.000000Z",
-        "deleted_at": null,
-        "tags": [
-            {
-                "id": 1,
-                "group_id": 1,
-                "name": "高价值",
-                "names": {
-                    "zh_CN": "高价值",
-                    "en": "High value",
-                    "ru": "Высокая ценность"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 2,
-                "group_id": 1,
-                "name": "中价值",
-                "names": {
-                    "zh_CN": "中价值",
-                    "en": "Medium value",
-                    "ru": "Средняя стоимость"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 3,
-                "group_id": 1,
-                "name": "低价值",
-                "names": {
-                    "zh_CN": "低价值",
-                    "en": "Low value",
-                    "ru": "Низкая стоимость"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 4,
-                "group_id": 1,
-                "name": "潜在高价值",
-                "names": {
-                    "zh_CN": "潜在高价值",
-                    "en": "Potential high",
-                    "ru": "Потенциально высокая стоимость"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            }
-        ]
-    },
-    {
-        "id": 2,
-        "name": "生命周期标签",
-        "names": {
-            "zh_CN": "生命周期标签",
-            "en": "Lifecycle tags",
-            "ru": "Метки жизненного цикла"
-        },
-        "type": "radio",
-        "created_at": "2025-03-27T01:49:11.000000Z",
-        "updated_at": "2025-03-31T08:13:46.000000Z",
-        "deleted_at": null,
-        "tags": [
-            {
-                "id": 5,
-                "group_id": 2,
-                "name": "新客户",
-                "names": {
-                    "zh_CN": "新客户",
-                    "en": "New",
-                    "ru": "Новые клиенты"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 6,
-                "group_id": 2,
-                "name": "活跃",
-                "names": {
-                    "zh_CN": "活跃",
-                    "en": "Active",
-                    "ru": "Активный"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 7,
-                "group_id": 2,
-                "name": "沉默",
-                "names": {
-                    "zh_CN": "沉默",
-                    "en": "Silent",
-                    "ru": "Молчание"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 8,
-                "group_id": 2,
-                "name": "流失",
-                "names": {
-                    "zh_CN": "流失",
-                    "en": "Loss",
-                    "ru": "Утечка"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            }
-        ]
-    },
-    {
-        "id": 3,
-        "name": "行为标签",
-        "names": {
-            "zh_CN": "行为标签",
-            "en": "Behavior tags",
-            "ru": "Поведение"
-        },
-        "type": "radio",
-        "created_at": "2025-03-27T01:49:11.000000Z",
-        "updated_at": "2025-03-31T08:13:46.000000Z",
-        "deleted_at": null,
-        "tags": [
-            {
-                "id": 9,
-                "group_id": 3,
-                "name": "高频购买",
-                "names": {
-                    "zh_CN": "高频购买",
-                    "en": "Buy more",
-                    "ru": "ВЧ - покупка"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 10,
-                "group_id": 3,
-                "name": "大单",
-                "names": {
-                    "zh_CN": "大单",
-                    "en": "Big order",
-                    "ru": "Большой список"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 11,
-                "group_id": 3,
-                "name": "促销敏感",
-                "names": {
-                    "zh_CN": "促销敏感",
-                    "en": "Promotion",
-                    "ru": "Рекламная чувствительность"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 12,
-                "group_id": 3,
-                "name": "忠诚",
-                "names": {
-                    "zh_CN": "忠诚",
-                    "en": "Loyalty",
-                    "ru": "Верность"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            }
-        ]
-    },
-    {
-        "id": 4,
-        "name": "需求标签",
-        "names": {
-            "zh_CN": "需求标签",
-            "en": "Requirement tags",
-            "ru": "Требования"
-        },
-        "type": "radio",
-        "created_at": "2025-03-27T01:49:11.000000Z",
-        "updated_at": "2025-03-31T08:13:46.000000Z",
-        "deleted_at": null,
-        "tags": [
-            {
-                "id": 13,
-                "group_id": 4,
-                "name": "价格敏感",
-                "names": {
-                    "zh_CN": "价格敏感",
-                    "en": "Price Sensitive",
-                    "ru": "Чувствительность цен"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 14,
-                "group_id": 4,
-                "name": "品质追求",
-                "names": {
-                    "zh_CN": "品质追求",
-                    "en": "Quality pursuit",
-                    "ru": "Стремление к качеству"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 15,
-                "group_id": 4,
-                "name": "服务",
-                "names": {
-                    "zh_CN": "服务",
-                    "en": "Service",
-                    "ru": "Услуги"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 16,
-                "group_id": 4,
-                "name": "定制化",
-                "names": {
-                    "zh_CN": "定制化",
-                    "en": "Customize",
-                    "ru": "Индивидуализация"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            }
-        ]
-    },
-    {
-        "id": 5,
-        "name": "来源标签",
-        "names": {
-            "zh_CN": "来源标签",
-            "en": "Source tags",
-            "ru": "Метка источника"
-        },
-        "type": "radio",
-        "created_at": "2025-03-27T01:49:11.000000Z",
-        "updated_at": "2025-03-31T08:13:46.000000Z",
-        "deleted_at": null,
-        "tags": [
-            {
-                "id": 17,
-                "group_id": 5,
-                "name": "线上",
-                "names": {
-                    "zh_CN": "线上",
-                    "en": "On-line",
-                    "ru": "Линия"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 18,
-                "group_id": 5,
-                "name": "线下",
-                "names": {
-                    "zh_CN": "线下",
-                    "en": "Offline",
-                    "ru": "Под линией"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 19,
-                "group_id": 5,
-                "name": "推荐",
-                "names": {
-                    "zh_CN": "推荐",
-                    "en": "Recommend",
-                    "ru": "Рекомендации"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 20,
-                "group_id": 5,
-                "name": "合作伙伴",
-                "names": {
-                    "zh_CN": "合作伙伴",
-                    "en": "Partnership",
-                    "ru": "Партнеры"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            }
-        ]
-    },
-    {
-        "id": 6,
-        "name": "风险标签",
-        "names": {
-            "zh_CN": "风险标签",
-            "en": "Risk tags",
-            "ru": "Маркировка рисков"
-        },
-        "type": "radio",
-        "created_at": "2025-03-27T01:49:11.000000Z",
-        "updated_at": "2025-03-31T08:13:46.000000Z",
-        "deleted_at": null,
-        "tags": [
-            {
-                "id": 21,
-                "group_id": 6,
-                "name": "高风险",
-                "names": {
-                    "zh_CN": "高风险",
-                    "en": "High risk",
-                    "ru": "Высокий риск"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 22,
-                "group_id": 6,
-                "name": "中风险",
-                "names": {
-                    "zh_CN": "中风险",
-                    "en": "Medium risk",
-                    "ru": "Риск"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 23,
-                "group_id": 6,
-                "name": "低风险",
-                "names": {
-                    "zh_CN": "低风险",
-                    "en": "Low risk",
-                    "ru": "Низкий риск"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            }
-        ]
-    },
-    {
-        "id": 7,
-        "name": "满意度标签",
-        "names": {
-            "zh_CN": "满意度标签",
-            "en": "Satisfaction tags",
-            "ru": "Метка Удовлетворенность"
-        },
-        "type": "radio",
-        "created_at": "2025-03-27T01:49:11.000000Z",
-        "updated_at": "2025-03-31T08:13:46.000000Z",
-        "deleted_at": null,
-        "tags": [
-            {
-                "id": 24,
-                "group_id": 7,
-                "name": "非常满意",
-                "names": {
-                    "zh_CN": "非常满意",
-                    "en": "Very satisfied",
-                    "ru": "Очень доволен."
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 25,
-                "group_id": 7,
-                "name": "满意",
-                "names": {
-                    "zh_CN": "满意",
-                    "en": "Satisfied",
-                    "ru": "Удовлетворительно"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 26,
-                "group_id": 7,
-                "name": "不满意",
-                "names": {
-                    "zh_CN": "不满意",
-                    "en": "Unsatisfied",
-                    "ru": "Неудовлетворительно."
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:13:46.000000Z",
-                "deleted_at": null
-            }
-        ]
-    },
-    {
-        "id": 8,
-        "name": "忠诚度标签",
-        "names": {
-            "zh_CN": "忠诚度标签",
-            "en": "Loyalty tags",
-            "ru": "Маркировка лояльности"
-        },
-        "type": "radio",
-        "created_at": "2025-03-27T01:49:11.000000Z",
-        "updated_at": "2025-03-31T08:13:46.000000Z",
-        "deleted_at": null,
-        "tags": [
-            {
-                "id": 27,
-                "group_id": 8,
-                "name": "‌忠实客户",
-                "names": {
-                    "zh_CN": "‌忠实客户",
-                    "en": "Loyal",
-                    "ru": "Верный клиент"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:19:03.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 28,
-                "group_id": 8,
-                "name": "稳定客户",
-                "names": {
-                    "zh_CN": "稳定客户",
-                    "en": "Stable",
-                    "ru": "Стабилизация клиентов"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:19:03.000000Z",
-                "deleted_at": null
-            },
-            {
-                "id": 29,
-                "group_id": 8,
-                "name": "游离客户",
-                "names": {
-                    "zh_CN": "游离客户",
-                    "en": "Floating",
-                    "ru": "Свободные клиенты"
-                },
-                "created_at": "2025-03-27T01:49:11.000000Z",
-                "updated_at": "2025-03-31T08:19:03.000000Z",
-                "deleted_at": null
-            }
-        ]
+const customerId = route.query.id
+const levelOptions = ref<any>()
+const tagGroups = ref<any[]>([])
+const activeMap = reactive<{ [groupId: string]: number }>({})
+// 定义客户详情类型
+interface CustomerInfo {
+  contacts?: string
+  // 可根据实际接口补充更多字段
+  [key: string]: any
+}
+const customerInfo = ref<CustomerInfo>({})
+//获取详情
+const getdetilfn = async() => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const res = await CrmService.getcustomerdetail({id:customerId})
+    customerInfo.value = res
+    console.log(res)
+  } catch (error) { }
+}
+//客户等级 
+const getGrade = async () => {
+  try {
+    // 这里调用获取品牌列表的接口
+    const res = await CrmService.getGrade()
+    levelOptions.value = res||[]
+  } catch (error) { levelOptions.value = [] }
+}
+//跟进记录getfollowlist
+const followList = ref<CustomerInfo>({})
+const getfollowlist = async () => {
+  try {
+    const res = await CrmService.getfollowlist({customer_id:route.query.id})
+    followList.value = res||[]
+  } catch (error) { followList.value = [] }
+}
+onMounted(async () => {
+  await getGrade()
+  await getdetilfn()
+  // 在 getdetilfn 之后调用 tagGrouplistfn，确保 customerInfo 有数据
+  await tagGrouplistfn()
+  getfollowlist()
+})
+function addtag(){
+  tagDialogVisible.value = true
+  tagGrouplistfn()
+}
+const tagGrouplistfn = async () => {
+  try {
+    const res = await CrmService.tagGrouplist()
+    tagGroups.value = res || []
+    // 回显选中
+    if (customerInfo.value && Array.isArray(customerInfo.value.tags)) {
+      tagGroups.value.forEach(group => {
+        if (group.tags && Array.isArray(group.tags)) {
+          const matched = group.tags.find((item: any) =>
+            customerInfo.value.tags.some((t: any) => t.id === item.id)
+          )
+          if (matched) {
+            activeMap[group.id] = matched.id
+          }
+        }
+      })
     }
-]
-// 1. 定义类型
-type ActiveMapType = { [key: string]: number }
-
-// 2. 响应式选中映射
-const activeMap = reactive({} as ActiveMapType)
-
-// 3. 判断标签是否选中
-function isActive(groupId: string | number, tagId: number) {
-  return activeMap[String(groupId)] === tagId
+  } catch (error) { }
 }
 
 // 4. 点击标签
-function tagSelect(item: { group_id: string | number; id: number }) {
+async function tagSelect(item: { group_id: string | number; id: number }) {
   const key = String(item.group_id)
+  let tag_id = ''
   if (activeMap[key] === item.id) {
-    delete activeMap[key] // 取消选中
+    // 取消选中
+    delete activeMap[key]
+    tag_id = ''
   } else {
-    activeMap[key] = item.id // 选中
+    // 选中
+    activeMap[key] = item.id
+    tag_id = String(item.id)
+  }
+  try {
+    const res = await CrmService.tagGroupupdatePivot({ customer_id: customerId, group_id: key, tag_id })
+    ElMessage.success(res?.message || '操作成功')
+    await getdetilfn()
+    await tagGrouplistfn()
+  } catch (e) {
+    ElMessage.error('操作失败')
   }
 }
 
 // 5. 获取所有已选中的标签
-function getSelectedTags() {
-  const selected: any[] = []
-  for (const group of tagGroups) {
-    const key = String(group.id)
-    const tagId = activeMap[key]
-    if (tagId) {
-      const tag = group.tags.find(t => t.id === tagId)
-      if (tag) selected.push(tag)
-    }
-  }
-  return selected
-}
+// function getSelectedTags() {
+//   const selected: any[] = []
+//   for (const group of tagGroups) {
+//     const key = String(group.id)
+//     const tagId = activeMap[key]
+//     if (tagId) {
+//       const tag = group.tags.find(t => t.id === tagId)
+//       if (tag) selected.push(tag)
+//     }
+//   }
+//   return selected
+// }
 
 // 6. 示例：确定按钮
 function handleConfirm() {
-  const selectedTags = getSelectedTags()
-  console.log('选中的标签：', selectedTags)
+  // const selectedTags = getSelectedTags()
+  // console.log('选中的标签：', selectedTags)
   // 处理选中的标签
   tagDialogVisible.value = false
 }
@@ -699,19 +251,43 @@ function handleConfirm() {
 function handleCancel() {
   tagDialogVisible.value = false
 }
-const customerName = route.query.name || '王先生'
+//编辑
 function goEdit() {
   router.push({
       path: '/crmpc/customer/edit',
-      query: { name: customerName }
+      query: { id: customerId }
   })
 }
 function goBack() {
   router.back()
 }
+//修改等级
+function handleGradeChange(newGrade: number) {
+  if (!customerId) return
+  CrmService.customergrade({ id: customerId, grade: newGrade }).then(res => {
+    ElMessage.success(res?.message || '修改成功')
+  }).catch(() => {
+    ElMessage.error('修改失败')
+  })
+}
+//添加跟进
+function goAddFollow() {
+  router.push({
+    path: '/crmpc/customer/followadd',
+    query: { id: customerId }
+  })
+}
 </script>
 
 <style scoped>
+.timeline-content-row{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.timeline-img{
+  width: 80px;
+}
 .tag-list {
   display: flex;
   flex-wrap: wrap;

src/views/crmpc/customer/index.vue

@@ -1,270 +1,343 @@
 <template>
-    <div class="customer-page">
-      <!-- 顶部操作栏 -->
-      <div class="customer-toolbar boxshadow">
-        <el-button type="primary" @click="goAdd"><el-icon><Plus /></el-icon>添加</el-button>
-        <div class="customer-search-group">
-            <el-input v-model="searchValue" placeholder="请输入客户名称或电话" />
-            <el-select v-model="searchValue">
-                <el-option
-                v-for="v in selectOptions"
-                :key="v.value"
-                :label="v.label"
-                :value="v.value"
-                >
-                </el-option>
-            </el-select>
-        </div>
+  <div class="customer-page">
+    <!-- 顶部操作栏 -->
+    <div class="customer-toolbar boxshadow">
+      <el-button type="primary" @click="goAdd"><el-icon><Plus /></el-icon>添加</el-button>
+      <div class="customer-search-group">
+          <el-input v-model="searchValue" placeholder="请输入客户名称或电话" />
+          <el-select v-model="selectValue">
+              <el-option
+              v-for="v in selectOptions"
+              :key="v.value"
+              :label="v.label"
+              :value="v.value"
+              >
+              </el-option>
+          </el-select>
       </div>
-  
-      <!-- 筛选标签 -->
-      <div class="customer-tags boxshadow">
-        <div class="filter-row">
-          <span class="filter-label">价值标签：</span>
-          <div class="filter-tags">
-            <span v-for="item in valueTags" :key="item.label" >{{ item.label }}({{ item.count }})</span>
-          </div>
-        </div>
-        <div class="filter-row">
-          <span class="filter-label">生命周期标签：</span>
-          <div class="filter-tags">
-            <span v-for="item in lifeTags" :key="item.label" >{{ item.label }}({{ item.count }})</span>
-          </div>
-        </div>
-        <div class="filter-row">
-          <span class="filter-label">行为标签：</span>
-          <div class="filter-tags">
-            <span v-for="item in actionTags" :key="item.label" >{{ item.label }}({{ item.count }})</span>
-           
-          </div>
-        </div>
-        <transition name="fade">
-          <div v-if="showMore" class="filter-row">
-            <span class="filter-label">更多标签：</span>
-            <div class="filter-tags">
-              <span v-for="item in moreTags" :key="item.label" >{{ item.label }}({{ item.count }})</span>
-            </div>
-          </div>
-        </transition>
-        <div class="filter-more-btn">
-          <el-link :underline="false" @click="showMore = !showMore">
-            {{ showMore ? '收起' : '更多' }}
-            <i v-if="showMore" class="iconfont-sys"> &#xe864;</i>
-            <i v-else  class="iconfont-sys">&#xe867;</i>
-          </el-link>
-        </div>
-      </div>
-      <div class="boxshadow">
-          <!-- Tab切换 -->
-        <el-tabs v-model="activeTab" class="customer-tabs">
-            <el-tab-pane label="全部" name="all"></el-tab-pane>
-            <el-tab-pane label="跟进中" name="following"></el-tab-pane>
-            <el-tab-pane label="已成交" name="dealed"></el-tab-pane>
-            <el-tab-pane label="已丢失" name="lost"></el-tab-pane>
-        </el-tabs>
-    
-        <!-- 表格 -->
-        <ArtTable :data="tableData" class="customer-table">
-            <template #default>
-            <el-table-column prop="name" label="客户名称" align="center" />
-            <el-table-column prop="mobile" label="客户手机号" align="center" />
-            <el-table-column prop="channel" label="渠道" align="center" />
-            <el-table-column prop="phone" label="电话" align="center" />
-            <el-table-column prop="demand" label="需求" align="center" />
-            <el-table-column prop="status" label="状态" align="center">
-                <template #default="scope">
-                <span :class="statusClass(scope.row.status)">
-                    {{ scope.row.statusText }}
-                </span>
-                </template>
-            </el-table-column>
-            <el-table-column fixed="right" label="操作" width="200px" align="center">
-                <template #default="scope">
-                <el-link type="primary" :underline="false" style="margin-right: 8px;" @click="goEdit(scope.row)"> <i class="iconfont-sys"> &#xe70f;</i>查看</el-link>
-                <el-link type="primary" :underline="false" @click="goAddFollow(scope.row)"> <i class="iconfont-sys"> &#xe6bf;</i> 添加跟进</el-link>
-                </template>
-            </el-table-column>
-            </template>
-        </ArtTable>  
-      </div>
-      
     </div>
-  </template>
+
+    <!-- 筛选标签 -->
+    <div class="customer-tags boxshadow">
+      <div class="filter-row">
+        <span class="filter-label">价值标签</span>
+        <div class="filter-tags">
+          <span v-for="item in valueTags" :key="item.label" :class="['tag-item', { 'tag-active': tagActiveMap['value'] === item.label }]" @click="handleTagClick('value', item.label)">
+            {{ item.label }}({{ item.count }})
+          </span>
+        </div>
+      </div>
+      <div class="filter-row">
+        <span class="filter-label">生命周期标签</span>
+        <div class="filter-tags">
+          <span v-for="item in lifeTags" :key="item.label" :class="['tag-item', { 'tag-active': tagActiveMap['life'] === item.label }]" @click="handleTagClick('life', item.label)">
+            {{ item.label }}({{ item.count }})
+          </span>
+        </div>
+      </div>
+      <div class="filter-row">
+        <span class="filter-label">行为标签</span>
+        <div class="filter-tags">
+          <span v-for="item in actionTags" :key="item.label" :class="['tag-item', { 'tag-active': tagActiveMap['action'] === item.label }]" @click="handleTagClick('action', item.label)">
+            {{ item.label }}({{ item.count }})
+          </span>
+         
+        </div>
+      </div>
+      <transition name="fade">
+        <div v-if="showMore" class="filter-row">
+          <span class="filter-label">更多标签</span>
+          <div class="filter-tags">
+            <span v-for="item in moreTags" :key="item.label" :class="['tag-item', { 'tag-active': tagActiveMap['more'] === item.label }]" @click="handleTagClick('more', item.label)">
+              {{ item.label }}({{ item.count }})
+            </span>
+          </div>
+        </div>
+      </transition>
+      <div class="filter-more-btn">
+        <el-link :underline="false" @click="showMore = !showMore">
+          {{ showMore ? '收起' : '更多' }}
+          <i v-if="showMore" class="iconfont-sys"> &#xe864;</i>
+          <i v-else  class="iconfont-sys">&#xe867;</i>
+        </el-link>
+      </div>
+    </div>
+    <div class="boxshadow">
+        <!-- Tab切换 -->
+      <el-tabs v-model="activeTab" class="customer-tabs">
+          <el-tab-pane label="全部" name=""></el-tab-pane>
+          <el-tab-pane label="跟进中" name="0"></el-tab-pane>
+          <el-tab-pane label="已成交" name="1"></el-tab-pane>
+          <el-tab-pane label="已丢失" name="2"></el-tab-pane>
+      </el-tabs>
   
-  <script setup lang="ts">
-  import { ref } from 'vue'
-  import { Plus } from '@element-plus/icons-vue'
-//   import ArtSearchInput from '@/components/ArtSearchInput'
-//   import ArtSearchSelect from '@/components/ArtSearchSelect'
-//   import ArtTable from '@/components/ArtTable'
-  
-  const searchValue = ref('')
-  const filterType = ref('all')
-  const activeTab = ref('all')
-  const showMore = ref(false)
-  
-  const selectOptions = [
-    { label: '全部', value: 'all' },
-    { label: '高价值', value: 'high' },
-    { label: '中价值', value: 'mid' },
-    { label: '低价值', value: 'low' }
-  ]
-  
-  const valueTags = [
-    { label: '高价值', count: 10 },
-    { label: '中价值', count: 10 },
-    { label: '低价值', count: 10 },
-    { label: '潜在高价值', count: 10 }
-  ]
-  const lifeTags = [
-    { label: '新客户', count: 10 },
-    { label: '活跃', count: 10 },
-    { label: '深度', count: 10 },
-    { label: '流失', count: 10 }
-  ]
-  const actionTags = [
-    { label: '高频购买', count: 10 },
-    { label: '大单', count: 10 },
-    { label: '促销敏感', count: 10 }
-  ]
-  const moreTags = [
-    { label: '标签A', count: 5 },
-    { label: '标签B', count: 3 }
-  ]
-  
-  const tableData = [
-    { name: '王先生', mobile: '登录手机号', channel: '阿里', phone: '16521421014', demand: '二手车', status: 'following', statusText: '跟进中' },
-    { name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '二手车', status: 'dealed', statusText: '已成交' },
-    { name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '二手车', status: 'lost', statusText: '已丢失' },
-    { name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '新车', status: 'following', statusText: '跟进中' },
-    { name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '新车', status: 'following', statusText: '跟进中' },
-    { name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '新车', status: 'following', statusText: '跟进中' }
-  ]
-  
-  function statusClass(status: string) {
-    if (status === 'following') return 'status-following'
-    if (status === 'dealed') return 'status-dealed'
-    if (status === 'lost') return 'status-lost'
-    return ''
+      <!-- 表格 -->
+      <ArtTable ref="tableRef" row-key="id" :loading="loading" :data="tableData" :currentPage="pagination.currentPage"
+      :pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange"
+      @current-change="handleCurrentChange" lass="customer-table">
+          <template #default>
+          <el-table-column prop="contacts" label="客户名称" align="center" />
+          <el-table-column prop="magnitude_txt" label="客户商机" align="center" />
+          <el-table-column prop="channel_name" label="渠道" align="center" />
+          <el-table-column prop="phone" label="电话" align="center" />
+          <el-table-column prop="grade_txt" label="等级" align="center" />
+          <el-table-column prop="follow" label="状态" align="center">
+              <template #default="scope">
+              <span :class="statusClass(scope.row.follow)">
+                  {{ scope.row.follow_txt }}
+              </span>
+              </template>
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" width="200px" align="center">
+              <template #default="scope">
+              <el-link type="primary" :underline="false" style="margin-right: 8px;" @click="goEdit(scope.row)"> <i class="iconfont-sys"> &#xe70f;</i>查看</el-link>
+              <el-link type="primary" :underline="false" @click="goAddFollow(scope.row)"> <i class="iconfont-sys"> &#xe6bf;</i> 添加跟进</el-link>
+              </template>
+          </el-table-column>
+          </template>
+      </ArtTable>  
+    </div>
+    
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+import { CrmService } from '@/api/crmApi'
+const searchValue = ref('')
+const selectValue = ref('')
+const activeTab = ref('')
+const showMore = ref(false)
+const loading = ref(false)
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+const selectOptions = [
+  { label: '全部', value: '' },
+  { label: '当天', value: '0' },
+  { label: '近三天', value: '1' },
+  { label: '近七天', value: '2' }
+]
+
+const valueTags = [
+  { label: '高价值', count: 10 },
+  { label: '中价值', count: 10 },
+  { label: '低价值', count: 10 },
+  { label: '潜在高价值', count: 10 }
+]
+const lifeTags = [
+  { label: '新客户', count: 10 },
+  { label: '活跃', count: 10 },
+  { label: '深度', count: 10 },
+  { label: '流失', count: 10 }
+]
+const actionTags = [
+  { label: '高频购买', count: 10 },
+  { label: '大单', count: 10 },
+  { label: '促销敏感', count: 10 }
+]
+const moreTags = [
+  { label: '标签A', count: 5 },
+  { label: '标签B', count: 3 }
+]
+//获取标签
+const tagGroups = ref<any[]>([])
+const tagGrouplistfn = async () => {
+try {
+  const res = await CrmService.tagGrouplist()
+  tagGroups.value = res || []
+} catch (error) { }
+}
+// 表格数据
+const tableData = ref<any[]>([])
+onMounted(() => {
+  gettableList()
+})
+// tabs 切换联动
+watch([activeTab, searchValue, selectValue], () => {
+  pagination.currentPage = 1
+  gettableList()
+})
+// 获取列表数据
+const gettableList = async () => {
+  loading.value = true
+  try {
+    const { currentPage, pageSize } = pagination
+    const params: any = {
+      current: currentPage,
+      size: pageSize
+    }
+    if (searchValue.value) params.keyword = searchValue.value
+    if (selectValue.value) params.follow_last = selectValue.value
+    if (activeTab.value && activeTab.value !== '') params.follow = activeTab.value
+    // 标签参数
+    if (tagActiveMap.value) params.value_tag = tagActiveMap.value
+    if (tagActiveMap.life) params.life_tag = tagActiveMap.life
+    if (tagActiveMap.action) params.action_tag = tagActiveMap.action
+    if (tagActiveMap.more) params.more_tag = tagActiveMap.more
+    const { data, current, size, total } = await CrmService.getcustomerList(params)
+    tableData.value = data.map((item: any, index: number) => ({
+      ...item
+    }))
+    Object.assign(pagination, { currentPage: current, pageSize: size, total })
+  } catch (error) {
+    console.error('获取用户列表失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+// 处理表格分页变化
+const handleSizeChange = (newPageSize: number) => {
+pagination.pageSize = newPageSize
+// getWorkList()
+}
+
+const handleCurrentChange = (newCurrentPage: number) => {
+pagination.currentPage = newCurrentPage
+// getWorkList()
+}
+function statusClass(status: any) {
+  if (status === 0) return 'status-following'
+  if (status === 1) return 'status-dealed'
+  if (status === 2) return 'status-lost'
+  return ''
+}
+
+const router = useRouter()
+  function goAdd() {
+      router.push('/crmpc/customer/add')
+  }
+  function goEdit(row: any) {
+    router.push({
+      path: '/crmpc/customer/show',
+      query: { id: row.id }
+    })
+  }
+  function goAddFollow(row: any) {
+    router.push({
+      path: '/crmpc/customer/followadd',
+      query: { id: row.id } // 可带客户名等参数
+    })
   }
 
-  const router = useRouter()
-    function goAdd() {
-        router.push('/crmpc/customer/add')
-    }
-    function goEdit(row: any) {
-      router.push({
-        path: '/crmpc/customer/show',
-        query: { name: row.name }
-      })
-    }
-    function goAddFollow(row: any) {
-      router.push({
-        path: '/crmpc/customer/followadd',
-        query: { name: row.customerName } // 可带客户名等参数
-      })
-    }
+// 标签选中状态，key为组名，值为选中的标签label
+const tagActiveMap = reactive<{ [group: string]: string }>({})
 
-  </script>
-  
-  <style scoped>
-  :deep(.el-table__header th) {
-        background: #f7f9fa !important;
-        color: #333;
-        font-weight: bold;
-    }
-    :deep(.el-table__body tr.custom-table-row td) {
-        border-bottom: 1px solid #F7F9FA !important;
-        border-right: 1px solid #F7F9FA !important;
-    }
-    :deep(.el-table__body tr td:last-child) {
-        border-right: none !important;
-    }
-    :deep(.el-table__body tr:last-child td) {
-        border-bottom: none !important;
-    }
-    :deep(.el-table__header-wrapper th) {
-        border-bottom: 1px solid #F7F9FA !important;
-        border-right: 1px solid #F7F9FA !important;
-    }
-    :deep(.el-table__header-wrapper th:last-child) {
-        border-right: none !important;
-    }
-    :deep(.el-table) {
-        border: 1px solid #F7F9FA !important;
-        border-radius: 6px;
-    }
-  .customer-page {
-    background: var(--art-main-bg-color);
-    min-height: 100vh;
+function handleTagClick(group: string, label: string) {
+  if (tagActiveMap[group] === label) {
+    tagActiveMap[group] = '' // 取消选中
+  } else {
+    tagActiveMap[group] = label // 选中
   }
-  .customer-toolbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-    padding: 20px 10px;
-    background: var(--art-main-bg-color);
+  pagination.currentPage = 1
+  gettableList()
+}
+
+</script>
+
+<style scoped>
+:deep(.el-table__header th) {
+      background: #f7f9fa !important;
+      color: #333;
+      font-weight: bold;
   }
-  .customer-search-group {
-    display: flex;
-    gap: 12px;
+  :deep(.el-table__body tr.custom-table-row td) {
+      border-bottom: 1px solid #F7F9FA !important;
+      border-right: 1px solid #F7F9FA !important;
   }
-  .customer-tags {
-    background: var(--art-main-bg-color);
-    border-radius: 8px;
-    padding: 16px;
-    margin-bottom: 16px;
+  :deep(.el-table__body tr td:last-child) {
+      border-right: none !important;
   }
-  .filter-row {
-    display: flex;
-    align-items: center;
-    margin-bottom: 14px;
+  :deep(.el-table__body tr:last-child td) {
+      border-bottom: none !important;
   }
-  .filter-label {
-    width: 120px;
-    color: #666;
-    margin-right: 8px;
-    flex-shrink: 0;
-    font-size: 14px;
+  :deep(.el-table__header-wrapper th) {
+      border-bottom: 1px solid #F7F9FA !important;
+      border-right: 1px solid #F7F9FA !important;
   }
-  .filter-tags {
-    flex: 1;
-    color: #333;
-    font-weight: 500;
-    font-size: 14px;
-    span{
-        margin-right: 20px;
-    }
+  :deep(.el-table__header-wrapper th:last-child) {
+      border-right: none !important;
   }
-  .customer-tabs {
-    margin-bottom: 8px;
+  :deep(.el-table) {
+      border: 1px solid #F7F9FA !important;
+      border-radius: 6px;
   }
-  .status-following {
-    color: #00A43F;
-    font-weight: bold;
+.customer-page {
+  background: var(--art-main-bg-color);
+  min-height: 100vh;
+}
+.customer-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 20px 10px;
+  background: var(--art-main-bg-color);
+}
+.customer-search-group {
+  display: flex;
+  gap: 12px;
+}
+.customer-tags {
+  background: var(--art-main-bg-color);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+.filter-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 14px;
+}
+.filter-label {
+  width: 120px;
+  color: #666;
+  margin-right: 8px;
+  flex-shrink: 0;
+  font-size: 14px;
+}
+.filter-tags {
+  flex: 1;
+  color: #333;
+  font-weight: 500;
+  font-size: 14px;
+  span{
+      margin-right: 20px;
   }
-  .status-dealed {
-    color: #3471FF;
-    font-weight: bold;
-  }
-  .status-lost {
-    color: #FF0000;
-    font-weight: bold;
-  }
-  .customer-table {
-    background: var(--art-main-bg-color);
-    border-radius: 8px;
-    margin-top: 0;
-  }
-  .filter-more-btn {
-    text-align: center;
-    margin-top: 8px;
-  }
-  .fade-enter-active, .fade-leave-active {
-    transition: opacity 0.2s;
-  }
-  .fade-enter-from, .fade-leave-to {
-    opacity: 0;
-  }
-  </style>
+}
+.customer-tabs {
+  margin-bottom: 8px;
+}
+.status-following {
+  color: #00A43F;
+  font-weight: bold;
+}
+.status-dealed {
+  color: #3471FF;
+  font-weight: bold;
+}
+.status-lost {
+  color: #FF0000;
+  font-weight: bold;
+}
+.customer-table {
+  background: var(--art-main-bg-color);
+  border-radius: 8px;
+  margin-top: 0;
+}
+.filter-more-btn {
+  text-align: center;
+  margin-top: 8px;
+}
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.2s;
+}
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+.tag-item { cursor: pointer; border-radius: 4px; padding: 2px 10px; margin-right: 8px; transition: background 0.2s; }
+.tag-active { background: #3471FF; color: #fff; }
+</style>

src/views/crmpc/highseas/index.vue

@@ -1,282 +1,294 @@
 <template>
-    <div class="boxshadow">
-      <div class="heard">
-        <div class="heard-title">跟进提醒</div>
-        <el-select
-          v-model="remindRange"
-          placeholder="请选择"
-          class="heard-select"
-          style="min-width: 120px"
-        >
-          <el-option label="全部" value="all" />
-          <el-option label="近三天" value="3days" />
-          <el-option label="近七天" value="7days" />
-        </el-select>
-      </div>
-      <div class="table">
-        <ArtTable
-          ref="tableRef"
-          row-key="id"
-          :loading="loading"
-          :data="tableData"
-          :currentPage="pagination.currentPage"
-          :pageSize="pagination.pageSize"
-          :total="pagination.total"
-          :marginTop="10"
-          @selection-change="handleSelectionChange"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        >
-          <template #default>
-            <el-table-column prop="name" label="客户名称" min-width="120"></el-table-column>
-            <el-table-column prop="phone" label="电话" min-width="120"></el-table-column>
-            <el-table-column prop="addr" label="地址" min-width="140"></el-table-column>
-            <el-table-column label="状态" min-width="140">
-                <template #default="scope">
-                <span :class="getCountdownClass(scope.row.nextFollow)">
-                    
-                    <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe7b1;</i></span>
-                    {{ getCountdown(scope.row.nextFollow) }}
-                </span>
-                </template>
-            </el-table-column>
-            <el-table-column fixed="right" label="操作" width="160px">
-                <template #default="scope">
-                <div class="follow-detli" @click="onDetail(scope.row)">
-                    <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe70f;</i></span>
-                    详情
-                </div>
-                <div class="follow-action" @click="onFollow(scope.row)">
-                    <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe841;</i></span>
-                    领单
-                </div>
-                </template>
-            </el-table-column>
-          </template>
-        </ArtTable>
-      </div>
+  <div class="boxshadow">
+    <div class="heard">
+      <div class="heard-title">公海</div>
+      <el-select
+        v-model="remindRange"
+        placeholder="请选择"
+        class="heard-select"
+        style="min-width: 120px"
+      >
+        <el-option label="全部" value="" />
+        <el-option label="当天" value="0" />
+        <el-option label="近三天" value="1" />
+        <el-option label="近七天" value="2" />
+      </el-select>
     </div>
-    <el-dialog v-model="detailDialogVisible" title="详情" width="400px">
-      <div v-if="detailRow">
-        <p>客户名称1：{{ detailRow.name }}</p>
-        <p>电话：{{ detailRow.phone }}</p>
-        <p>地址：{{ detailRow.addr }}</p>
-        <p>下次跟进时间：{{ detailRow.nextFollow }}</p>
-      </div>
-    </el-dialog>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, onMounted, onUnmounted } from 'vue'
-  import dayjs from 'dayjs'
-  import { ElMessageBox } from 'element-plus'
-  const loading = ref(false)
-  const pagination = reactive({
-    currentPage: 1,
-    pageSize: 20,
-    total: 0
-  })
-  const remindRange = ref('all')
-  const tableData = ref([
-    {
-      name: '张三',
-      phone: '13800000000',
-      addr: '迪拜',
-      nextFollow: '2025-07-15 18:00:00',
-    },
-    {
-      name: '李四',
-      phone: '13900000000',
-      addr: '迪拜',
-      nextFollow: '2025-07-16 09:30:00',
-    }
-  ])
- // 选中的行数据
-   const selectedRows = ref<any[]>([])
-    // 处理表格行选择变化
-    const handleSelectionChange = (selection: any[]) => {
-        selectedRows.value = selection
-    }
-     // 处理表格分页变化
-    const handleSizeChange = (newPageSize: number) => {
-        pagination.pageSize = newPageSize
-        // getUserList()
-    }
+    <div class="table">
+      <ArtTable
+        ref="tableRef"
+        row-key="id"
+        :loading="loading"
+        :data="tableData"
+        :currentPage="pagination.currentPage"
+        :pageSize="pagination.pageSize"
+        :total="pagination.total"
+        :marginTop="10"
+        @selection-change="handleSelectionChange"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template #default>
+          <el-table-column prop="contacts" label="客户名称" min-width="120"></el-table-column>
+          <el-table-column prop="phone" label="电话" min-width="120"></el-table-column>
+          <el-table-column prop="magnitude" label="客户商机" min-width="140"></el-table-column>
+          <el-table-column label="状态" min-width="140">
+              <template #default="scope">
+              <span :class="getCountdownClass(scope.row.deleted_at)">
+                  
+                  <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe7b1;</i></span>
+                  {{ getCountdown(scope.row.deleted_at) }}
+              </span>
+              </template>
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" width="160px">
+              <template #default="scope">
+              <div class="follow-detli" @click="onDetail(scope.row)">
+                  <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe70f;</i></span>
+                  详情
+              </div>
+              <div class="follow-action" @click="onFollow(scope.row)">
+                  <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe841;</i></span>
+                  领单
+              </div>
+              </template>
+          </el-table-column>
+        </template>
+      </ArtTable>
+    </div>
+  </div>
+  <el-dialog v-model="detailDialogVisible" title="详情" width="400px">
+    <div v-if="detailRow" v-html="detailRow.desc_collect" >
+        
+    </div>
+  </el-dialog>
+</template>
 
-    const handleCurrentChange = (newCurrentPage: number) => {
-        pagination.currentPage = newCurrentPage
-        // getUserList()
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import dayjs from 'dayjs'
+import { ElMessageBox } from 'element-plus'
+import { CrmService } from '@/api/crmApi'
+const loading = ref(false)
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 20,
+  total: 0
+})
+const remindRange = ref('')
+const tableData = ref<any[]>([])
+watch([remindRange], () => {
+  pagination.currentPage = 1
+  gettableList()
+})
+// 获取列表数据
+const gettableList = async () => {
+  loading.value = true
+  try {
+    const { currentPage, pageSize } = pagination
+    const params: any = {
+      current: currentPage,
+      size: pageSize,
+      seas:'seas'
     }
-  const timer = ref(0)
-  const refreshKey = ref(0)
-  const detailDialogVisible = ref(false)
-  const detailRow = ref<any>(null)
-  
-  onMounted(() => {
-    timer.value = window.setInterval(() => {
-      refreshKey.value++
-    }, 1000)
-  })
-  
-  onUnmounted(() => {
-    if (timer.value) {
-      clearInterval(timer.value)
-    }
-  })
-  
-  function getCountdown(targetDate: string) {
-    // 让 refreshKey 成为依赖，确保每秒刷新
-    refreshKey.value
-    const now = dayjs()
-    const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
-    if (!target.isValid()) return '时间格式错误'
-    const diff = target.diff(now)
-    if (diff <= 0) return '已超时'
-    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
-    const minutes = Math.floor((diff / (1000 * 60)) % 60)
-    const seconds = Math.floor((diff / 1000) % 60)
-    return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒`
+    if (remindRange.value) params.follow_last = remindRange.value
+    const { data, current, size, total } = await CrmService.getcustomerList(params)
+    tableData.value = data.map((item: any, index: number) => ({
+      ...item
+    }))
+    Object.assign(pagination, { currentPage: current, pageSize: size, total })
+  } catch (error) {
+    console.error('获取用户列表失败:', error)
+  } finally {
+    loading.value = false
   }
-  
-  function getCountdownClass(targetDate: string) {
-    const now = dayjs()
-    const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
-    if (!target.isValid() || target.diff(now) <= 0) {
-      return 'countdown-danger'
-    }
-    return 'countdown-success'
+}
+// 选中的行数据
+ const selectedRows = ref<any[]>([])
+  // 处理表格行选择变化
+  const handleSelectionChange = (selection: any[]) => {
+      selectedRows.value = selection
   }
-  
-  function onFollow(row: any) {
-    ElMessageBox.confirm(
-      '确定要领取此客户吗？',
-      '提示',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-    ).then(() => {
-      // 用户点击了确定，这里写领取逻辑
-      console.log('领取客户', row)
-      // 你可以在这里调用接口或做后续处理
-    }).catch(() => {
-      // 用户点击了取消
-    })
+   // 处理表格分页变化
+  const handleSizeChange = (newPageSize: number) => {
+      pagination.pageSize = newPageSize
+      gettableList()
   }
 
-  function onDetail(row: any) {
-    detailRow.value = row
-    detailDialogVisible.value = true
+  const handleCurrentChange = (newCurrentPage: number) => {
+      pagination.currentPage = newCurrentPage
+      gettableList()
   }
-  </script>
-  
-  <style lang="scss" scoped>
-  .boxshadow {
-    border-radius: 8px;
-    box-shadow: 0 2px 12px 0 rgba(0, 10, 118, 0.1);
-    background:var(--el-card-bg-color);
-    padding: 10px;
-    margin-bottom: 10px;
+const timer = ref(0)
+const refreshKey = ref(0)
+const detailDialogVisible = ref(false)
+const detailRow = ref<any>(null)
+
+onMounted(() => {
+  gettableList()
+  timer.value = window.setInterval(() => {
+    refreshKey.value++
+  }, 1000)
+})
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearInterval(timer.value)
   }
-  
-  .heard {
+})
+
+function getCountdown(targetDate: string) {
+  // 让 refreshKey 成为依赖，确保每秒刷新
+  refreshKey.value
+  const now = dayjs()
+  const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
+  if (!target.isValid()) return '时间格式错误'
+  const diff = target.diff(now)
+  if (diff <= 0) return '已超时'
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+  const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
+  const minutes = Math.floor((diff / (1000 * 60)) % 60)
+  const seconds = Math.floor((diff / 1000) % 60)
+  return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒`
+}
+
+function getCountdownClass(targetDate: string) {
+  const now = dayjs()
+  const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
+  if (!target.isValid() || target.diff(now) <= 0) {
+    return 'countdown-danger'
+  }
+  return 'countdown-success'
+}
+const onFollow = async (row: any) => {
+  ElMessageBox.confirm(
+    '确定要领取此客户吗？',
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(async () => {
+    const res = await CrmService.customerclaim({customer_id:row.id})
+    ElMessage.success(res?.message || '提交成功！')
+    gettableList()
+    // 你可以在这里调用接口或做后续处理
+  }).catch(() => {
+    // 用户点击了取消
+  })
+}
+
+function onDetail(row: any) {
+  detailRow.value = row
+  detailDialogVisible.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+.boxshadow {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 10, 118, 0.1);
+  background:var(--el-card-bg-color);
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.heard {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  .heard-title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+    border-left: 4px solid #3471FF;
+    padding-left: 12px;
+    height: 32px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-bottom: 10px;
-    .heard-title {
-      font-size: 20px;
-      font-weight: bold;
-      color: #333;
-      border-left: 4px solid #3471FF;
-      padding-left: 12px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-    }
-  
-    .heard-date-picker {
-      width: 120px;
-    }
-    .heard-select {
-      width: 120px;
-    }
   }
-  
-  .dark {
-    .card-list {
-      .art-custom-card {
-        .iconfont-sys {
-          background-color: #232323 !important;
-        }
+
+  .heard-date-picker {
+    width: 120px;
+  }
+  .heard-select {
+    width: 120px;
+  }
+}
+
+.dark {
+  .card-list {
+    .art-custom-card {
+      .iconfont-sys {
+        background-color: #232323 !important;
       }
     }
   }
-  
-  .table {
-    :deep(.el-table__header th) {
-        background: #f7f9fa !important;
-        color: #333;
-        font-weight: bold;
-    }
-    :deep(.el-table__body tr.custom-table-row td) {
-      border-bottom: 1px solid #F7F9FA !important;
-      border-right: 1px solid #F7F9FA !important;
-    }
-    :deep(.el-table__body tr td:last-child) {
-      border-right: none !important;
-    }
-    :deep(.el-table__body tr:last-child td) {
-      border-bottom: none !important;
-    }
-    :deep(.el-table__header-wrapper th) {
-      border-bottom: 1px solid #F7F9FA !important;
-      border-right: 1px solid #F7F9FA !important;
-    }
-    :deep(.el-table__header-wrapper th:last-child) {
-      border-right: none !important;
-    }
-    :deep(.el-table) {
-      border: 1px solid #F7F9FA !important;
-      border-radius: 6px;
-    }
-    :deep(.el-table th),
-    :deep(.el-table td) {
-     text-align: center !important;
-    }
+}
+
+.table {
+  :deep(.el-table__header th) {
+      background: #f7f9fa !important;
+      color: #333;
+      font-weight: bold;
   }
-  .countdown-danger {
-    color: #FF0000 !important;
+  :deep(.el-table__body tr.custom-table-row td) {
+    border-bottom: 1px solid #F7F9FA !important;
+    border-right: 1px solid #F7F9FA !important;
   }
-  .countdown-success {
-    color: #00A43F !important;
+  :deep(.el-table__body tr td:last-child) {
+    border-right: none !important;
   }
-  .follow-detli{
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    color: #00A43F;
-    padding: 4px 10px;
-    border-radius: 4px;
-    transition: background 0.2s;
-    &:hover {
-      background: #f5f7fa;
-    }
+  :deep(.el-table__body tr:last-child td) {
+    border-bottom: none !important;
   }
-  .follow-action {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    color: #409EFF;
-    padding: 4px 10px;
-    border-radius: 4px;
-    transition: background 0.2s;
-    &:hover {
-      background: #f5f7fa;
-    }
+  :deep(.el-table__header-wrapper th) {
+    border-bottom: 1px solid #F7F9FA !important;
+    border-right: 1px solid #F7F9FA !important;
   }
-  
-  </style>
-  
+  :deep(.el-table__header-wrapper th:last-child) {
+    border-right: none !important;
+  }
+  :deep(.el-table) {
+    border: 1px solid #F7F9FA !important;
+    border-radius: 6px;
+  }
+  :deep(.el-table th),
+  :deep(.el-table td) {
+   text-align: center !important;
+  }
+}
+.countdown-danger {
+  color: #FF0000 !important;
+}
+.countdown-success {
+  color: #00A43F !important;
+}
+.follow-detli{
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  color: #00A43F;
+  padding: 4px 10px;
+  border-radius: 4px;
+  transition: background 0.2s;
+  &:hover {
+    background: #f5f7fa;
+  }
+}
+.follow-action {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  color: #409EFF;
+  padding: 4px 10px;
+  border-radius: 4px;
+  transition: background 0.2s;
+  &:hover {
+    background: #f5f7fa;
+  }
+}
+
+</style>

src/views/crmpc/home/widget/CardList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="homeheard">
-    您已陪伴领客 CRM  <span class="daynum"><span class="day">153</span>天</span>
+    您已陪伴领客 CRM  <span class="daynum"><span class="day">{{homestatistics.day}}</span>天</span>
   </div>
   <div class="boxshadow">
     <div class="heard">
@@ -15,16 +15,81 @@
       />
     </div>
     <el-row :gutter="20" class="card-list">
-      <el-col v-for="(item, index) in dataList" :key="index" :sm="12" :md="6" :lg="4" >
-        <div class="card art-custom-card" :style="{ backgroundImage: `url(${item.avatar})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
+      <el-col :sm="12" :md="6" :lg="4" >
+        <div class="card art-custom-card" :style="{ backgroundImage: `url(${adduser})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
           <CountTo
             class="number box-title"
-            :endVal="item.num"
+            :endVal="homestatistics.customer"
             :duration="1000"
             separator=""
           ></CountTo>
           <div class="change-box">
-            <span class="change-text">{{item.des}}</span>
+            <span class="change-text">新增客户</span>
+          </div>
+        </div>
+      </el-col>
+      <el-col :sm="12" :md="6" :lg="4" >
+        <div class="card art-custom-card" :style="{ backgroundImage: `url(${addbf})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
+          <CountTo
+            class="number box-title"
+            :endVal="homestatistics.visit"
+            :duration="1000"
+            separator=""
+          ></CountTo>
+          <div class="change-box">
+            <span class="change-text">新增拜访</span>
+          </div>
+        </div>
+      </el-col>
+      <el-col :sm="12" :md="6" :lg="4" >
+        <div class="card art-custom-card" :style="{ backgroundImage: `url(${addgj})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
+          <CountTo
+            class="number box-title"
+            :endVal="homestatistics.follow"
+            :duration="1000"
+            separator=""
+          ></CountTo>
+          <div class="change-box">
+            <span class="change-text">新增跟进</span>
+          </div>
+        </div>
+      </el-col>
+      <el-col :sm="12" :md="6" :lg="4" >
+        <div class="card art-custom-card" :style="{ backgroundImage: `url(${deal})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
+          <CountTo
+            class="number box-title"
+            :endVal="homestatistics.customer_init"
+            :duration="1000"
+            separator=""
+          ></CountTo>
+          <div class="change-box">
+            <span class="change-text">跟进中</span>
+          </div>
+        </div>
+      </el-col>
+      <el-col :sm="12" :md="6" :lg="4" >
+        <div class="card art-custom-card" :style="{ backgroundImage: `url(${gjing})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
+          <CountTo
+            class="number box-title"
+            :endVal="homestatistics.customero_fllow"
+            :duration="1000"
+            separator=""
+          ></CountTo>
+          <div class="change-box">
+            <span class="change-text">已成交</span>
+          </div>
+        </div>
+      </el-col>
+      <el-col :sm="12" :md="6" :lg="4" >
+        <div class="card art-custom-card" :style="{ backgroundImage: `url(${loss})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
+          <CountTo
+            class="number box-title"
+            :endVal="homestatistics.customer_deal"
+            :duration="1000"
+            separator=""
+          ></CountTo>
+          <div class="change-box">
+            <span class="change-text">已丢失</span>
           </div>
         </div>
       </el-col>
@@ -39,42 +104,45 @@
         class="heard-select"
         style="min-width: 120px"
       >
-        <el-option label="全部" value="all" />
-        <el-option label="近三天" value="3days" />
-        <el-option label="近七天" value="7days" />
+        <el-option label="全部" value="" />
+        <el-option label="当天" value="0" />
+        <el-option label="近三天" value="1" />
+        <el-option label="近七天" value="2" />
       </el-select>
     </div>
     <div class="table">
-      <el-table :data="tableData" style="width: 100%" header-cell-class-name="custom-table-header" row-class-name="custom-table-row">
-        <el-table-column prop="name" label="客户名称" min-width="120"></el-table-column>
-        <el-table-column prop="phone" label="电话" min-width="120"></el-table-column>
-        <el-table-column prop="nextFollow" label="下次跟进时间" min-width="140"></el-table-column>
-        <el-table-column label="状态" min-width="140">
-          <template #default="scope">
-            <span :class="getCountdownClass(scope.row.nextFollow)">
-              
-              <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe7b1;</i></span>
-              {{ getCountdown(scope.row.nextFollow) }}
-            </span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" min-width="100">
-          <template #default="scope">
-            <div class="follow-action" @click="onFollow(scope.row)">
-              <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe6bf;</i></span>
-              跟进
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
+      <ArtTable ref="tableRef" row-key="id" :loading="loading" :data="tableData" :currentPage="pagination.currentPage"
+        :pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" lass="customer-table">
+            <template #default>
+            <el-table-column prop="contacts" label="客户名称" min-width="120"></el-table-column>
+            <el-table-column prop="phone" label="电话" min-width="120"></el-table-column>
+            <el-table-column prop="follow_next" label="下次跟进时间" min-width="140"></el-table-column>
+            <el-table-column label="状态" min-width="140">
+              <template #default="scope">
+                <span :class="getCountdownClass(scope.row.follow_next)">
+                  
+                  <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe7b1;</i></span>
+                  {{ getCountdown(scope.row.follow_next) }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="100">
+              <template #default="scope">
+                <div class="follow-action" @click="goAddFollow(scope.row)">
+                  <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe6bf;</i></span>
+                  跟进
+                </div>
+              </template>
+            </el-table-column>
+            </template>
+        </ArtTable> 
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref, onMounted, onUnmounted } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useSettingStore } from '@/store/modules/setting'
 import { CountTo } from 'vue3-count-to'
 import adduser from '@/assets/img/crm/adduser.png'
 import addbf from '@/assets/img/crm/addbf.png'
@@ -83,73 +151,87 @@ import deal from '@/assets/img/crm/deal.png'
 import gjing from '@/assets/img/crm/gjing.png'
 import loss from '@/assets/img/crm/loss.png'
 import dayjs from 'dayjs'
-import { Clock } from '@element-plus/icons-vue'
+import { CrmService } from '@/api/crmApi'
+const router = useRouter()
 
-const selectedDate = ref('')
-const remindRange = ref('all')
+function getCurrentMonth() {
+  const d = new Date()
+  const month = d.getMonth() + 1
+  return `${d.getFullYear()}-${month < 10 ? '0' + month : month}`
+}
 
-const dataList = reactive([
-  {
-    des: '新增客户',
-    startVal: 0,
-    duration: 1000,
-    num: 0,
-    avatar: adduser
-  },
-  {
-    des: '新增拜访',
-    startVal: 0,
-    duration: 1000,
-    num: 182,
-    avatar: addbf
-  },
-  {
-    des: '新增跟进',
-    startVal: 0,
-    duration: 1000,
-    num: 9520,
-    avatar: addgj
-  },
-  {
-    des: '跟进中',
-    startVal: 0,
-    duration: 1000,
-    num: 156,
-    avatar: gjing
-  },
-  {
-    des: '已成交',
-    startVal: 0,
-    duration: 1000,
-    num: 156,
-    avatar: deal
-  },
-  {
-    des: '已丢失',
-    startVal: 0,
-    duration: 1000,
-    num: 156,
-    avatar: loss
-  }
-])
+const selectedDate = ref(getCurrentMonth())
+const remindRange = ref('')
+const loading = ref(false)
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
 
-const tableData = ref([
-  {
-    name: '张三',
-    phone: '13800000000',
-    nextFollow: '2025-07-15 18:00:00',
-  },
-  {
-    name: '李四',
-    phone: '13900000000',
-    nextFollow: '2025-07-16 09:30:00',
-  }
-])
+const tableData = ref([])
+watch([remindRange], () => {
+    pagination.currentPage = 1
+    gettableList()
+})
+watch(selectedDate, (val) => {
+  console.log('用户选择的时间:', val)
+  gethomestatistics(val)
+})
+//获取统计数据 homestatistics
+interface CustomerInfo {
+  [key: string]: any
+}
+const homestatistics = ref<CustomerInfo>({})
+const gethomestatistics = async (val:any) => {
+    loading.value = true
+    try {
+      const data = await CrmService.homestatistics({created:val?val:getCurrentMonth()})
+      homestatistics.value = data
+    } catch (error) {
+      console.error('获取用户列表失败:', error)
+    } finally {
+      loading.value = false
+    }
+}
+// 获取列表数据
+const gettableList = async () => {
+    loading.value = true
+    try {
+      const { currentPage, pageSize } = pagination
+      const params: any = {
+        current: currentPage,
+        size: pageSize
+      }
+      
+      if (remindRange.value) params.filter = remindRange.value
+      const { data, current, size, total } = await CrmService.waitFollow(params)
+      tableData.value = data.map((item: any, index: number) => ({
+        ...item
+      }))
+      Object.assign(pagination, { currentPage: current, pageSize: size, total })
+    } catch (error) {
+      console.error('获取用户列表失败:', error)
+    } finally {
+      loading.value = false
+    }
+}
+  // 处理表格分页变化
+const handleSizeChange = (newPageSize: number) => {
+  pagination.pageSize = newPageSize
+  // getWorkList()
+}
 
+const handleCurrentChange = (newCurrentPage: number) => {
+  pagination.currentPage = newCurrentPage
+  // getWorkList()
+}
 const timer = ref(0)
 const refreshKey = ref(0)
 
 onMounted(() => {
+  gethomestatistics()
+  gettableList()
   timer.value = window.setInterval(() => {
     refreshKey.value++
   }, 1000)
@@ -185,9 +267,11 @@ function getCountdownClass(targetDate: string) {
   return 'countdown-success'
 }
 
-function onFollow(row: any) {
-  // 这里可以自定义点击后的逻辑
-  console.log('跟进', row)
+function goAddFollow(row: any) {
+    router.push({
+      path: '/crmpc/customer/followadd',
+      query: { id: row.id } // 可带客户名等参数
+    })
 }
 </script>
 
@@ -308,10 +392,6 @@ display: flex;
     display: flex;
     align-items: center;
   }
-
-  .heard-date-picker {
-    width: 120px;
-  }
   .heard-select {
     width: 120px;
   }

src/views/crmpc/recycle/Recycle.vue

@@ -1,61 +0,0 @@
-<template>
-    <div class="recycle-page">
-      <el-card class="recycle-card">
-        <div class="recycle-title">
-          <span class="title-dot"></span>回收站
-        </div>
-        <el-table :data="tableData" style="width: 100%">
-          <el-table-column prop="name" label="姓名" />
-          <el-table-column prop="phone" label="联系方式" />
-          <el-table-column label="操作" align="right" width="120">
-            <template #default="scope">
-              <el-button type="primary" size="small">恢复客户</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-card>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref } from 'vue'
-  
-  const tableData = ref([
-    { name: '刘先生', phone: '15632012141' },
-    { name: '刘先生', phone: '15632012141' },
-    { name: '刘先生', phone: '15632012141' },
-    { name: '刘先生', phone: '15632012141' },
-    { name: '刘先生', phone: '15632012141' },
-    { name: '刘先生', phone: '15632012141' }
-  ])
-  </script>
-  
-  <style scoped>
-  .recycle-page {
-    background: #fafbfc;
-    min-height: 100vh;
-    padding: 24px;
-  }
-  .recycle-card {
-    border-radius: 8px;
-    background: #fff;
-  }
-  .recycle-title {
-    font-size: 16px;
-    font-weight: bold;
-    margin-bottom: 8px;
-    display: flex;
-    align-items: center;
-  }
-  .title-dot {
-    display: inline-block;
-    width: 6px;
-    height: 16px;
-    background: #3471FF;
-    border-radius: 2px;
-    margin-right: 8px;
-  }
-  .el-table .hide-header th {
-    display: none;
-  }
-  </style>

src/views/crmpc/recycle/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="recycle-page">
+    <el-card class="recycle-card">
+      <div class="recycle-title">
+        <span class="title-dot"></span>回收站
+      </div>
+      <ArtTable
+        ref="tableRef"
+        row-key="id"
+        :loading="loading"
+        :data="tableData"
+        :currentPage="pagination.currentPage"
+        :pageSize="pagination.pageSize"
+        :total="pagination.total"
+        :marginTop="10"
+        @selection-change="handleSelectionChange"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template #default>
+          <el-table-column prop="contacts" label="姓名" min-width="120"></el-table-column>
+          <el-table-column prop="phone" label="联系方式" min-width="120"></el-table-column>
+          <el-table-column fixed="right" label="操作" width="160px">
+              <template #default="scope">
+                <el-button type="primary" @click="onDetail(scope.row)" size="small">恢复客户</el-button>
+              </template>
+          </el-table-column>
+        </template>
+      </ArtTable>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import { CrmService } from '@/api/crmApi'
+const loading = ref(false)
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 20,
+  total: 0
+})
+
+const tableData = ref<any[]>([])
+// 获取列表数据
+const gettableList = async () => {
+  loading.value = true
+  try {
+    const { currentPage, pageSize } = pagination
+    const params: any = {
+      current: currentPage,
+      size: pageSize,
+      recycle:'recycle'
+    }
+    const { data, current, size, total } = await CrmService.getcustomerList(params)
+    tableData.value = data.map((item: any, index: number) => ({
+      ...item
+    }))
+    Object.assign(pagination, { currentPage: current, pageSize: size, total })
+  } catch (error) {
+    console.error('获取用户列表失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+ // 选中的行数据
+const selectedRows = ref<any[]>([])
+// 处理表格行选择变化
+const handleSelectionChange = (selection: any[]) => {
+    selectedRows.value = selection
+}
+  // 处理表格分页变化
+const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    gettableList()
+}
+
+const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.currentPage = newCurrentPage
+    gettableList()
+}
+onMounted(() => {
+  gettableList()
+})
+const onDetail = async (row: any) => {
+  ElMessageBox.confirm(
+    '确定要恢复此客户吗？',
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(async () => {
+    const res = await CrmService.customerrestore({id:row.id})
+    ElMessage.success(res?.message || '提交成功！')
+    gettableList()
+    // 你可以在这里调用接口或做后续处理
+  }).catch(() => {
+    // 用户点击了取消
+  })
+}
+</script>
+
+<style scoped>
+.recycle-page {
+  background: #fafbfc;
+  min-height: 100vh;
+  padding: 24px;
+}
+.recycle-card {
+  border-radius: 8px;
+  background: #fff;
+}
+.recycle-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+}
+.title-dot {
+  display: inline-block;
+  width: 6px;
+  height: 16px;
+  background: #3471FF;
+  border-radius: 2px;
+  margin-right: 8px;
+}
+.el-table .hide-header th {
+  display: none;
+}
+</style>

src/views/system/user-center/index.vue

@@ -3,64 +3,57 @@
     <div class="content">
       <div class="left-wrap">
         <div class="user-wrap box-style">
-          <img class="bg" src="@imgs/user/bg.webp" />
-          <img class="avatar" src="@imgs/user/avatar.webp" />
-          <h2 class="name">{{ userInfo.userName }}</h2>
-          <p class="des">Art Design Pro 是一款漂亮的后台管理系统模版.</p>
-
+          <!-- <img class="bg" src="@imgs/user/bg.webp" /> -->
+          <img class="avatar" :src="userInfo.avatar_full" />
+          <h2 class="name">{{userInfo.name}}</h2>
+          <p class="des">ID:{{userInfo.id}}</p>
           <div class="outer-info">
-            <div>
-              <i class="iconfont-sys">&#xe72e;</i>
-              <span>jdkjjfnndf@mall.com</span>
+            <div class="info-row">
+              <span class="info-label">电    话：</span>
+              <span class="info-value">{{userInfo.phone}}</span>
             </div>
-            <div>
-              <i class="iconfont-sys">&#xe608;</i>
-              <span>交互专家</span>
+            <div class="info-row">
+              <span class="info-label">职    位：</span>
+              <span class="info-value">{{userInfo.position}}</span>
             </div>
-            <div>
-              <i class="iconfont-sys">&#xe736;</i>
-              <span>广东省深圳市</span>
+            <div class="info-row">
+              <span class="info-label">公    司：</span>
+              <span class="info-value">{{userInfo.corp_name}}</span>
             </div>
-            <div>
-              <i class="iconfont-sys">&#xe811;</i>
-              <span>字节跳动－某某平台部－UED</span>
-            </div>
-          </div>
-
-          <div class="lables">
-            <h3>标签</h3>
-            <div>
-              <div v-for="item in lableList" :key="item">
-                {{ item }}
-              </div>
+            <div class="info-row">
+              <span class="info-label">国    家：</span>
+              <span class="info-value">{{userInfo.country_txt}}</span>
             </div>
           </div>
         </div>
-
-        <!-- <el-carousel class="gallery" height="160px"
-          :interval="5000"
-          indicator-position="none"
-        >
-          <el-carousel-item class="item" v-for="item in galleryList" :key="item">
-            <img :src="item"/>
-          </el-carousel-item>
-        </el-carousel> -->
       </div>
       <div class="right-wrap">
         <div class="info box-style">
-          <h1 class="title">基本设置</h1>
+          <h1 class="title"><span class="border" style="margin-right: 5px;"></span>基本信息</h1>
 
           <ElForm
             :model="form"
             class="form"
             ref="ruleFormRef"
-            :rules="rules"
             label-width="86px"
-            label-position="top"
+            label-position="left"
           >
+            <ElFormItem label="头像" prop="avatar">
+              <el-upload
+                  class="qrcode-upload"
+                  :action="actionImageUplode"
+                  :headers="uploadHeaders"
+                  :show-file-list="false"
+                  :on-success="handleUploadavatar"
+                >
+                <div class="qrcode-upload-box">
+                  <img class="avatar" :src="imageUrlavatar"/>
+                </div>
+              </el-upload>
+            </ElFormItem>
             <ElRow>
-              <ElFormItem label="姓名" prop="realName">
-                <el-input v-model="form.realName" :disabled="!isEdit" />
+              <ElFormItem label="昵称" prop="name">
+                <el-input v-model="form.name" :disabled="!isEdit" />
               </ElFormItem>
               <ElFormItem label="性别" prop="sex" class="right-input">
                 <ElSelect v-model="form.sex" placeholder="Select" :disabled="!isEdit">
@@ -75,29 +68,56 @@
             </ElRow>
 
             <ElRow>
-              <ElFormItem label="昵称" prop="nikeName">
-                <ElInput v-model="form.nikeName" :disabled="!isEdit" />
+              <ElFormItem label="联系方式" prop="phone">
+                <ElInput v-model="form.phone" :disabled="!isEdit" />
               </ElFormItem>
-              <ElFormItem label="邮箱" prop="email" class="right-input">
-                <ElInput v-model="form.email" :disabled="!isEdit" />
+              <ElFormItem label="职务" prop="position" class="right-input">
+                <ElInput v-model="form.position" :disabled="!isEdit" />
               </ElFormItem>
             </ElRow>
 
             <ElRow>
-              <ElFormItem label="手机" prop="mobile">
-                <ElInput v-model="form.mobile" :disabled="!isEdit" />
+              <ElFormItem label="公司" prop="company">
+                <ElInput v-model="form.corp_name" disabled/>
               </ElFormItem>
-              <ElFormItem label="地址" prop="address" class="right-input">
-                <ElInput v-model="form.address" :disabled="!isEdit" />
+              <ElFormItem label="国家" prop="address" class="right-input">
+                <el-select v-model="form.country_id" filterable placeholder="请选择国家"  :disabled="!isEdit" >
+                  <el-option v-for="item in countryOptions" :key="item.id" :label="item.cn_addr" :value="item.id" />
+                </el-select>
               </ElFormItem>
             </ElRow>
-
-            <ElFormItem label="个人介绍" prop="des" :style="{ height: '130px' }">
-              <ElInput type="textarea" :rows="4" v-model="form.des" :disabled="!isEdit" />
-            </ElFormItem>
-
+            <ElRow>
+              <ElFormItem label="二维码" prop="socialize"  :class="isEdit?'qrcode-radio-group':''">
+                <el-radio-group  v-model="form.socialize"  v-if="isEdit">
+                  <el-radio label="微信">微信</el-radio>
+                  <el-radio label="WhatsApp">WhatsApp</el-radio>
+                </el-radio-group>
+                <template v-else>
+                  <img v-if="form.socialize_pic_full" :src="form.socialize_pic_full" class="qrcode-img" />
+                  <span v-else class="qrcode-upload-text">暂无二维码</span>
+                </template>
+              </ElFormItem>
+              <ElFormItem v-if="isEdit" label="上传二维码" prop="address" class="right-input">
+                <el-upload
+                  class="qrcode-upload"
+                  :action="actionImageUplode"
+                  :headers="uploadHeaders"
+                  :show-file-list="false"
+                  :on-success="handleUploadavatarqrcode"
+                >
+                  <div class="qrcode-upload-box">
+                    <img v-if="form.socialize_pic_full" :src="socialize_pic_full" class="qrcode-img" />
+                    <span v-else class="qrcode-upload-text">
+                      <img :src="imageUrl" class="qrcode-img" />
+                    </span>
+                  </div>
+                </el-upload>
+              </ElFormItem>
+            </ElRow>
+            
             <div class="el-form-item-right">
               <ElButton type="primary" style="width: 90px" v-ripple @click="edit">
+                <i v-if="!isEdit" class="iconfont-sys"> &#xe6bf;</i>
                 {{ isEdit ? '保存' : '编辑' }}
               </ElButton>
             </div>
@@ -107,7 +127,7 @@
         <div class="info box-style" style="margin-top: 20px">
           <h1 class="title">更改密码</h1>
 
-          <ElForm :model="pwdForm" class="form" label-width="86px" label-position="top">
+          <ElForm :model="pwdForm" class="form" label-width="86px" label-position="left">
             <ElFormItem label="当前密码" prop="password">
               <ElInput
                 v-model="pwdForm.password"
@@ -117,9 +137,9 @@
               />
             </ElFormItem>
 
-            <ElFormItem label="新密码" prop="newPassword">
+            <ElFormItem label="新密码" prop="password_new">
               <ElInput
-                v-model="pwdForm.newPassword"
+                v-model="pwdForm.password_new"
                 type="password"
                 :disabled="!isEditPwd"
                 show-password
@@ -137,6 +157,7 @@
 
             <div class="el-form-item-right">
               <ElButton type="primary" style="width: 90px" v-ripple @click="editPwd">
+                <i v-if="!isEditPwd" class="iconfont-sys"> &#xe6bf;</i>
                 {{ isEditPwd ? '保存' : '编辑' }}
               </ElButton>
             </div>
@@ -150,94 +171,116 @@
 <script setup lang="ts">
   import { useUserStore } from '@/store/modules/user'
   import { ElForm, FormInstance, FormRules } from 'element-plus'
-
+  import imageUrl from '@/assets/img/crm/upimg.png'
+  import { CrmService } from '@/api/crmApi'
+  import { useUploadHeaders } from '@/composables/useUploadHeaders'
+  const { uploadHeaders } = useUploadHeaders()
+  let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
   defineOptions({ name: 'UserCenter' })
-
-  const userStore = useUserStore()
-  const userInfo = computed(() => userStore.getUserInfo)
-
-  const isEdit = ref(false)
-  const isEditPwd = ref(false)
-  const date = ref('')
-  const form = reactive({
-    realName: 'John Snow',
-    nikeName: '皮卡丘',
-    email: '59301283@mall.com',
-    mobile: '18888888888',
-    address: '广东省深圳市宝安区西乡街道101栋201',
-    sex: '2',
-    des: 'Art Design Pro 是一款漂亮的后台管理系统模版.'
-  })
-
-  const pwdForm = reactive({
-    password: '123456',
-    newPassword: '123456',
-    confirmPassword: '123456'
-  })
-
-  const ruleFormRef = ref<FormInstance>()
-
-  const rules = reactive<FormRules>({
-    realName: [
-      { required: true, message: '请输入昵称', trigger: 'blur' },
-      { min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
-    ],
-    nikeName: [
-      { required: true, message: '请输入昵称', trigger: 'blur' },
-      { min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
-    ],
-    email: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
-    mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
-    address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
-    sex: [{ type: 'array', required: true, message: '请选择性别', trigger: 'blur' }]
-  })
-
-  const options = [
-    {
-      value: '1',
-      label: '男'
-    },
-    {
-      value: '2',
-      label: '女'
+  // 定义客户详情类型
+  interface CustomerInfo {
+    [key: string]: any
+  }
+  const imageUrlavatar=ref('')
+  const socialize_pic_full=ref('')
+  const countryOptions = ref<any>()
+  const form= ref<CustomerInfo>({})
+  //获取公司 getCompanyList
+  const companyList = ref<any>()
+  //国家
+  const getarea = async () => {
+    try {
+      // 这里调用获取品牌列表的接口
+      const res = await CrmService.getCountry()
+      countryOptions.value = res||[]
+    } catch (error) { countryOptions.value = [] }
+  }
+  const userInfo = ref<CustomerInfo>({})
+    const getuserInfo = async () => {
+      const data = await CrmService.userget()
+      userInfo.value = data
+      form.value = data
+      imageUrlavatar.value = data.avatar_full
+      socialize_pic_full.value = data.socialize_pic_full
+      
     }
-  ]
+    
+    const isEdit = ref(false)
+    const isEditPwd = ref(false)
+    const pwdForm = reactive({
+      password: '',
+      password_new: '',
+      confirmPassword: ''
+    })
 
-  const lableList: Array<string> = ['专注设计', '很有想法', '辣~', '大长腿', '川妹子', '海纳百川']
+    const ruleFormRef = ref<FormInstance>()
 
-  onMounted(() => {
-    getDate()
-  })
+    // const rules = reactive<FormRules>({
+    //   realName: [
+    //     { required: true, message: '请输入昵称', trigger: 'blur' },
+    //     { min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
+    //   ],
+    //   nikeName: [
+    //     { required: true, message: '请输入昵称', trigger: 'blur' },
+    //     { min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
+    //   ],
+    //   email: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
+    //   mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
+    //   address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
+    //   sex: [{ type: 'array', required: true, message: '请选择性别', trigger: 'blur' }]
+    // })
 
-  const getDate = () => {
-    const d = new Date()
-    const h = d.getHours()
-    let text = ''
-
-    if (h >= 6 && h < 9) {
-      text = '早上好'
-    } else if (h >= 9 && h < 11) {
-      text = '上午好'
-    } else if (h >= 11 && h < 13) {
-      text = '中午好'
-    } else if (h >= 13 && h < 18) {
-      text = '下午好'
-    } else if (h >= 18 && h < 24) {
-      text = '晚上好'
-    } else if (h >= 0 && h < 6) {
-      text = '很晚了，早点睡'
+    const options = [
+      {
+        value: '1',
+        label: '男'
+      },
+      {
+        value: '2',
+        label: '女'
+      }
+    ]
+    onMounted(async () => {
+      await getarea()
+      await getuserInfo()
+    })
+    const edit = async() => {
+      if(isEdit.value){
+        const res = await CrmService.crmuseredit(form.value)
+        ElMessage.success(res?.message || '操作成功')
+        getuserInfo()
+      }
+      isEdit.value = !isEdit.value
+      
     }
 
-    date.value = text
-  }
-
-  const edit = () => {
-    isEdit.value = !isEdit.value
-  }
-
-  const editPwd = () => {
-    isEditPwd.value = !isEditPwd.value
-  }
+    const editPwd = async() => {
+      if(isEditPwd.value){
+        // 判断新密码和确认密码是否一致
+        if (pwdForm.password_new !== pwdForm.confirmPassword) {
+          ElMessage.error('新密码和确认密码不一致')
+          return
+        }
+        const res = await CrmService.savePassword(pwdForm)
+        ElMessage.success(res?.message || '操作成功')
+      }
+      isEditPwd.value = !isEditPwd.value
+    }
+    //头像上传
+    function handleUploadavatar(response: any) {
+      // 假设返回图片地址字段为 response.url 或 response.data.url
+      imageUrlavatar.value = response.url || (response.data && response.data.file_url) || ''
+      // 如需同步到 form.picture
+      form.value.avatar = response.url || (response.data && response.data.file_name) || ''
+    }
+    //二维码上传
+    function handleUploadavatarqrcode(response: any) {
+      // 假设返回图片地址字段为 response.url 或 response.data.url
+      socialize_pic_full.value = response.url || (response.data && response.data.file_url) || ''
+      // 如需同步到 form.picture
+      form.value.socialize_pic = response.url || (response.data && response.data.file_name) || ''
+    }
+  
 </script>
 
 <style lang="scss">
@@ -253,6 +296,19 @@
 </style>
 
 <style lang="scss" scoped>
+  :deep(.qrcode-radio-group .el-form-item__content){
+    height: 40px;
+  }
+  .avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  .qrcode-img{
+    width: 80px;
+    height: 80px;
+  }
   .page-content {
     width: 100%;
     height: 100%;
@@ -274,33 +330,25 @@
       margin-top: 10px;
 
       .left-wrap {
-        width: 450px;
+        width: 350px;
         margin-right: 25px;
 
         .user-wrap {
           position: relative;
-          height: 600px;
+          height: 400px;
           padding: 35px 40px;
           overflow: hidden;
           text-align: center;
-          background: var(--art-main-bg-color);
+          // background: var(--art-main-bg-color);
+          background: linear-gradient(180deg, #E9F0FF 0%, #FFFFFF 67.9%);
+
           border-radius: $box-radius;
-
-          .bg {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 200px;
-            object-fit: cover;
-          }
-
           .avatar {
             position: relative;
             z-index: 10;
             width: 80px;
             height: 80px;
-            margin-top: 120px;
+            // margin-top: 120px;
             object-fit: cover;
             border: 2px solid #fff;
             border-radius: 50%;
@@ -318,19 +366,28 @@
           }
 
           .outer-info {
-            width: 300px;
-            margin: auto;
+            width: 260px;
+            margin: 0 auto;
             margin-top: 30px;
-            text-align: left;
-
-            > div {
-              margin-top: 10px;
-
-              span {
-                margin-left: 8px;
-                font-size: 14px;
-              }
-            }
+          }
+          .info-row {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            margin-top: 10px;
+            font-size: 16px;
+          }
+          .info-label {
+            display: inline-block;
+            width: 100px;
+            color: #222;
+            text-align: right;
+            letter-spacing: 2px;
+          }
+          .info-value {
+            color: #333;
+            margin-left: 8px;
+            word-break: break-all;
           }
 
           .lables {
@@ -387,7 +444,7 @@
             font-size: 20px;
             font-weight: 400;
             color: var(--art-text-gray-800);
-            border-bottom: 1px solid var(--art-border-color);
+            // border-bottom: 1px solid var(--art-border-color);
           }
 
           .form {