Finish crm_pc

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: '/crmpc/customer/add',
-    path: '/dashboard',
+    name: 'CrmpcustomerAdd',
-    component: RoutesAlias.Home,
+    component: RoutesAlias.CrmpcustomerAdd,
     meta: {
-      title: 'menus.dashboard.title',
+      title: '新增客户资料',
-      icon: ''
+      isHide: true,
-    },
+      // isHideTab: true
-    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',
+    path: '/crmpc/customer/show',
-    name: 'Work',
+    name: 'CrmpcustomerShow',
-    component: RoutesAlias.Home,
+    component: RoutesAlias.CrmpcustomerShow,
-    // component:'/work',
     meta: {
-      title: 'menus.work.title',
+      title: '客户资料',
-      icon: '',
+      isHide: true,
-      roles: ['R_SUPER', 'R_ADMIN']
+      // isHideTab: true
-    },
+    }
-    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',
+    path: '/crmpc/customer/edit',
-    name: 'System',
+    name: 'CrmpcustomerEdit',
-    component: RoutesAlias.Home,
+    component: RoutesAlias.CrmpcustomerEdit,
     meta: {
-      title: 'menus.system.title',
+      title: '编辑客户资料',
-      icon: '',
+      isHide: true,
-      roles: ['R_SUPER', 'R_ADMIN']
+      // isHideTab: true
-    },
+    }
-    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',
+    path: '/crmpc/customer/followadd',
-    name: 'Car',
+    name: 'CustomerFollowAdd',
-    component: RoutesAlias.Home,
+    component: RoutesAlias.CrmpcustomerFollowadd,
     meta: {
-      title: 'menus.car.title',
+      title: '添加跟进',
-      icon: '',
+      isHide: true,
-      roles: ['R_SUPER', 'R_ADMIN']
+      // isHideTab: true
-    },
+    }
-    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',
+    path: '/crmpc/recycle',
-    name: 'Article',
+    name: 'Recycle',
-    component: RoutesAlias.Home,
+    component: RoutesAlias.recycle,
     meta: {
-      title: 'menus.article.title',
+      title: '回收站',
-      icon: '',
+      isHide: true
-      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/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/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

@@ -0,0 +1,307 @@
+<template>
+  <div class="customer-form-page">
+    <div class="form-header">
+      <el-link  :underline="false" @click="goBack">
+        <i class="iconfont-sys icon-reverse">&#xe772;</i>  返回
+      </el-link>
+      <span class="border"></span><span class="form-title">新增客户资料</span>
+    </div>
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      class="customer-form"
+      label-position="right"
+    >
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <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="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="contacts">
+            <el-input v-model="form.contacts" placeholder="请输入客户名称" />
+          </el-form-item>
+          <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="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>
+          <!-- <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="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="请输入公司" @click="showMapDialog = true" readonly />
+          </el-form-item>
+          <el-form-item label="备注" prop="describe">
+            <el-input v-model="form.describe" type="textarea" :rows="3" placeholder="请输入备注" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item class="submit-row">
+        <el-button type="primary" style="width:100%" @click="submitForm">提交</el-button>
+     </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, 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_id: '',
+  magnitude: '',
+  contacts: '',
+  sex: '0',
+  phone: '',
+  email: '',
+  WhatsApp: '',
+  grade: '',
+  country_id: '',
+  company: '',
+  describe: ''
+})
+
+const rules = {
+  channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
+  name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
+  // car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
+}
+
+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(async (valid: boolean) => {
+    if (valid) {
+      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>
+.border{
+  
+  margin: 0px 10px 0px 40px;
+}
+.submit-row .el-form-item__content {
+  display: flex;
+  justify-content: center;
+}
+.icon-reverse {
+  display: inline-block;
+  transform: rotate(270deg); /* 旋转180度 */
+}
+.customer-form-page {
+  min-height: 100vh;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 18px;
+}
+.form-header {
+    width: 98%;
+    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    justify-content: flex-start; /* 新增，左对齐 */
+}
+.form-title{
+  font-weight: bold;
+  color: #222;
+}
+
+.customer-form {
+  width: 600px;
+  background: #fff;
+  padding: 10px 24px 16px 24px;
+}
+.el-form-item {
+  margin-bottom: 18px;
+}
+.el-form-item__label {
+  color: #222;
+  font-weight: 500;
+}
+</style> 

src/views/crmpc/customer/Edit.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="customer-form-page">
+    <div class="form-header">
+      <el-link  :underline="false" @click="goBack">
+        <i class="iconfont-sys icon-reverse">&#xe772;</i>  返回
+      </el-link>
+      <span class="border"></span><span class="form-title">编辑客户资料</span>
+    </div>
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      class="customer-form"
+      label-position="right"
+    >
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <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="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="contacts">
+            <el-input v-model="form.contacts" placeholder="请输入客户名称" />
+          </el-form-item>
+          <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="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>
+          <!-- <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="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="describe">
+            <el-input v-model="form.describe" type="textarea" :rows="3" placeholder="请输入备注" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item class="submit-row">
+        <el-button type="primary" style="width:100%" @click="submitForm">提交</el-button>
+     </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 rules = {
+  channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
+  name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
+  // car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
+}
+
+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(async (valid: boolean) => {
+    if (valid) {
+      try {
+        const res = await CrmService.customerAdd(form.value)
+        ElMessage.success(res?.message || '提交成功！')
+        router.push('/crmpc/customer')
+      } catch (e: any) {
+        ElMessage.error(e?.message || '提交失败')
+      }
+    }
+  })
+}
+</script>
+
+<style scoped>
+.border{
+  
+  margin: 0px 10px 0px 40px;
+}
+.submit-row .el-form-item__content {
+  display: flex;
+  justify-content: center;
+}
+.icon-reverse {
+  display: inline-block;
+  transform: rotate(270deg); /* 旋转180度 */
+}
+.customer-form-page {
+  min-height: 100vh;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 18px;
+}
+.form-header {
+    width: 98%;
+    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    justify-content: flex-start; /* 新增，左对齐 */
+}
+.form-title{
+  font-weight: bold;
+  color: #222;
+}
+
+.customer-form {
+  width: 600px;
+  background: #fff;
+  padding: 10px 24px 16px 24px;
+}
+.el-form-item {
+  margin-bottom: 18px;
+}
+.el-form-item__label {
+  color: #222;
+  font-weight: 500;
+}
+</style> 

src/views/crmpc/customer/Followadd.vue

@@ -0,0 +1,515 @@
+<template>
+  <div class="follow-add-page">
+    <div class="boxshadow pad20">
+      <el-link :underline="false" @click="goBack">
+        <i class="iconfont-sys icon-reverse">&#xe772;</i> 返回
+      </el-link>
+      <span class="border"></span><span class="edit-title" style="margin-left: 12px;">添加跟进</span>
+    </div>
+    <div class="edit-header boxshadow" style="position:relative;">
+      <!-- 右上角三角形角标 -->
+      <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>客户名称：{{ 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="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="form.type">
+          <el-radio label="1">在线跟进</el-radio>
+          <el-radio label="0">拜访</el-radio>
+        </el-radio-group>
+      </div>
+    </el-card>
+    <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="form.firstFollowtime" type="datetime" :value-format="'YYYY-MM-DD HH:mm:ss'" style="width: 200px;" />
+      </div>
+    </el-card>
+    <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="actionImageUplode" 
+          :headers="uploadHeaders"
+          :on-success="handleUploadSuccess"
+          :show-file-list="false"
+        >
+          <img :src="imageUrl" class="avatar" />
+        </el-upload>
+      </div>
+    </el-card>
+    <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="form.audio_text" type="textarea" placeholder="请输入跟进描述"  />
+      </div>
+    </el-card>
+    <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="actionImageUplode" 
+          :headers="uploadHeaders"
+          :on-success="handleUploadSuccess1"
+          :show-file-list="false"
+        >
+          <img :src="imageUrls" class="avatar" />
+        </el-upload>
+      </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-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="form.remark" type="textarea" placeholder="请输入备注" />
+      </div>
+    </el-card>
+    <el-card class="info-card" shadow="never" style="margin-top: 16px;">
+      <div>
+        <span class="border" style="margin: 0px 10px 0px 0px;"></span><span class="edit-title">跟进记录</span>
+      </div>
+      <div class="follow-list">
+        <ElScrollbar >
+          <template v-if="followList.length > 0">
+            <ElTimeline>
+              <ElTimelineItem
+                v-for="item in followList"
+                :key="item.time"
+                :placement="TIMELINE_PLACEMENT"
+                :color="activecolor"
+                :center="true"
+              >
+                <div class="timeline-item">
+                  <div class="timeline-content-row">
+                    <div class="timeline-content">
+                      <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.picture_full" :src="item.picture_full" class="timeline-img" alt="图片" />
+                  </div>
+                </div>
+              </ElTimelineItem>
+            </ElTimeline>
+          </template>
+          <template v-else>
+            <!-- 使用 Element Plus 的空状态组件 -->
+            <el-empty :image="emptyimg"  description="暂无跟进记录" />
+            <!-- <el-empty /> -->
+            <!-- 或者自定义图片 -->
+            <!-- <img src="你的空图片地址.png" alt="暂无数据" class="empty-img" /> -->
+          </template>
+        </ElScrollbar>
+      </div>
+    </el-card>
+
+    <el-button type="primary" class="submit-btn" @click="handleSubmit">提交</el-button>
+  </div>
+  <!-- 提交成功弹出层 -->
+  <el-dialog
+    v-model="successDialogVisible"
+    width="400px"
+    align-center
+    :show-close="true"
+    class="success-dialog"
+  >
+    <div class="success-dialog-content">
+      <img src="@/assets/img/crm/succes.png" alt="成功" class="success-img" />
+      <div class="conts">
+        <div class="success-title">提交成功</div>
+        <div class="remind-title">下次跟进提醒设置</div>
+        <div class="remind-options">
+          <div
+            v-for="(item, idx) in remindOptions.filter(opt => opt.value !== 'custom')"
+            :key="item.value"
+            :class="['remind-btn', { active: remindValue === item.value }]"
+            @click="remindValue = item.value"
+          >
+            {{ item.label }}
+          </div>
+        </div>
+        <el-date-picker
+            v-model="customDate"
+            type="datetime"
+            placeholder="自定义"
+            style="width:100%;"
+            CircleClose
+            :disabled-date="disabledPastDate"
+        />
+        <el-button type="primary" class="confirm-btn" @click="handleSuccessConfirm">确定</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import emptyimg from '@/assets/img/crm/empty.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 customerId = route.query.id
+const levelOptions = ref<any>()
+const followDesc = ref('')
+const activecolor = "#3471FF"
+
+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' },
+  { label: '3天后', value: '3' },
+  { label: '7天后', value: '7' }
+]
+
+function disabledPastDate(time: Date) {
+  return time.getTime() < Date.now() - 86400000
+}
+const handleSuccessConfirm = async () =>{
+  let remindTimestamp = null
+  if (remindValue.value === 'custom') {
+    if (!customDate.value) {
+      return ElMessage.warning('请选择自定义日期时间')
+    }
+    // 自定义日期转时间戳
+    remindTimestamp = Math.floor(new Date(customDate.value).getTime() / 1000)
+  } else {
+    // 固定天数，当前时间加天数
+    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()
+}
+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;
+}
+.info-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between; /* 两端对齐 */
+  font-size: 15px;
+  padding: 0;
+}
+.edit-header{
+  padding: 40px 20px;
+}
+.follow-add-page {
+  background: #f7f9fa;
+  min-height: 100vh;
+  padding: 24px;
+}
+.boxshadow {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
+}
+.pad20 {
+  padding: 20px;
+}
+.edit-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+.info-card {
+  margin-bottom: 0;
+  border-radius: 8px;
+}
+
+.submit-btn {
+  display: block;
+  width: 240px;
+  margin: 32px auto 0 auto;
+  font-size: 18px;
+  height: 48px;
+  border-radius: 6px;
+}
+.corner-tag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 90px;
+  height: 90px;
+  background: transparent;
+  z-index: 2;
+  pointer-events: none;
+}
+.corner-tag::before {
+  content: '';
+  position: absolute;
+  top: -9px;
+  right: -9px;
+  width: 90px;
+  height: 75px;
+  background: #3471FF;
+  clip-path: polygon(100% 0, 0 0, 100% 100%);
+  border-top-right-radius: 12px;
+}
+.corner-tag {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  color: #fff;
+  font-size: 16px;
+  font-weight: bold;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 55px;
+  height: 40px;
+  z-index: 3;
+  padding-top: 6px;
+  padding-right: 0px;
+  pointer-events: none;
+}
+.corner-text {
+  display: inline-block;
+  transform: rotate(45deg);
+}
+.info-top span{
+  margin-bottom: 15px;
+  display: inline-block;
+}
+/* 成功弹出层 */
+.success-dialog-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 0 0 0;
+}
+.success-img {
+  width:55%;
+  margin-bottom: 12px;
+}
+.conts{
+  margin-top: -55px;
+}
+.success-title {
+  font-size: 20px;
+  font-weight: 500;
+  margin-bottom: 40px;
+  color: #333;
+  text-align: center;
+}
+.remind-title {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 20px;
+}
+.remind-options {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.remind-btn {
+  background: #f4f7fe;
+  color: #3471FF;
+  border-radius: 8px;
+  padding: 6px 18px;
+  cursor: pointer;
+  font-size: 15px;
+  border: 1px solid transparent;
+  transition: all 0.2s;
+  min-width: 64px;
+  text-align: center;
+  flex: 1;
+}
+.remind-btn.active {
+  background: #3471FF;
+  color: #fff;
+  border: 1px solid #3471FF;
+}
+.confirm-btn {
+  width: 100%;
+  height: 44px;
+  font-size: 18px;
+  border-radius: 6px;
+  margin-top: 16px;
+}
+</style>

src/views/crmpc/customer/Show.vue

@@ -0,0 +1,500 @@
+<template>
+  <div class="customer-edit-page">
+    <div class="boxshadow pad20">
+        <el-link :underline="false" @click="goBack">
+            <i class="iconfont-sys icon-reverse">&#xe772;</i> 返回
+        </el-link>
+    </div>
+    <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">{{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>客户名称：{{ 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>
+        <el-button @click="goEdit" type="primary" class="edit-btn" size="small"><i class="iconfont-sys"> &#xe6bf;</i> 编辑资料</el-button>
+      </div>
+    </div>
+
+    <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="addtag" type="primary" size="small" style="float: right;">添加标签</el-button>
+      </div>
+      <div class="tag-list">
+        <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="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-button type="primary" size="small" style="float: right;" @click="goAddFollow">+ 添加跟进</el-button>
+      </div>
+      <div class="follow-list">
+        <ElScrollbar >
+          <template v-if="followList.length > 0">
+            <ElTimeline>
+              <ElTimelineItem
+                v-for="item in followList"
+                :key="item.time"
+                :placement="TIMELINE_PLACEMENT"
+                :color="activecolor"
+                :center="true"
+              >
+                <div class="timeline-item">
+                  <div class="timeline-content-row">
+                    <div class="timeline-content">
+                      <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.picture_full" :src="item.picture_full" class="timeline-img" alt="图片" />
+                  </div>
+                </div>
+              </ElTimelineItem>
+            </ElTimeline>
+          </template>
+          <template v-else>
+            <!-- 使用 Element Plus 的空状态组件 -->
+            <el-empty :image="emptyimg"  description="暂无跟进记录" />
+            <!-- <el-empty /> -->
+            <!-- 或者自定义图片 -->
+            <!-- <img src="你的空图片地址.png" alt="暂无数据" class="empty-img" /> -->
+          </template>
+        </ElScrollbar>
+      </div>
+    </el-card>
+  </div>
+  <el-dialog
+    v-model="tagDialogVisible"
+    title="添加标签"
+    width="420px"
+    align-center
+    :show-close="false"
+  >
+    <div class="tag-dialog-scroll">
+      <div v-for="group in tagGroups" :key="group.name" style="margin-bottom: 12px;">
+        <div style="font-weight: bold; margin-bottom: 6px;">{{ group.name }}</div>
+        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+          <div
+            class="col4 tagitem"
+            style="cursor: pointer;"
+            v-for="(item1, index1) in group.tags"
+            :class="{ 'tagactive': activeMap[group.id] === item1.id }"
+            @click="tagSelect(item1)"
+            :key="index1"
+          >
+            {{ item1.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer-center">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+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 tagDialogVisible = ref(false)
+const selectedTags = ref<string[]>([])
+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
+          }
+        }
+      })
+    }
+  } catch (error) { }
+}
+
+// 4. 点击标签
+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]
+    tag_id = ''
+  } else {
+    // 选中
+    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
+// }
+
+// 6. 示例：确定按钮
+function handleConfirm() {
+  // const selectedTags = getSelectedTags()
+  // console.log('选中的标签：', selectedTags)
+  // 处理选中的标签
+  tagDialogVisible.value = false
+}
+
+function handleCancel() {
+  tagDialogVisible.value = false
+}
+//编辑
+function goEdit() {
+  router.push({
+      path: '/crmpc/customer/edit',
+      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;
+  gap: 12px; /* 标签间距 */
+  margin-top: 20px;
+}
+.border{
+  margin-right: 10px;
+}
+.pad20{
+    padding: 20px;
+}
+.icon-reverse {
+  display: inline-block;
+  transform: rotate(270deg); /* 旋转180度 */
+}
+.customer-edit-page {
+  background: #f7f9fa;
+  min-height: 100vh;
+  padding: 24px;
+}
+.edit-header {
+  /* display: flex; */
+  /* align-items: center; */
+  /* gap: 12px; */
+  margin-bottom: 16px;
+}
+.edit-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+.edit-status {
+  margin-left: 16px;
+}
+.edit-btn {
+  margin-left: auto;
+}
+.info-card {
+  margin-bottom: 0;
+  border-radius: 8px;
+}
+.info-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between; /* 两端对齐 */
+  font-size: 15px;
+  padding: 0;
+}
+.follow-list {
+  margin-top: 16px;
+}
+.follow-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 16px;
+  background: #f7f9fa;
+  border-radius: 6px;
+  padding: 12px;
+}
+.follow-main {
+  flex: 1;
+}
+.follow-title {
+  font-size: 14px;
+  color: #222;
+  margin-bottom: 4px;
+  display: flex;
+  gap: 16px;
+}
+.follow-type {
+  color: #3471FF;
+  font-weight: bold;
+}
+.follow-time {
+  color: #888;
+}
+.follow-content {
+  color: #333;
+  font-size: 14px;
+}
+.follow-img {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 6px;
+  margin-left: 16px;
+}
+.info-row-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 16px 0px;
+}
+.corner-tag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 90px;
+  height: 90px;
+  background: transparent;
+  z-index: 2;
+  pointer-events: none;
+}
+.corner-tag::before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  width: 90px;
+  height: 80px;
+  background: #3471FF;
+  clip-path: polygon(100% 0, 0 0, 100% 100%);
+  border-top-right-radius: 12px;
+}
+.corner-tag {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  color: #fff;
+  font-size: 16px;
+  font-weight: bold;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 55px;
+  height: 40px;
+  z-index: 3;
+  padding-top: 6px;
+  padding-right: 0px;
+  pointer-events: none;
+}
+.corner-text {
+  display: inline-block;
+  transform: rotate(45deg);
+}
+.timeline-content-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.timeline-text{
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+.timeline-mom{
+  color: #999;
+  font-size: 12px;
+}
+.timeline-img {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 6px;
+}
+
+.tagitem{
+  background: #DCE7FF;
+  border-radius: 8px;
+  color: #3471FF;
+  text-align: center;
+  padding: 5px 13px;
+}
+.col4{
+  display: inline-block;
+  margin: 4px 3px;
+}
+.tagactive{
+  background: #3471FF !important;
+  color: #fff !important;
+}
+.tag-dialog-scroll {
+  max-height: 60vh;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+.tag-dialog-scroll {
+  max-height: 60vh;
+  overflow-y: auto;
+  padding-right: 8px;
+  /* 让内容不被滚动条遮挡 */
+}
+
+/* 优化滚动条样式（Webkit内核浏览器） */
+.tag-dialog-scroll::-webkit-scrollbar {
+  width: 6px;
+  background: transparent;
+}
+.tag-dialog-scroll::-webkit-scrollbar-thumb {
+  background: #d4e0f7;
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+.tag-dialog-scroll::-webkit-scrollbar-thumb:hover {
+  background: #b3c8e6;
+}
+.tag-dialog-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Firefox 滚动条优化 */
+.tag-dialog-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: #d4e0f7 transparent;
+}
+.dialog-footer-center {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+</style> 

src/views/crmpc/customer/index.vue

@@ -0,0 +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="selectValue">
+              <el-option
+              v-for="v in selectOptions"
+              :key="v.value"
+              :label="v.label"
+              :value="v.value"
+              >
+              </el-option>
+          </el-select>
+      </div>
+    </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" :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>
+  
+      <!-- 表格 -->
+      <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 } // 可带客户名等参数
+    })
+  }
+
+// 标签选中状态，key为组名，值为选中的标签label
+const tagActiveMap = reactive<{ [group: string]: string }>({})
+
+function handleTagClick(group: string, label: string) {
+  if (tagActiveMap[group] === label) {
+    tagActiveMap[group] = '' // 取消选中
+  } else {
+    tagActiveMap[group] = label // 选中
+  }
+  pagination.currentPage = 1
+  gettableList()
+}
+
+</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;
+}
+.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;
+  }
+}
+.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

@@ -0,0 +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="" />
+        <el-option label="当天" value="0" />
+        <el-option label="近三天" value="1" />
+        <el-option label="近七天" value="2" />
+      </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="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>
+
+<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'
+    }
+    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
+  }
+}
+// 选中的行数据
+ 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()
+  }
+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)
+  }
+})
+
+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;
+    align-items: center;
+  }
+
+  .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;
+  }
+}
+.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/index.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="console">
+      <CardList></CardList>
+  
+      <!-- <AboutProject /> -->
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+    import CardList from './widget/CardList.vue'
+    import { useCommon } from '@/composables/useCommon'
+  
+    defineOptions({ name: 'Console' })
+  
+    useCommon().scrollToTop()
+  </script>
+  
+  <style lang="scss" scoped>
+    @use './style';
+  </style>
+  

src/views/crmpc/home/style.scss

@@ -0,0 +1,43 @@
+@use '@styles/variables.scss' as *;
+
+.console {
+  --card-spacing: 20px;
+
+  // 卡片头部
+  :deep(.card-header) {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px 25px 5px 0;
+
+    .title {
+      h4 {
+        font-size: 18px;
+        font-weight: 500;
+        color: var(--art-gray-900) !important;
+      }
+
+      p {
+        margin-top: 3px;
+        font-size: 13px;
+        color: var(--art-gray-600) !important;
+
+        span {
+          margin-left: 10px;
+          color: #52c41a;
+        }
+      }
+    }
+  }
+
+  // 设置卡片背景色、圆角、间隙
+  :deep(.card-list .card),
+  .card {
+    margin-bottom: var(--card-spacing);
+    background: var(--art-main-bg-color);
+    border-radius: calc(var(--custom-radius) + 4px) !important;
+  }
+
+  @media screen and (max-width: $device-phone) {
+    --card-spacing: 15px;
+  }
+}

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

@@ -0,0 +1,456 @@
+<template>
+  <div class="homeheard">
+    您已陪伴领客 CRM  <span class="daynum"><span class="day">{{homestatistics.day}}</span>天</span>
+  </div>
+  <div class="boxshadow">
+    <div class="heard">
+      <div class="heard-title">数据简报</div>
+      <el-date-picker
+        v-model="selectedDate"
+        type="month"
+        format="YYYY-MM"
+        value-format="YYYY-MM"
+        placeholder="选择年月"
+        class="heard-date-picker"
+      />
+    </div>
+    <el-row :gutter="20" class="card-list">
+      <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="homestatistics.customer"
+            :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(${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>
+    </el-row>
+  </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>
+    <div class="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 { CountTo } from 'vue3-count-to'
+import adduser from '@/assets/img/crm/adduser.png'
+import addbf from '@/assets/img/crm/addbf.png'
+import addgj from '@/assets/img/crm/addgj.png'
+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 { CrmService } from '@/api/crmApi'
+const router = useRouter()
+
+function getCurrentMonth() {
+  const d = new Date()
+  const month = d.getMonth() + 1
+  return `${d.getFullYear()}-${month < 10 ? '0' + month : month}`
+}
+
+const selectedDate = ref(getCurrentMonth())
+const remindRange = ref('')
+const loading = ref(false)
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+
+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)
+})
+
+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}秒`
+}
+
+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'
+}
+
+function goAddFollow(row: any) {
+    router.push({
+      path: '/crmpc/customer/followadd',
+      query: { id: row.id } // 可带客户名等参数
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+.homeheard{
+  background: 
+    url('@/assets/img/crm/hometop.png') no-repeat center/cover,
+    linear-gradient(90deg, #EDF2FF 0%, #CBE5FC 72.55%);
+    padding: 10px;
+margin-bottom: 10px;
+border-radius: 6px;
+display: flex;
+  align-items: center; /* 垂直居中 */
+  color: #333333;
+
+}
+.daynum{
+  margin-left: 20px;
+  color: #3471FF;
+}
+.day{
+  font-size: 70px;
+  font-weight: bold;
+}
+.card-list {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  background-color: var(--el-card-bg-color) !important;
+
+  .art-custom-card {
+    border: none !important;
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 120px;
+    align-items: end;
+    padding: 0 18px;
+    list-style: none;
+    transition: all 0.3s ease;
+    $icon-size: 52px;
+
+    .iconfont-sys {
+      position: absolute;
+      top: 0;
+      right: 20px;
+      bottom: 0;
+      width: $icon-size;
+      height: $icon-size;
+      margin: auto;
+      overflow: hidden;
+      font-size: 22px;
+      line-height: $icon-size;
+      color: var(--el-color-primary) !important;
+      text-align: center;
+      background-color: var(--el-color-primary-light-9);
+      border-radius: 12px;
+    }
+
+    .des {
+      display: block;
+      height: 14px;
+      font-size: 14px;
+      line-height: 14px;
+    }
+
+    .number {
+      display: block;
+      margin-top: 10px;
+      font-size: 28px;
+      font-weight: 400;
+    }
+
+    .change-box {
+      display: flex;
+      align-items: center;
+      margin-top: 10px;
+
+      .change-text {
+        display: block;
+        font-size: 13px;
+        // color: var(--art-text-gray-600);
+      }
+
+      .change {
+        display: block;
+        margin-left: 5px;
+        font-size: 13px;
+        font-weight: bold;
+
+        &.text-success {
+          color: var(--el-color-success);
+        }
+
+        &.text-danger {
+          color: var(--el-color-danger);
+        }
+      }
+    }
+  }
+}
+
+.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;
+    align-items: center;
+  }
+  .heard-select {
+    width: 120px;
+  }
+}
+
+.dark {
+  .card-list {
+    .art-custom-card {
+      .iconfont-sys {
+        background-color: #232323 !important;
+      }
+    }
+  }
+}
+
+.table {
+  ::v-deep .custom-table-header {
+    background: #F7F9FA !important;
+    color: #333;
+    font-weight: bold;
+  }
+  ::v-deep .el-table__body tr.custom-table-row td {
+    border-bottom: 1px solid #F7F9FA !important;
+    border-right: 1px solid #F7F9FA !important;
+  }
+  ::v-deep .el-table__body tr td:last-child {
+    border-right: none !important;
+  }
+  ::v-deep .el-table__body tr:last-child td {
+    border-bottom: none !important;
+  }
+  ::v-deep .el-table__header-wrapper th {
+    border-bottom: 1px solid #F7F9FA !important;
+    border-right: 1px solid #F7F9FA !important;
+  }
+  ::v-deep .el-table__header-wrapper th:last-child {
+    border-right: none !important;
+  }
+  ::v-deep .el-table {
+    border: 1px solid #F7F9FA !important;
+    border-radius: 6px;
+  }
+}
+.countdown-danger {
+  color: #FF0000 !important;
+}
+.countdown-success {
+  color: #00A43F !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;
+  }
+}
+</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="bg" src="@imgs/user/bg.webp" /> -->
-          <img class="avatar" src="@imgs/user/avatar.webp" />
+          <img class="avatar" :src="userInfo.avatar_full" />
-          <h2 class="name">{{ userInfo.userName }}</h2>
+          <h2 class="name">{{userInfo.name}}</h2>
-          <p class="des">Art Design Pro 是一款漂亮的后台管理系统模版.</p>
+          <p class="des">ID:{{userInfo.id}}</p>
-
           <div class="outer-info">
-            <div>
+            <div class="info-row">
-              <i class="iconfont-sys">&#xe72e;</i>
+              <span class="info-label">电    话：</span>
-              <span>jdkjjfnndf@mall.com</span>
+              <span class="info-value">{{userInfo.phone}}</span>
             </div>
-            <div>
+            <div class="info-row">
-              <i class="iconfont-sys">&#xe608;</i>
+              <span class="info-label">职    位：</span>
-              <span>交互专家</span>
+              <span class="info-value">{{userInfo.position}}</span>
             </div>
-            <div>
+            <div class="info-row">
-              <i class="iconfont-sys">&#xe736;</i>
+              <span class="info-label">公    司：</span>
-              <span>广东省深圳市</span>
+              <span class="info-value">{{userInfo.corp_name}}</span>
             </div>
-            <div>
+            <div class="info-row">
-              <i class="iconfont-sys">&#xe811;</i>
+              <span class="info-label">国    家：</span>
-              <span>字节跳动－某某平台部－UED</span>
+              <span class="info-value">{{userInfo.country_txt}}</span>
-            </div>
-          </div>
-
-          <div class="lables">
-            <h3>标签</h3>
-            <div>
-              <div v-for="item in lableList" :key="item">
-                {{ item }}
-              </div>
             </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">
+              <ElFormItem label="昵称" prop="name">
-                <el-input v-model="form.realName" :disabled="!isEdit" />
+                <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">
+              <ElFormItem label="联系方式" prop="phone">
-                <ElInput v-model="form.nikeName" :disabled="!isEdit" />
+                <ElInput v-model="form.phone" :disabled="!isEdit" />
               </ElFormItem>
-              <ElFormItem label="邮箱" prop="email" class="right-input">
+              <ElFormItem label="职务" prop="position" class="right-input">
-                <ElInput v-model="form.email" :disabled="!isEdit" />
+                <ElInput v-model="form.position" :disabled="!isEdit" />
               </ElFormItem>
             </ElRow>
 
             <ElRow>
-              <ElFormItem label="手机" prop="mobile">
+              <ElFormItem label="公司" prop="company">
-                <ElInput v-model="form.mobile" :disabled="!isEdit" />
+                <ElInput v-model="form.corp_name" disabled/>
               </ElFormItem>
-              <ElFormItem label="地址" prop="address" class="right-input">
+              <ElFormItem label="国家" prop="address" class="right-input">
-                <ElInput v-model="form.address" :disabled="!isEdit" />
+                <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>
+            <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>
             
-            <ElFormItem label="个人介绍" prop="des" :style="{ height: '130px' }">
-              <ElInput type="textarea" :rows="4" v-model="form.des" :disabled="!isEdit" />
-            </ElFormItem>
-
             <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' })
+  // 定义客户详情类型
+  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 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: '女'
-    }
-  ]
-
-  const lableList: Array<string> = ['专注设计', '很有想法', '辣~', '大长腿', '川妹子', '海纳百川']
-
-  onMounted(() => {
-    getDate()
-  })
-
-  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 = '很晚了，早点睡'
     }
     
-    date.value = text
+    const isEdit = ref(false)
-  }
+    const isEditPwd = ref(false)
+    const pwdForm = reactive({
+      password: '',
+      password_new: '',
+      confirmPassword: ''
+    })
 
-  const edit = () => {
+    const ruleFormRef = ref<FormInstance>()
-    isEdit.value = !isEdit.value
+
-  }
+    // 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: '女'
+      }
+    ]
+    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
+      
+    }
+
+    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) || ''
+    }
   
-  const editPwd = () => {
-    isEditPwd.value = !isEditPwd.value
-  }
 </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;
+            width: 260px;
-            margin: auto;
+            margin: 0 auto;
             margin-top: 30px;
-            text-align: left;
+          }
-
+          .info-row {
-            > div {
+            display: flex;
-              margin-top: 10px;
+            justify-content: flex-start;
-
+            align-items: center;
-              span {
+            margin-top: 10px;
-                margin-left: 8px;
+            font-size: 16px;
-                font-size: 14px;
+          }
-              }
+          .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 {