feature: kyc认证页面，样式修改。

package.json

@@ -34,6 +34,7 @@
     "file-saver": "^2.0.5",
     "fuse.js": "^6.6.2",
     "jszip": "^3.9.1",
+    "lodash": "^4.17.21",
     "mavon-editor": "^2.10.4",
     "md-editor-v3": "^1.11.3",
     "nprogress": "^0.2.0",

src/components/NavMenu.vue

@@ -5,7 +5,7 @@
       <img v-else class="img1" :src="logo1" alt="" />
     </div>
     <div v-for="(item, key) in menus" :key="key">
-      <el-submenu v-if="item.show && item.name != 'R-Shop'" :index="key + ''">
+      <el-sub-menu v-if="item.show && item.name != 'R-Shop'" teleported :index="key + ''">
         <template #title>
           <i class="iconfont" :class="item.icon"></i>
           <span class="title">{{ $t(item.name) }}</span>
@@ -21,7 +21,7 @@
             </template>
           </el-menu-item>
         </div>
-      </el-submenu>
+      </el-sub-menu>
       <div
         v-if="item.show && item.name == 'R-Shop' && !isCollapse"
         class="points"
@@ -66,7 +66,11 @@
   const upath = ref('/')
 
   // 计算属性 - 使用 mapState 的等效方式
-  const menus = computed(() => store.state.navMenu.menus)
+  const menus = computed(() => {
+    console.log(store.state.navMenu.menus, 'menus')
+    // 这是u卡只需要u卡路由
+    return store.state.navMenu.menus.filter((item) => item.name == 'R-Card')
+  })
   const isCollapse = computed(() => store.state.navMenu.isCollapse)
 
   const routerPush = (path) => {
@@ -225,10 +229,10 @@
 </style>
 
 <style lang="scss">
-  #NavMenu.el-menu--collapse.el-menu .el-submenu .el-submenu__title .el-submenu__icon-arrow {
+  #NavMenu.el-menu--collapse.el-menu .el-sub-menu .el-sub-menu__title .el-submenu__icon-arrow {
     display: none;
   }
-  #NavMenu.el-menu--collapse .el-submenu .el-submenu__title .title {
+  #NavMenu.el-menu--collapse .el-sub-menu .el-sub-menu__title .title {
     height: 0;
     width: 0;
     overflow: hidden;
@@ -236,9 +240,9 @@
     display: inline-block;
   }
   #NavMenu {
-    .el-submenu {
+    .el-sub-menu {
       text-align: left;
-      .el-submenu__title {
+      .el-sub-menu__title {
         font-weight: 700;
         color: #6b7188;
         &:hover {

src/i18n/locales/cn.json

@@ -1,7 +1,7 @@
 {
   "Msg": {
-    "Withdrawal":"出金申请金额",
-    "Payment":"打款金额",
+    "Withdrawal": "出金申请金额",
+    "Payment": "打款金额",
     "DeleteConfirm": "是否删除",
     "SystemError": "系统错误，请稍后再试。",
     "LoginSuccess": "登录成功，马上进入系统。",
@@ -309,10 +309,10 @@
   "R-System-actSpread-Editor": "编辑",
   "R-System-actSpread-Delete": "删除",
   "R-System-amountDate": "账户免息配置",
-  "R-System-amountDate-Search":"列表",
-  "R-System-amountDate-Add":"新增",
-  "R-System-amountDate-Editor":"编辑",
-  "R-System-amountDate-Delete":"删除",
+  "R-System-amountDate-Search": "列表",
+  "R-System-amountDate-Add": "新增",
+  "R-System-amountDate-Editor": "编辑",
+  "R-System-amountDate-Delete": "删除",
   "R-System-amountDate-TradingAccount": "交易账号",
   "R-System-amountDate-Platform": "平台",
   "R-System-amountDate-DayNumber": "免息天数",
@@ -323,23 +323,23 @@
   "R-System-amountDate-InputDayNumber": "请输入免息天数",
   "R-System-amountDate-DeleteConfirm": "确定要删除该条记录吗？",
   "R-System-amountDate-DeleteTitle": "删除确认",
-  "R-AmountFree-Search":"列表",
-  "R-AmountFree-Add":"新增",
-  "R-AmountFree-Editor":"编辑",
-  "R-AmountFree-Delete":"删除",
-  "R-exclude-Search":"列表",
-  "R-exclude-Add":"新增",
-  "R-exclude-Editor":"编辑",
-  "R-exclude-Delete":"删除",
-    "No":"第",
-  "Week":"周",
-  "R-dataRetrieval-Search":"列表",
-  "R-Bank-NoCertified":"未认证",
-  "R-Bank-ToCertified":"立即认证",
-  "R-dataRetrieval-Unseal":"解封",
-  "R-Bank-edit":"操作权限",
+  "R-AmountFree-Search": "列表",
+  "R-AmountFree-Add": "新增",
+  "R-AmountFree-Editor": "编辑",
+  "R-AmountFree-Delete": "删除",
+  "R-exclude-Search": "列表",
+  "R-exclude-Add": "新增",
+  "R-exclude-Editor": "编辑",
+  "R-exclude-Delete": "删除",
+  "No": "第",
+  "Week": "周",
+  "R-dataRetrieval-Search": "列表",
+  "R-Bank-NoCertified": "未认证",
+  "R-Bank-ToCertified": "立即认证",
+  "R-dataRetrieval-Unseal": "解封",
+  "R-Bank-edit": "操作权限",
   "R-Enter": "菜单",
-  "R-Real-Amount":"全部金额",
+  "R-Real-Amount": "全部金额",
   "R-Real-Disabled": "开户设置查看",
   "R-Dashboard": "控制台",
   "R-CustomerDynamic": "客户动态",
@@ -403,7 +403,7 @@
   "R-surplusList": "月盈赠金活动",
   "R-surplusList-Search": "列表",
   "R-surplusList-Complete": "完成任务",
-  "R-surplusList-Cancel": "取消任务", 
+  "R-surplusList-Cancel": "取消任务",
   "R-surplusList-Recover": "恢复信用",
   "R-UtaskList-Search": "列表",
   "R-PendingAccount": "待审批账户",
@@ -582,15 +582,15 @@
   "R-Trading-AdjustmentAttribution": "调整归属",
   "R-Trading-Rematch": "重新匹配",
   "R-Trading-Export": "导出",
-  "R-EmailRecords-Export":"导出",
-  "R-Business-Export":"导出",
-  "R-KycAuth-Export":"导出",
-  "R-CardOrder-Export":"导出",
-  "R-VirtualCard-Export":"导出",
-  "R-Recharge-Export":"导出",
-  "R-Transactions-Export":"导出",
-  "R-UserOrder-Export":"导出",
-  "R-CardOperate-Export":"导出",
+  "R-EmailRecords-Export": "导出",
+  "R-Business-Export": "导出",
+  "R-KycAuth-Export": "导出",
+  "R-CardOrder-Export": "导出",
+  "R-VirtualCard-Export": "导出",
+  "R-Recharge-Export": "导出",
+  "R-Transactions-Export": "导出",
+  "R-UserOrder-Export": "导出",
+  "R-CardOperate-Export": "导出",
   "R-Trading-dayLimit": "每日出金限额",
   "R-Agent-Search": "列表",
   "R-Agent-Single": "详情",
@@ -648,7 +648,8 @@
   "R-Agent-AdjustmentAttribution": "调整归属",
   "R-Agent-pammManagerValid": "PAMM申请",
   "R-Agent-PAMMValid": "Money Manager申请",
-  "R-Agent-Transfer": "代理内转",  "R-Agent-CloseFunction": "关闭功能",
+  "R-Agent-Transfer": "代理内转",
+  "R-Agent-CloseFunction": "关闭功能",
   "R-Agent-Level": "查询下级",
   "R-Agent-black": "固定加点",
   "R-Agent-Export": "导出",
@@ -676,9 +677,9 @@
   "R-EmailRecords": "邮件记录",
   "R-EmailRecords-Search": "列表",
   "R-Reward-Details": "销售奖励详情",
-  "R-Review":"审核钱包kyc",
-  "R-DeleteList":"账户删除记录",
-  "R-DeleteList-Search":"列表",
+  "R-Review": "审核钱包kyc",
+  "R-DeleteList": "账户删除记录",
+  "R-DeleteList-Search": "列表",
   "R-AccountRetrieval-Search": "列表",
   "R-UserRetrieval": "用户检索",
   "R-UserRetrieval-Search": "列表",
@@ -865,7 +866,7 @@
   "R-Exclude-Delete": "删除",
   "R-Exclude-Update": "修改",
   "R-Exclude-Add": "新增",
-  "R-GoogleEmail":"Gmail管理",
+  "R-GoogleEmail": "Gmail管理",
   "R-GoogleEmail-Search": "列表",
   "R-GoogleEmail-Add": "新增",
   "R-GoogleEmail-Update": "修改",
@@ -1902,24 +1903,24 @@
       "ToBeProcessed": "待处理数",
       "Deposit": "存款申请",
       "TWithdraw": "取款申请",
-    "Commission": "佣金提取"
-  },
-  "Commission": {
-    "CId": "客户ID",
-    "PIbNo": "归属编号",
-    "WithdrawIbNo": "代理账户",
-    "Name": "姓名",
-    "WithdrawAmount": "转出金额",
-    "WithdrawCurrency": "货币",
-    "DepositIbNo": "转入账户",
-    "DepositAmount": "转入金额",
-    "DepositCurrency": "货币",
-    "AddTime": "申请时间",
-    "Status": "状态",
-    "Status-Processing": "处理中",
-    "Status-Approved": "已通过",
-    "Status-Rejected": "已拒绝"
-  },
+      "Commission": "佣金提取"
+    },
+    "Commission": {
+      "CId": "客户ID",
+      "PIbNo": "归属编号",
+      "WithdrawIbNo": "代理账户",
+      "Name": "姓名",
+      "WithdrawAmount": "转出金额",
+      "WithdrawCurrency": "货币",
+      "DepositIbNo": "转入账户",
+      "DepositAmount": "转入金额",
+      "DepositCurrency": "货币",
+      "AddTime": "申请时间",
+      "Status": "状态",
+      "Status-Processing": "处理中",
+      "Status-Approved": "已通过",
+      "Status-Rejected": "已拒绝"
+    },
     "Role": {
       "item0": "超级管理员",
       "item1": "客服",
@@ -2449,15 +2450,15 @@
       "CUSTOM_KYC_SUCCESS_EN": "人脸认证审核通过(英)",
       "CUSTOM_KYC_FAIL_CN": "人脸认证审核失败(中)",
       "CUSTOM_KYC_FAIL_EN": "人脸认证审核失败(英)",
-      "CUSTOM_KYC_APPROVE":"人脸认证审核通知",
-      "AGENT_CUSTOM_ACTIVITY_REQUITE_SUCCESS_CN":"一级代理用户限时回馈活动结束通知(中)",
-      "AGENT_CUSTOM_ACTIVITY_REQUITE_SUCCESS_EN":"一级代理用户限时回馈活动结束通知(英)",
-      "CUSTOM_ACTIVITY_UCOIN_CN":"客户参加U币入金奖励活动通知",
-      "CUSTOM_ACTIVITY_UCOIN_EN":"客户参加U币入金奖励活动通知(英)",
-      "CUSTOM_ACTIVITY_UCOIN_END_CN":"客户参加U币入金奖励活动结束通知",
-      "CUSTOM_ACTIVITY_UCOIN_END_EN":"客户参加U币入金奖励活动结束通知(英)",
-      "IB_CUSTOM_ACTIVITY_UCOIN_CN":"代理用户参加U币入金奖励活动通知",
-      "IB_CUSTOM_ACTIVITY_UCOIN_EN":"代理用户参加U币入金奖励活动通知(英)",
+      "CUSTOM_KYC_APPROVE": "人脸认证审核通知",
+      "AGENT_CUSTOM_ACTIVITY_REQUITE_SUCCESS_CN": "一级代理用户限时回馈活动结束通知(中)",
+      "AGENT_CUSTOM_ACTIVITY_REQUITE_SUCCESS_EN": "一级代理用户限时回馈活动结束通知(英)",
+      "CUSTOM_ACTIVITY_UCOIN_CN": "客户参加U币入金奖励活动通知",
+      "CUSTOM_ACTIVITY_UCOIN_EN": "客户参加U币入金奖励活动通知(英)",
+      "CUSTOM_ACTIVITY_UCOIN_END_CN": "客户参加U币入金奖励活动结束通知",
+      "CUSTOM_ACTIVITY_UCOIN_END_EN": "客户参加U币入金奖励活动结束通知(英)",
+      "IB_CUSTOM_ACTIVITY_UCOIN_CN": "代理用户参加U币入金奖励活动通知",
+      "IB_CUSTOM_ACTIVITY_UCOIN_EN": "代理用户参加U币入金奖励活动通知(英)",
       "Lang": "语言",
       "TemplateName": "模板名称",
       "EmailTitle": "邮件标题",
@@ -3095,7 +3096,7 @@
     "SwapLong": "买入隔夜利息",
     "SwapShort": "卖出隔夜利息",
     "NetDepositAmount": "净入金金额",
-   
+
     "WithdrawAmount": "出金金额",
     "AgentWithdrawAmount": "佣金提取金额",
     "AddCustomNum": "注册人数",
@@ -3721,7 +3722,7 @@
     "R-PerformanceList-com": "交易量佣金明细",
     "R-PerformanceList-comD": "交易量佣金导出",
     "R-Performance-Record": "薪资收支记录",
-    "R-Sales-Dynamic":"销售动态绩效",
+    "R-Sales-Dynamic": "销售动态绩效",
     "Dynamic-basicSalary": "基本工资",
     "Dynamic-salaryPerformance": "薪资绩效列表",
     "Dynamic-basicPerformance": "底薪绩效列表",
@@ -3787,10 +3788,10 @@
       "item48": "团队",
       "item49": "工资货币类型",
       "item50": "备注",
-      "item51":"基本工资",
-      "item52":"实发工资",
-      "item53":"月份",
-      "item54":"活动奖励"
+      "item51": "基本工资",
+      "item52": "实发工资",
+      "item53": "月份",
+      "item54": "活动奖励"
     },
     "R-SalaryAccount": "薪资账户",
     "R-SalaryAccount-list": "列表",
@@ -4753,7 +4754,7 @@
       "n10": "抵扣方式",
       "n11": "英文地址"
     },
-    "New1":{
+    "New1": {
       "title": "完善信息",
       "f1": "您的证件照已补充完成，请等待审核结果！",
       "f2": "补充成功",
@@ -4794,7 +4795,10 @@
       "p3": "销卡",
       "p4": "锁定",
       "p5": "您的卡片已注销",
-      "p6": "您的卡片已锁定"
+      "p6": "您的卡片已锁定",
+      "p7": "用户信息",
+      "p8": "用户注册信息",
+      "p9": "用户认证信息"
     },
     "Detail": {
       "cvv": "卡验证值",
@@ -4933,9 +4937,9 @@
     "SelectStatus": "请选择状态",
     "AllStatus": "全部状态"
   },
-  "Statistical":"统计入金金额",
-  "StatisticalWithdraw":"统计出金金额",
-  "NoData":"暂无数据",
+  "Statistical": "统计入金金额",
+  "StatisticalWithdraw": "统计出金金额",
+  "NoData": "暂无数据",
   "PersonalManagement": {
     "Bank": "银行信息",
     "Title": {

src/i18n/locales/en.json

@@ -4728,7 +4728,10 @@
       "p3": "Cancel Card",
       "p4": "Lock",
       "p5": "Your card has been canceled",
-      "p6": "Your card has been locked"
+      "p6": "Your card has been locked",
+      "p7": "User information",
+      "p8": "User registration information ",
+      "p9": "User authentication information"
     },
     "Detail": {
       "cvv": "CVV",
@@ -5105,4 +5108,4 @@
     "CreditRevoke": "Credit Revoke",
     "ActivityBonus": "Activity Bonus"
   }
-}
+}

src/routers/modules/uCard.ts

@@ -16,22 +16,21 @@ const uCardRoute = {
       component: () =>
         import(/* webpackChunkName: "CardOrder" */ '@/views/card/CardOrder/index.vue'),
     },
-    //
-    //   {
-    //     meta: {
-    //       OnBreadCrumb: true,
-    //     },
-    //     path: 'kycAuth',
-    //     name: 'R-KycAuth',
-    //     component: () => import(/* webpackChunkName: "KycAuth" */ '@/views/card/KycAuth.vue'),
-    //   },
+    {
+      meta: {
+        OnBreadCrumb: true,
+      },
+      path: 'kycAuth',
+      name: 'R-KycAuth',
+      component: () => import('@/views/card/KycAuth/index.vue'),
+    },
     {
       meta: {
         OnBreadCrumb: true,
       },
       path: 'type',
       name: 'R-CardType',
-      component: () => import(/* webpackChunkName: "CardType" */ '@/views/card/CardType/index.vue'),
+      component: () => import('@/views/card/CardType/index.vue'),
     },
     //   {
     //     meta: {
@@ -74,14 +73,14 @@ const uCardRoute = {
     //     component: () =>
     //       import(/* webpackChunkName: "IdTypeConfig" */ '@/views/card/IdTypeConfig.vue'),
     //   },
-    //   {
-    //     meta: {
-    //       OnBreadCrumb: true,
-    //     },
-    //     path: 'business',
-    //     name: 'R-Business',
-    //     component: () => import(/* webpackChunkName: "Business" */ '@/views/card/Business.vue'),
-    //   },
+    {
+      meta: {
+        OnBreadCrumb: true,
+      },
+      path: 'business',
+      name: 'R-Business',
+      component: () => import('@/views/card/CardBusiness/index.vue'),
+    },
     //   {
     //     meta: {
     //       OnBreadCrumb: true,

src/service/customer.ts

@@ -2,23 +2,23 @@ import Service from '../lib/service.js'
 import axios from 'axios'
 import Config from '../config'
 
-class CustomerService extends Service {
+class SystemService extends Service {
   constructor() {
     super()
     axios.defaults.baseURL = Config.Host85
   }
-
   //cid详细信息real
   async cidRealSingle(params = {}) {
     return await this.post('/custom/search/real/single', params)
   }
+
   //真实用户列表all
   async realCustomerListAll(params = {}) {
     return await this.post('/custom/login/search/custom/list', params)
   }
-  //反审核
-  async customFileApproveDe(params = {}) {
-    return await this.post('/custom/file/de/approve', params)
+  //ibno详细信息
+  async pIbNoRealSingle(params = {}) {
+    return await this.post('/ib/search/ib/single', params)
   }
 }
-export default new CustomerService()
+export default new SystemService()

src/service/marketing.ts

@@ -0,0 +1,20 @@
+import Service from '../lib/service.js'
+import axios from 'axios'
+import Config from '../config'
+
+class MarketingService extends Service {
+  constructor() {
+    super()
+    axios.defaults.baseURL = Config.Host85
+  }
+  // 审核邮箱add
+  async emailAdd(params = {}) {
+    return await this.post('/approve/email/add', params)
+  }
+
+  // 审核邮箱update
+  async emailUpdate(params = {}) {
+    return await this.post('/approve/email/update', params)
+  }
+}
+export default new MarketingService()

src/service/system.ts

@@ -0,0 +1,28 @@
+import Service from '../lib/service.js'
+import axios from 'axios'
+import Config from '../config'
+
+class CustomerService extends Service {
+  constructor() {
+    super()
+    axios.defaults.baseURL = Config.Host85
+  }
+
+  //cid详细信息real
+  async cidRealSingle(params = {}) {
+    return await this.post('/custom/search/real/single', params)
+  }
+  //真实用户列表all
+  async realCustomerListAll(params = {}) {
+    return await this.post('/custom/login/search/custom/list', params)
+  }
+  //反审核
+  async customFileApproveDe(params = {}) {
+    return await this.post('/custom/file/de/approve', params)
+  }
+  //根据父级id获取下级城市
+  async countryGet(params = {}) {
+    return await this.post('/country/get', params)
+  }
+}
+export default new CustomerService()

src/service/ucard.ts

@@ -103,6 +103,56 @@ class UCardService extends Service {
   async updateCardTypes(params = {}) {
     return await this.post('/wasabi/card/types', params)
   }
+
+  // 上传KYC附件
+  async kycUpload(params = {}) {
+    return await this.post('/wasabi/merchant/kyc/upload', params)
+  }
+  // 证件类型配置列表
+  async idTypesConfigList(params = {}) {
+    return await this.post('/wasabi/card/id/type/config/list', params)
+  }
+  // 是否手动上传证件照
+  async photoManually(params = {}) {
+    return await this.post('/wasabi/card/photo/manually', params)
+  }
+  // 商户用户分页列表
+  async merchantList(params = {}) {
+    return await this.post('/wasabi/merchant/user/page', params)
+  }
+  // 商户用户注册
+  async merchantRegister(params = {}) {
+    return await this.post('/wasabi/merchant/user/register', params)
+  }
+  // 更新商户用户信息
+  async merchantUpdate(params = {}) {
+    return await this.post('/wasabi/merchant/user/update', params)
+  }
+  // 商户注册选择用户列表
+  async merchantSearch(params = {}) {
+    return await this.post('/custom/search/ucard', params)
+  }
+  // 查询职业信息
+  async getOccupationList(params = {}) {
+    return await this.post('/wasabi/card/occupation/list', params)
+  }
+  // 文件上传
+  async ucardUpload(params = {}) {
+    return await this.post('/wasabi/upload/file', params)
+  }
+  // 人脸详情
+  async kycSearchSingle(params = {}) {
+    return await this.post('/wasabi/kyc/status/single', params)
+  }
+  // 查询KYC认证状态
+  async kycStatus(params = {}) {
+    return await this.post('/wasabi/merchant/kyc/status', params)
+  }
+
+  // kyc列表
+  async kycList(params = {}) {
+    return await this.post('/wasabi/merchant/kyc/page', params)
+  }
 }
 
 export default new UCardService()

src/styles/cwg_common.scss

@@ -24,7 +24,7 @@ time, mark, audio, video {
   padding: 0;
   border: 0;
   vertical-align: baseline;
-  word-break: break-word!important;
+  word-break: break-word !important;
 }
 
 /* HTML5 display-role reset for older browsers */
@@ -65,34 +65,43 @@ a {
 }
 
 //去左边框
-.crm-border-left-no{
-  border-left: none!important;
-  .el-input__wrapper{
-    //padding: 0 !important;
+.crm-border-left-no {
+  border-left: none !important;
+
+  .el-input__wrapper {
+    padding-top: 0;
+    padding-bottom: 0;
+    box-sizing: border-box;
+    border: 1px solid var(--el-border-color);
+    box-shadow: none !important;
+    border-left: none !important;
   }
-  .el-input__inner, .el-button{
+
+  .el-input__inner, .el-button {
     border-left: none;
   }
 }
 
 //去圆角
-.crm-border-radius-no{
-  border-radius: 0!important;
-  .el-input__inner, .el-button{
+.crm-border-radius-no {
+  border-radius: 0 !important;
+
+  .el-input__inner, .el-button {
     border-radius: 0;
   }
-  .el-select__wrapper,.el-input__wrapper{
-    border-radius: 0;
 
+  .el-select__wrapper, .el-input__wrapper {
+    border-radius: 0;
   }
 }
 
-.el-input__wrapper{
-  width: 100%;
+.select-tag {
+  width: 140px;
+  min-width: 140px !important;
 }
 
 //下划线
-.crm-text-underline{
+.crm-text-underline {
   text-decoration: underline;
   cursor: pointer;
 }
@@ -194,18 +203,21 @@ a {
 }
 
 //dialog
-.el-dialog--center .el-dialog__body{
-  text-align:initial;
-  padding:25px 25px 30px;
+.el-dialog--center .el-dialog__body {
+  text-align: initial;
+  padding: 25px 25px 30px;
 }
+
 .dialog_header_w.el-dialog {
   width: 650px;
+
   .el-dialog__header {
     border-bottom: 1px solid;
     @include border_gray_3();
     font-weight: bold;
     font-size: 14px;
   }
+
   .dialog-footer {
     margin-top: 20px;
     text-align: center;
@@ -214,15 +226,18 @@ a {
 
 .dialog_header_b.el-dialog {
   width: 500px;
+
   .el-dialog__header {
     @include bg_gray_6();
     @include font_white();
     font-weight: bold;
     font-size: 14px;
+
     .el-dialog__title {
       @include font_white();
     }
   }
+
   .dialog-footer {
     margin-top: 20px;
     text-align: center;
@@ -285,7 +300,8 @@ a {
     color: #EB3F57;
   }
 }
-.el-message-box__message{
+
+.el-message-box__message {
   width: 100%;
 }
 
@@ -381,7 +397,7 @@ a {
 .el-button:active,
 .el-range-editor.is-active,
 .el-range-editor.is-active:hover {
-  border-color: #DCDFE6!important;
+  border-color: #DCDFE6 !important;
 }
 
 //分页
@@ -390,8 +406,10 @@ a {
   justify-content: flex-end;
   align-items: center;
   margin-top: 20px;
+
   .crm_page_total {
     line-height: 32px;
+
     span {
       margin: 0 3px;
       font-size: 14px;
@@ -401,14 +419,16 @@ a {
 }
 
 //tab显示
-.crm-chooseTab{
+.crm-chooseTab {
   text-align: left;
   margin-bottom: 20px;
   border-bottom: 1px solid #DCDFE6;
-  .chooseLang{
+
+  .chooseLang {
     margin-top: 2px;
     margin-right: 10px;
-    >span{
+
+    > span {
       border: 1px solid #DCDFE6;
       border-bottom: none;
       padding: 0 8px;
@@ -420,7 +440,8 @@ a {
       text-align: center;
       font-size: 14px;
     }
-    span.active{
+
+    span.active {
       @include border_bottom_blue_1();
       @include bg_main();
       @include font_white();
@@ -432,30 +453,45 @@ a {
 .crm_search {
   .el-form {
     display: flex;
+
     .el-row {
       flex: 1;
+
       .el-col {
         display: flex;
         flex-wrap: wrap;
+
         .el-date-editor {
           top: 1px;
         }
       }
     }
+
+    .el-select {
+      .el-select__wrapper {
+        min-width: 192px;
+      }
+    }
+
     .crm_search_down {
       width: 120px;
-      .el-input__inner{
+
+      .el-select__wrapper {
         background-color: #F5F5F5;
+        min-width: 0;
       }
     }
+
     .crm_search_down_special {
       width: 120px;
-      .el-input__inner{
+
+      .el-select__wrapper {
         background-color: #368FEC;
         color: #ffffff;
         border: transparent;
       }
     }
+
     .el-form-item {
       margin-bottom: 10px;
       //margin-right: 15px;
@@ -471,6 +507,7 @@ a {
         display: inline-block;
         line-height: 20px;
         box-sizing: border-box;
+
         i {
           margin-right: 4px;
           font-weight: bold;
@@ -483,9 +520,11 @@ a {
 //表格操作块
 .crm_table_btn {
   white-space: nowrap;
+
   > span {
     margin: 4px 8px;
     font-size: 16px;
+
     i {
       font-weight: bold;
     }
@@ -493,15 +532,15 @@ a {
 }
 
 //底部按钮
-.dialog-footer{
-  .el-button{
+.dialog-footer {
+  .el-button {
     min-width: 100px;
   }
 }
 
 //大图展示关闭
-.el-image{
-  .el-icon-circle-close{
+.el-image {
+  .el-icon-circle-close {
     @include font_white();
   }
 }
@@ -513,27 +552,33 @@ a {
   text-align: center;
   box-shadow: 0 6px 20px 0 rgba(201, 193, 193, .5);
   border-radius: 4px;
+
   .el-message-box__header {
     border-bottom: 1px solid rgba(226, 226, 226, 1);
+
     .el-message-box__title {
       line-height: 20px;
       color: rgba(0, 0, 0, 1);
       font-size: 16px;
     }
+
     .el-message-box__headerbtn {
       display: none;
     }
   }
+
   .el-message-box__content {
     padding-top: 30px;
     padding-bottom: 30px;
     font-size: 18px;
     color: rgba(102, 102, 102, 1);
   }
+
   .el-message-box__btns {
     margin-bottom: 10px;
     text-align: center;
     justify-content: center;
+
     .el-button {
       width: 100px;
       height: 36px;
@@ -552,32 +597,40 @@ a {
   background-color: rgba(43, 48, 67, 0.65);
   z-index: 89;
 }
+
 //折叠
-.crm_collapse_info.el-collapse{
+.crm_collapse_info.el-collapse {
   border: none;
-  .el-collapse-item__header, .el-collapse-item__wrap{
+
+  .el-collapse-item__header, .el-collapse-item__wrap {
     border: none;
   }
-  .el-collapse-item__header{
+
+  .el-collapse-item__header {
     background: #F5F5F5;
     padding: 0 20px;
     height: 40px;
     line-height: 40px;
     color: #2B3043;
     font-weight: bold;
-    i{
+
+    i {
       color: #2B3043;
       font-weight: bold;
     }
   }
-  .el-collapse-item__wrap{
+
+  .el-collapse-item__wrap {
     padding: 0 20px;
   }
-  .el-collapse-item__content{
+
+  .el-collapse-item__content {
     padding-bottom: 5px;
-    .el-form-item{
+
+    .el-form-item {
       margin-bottom: 0;
-      .el-form-item__content{
+
+      .el-form-item__content {
         text-align: left;
       }
     }
@@ -590,38 +643,45 @@ a {
   display: none;
   max-width: 25px;
   overflow: hidden;
-  color: #FFFFFF!important;
+  color: #FFFFFF !important;
 }
+
 .crm_switch.crm_switch_width .el-switch__label {
   position: absolute;
   display: none;
   max-width: 50px;
   overflow: hidden;
-  color: #FFFFFF!important;
+  color: #FFFFFF !important;
 }
+
 /*打开时文字位置设置*/
 .crm_switch .el-switch__label--right {
   z-index: 1;
   left: -3px;
 }
+
 /*关闭时文字位置设置*/
 .crm_switch .el-switch__label--left {
   z-index: 1;
   right: 0;
 }
+
 /*显示文字*/
 .crm_switch .el-switch__label.is-active {
   display: block;
 }
+
 .crm_switch.el-switch .el-switch__core {
   width: 50px !important;
   overflow: hidden;
 }
+
 .crm_switch.crm_switch_width.el-switch .el-switch__core {
   width: 75px !important;
   overflow: hidden;
 }
-.crm_switch.el-switch.is-checked .el-switch__core::after{
+
+.crm_switch.el-switch.is-checked .el-switch__core::after {
   z-index: 2;
 }
 
@@ -630,26 +690,32 @@ a {
   text-align: center;
   background-color: #368FEC;
 }
+
 .crm_state_green {
   text-align: center;
   background-color: #87D068;
 }
+
 .crm_state_gray {
   text-align: center;
   background-color: #A1A1A1;
 }
+
 .crm_state_red {
   text-align: center;
   background-color: #EB3F57;
 }
+
 .crm_state_yellow {
   text-align: center;
   background-color: rgb(231, 211, 31);
 }
+
 .crm_state_orange {
   text-align: center;
   background-color: #FF9800;
 }
+
 .crm_state_violet {
   text-align: center;
   background-color: #a492be;
@@ -661,16 +727,17 @@ a {
 }
 
 //label样式
-#TradingDetailedInfo .el-form-item__label{
+#TradingDetailedInfo .el-form-item__label {
   border-radius: 2px;
   @include bg_gray_7();
   font-weight: bold;
-  text-align: center!important;
-  min-height: 40px!important;
+  text-align: center !important;
+  min-height: 40px !important;
   box-sizing: border-box;
 }
-#TradingDetailedInfo .el-form-item__content{
-  min-height: 40px!important;
+
+#TradingDetailedInfo .el-form-item__content {
+  min-height: 40px !important;
   line-height: 1.5;
   box-sizing: border-box;
   border: 1px solid;
@@ -680,59 +747,64 @@ a {
   justify-content: center;
   @include border_gray_4();
   @include bg_white();
-  text-align: center!important;
-  .el-input__inner,.el-input{
+  text-align: center !important;
+
+  .el-input__inner, .el-input {
     height: 34px;
     border: none;
     text-align: center;
   }
 }
-#TradingDetailedInfo .el-form-item{
-  margin-bottom: 20px!important;
+
+#TradingDetailedInfo .el-form-item {
+  margin-bottom: 20px !important;
 }
 
 
 //input前置后置背景色
-.el-input-group__append, .el-input-group__prepend{
-  background-color: #F2F2F2!important;
+.el-input-group__append, .el-input-group__prepend {
+  background-color: #F2F2F2 !important;
 }
 
 //富文本层级
-.tox-silver-sink{
-  z-index: 9999!important;
+.tox-silver-sink {
+  z-index: 9999 !important;
 }
+
 //表格加载
 .el-loading-mask {
-  .el-icon-loading{
+  .el-icon-loading {
     font-size: 28px;
   }
 }
 
 //
-.el-popper.el-dropdown-menu{
+.el-popper.el-dropdown-menu {
   width: max-content;
 }
 
-.el-popper.el-cascader__dropdown{
+.el-popper.el-cascader__dropdown {
   max-width: 1200px;
   width: auto;
-  .el-cascader-panel{
+
+  .el-cascader-panel {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
   }
-  .el-cascader-menu,.el-cascader-menu__wrap{
+
+  .el-cascader-menu, .el-cascader-menu__wrap {
     width: 300px;
     height: 300px;
   }
 }
+
 //表头英文时按单词换行
-.el-table thead th > .cell{
-  word-break: break-word!important;
+.el-table thead th > .cell {
+  word-break: break-word !important;
 }
 
 
-
 //新增弹出样式
 #TradingDetailedInfoAdd.InfoBox {
   width: 450px;
@@ -762,15 +834,18 @@ a {
     font-size: 14px;
     display: flex;
     justify-content: space-between;
+
     .title {
       font-weight: bold;
     }
+
     i.el-icon-close {
       text-align: right !important;
       font-weight: bold;
       margin-right: 7px;
     }
   }
+
   .btn {
     display: inline-block;
     padding: 10px;
@@ -781,7 +856,8 @@ a {
     min-width: 120px;
     margin: 25px 0;
   }
-  .deleteBtn{
+
+  .deleteBtn {
     display: inline-block;
     min-width: 100px;
     height: 30px;
@@ -790,24 +866,30 @@ a {
     background-color: #EB3F57;
     color: #FFFFFF;
   }
-  .avatar-uploader{
+
+  .avatar-uploader {
     display: inline-block;
-    .updateBtn{
+
+    .updateBtn {
       display: inline-block;
       text-align: left;
-      i{
+
+      i {
         font-weight: bold;
         font-size: 20px;
         margin-right: 5px;
       }
     }
   }
-  .channelBanks{
+
+  .channelBanks {
     padding-top: 10px;
     border-bottom: 1px solid #DCDFE6;
   }
-  .channel{
-    text-align: left!important;
+
+  .channel {
+    text-align: left !important;
+
     .btn {
       display: inline;
       padding: 10px;
@@ -819,7 +901,8 @@ a {
       margin: 25px 0;
     }
   }
-  .channel-tit{
+
+  .channel-tit {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -828,7 +911,8 @@ a {
     padding: 0 15px;
     box-sizing: border-box;
     margin-bottom: 10px;
-    .add{
+
+    .add {
       border: 1px dashed #368FEC;
       color: #368FEC;
       line-height: 20px;
@@ -836,7 +920,8 @@ a {
       width: 20px;
       height: 20px;
       font-weight: bold;
-      i{
+
+      i {
         font-weight: bold;
         font-size: 12px;
         margin-left: 4px;
@@ -851,23 +936,26 @@ a {
     justify-content: space-between;
     font-size: 14px;
     padding-right: 4px;
-    i{
+
+    i {
       margin-left: 4px;
       /*font-weight: bold;*/
     }
   }
 
-  .dialog_header_w{
-    width: 850px!important;
-    .code{
+  .dialog_header_w {
+    width: 850px !important;
+
+    .code {
       padding: 6px 12px;
       background-color: #368FEC;
       color: #FFFFFF;
       border-radius: 2px;
       margin-left: 10px;
     }
-    .chooseLang{
-      >span{
+
+    .chooseLang {
+      > span {
         border: 1px solid #DCDFE6;
         padding: 0 8px;
         min-width: 100px;
@@ -877,7 +965,8 @@ a {
         box-sizing: border-box;
         text-align: center;
       }
-      span.active{
+
+      span.active {
         @include border_red_1();
         @include font_main();
       }
@@ -889,31 +978,38 @@ a {
     padding: 10px 0;
     text-align: left;
     position: relative;
+
     .el-form-item {
       margin-bottom: 20px;
       padding: 0 20px;
     }
-    .authorityBox.el-form-item .el-form-item__content{
+
+    .authorityBox.el-form-item .el-form-item__content {
       display: contents;
     }
   }
+
   .el-select {
     width: 100%;
   }
+
   .el-date-editor.el-input {
     width: 100%;
   }
+
   .el-upload {
     width: 100%;
   }
-  .channel{
+
+  .channel {
     .el-input__inner {
       text-align: left;
     }
   }
-  .online-editing.el-form-item{
-    .el-form-item__content-item{
-      border: none!important;
+
+  .online-editing.el-form-item {
+    .el-form-item__content-item {
+      border: none !important;
     }
   }
 }
@@ -928,7 +1024,7 @@ a {
 .el-date-editor.el-input,
 .el-date-editor.el-input__inner {
   width: 100%;
-  min-width: 192px;
+  //min-width: 192px;
 }
 
 .el-select .el-input {

src/views/card/CardBusiness/index.scss

@@ -0,0 +1,185 @@
+#review_Email {
+  .crm_search {
+    .search_action_btn {
+      .delete {
+        background-color: #a1a1a1;
+      }
+
+      .delete.active {
+        background-color: #368fec;
+      }
+    }
+
+    .chooseLang {
+      margin-top: 2px;
+      margin-right: 10px;
+
+      > span {
+        border: 1px solid #dcdfe6;
+        padding: 0 8px;
+        min-width: 100px;
+        display: inline-block;
+        height: 32px;
+        line-height: 32px;
+        box-sizing: border-box;
+        text-align: center;
+      }
+
+      span.active {
+        background-color: #368fec;
+        border-color: #368fec;
+        color: #ffffff;
+      }
+    }
+  }
+
+  .merchant-search-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 350px; // 或你喜欢的宽度
+    margin-bottom: 18px;
+    margin-left: 25%;
+  }
+
+  .el-table .state {
+    display: inline-block;
+    min-width: 80px;
+    max-width: 150px;
+    box-sizing: border-box;
+    line-height: 1.5;
+    border-radius: 2px;
+    padding: 2px 10px;
+    color: #ffffff;
+  }
+
+  .uploadBox {
+    padding: 25px;
+    @include bg_gray_7();
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+
+      .tit {
+        font-weight: bold;
+      }
+
+      .demo {
+        @include font_blue_btn_1();
+      }
+    }
+
+    .input-all {
+      margin: 15px 0;
+    }
+
+    .upload {
+      display: flex;
+      align-items: center;
+    }
+
+    .btn-foot {
+      text-align: right;
+    }
+  }
+
+  .crm_verified_info_mask_trading {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(43, 48, 67, 0.65);
+    z-index: 88;
+  }
+
+  .business-edit-form {
+    .el-form-item {
+      margin-bottom: 18px;
+    }
+
+    .el-input,
+    .el-select,
+    .el-date-picker {
+      width: 100%;
+    }
+
+    .el-form-item__label {
+      font-weight: 500;
+    }
+
+    .el-row {
+      margin-bottom: 0;
+    }
+
+    .el-col {
+      margin-bottom: 0;
+    }
+    .custom-options{
+      position: absolute;
+      width: 100%;
+      max-height: 300px;
+      overflow-y: auto;
+      background: white;
+      border: 1px solid #dcdfe6;
+      border-top: none;
+      z-index: 100;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 0 0 4px 4px;
+    }
+  }
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.id-uploader {
+  width: 400px;
+  height: 200px;
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px #979797 dashed;
+  .avatar {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.id-uploader {
+  :deep(.el-upload) {
+    width: 400px;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.id-uploader .el-upload-list__item {
+  width: 400px;
+  height: 200px;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 80px;
+  height: 80px;
+  line-height: 80px;
+  text-align: center;
+}
+
+.avatar {
+  width: 80px;
+  height: 80px;
+  display: block;
+}

src/views/card/CardBusiness/index.vue

@@ -0,0 +1,1549 @@
+<template>
+  <div
+    id="review_Email"
+    v-loading="pictLoading"
+    class="view"
+    element-loading-background="rgba(43, 48, 67, 0.65)"
+    element-loading-spinner="el-icon-loading"
+  >
+    <div class="crm_search">
+      <el-form ref="form" label-position="" :model="search" label-width="">
+        <el-row>
+          <el-col :span="24" :md="24" :lg="24">
+            <el-form-item>
+              <el-select
+                v-model="search.tag"
+                class="crm_search_down crm-border-radius-no select-tag"
+                :placeholder="$t('Placeholder.Choose')"
+              >
+                <el-option :label="$t('Ucard.Business.text2')" :value="1"></el-option>
+                <el-option :label="$t('Ucard.Business.text4')" :value="3"></el-option>
+                <el-option :label="$t('Ucard.Business.text5')" :value="4"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-input
+                v-if="search.tag == 1"
+                v-model.trim="search.cId"
+                class="crm-border-left-no crm-border-radius-no"
+                clearable
+                :placeholder="$t('Placeholder.Input')"
+                @keyup.enter="toSearch"
+              ></el-input>
+              <el-input
+                v-if="search.tag == 3"
+                v-model.trim="search.email"
+                class="crm-border-left-no crm-border-radius-no"
+                clearable
+                :placeholder="$t('Placeholder.Input')"
+                @keyup.enter="toSearch"
+              ></el-input>
+              <el-input
+                v-if="search.tag == 4"
+                v-model.trim="search.mobile"
+                class="crm-border-left-no crm-border-radius-no"
+                clearable
+                :placeholder="$t('Placeholder.Input')"
+                @keyup.enter="toSearch"
+              ></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button class="crm-border-radius-no crm-border-left-no" @click="toSearch">
+                <el-icon><Search /></el-icon>
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item>
+          <el-button
+            v-if="display['R-Business-Export'] && display['R-Business-Export'].show"
+            type="primary"
+            style="margin-left: 8px"
+            @click="exportAgents"
+            ><span>{{ $t('Btn.Export') }}</span></el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <div class="search_action_btn">
+            <span
+              v-if="display['R-Business-Add'] && display['R-Business-Add'].show"
+              class="crm-cursor"
+              @click="
+                () => {
+                  dialogBusinessEdit = true
+                  isAdd = true
+                }
+              "
+            >
+              <el-icon><Plus /></el-icon>
+              <span>{{ $t('signup.title') }}</span>
+            </span>
+          </div>
+        </el-form-item>
+      </el-form>
+
+      <!-- 合作商户信息管理表格和新增按钮 -->
+      <div class="business-mock-demo" style="margin: 30px 0">
+        <el-table :data="businessList" stripe style="margin-top: 20px; width: 100%">
+          <el-table-column prop="cId" :label="$t('Ucard.Business.item1')">
+            <template #default="scope">
+              <span
+                v-if="scope.row.cId"
+                class="crm-text-underline"
+                style="cursor: pointer"
+                @click="accountOpen(scope.row.cId)"
+                >{{ scope.row.cId }}</span
+              >
+              <span v-else>--</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('Ucard.Business.item5')">
+            <template #default="scope">
+              {{ scope.row.lastName }} {{ scope.row.firstName }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="email" :label="$t('Ucard.Business.item4')" />
+          <el-table-column :label="$t('Ucard.Business.item3')">
+            <template #default="scope"> {{ scope.row.areaCode }} {{ scope.row.mobile }} </template>
+          </el-table-column>
+          <el-table-column prop="countryEnName" :label="$t('Ucard.Business.item8')" />
+          <el-table-column prop="townEnName" :label="$t('Ucard.Business.item11')" />
+          <el-table-column prop="address" :label="$t('Ucard.Business.item12')" />
+          <el-table-column prop="postCode" :label="$t('Ucard.Business.item13')" />
+          <el-table-column prop="balance" :label="$t('Ucard.Business.item21')">
+            <template #default="scope"> $ {{ scope.row.balance || 0 }} </template>
+          </el-table-column>
+          <el-table-column prop="balance" :label="$t('card.New1.f4')">
+            <template #default="scope">
+              <span v-if="scope.row.photoStatus == '1'" class="state crm_state_blue">{{
+                $t('State.Yes')
+              }}</span>
+              <span v-if="scope.row.photoStatus != '1'" class="state crm_state_red">{{
+                $t('State.No')
+              }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('Ucard.Business.item20')" align="center">
+            <template #default="scope">
+              <el-dropdown trigger="click" @command="handleCommand">
+                <span class="el-dropdown-link crm-cursor">
+                  <i style="font-weight: bold; font-size: 20px" class="iconfont iconcaidan"></i>
+                </span>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item
+                      v-if="display['R-Business-Single'].show"
+                      :command="{ type: 0, row: scope.row }"
+                    >
+                      <el-icon><View /></el-icon>
+                      <span>{{ $t('R-Business-Single') }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      v-if="display['R-Business-Update'].show"
+                      :command="{ type: 'edit', row: scope.row }"
+                    >
+                      <el-icon><EditPen /></el-icon>
+                      <span>{{ $t('R-Business-Update') }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      v-if="display['R-Business-Btn1'].show"
+                      :command="{ type: 1, row: scope.row }"
+                    >
+                      <el-icon><Operation /></el-icon>
+                      <span>{{ $t('R-Business-Btn1') }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      v-if="display['R-Business-Btn2'].show"
+                      :command="{ type: 2, row: scope.row }"
+                    >
+                      <el-icon><Setting /></el-icon>
+                      <span>{{ $t('R-Business-Btn2') }}</span>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div v-if="pagerInfo.rowTotal" class="crm_pagination">
+      <div class="crm_page_total">
+        <span>{{ $t('Page.total.item1') }}</span>
+        <span>{{ pagerInfo.rowTotal }}</span>
+        <span>{{ $t('Page.total.item2') }}</span>
+      </div>
+      <el-pagination
+        class="page"
+        background
+        layout="sizes, prev, pager, next"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pagerInfo.row"
+        :total="pagerInfo.rowTotal"
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 新增/修改弹出 -->
+    <!-- <trading-info-add></trading-info-add> -->
+    <trading-info-add
+      :dialog-info-trading-add="dialogInfoTradingAdd"
+      :editor="editor"
+      :add-type="addType"
+      :my-info="myInfo"
+      :form-list="formList"
+      @confirm-to-reload="confirmToReload"
+      @close-add="closeAdd"
+    ></trading-info-add>
+    <div v-if="dialogInfoTradingAdd" class="crm_verified_info_mask" @click="closeAdd"></div>
+
+    <kyc-auth
+      :dialog-info-trading-add="dialogKycAuth"
+      :add-type="addType"
+      :form-list="kycFormList"
+      @confirm-to-reload="confirmToReload"
+      @close-add="closeKycAuth"
+    ></kyc-auth>
+
+    <review-email
+      :dialog-info-trading-add="dialogKycUpload"
+      :add-type="'kyc_upload'"
+      :form-list="kycUploadForm"
+      @confirm-to-reload="confirmToReload"
+      @close-add="closeKycUpload"
+    />
+
+    <div v-if="dialogKycAuth || dialogKycUpload" class="crm_verified_info_mask"></div>
+
+    <!-- 查看图片弹框 -->
+    <el-dialog v-model="showImgDialog" width="20%" :title="$t('Ucard.Business.p35')">
+      <img v-if="currentImgUrl" :src="currentImgUrl" style="width: 100%" alt="" />
+    </el-dialog>
+
+    <detailed-info-cid
+      :dialog-info-cid="dialogInfoCid"
+      :form-info="formInfo"
+      :is-trading="true"
+      @close="closeCidDialog"
+    />
+    <el-dialog
+      v-if="dialogBusinessEdit"
+      v-model="dialogBusinessEdit"
+      :title="$t('Ucard.Business.p1')"
+      :rules="rules"
+      width="900px"
+    >
+      <el-form
+        ref="businessFormRef"
+        :rules="rules"
+        :model="businessForm"
+        label-width="130px"
+        label-position="right"
+        class="business-edit-form"
+      >
+        <el-row :gutter="20">
+          <div v-if="isAdd" class="merchant-search-bar">
+            <div class="custom-select-wrapper" style="flex: 1; position: relative">
+              <el-input
+                v-model="searchEmail"
+                :placeholder="$t('Ucard.Business.p2')"
+                style="width: 100%"
+                @focus="showOptions = true"
+                @input="debouncedRemoteMethod"
+              >
+                <template #append>
+                  <el-button
+                    icon="el-icon-search"
+                    style="color: #fff; background-color: #409eff; border-color: #409eff"
+                    @click="handleSearch"
+                    >{{ $t('Ucard.Business.p3') }}</el-button
+                  >
+                </template>
+              </el-input>
+              <div v-show="showOptions && options.length > 0" class="custom-options">
+                <div
+                  v-for="item in options"
+                  :key="item.value"
+                  class="custom-option"
+                  style="
+                    padding: 8px 10px;
+                    cursor: pointer;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                  "
+                  :class="{
+                    'option-active': businessForm.cId === item.value,
+                  }"
+                  :style="{
+                    'background-color': hoveredOption === item.value ? '#F5F7FA' : 'white',
+                  }"
+                  @click="selectOption(item)"
+                  @mouseover="hoveredOption = item.value"
+                  @mouseout="hoveredOption = null"
+                >
+                  <span>{{ item.label }}</span>
+                  <span style="color: #8492a6; font-size: 13px">
+                    {{ item.name ? item.name + ' | ' : '' }}{{ item.nationality || '--' }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <el-col :span="12">
+            <el-form-item prop="lastName" :label="$t('card.Form.f4')">
+              <el-input v-model="businessForm.lastName" :placeholder="$t('card.vaildate.v4')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="firstName" :label="$t('card.Form.f5')">
+              <el-input v-model="businessForm.firstName" :placeholder="$t('card.vaildate.v3')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="areaCode" :label="$t('card.Form.f1')">
+              <el-select
+                v-model="businessForm.areaCode"
+                filterable
+                :placeholder="$t('card.vaildate.v1')"
+              >
+                <el-option
+                  v-for="item in countryCityList"
+                  :key="item.id"
+                  :label="item.areaCode + ' ' + item.enName"
+                  :value="item.areaCode"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item prop="mobile" :label="$t('card.Form.f2')">
+              <el-input v-model="businessForm.mobile" :placeholder="$t('card.vaildate.v2')" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item prop="email" :label="$t('card.Form.f3')">
+              <el-input v-model="businessForm.email" :placeholder="$t('card.vaildate.v28')" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item prop="birthday" :label="$t('card.Form.f6')">
+              <el-date-picker
+                v-model="businessForm.birthday"
+                type="date"
+                :placeholder="$t('card.vaildate.v5')"
+                value-format="yyyy-MM-dd"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="gender" :label="$t('card.Form.f8')">
+              <el-select v-model="businessForm.gender" :placeholder="$t('card.vaildate.v9')">
+                <el-option :label="$t('card.Form.v1')" value="M" />
+                <el-option :label="$t('card.Form.v2')" value="F" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item prop="nationality" :label="$t('card.Form.f7')">
+              <el-select
+                v-model="businessForm.nationality"
+                filterable
+                :placeholder="$t('card.vaildate.v6')"
+              >
+                <el-option
+                  v-for="item in countryCityList"
+                  :key="item.id"
+                  :label="item.enName"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item prop="town" :label="$t('card.Form.f9')">
+              <el-select
+                v-model="businessForm.town"
+                filterable
+                :placeholder="$t('card.vaildate.v7')"
+                :disabled="!businessForm.nationality"
+              >
+                <el-option
+                  v-for="item in cityList"
+                  :key="item.id"
+                  :label="item.enName"
+                  :value="item.code"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item prop="addressCn" :label="$t('card.Form.f10')">
+              <el-input
+                v-model="businessForm.addressCn"
+                :placeholder="$t('card.vaildate.v27')"
+                @change="setAddress"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="address" :label="$t('card.New.n11')">
+              <el-input v-model="businessForm.address" :placeholder="$t('card.vaildate.v27')" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item prop="postCode" :label="$t('card.Form.f11')">
+              <el-input v-model="businessForm.postCode" :placeholder="$t('card.vaildate.v8')" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item
+              :prop="createType == 'v1' ? '' : 'occupation'"
+              :label="$t('card.Form.f12')"
+            >
+              <el-select
+                v-model="businessForm.occupation"
+                filterable
+                :placeholder="$t('card.vaildate.v10')"
+              >
+                <el-option
+                  v-for="item in occupationList"
+                  :key="item.occupationCode"
+                  :label="item.description"
+                  :value="item.occupationCode"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item
+              :prop="createType == 'v1' ? '' : 'annualSalary'"
+              :label="$t('card.Form.f13')"
+            >
+              <el-input
+                v-model="businessForm.annualSalary"
+                :placeholder="$t('card.vaildate.v11')"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item
+              :prop="createType == 'v1' ? '' : 'accountPurpose'"
+              :label="$t('card.Form.f14')"
+            >
+              <el-input
+                v-model="businessForm.accountPurpose"
+                :placeholder="$t('card.vaildate.v12')"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item
+              :prop="createType == 'v1' ? '' : 'expectedMonthlyVolume'"
+              :label="$t('card.Form.f15')"
+            >
+              <el-input
+                v-model="businessForm.expectedMonthlyVolume"
+                :placeholder="$t('card.vaildate.v13')"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item prop="idType" :label="$t('card.Form.f16')">
+              <el-select v-model="businessForm.idType" :placeholder="$t('card.vaildate.v14')">
+                <el-option
+                  v-for="(item, index) in idTypeList1"
+                  :key="index"
+                  :label="$t(item.name)"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item prop="idNumber" :label="$t('card.Form.f17')">
+              <el-input v-model="businessForm.idNumber" :placeholder="$t('card.vaildate.v15')" />
+            </el-form-item>
+          </el-col>
+
+          <el-col v-if="businessForm.nationality == 'US'" :span="12">
+            <el-form-item prop="ssn" :label="$t('card.Form.f18')">
+              <el-input v-model="businessForm.ssn" :placeholder="$t('card.vaildate.v16')" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item prop="issueDate" :label="$t('card.Form.f19')">
+              <el-date-picker
+                v-model="businessForm.issueDate"
+                type="date"
+                :placeholder="$t('card.vaildate.v17')"
+                value-format="yyyy-MM-dd"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item prop="idNoExpiryDate" :label="$t('card.Form.f20')">
+              <el-date-picker
+                v-model="businessForm.idNoExpiryDate"
+                type="date"
+                :placeholder="$t('card.vaildate.v18')"
+                value-format="yyyy-MM-dd"
+              />
+            </el-form-item>
+          </el-col>
+          <!-- 上传证件照 -->
+          <template v-if="businessForm.photoStatus == '1'">
+            <el-col :span="24">
+              <el-form-item :label="$t('card.Form.f21')" :prop="!isAdd ? '' : 'idFrontUrl'">
+                <el-upload
+                  class="id-uploader"
+                  :action="imgUrl + '/wasabi/upload/file'"
+                  :headers="AccessToken"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccessBankEn"
+                  :before-upload="beforeAvatarUpload"
+                  accept="image/*"
+                >
+                  <img
+                    v-if="businessForm.idFrontUrl"
+                    :src="imgUrl + businessForm.idFrontUrl"
+                    class="avatar"
+                  />
+                  <i v-else class="el-icon-upload"
+                    ><span>{{ $t('card.vaildate.v19') }}</span></i
+                  >
+                </el-upload>
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="24">
+              <el-form-item :label="$t('card.Form.f22')" :prop="!isAdd ? '' : 'idBackUrl'">
+                <el-upload
+                  class="id-uploader"
+                  :action="imgUrl + '/wasabi/upload/file'"
+                  :headers="AccessToken"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccessBankEn1"
+                  :before-upload="beforeAvatarUpload"
+                >
+                  <img
+                    v-if="businessForm.idBackUrl"
+                    :src="imgUrl + businessForm.idBackUrl"
+                    class="avatar"
+                  />
+                  <i v-else class="el-icon-upload"
+                    ><span>{{ $t('card.vaildate.v20') }}</span></i
+                  >
+                </el-upload>
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="24">
+              <el-form-item :label="$t('card.Form.f23')" :prop="!isAdd ? '' : 'idHoldUrl'">
+                <el-upload
+                  class="id-uploader"
+                  :action="imgUrl + '/wasabi/upload/file'"
+                  :headers="AccessToken"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccessBankEn2"
+                  :before-upload="beforeAvatarUpload"
+                  accept="image/*"
+                >
+                  <img
+                    v-if="businessForm.idHoldUrl"
+                    :src="imgUrl + businessForm.idHoldUrl"
+                    class="avatar"
+                  />
+                  <i v-else class="el-icon-upload"
+                    ><span>{{ $t('card.vaildate.v21') }}</span></i
+                  >
+                </el-upload>
+              </el-form-item>
+            </el-col>
+          </template>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogBusinessEdit = false"
+            ><span>{{ $t('Ucard.Business.p32') }}</span></el-button
+          >
+          <el-button
+            type="primary"
+            :disabled="isAdd && !isBusinessFormValid()"
+            @click="saveBusiness"
+            >{{ isAdd ? '注册' : '保存' }}</el-button
+          >
+        </div>
+      </template>
+    </el-dialog>
+    <ViewCardSingle
+      :dialog-info-trading-single="dialogInfoTradingSingle"
+      :form-list="formSingle"
+      :editor-type="editorType"
+      @close-single="closeSingle"
+    >
+    </ViewCardSingle>
+    <div v-if="dialogInfoTradingSingle" class="crm_verified_info_mask" @click="closeSingle"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, computed, onMounted, watch, inject } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { ElMessage as Message } from 'element-plus'
+  import Config from '@/config/index'
+  import TradingInfoAdd from '@/views/components/VirtualCard/index.vue'
+  import ViewCardSingle from '@/views/components/ViewCardSingle/index.vue'
+  import KycAuth from '@/views/components/KycAuth'
+  import ReviewEmail from '@/views/components/ReviewEmail'
+  import UcardService from '@/service/ucard'
+  import Service from '@/service/system'
+  import { pinyin } from 'pinyin-pro'
+  import DetailedInfoCid from '@/views/components/DetailedInfoCid'
+  import _ from 'lodash'
+  import { exportExcel } from '@/utils/export'
+  import { EditPen, Operation, Plus, Search, View } from '@element-plus/icons-vue'
+  import { useI18n } from 'vue-i18n'
+
+  const { Code } = Config
+  const { t } = useI18n()
+  const Session = inject('session')
+  const pigeon = inject('pigeon')
+  const router = useRouter()
+
+  // 响应式数据
+  const formSingle = ref({})
+  const url = Config.Host85
+  const createType = ref('v1')
+  const imgUrl = Config.Host85
+  const pictLoading = ref(false)
+  const editorType = ref(6)
+  const dialogInfoTradingSingle = ref(false)
+  const action = Config.Host85 + '/web/oc/excel'
+  const file = ref('')
+  const countryList = ref([])
+  const dialogInfoTradingAdd = ref(false)
+  const dialogKycAuth = ref(false)
+  const dialogKycUpload = ref(false)
+  const editor = ref('')
+  const addType = ref('')
+  const formList = ref({})
+  const myInfo = ref({})
+  const showImgDialog = ref(false)
+  const currentImgUrl = ref('')
+  // 表单引用
+  const businessFormRef = ref(null)
+  const search = reactive({
+    tag: 1,
+    cId: '',
+    email: '',
+    mobile: '',
+  })
+
+  const pagerInfo = reactive({ row: 10, current: 1, pageTotal: 0, rowTotal: 0 })
+  const businessList = ref([])
+  const idBackUrl = ref([])
+  const idHoldUrl = ref([])
+  const idFrontUrl = ref([])
+  const dialogBusinessEdit = ref(false)
+
+  const businessForm = reactive({
+    merchantOrderNo: '',
+    cardTypeId: 0,
+    areaCode: '',
+    mobile: '',
+    email: '',
+    firstName: '',
+    lastName: '',
+    birthday: '',
+    nationality: '',
+    country: '',
+    town: '',
+    address: '',
+    postCode: '',
+    gender: '',
+    occupation: '',
+    annualSalary: '',
+    accountPurpose: '',
+    expectedMonthlyVolume: '',
+    idType: '',
+    idNumber: '',
+    ssn: '',
+    issueDate: '',
+    idNoExpiryDate: '',
+    idFrontUrl: '',
+    idBackUrl: '',
+    idHoldUrl: '',
+    ipAddress: '',
+    cId: undefined,
+    customId: undefined,
+  })
+
+  const options = ref([])
+  const searchUserList = ref([])
+  const isAdd = ref(true)
+  const selectedUserCid = ref('')
+  const kycUploadForm = reactive({
+    uniqueId: '',
+    kycUploadForm: {
+      type: '',
+      data: '',
+    },
+  })
+  const idTypeList1 = ref([])
+  const idTypeList = ref([
+    { name: 'card.Form.v4', value: 'PASSPORT' },
+    { name: 'card.Form.v3', value: 'HK_HKID' },
+    { name: 'card.Form.v5', value: 'DLN' },
+    { name: 'card.Form.v6', value: 'GOVERNMENT_ISSUED_ID_CARD' },
+  ])
+  const kycUploadUniqueId = ref('')
+  const kycFormList = ref({})
+  const searchEmail = ref('')
+  const selectVisible = ref(false)
+  const showOptions = ref(false)
+  const hoveredOption = ref(null)
+  const countryCityList = ref([])
+  const cityList = ref([])
+  const occupationList = ref([])
+  const dialogInfoCid = ref(false)
+  const formInfo = ref({})
+
+  // 计算属性
+  const display = computed(() => {
+    return JSON.parse(Session.Get('display', true) || '{}')
+  })
+
+  const AccessToken = computed(() => {
+    const token = Session.Get('access_token')
+    return token ? { 'Access-Token': token } : {}
+  })
+
+  const user = computed(() => {
+    return JSON.parse(Session.Get('user', true) || '{}')
+  })
+  // ts没有变量提升，把这个放在rules前面
+  const validateName = (rule, value, callback) => {
+    const reg = /^[A-Za-z\s]+$/
+    if (!value) {
+      return callback(new Error(t('card.vaildate.v4')))
+    }
+    if (!reg.test(value)) {
+      return callback(new Error(t('card.vaildate.v38')))
+    }
+    if (value.length < 2 || value.length > 23) {
+      return callback(new Error(t('card.vaildate.v39')))
+    }
+    // 额外检查：firstName + lastName 总长度不能超过 23
+    const firstName = businessForm.firstName || ''
+    const lastName = businessForm.lastName || ''
+    if ((firstName + ' ' + lastName).trim().length > 23) {
+      return callback(new Error(t('card.vaildate.v40')))
+    }
+    callback()
+  }
+
+  // 验证规则保持不变
+  const rules = {
+    password: [
+      {
+        validator: (rule, value, callback) => {
+          if (Config.Pattern.Password.test(value)) {
+            callback()
+          } else {
+            callback(new Error(t('vaildate.password.format')))
+          }
+        },
+        trigger: 'blur',
+        required: true,
+      },
+    ],
+    areaCode: [
+      {
+        required: true,
+        message: t('card.vaildate.v1'),
+        trigger: 'blur',
+      },
+    ],
+    login: [
+      {
+        required: true,
+        message: t('placeholder.choose'),
+        trigger: 'change',
+      },
+    ],
+    mobile: [
+      {
+        required: true,
+        message: t('card.vaildate.v2'),
+        trigger: 'blur',
+      },
+    ],
+    email: [
+      {
+        required: true,
+        message: t('card.vaildate.v28'),
+        trigger: 'blur',
+      },
+    ],
+    firstName: [
+      {
+        required: true,
+        message: t('card.vaildate.v3'),
+        trigger: 'blur',
+      },
+      { validator: validateName, trigger: 'blur' },
+    ],
+    lastName: [
+      {
+        required: true,
+        message: t('card.vaildate.v4'),
+        trigger: 'blur',
+      },
+      { validator: validateName, trigger: 'blur' },
+    ],
+    birthday: [
+      {
+        required: true,
+        message: t('card.vaildate.v5'),
+        trigger: 'change',
+      },
+      {
+        validator: (rule, value, callback) => {
+          if (!value) {
+            callback(new Error(t('card.vaildate.v5')))
+          } else {
+            const today = new Date()
+            const birthDate = new Date(value)
+            let age = today.getFullYear() - birthDate.getFullYear()
+            const month = today.getMonth() - birthDate.getMonth()
+            if (month < 0 || (month === 0 && today.getDate() < birthDate.getDate())) {
+              age--
+            }
+            if (age < 18) {
+              callback(new Error(t('card.New.n3')))
+            } else {
+              callback()
+            }
+          }
+        },
+        trigger: 'change',
+      },
+    ],
+    nationality: [
+      {
+        required: true,
+        message: t('card.vaildate.v6'),
+        trigger: 'change',
+      },
+    ],
+    country: [
+      {
+        required: true,
+        message: t('card.vaildate.v6'),
+        trigger: 'change',
+      },
+    ],
+    town: [
+      {
+        required: true,
+        message: t('card.vaildate.v7'),
+        trigger: 'change',
+      },
+    ],
+    address: [
+      {
+        required: true,
+        message: t('card.vaildate.v27'),
+        trigger: 'blur',
+      },
+      {
+        validator: (rule, value, callback) => {
+          const regex = /[\u4e00-\u9fa5]/
+          if (value.length < 2 || value.length > 40) {
+            callback(new Error(t('card.New.n1')))
+          } else if (regex.test(value)) {
+            callback(new Error(t('card.New.n1')))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur',
+      },
+    ],
+    addressCn: [
+      {
+        required: true,
+        message: t('card.vaildate.v27'),
+        trigger: 'blur',
+      },
+    ],
+    gender: [
+      {
+        required: true,
+        message: t('card.vaildate.v9'),
+        trigger: 'change',
+      },
+    ],
+    occupation: [
+      {
+        required: true,
+        message: t('card.vaildate.v10'),
+        trigger: 'change',
+      },
+    ],
+    annualSalary: [
+      {
+        required: true,
+        message: t('card.vaildate.v11'),
+        trigger: 'blur',
+      },
+    ],
+    accountPurpose: [
+      {
+        required: true,
+        message: t('card.vaildate.v12'),
+        trigger: 'blur',
+      },
+    ],
+    expectedMonthlyVolume: [
+      {
+        required: true,
+        message: t('card.vaildate.v13'),
+        trigger: 'blur',
+      },
+    ],
+    idType: [
+      {
+        required: true,
+        message: t('card.vaildate.v14'),
+        trigger: 'change',
+      },
+    ],
+    idNumber: [
+      {
+        required: true,
+        message: t('card.vaildate.v15'),
+        trigger: 'blur',
+      },
+    ],
+    ssn: [
+      {
+        required: true,
+        message: t('card.vaildate.v16'),
+        trigger: 'blur',
+      },
+    ],
+    issueDate: [
+      {
+        required: true,
+        message: t('card.vaildate.v17'),
+        trigger: 'change',
+      },
+    ],
+    idNoExpiryDate: [
+      {
+        required: true,
+        message: t('card.vaildate.v18'),
+        trigger: 'change',
+      },
+    ],
+
+    idFrontUrl: [
+      {
+        required: true,
+        message: t('card.vaildate.v19'),
+        trigger: 'change',
+      },
+    ],
+    idBackUrl: [
+      {
+        required: true,
+        message: t('card.vaildate.v20'),
+        trigger: 'change',
+      },
+    ],
+    idHoldUrl: [
+      {
+        required: true,
+        message: t('card.vaildate.v21'),
+        trigger: 'change',
+      },
+    ],
+    postCode: [
+      {
+        required: true,
+        message: t('card.vaildate.v8'),
+        trigger: 'blur',
+      },
+      {
+        validator: (rule, value, callback) => {
+          const regex = /^[a-zA-Z0-9]{1,15}$/ // Updated regex
+          if (!regex.test(value)) {
+            callback(new Error(t('card.New.n2'))) // Custom error message
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur',
+      },
+    ],
+  }
+
+  // 方法
+  const idTypesConfigList = async (code) => {
+    try {
+      let res = await UcardService.idTypesConfigList({
+        code,
+        page: {
+          current: pagerInfo.current,
+          row: pagerInfo.row,
+        },
+      })
+      const data = res.data
+      if (data && data.length) {
+        const selectedValues = data[0].idType.split(',')
+        idTypeList1.value = idTypeList.value.filter((item) => selectedValues.includes(item.value))
+      } else {
+        idTypeList1.value = idTypeList.value
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  const exportAgents = async () => {
+    exportExcel(pigeon, '/wasabi/merchant/user/list/export', { ...search }, 'Merchant_User_List')
+  }
+
+  const setAddress = (e) => {
+    const containsChinese = (str) => /[\u4e00-\u9fa5]/.test(str)
+    if (containsChinese(e)) {
+      businessForm.address = formatText(e)
+    } else {
+      businessForm.address = e
+    }
+  }
+
+  const formatText = (input) => {
+    const chinesePattern = /[\u4e00-\u9fa5]+/g
+    let formattedText = input.replace(chinesePattern, (match) => {
+      return ' ' + pinyin(match, { toneType: 'none', type: 'capitalize' }) + ' '
+    })
+    return formattedText
+  }
+
+  const handleAvatarSuccessBankEn = (res) => {
+    if (res.code == 200) {
+      pigeon.MessageOK(t('Msg.Success'))
+      businessForm.idFrontUrl = res.data
+    } else {
+      pigeon.MessageError(res.code)
+    }
+  }
+
+  const handleAvatarSuccessBankEn1 = (res) => {
+    if (res.code == 200) {
+      pigeon.MessageOK(t('Msg.Success'))
+      businessForm.idBackUrl = res.data
+    } else {
+      pigeon.MessageError(res.code)
+    }
+  }
+
+  const handleAvatarSuccessBankEn2 = (res) => {
+    if (res.code == 200) {
+      pigeon.MessageOK(t('Msg.Success'))
+      businessForm.idHoldUrl = res.data
+    } else {
+      pigeon.MessageError(res.code)
+    }
+  }
+
+  const handleExceed = () => {
+    pigeon.MessageError(t('Msg.OverLimit'))
+  }
+
+  const beforeAvatarUpload = (file) => {
+    const isJPG =
+      ['jpeg', 'JPEG', 'png', 'PNG', 'jpg', 'JPG'].indexOf(file.name.split('.')[1]) == -1
+        ? false
+        : true
+    const isLt2M = file.size / 1024 / 1024 < 2
+
+    if (!isJPG) {
+      pigeon.MessageError(t('Msg.JPG1'))
+    }
+    if (!isLt2M) {
+      pigeon.MessageError(t('card.Msg.m19'))
+    }
+    return isJPG && isLt2M
+  }
+
+  const handleCommand = (command) => {
+    if (command.type === 'edit') {
+      isAdd.value = false
+      editBusiness(command.row)
+    } else if (command.type === 'payment') {
+      addType.value = 'payment'
+      dialogInfoTradingAdd.value = true
+      formList.value = command.row
+    } else if (command.type === 'kyc_upload') {
+      dialogKycUpload.value = true
+      kycUploadForm.uniqueId = command.row.uniqueId
+      kycUploadForm.kycUploadForm = {
+        type: '',
+        data: '',
+      }
+    } else if (command.type === 'kycup') {
+      addType.value = 'kyc_auth'
+      dialogKycAuth.value = true
+      kycFormList.value = {
+        uniqueId: command.row.uniqueId,
+        cId: command.row.cId,
+        lastName: command.row.lastName,
+        firstName: command.row.firstName,
+        email: command.row.email,
+        mobile: command.row.mobile,
+      }
+    } else if (command.type === 0) {
+      dialogInfoTradingSingle.value = true
+      formSingle.value = command.row
+    } else if (command.type === 1) {
+      addType.value = 10
+      dialogInfoTradingAdd.value = true
+      formList.value = command.row
+    } else if (command.type === 2) {
+      photoManually(command.row)
+    }
+  }
+
+  const closeSingle = () => {
+    dialogInfoTradingSingle.value = false
+  }
+
+  const previewImg = (url) => {
+    currentImgUrl.value = imgUrl + url
+    showImgDialog.value = true
+  }
+
+  const getCountryList = async () => {
+    const res = await Service.countryGet({})
+    if (res.code === 200 || res.code === 0) {
+      countryList.value = res.data
+    }
+  }
+
+  const photoManually = async ({ id, uniqueId, cId }) => {
+    const res = await UcardService.photoManually({ id, uniqueId, cId })
+    if (res.code === 200 || res.code === 0) {
+      pigeon.MessageOK(t('Msg.SearchSuccess'))
+      toSearch()
+    } else {
+      Message.error(res.msg)
+    }
+  }
+
+  const closeKycUpload = () => {
+    dialogKycUpload.value = false
+    kycUploadForm.uniqueId = ''
+    kycUploadForm.kycUploadForm = { type: '', data: '' }
+  }
+
+  const toSearch = () => {
+    pagerInfo.current = 1
+    searchFunc()
+  }
+
+  const searchFunc = async () => {
+    if (!display.value['R-Business-Search']?.show) {
+      pigeon.MessageWarning(t('Msg.NotDisplay'))
+      return
+    }
+
+    pictLoading.value = true
+    try {
+      const params = {
+        ...search,
+        page: {
+          current: pagerInfo.current,
+          row: pagerInfo.row,
+        },
+      }
+      const res = await UcardService.merchantList(params)
+      if (res.code === Code.StatusOK) {
+        businessList.value = res.data
+        pagerInfo.rowTotal = res.page?.rowTotal || 0
+        pagerInfo.pageTotal = res.page?.pageTotal || 0
+        pigeon.MessageOK(t('Msg.SearchSuccess'))
+      } else {
+        pigeon.MessageError(res.msg || t('Ucard.Business.ms2'))
+      }
+    } catch (error) {
+      console.error('Search error:', error)
+      pigeon.MessageError(t('Ucard.Business.ms2'))
+    } finally {
+      pictLoading.value = false
+    }
+  }
+
+  const handleSizeChange = (val) => {
+    pagerInfo.row = val
+    searchFunc()
+  }
+
+  const handleCurrentChange = (val) => {
+    pagerInfo.current = val
+    searchFunc()
+  }
+
+  const editBusiness = (row) => {
+    isAdd.value = false
+    Object.assign(businessForm, JSON.parse(JSON.stringify(row)))
+    dialogBusinessEdit.value = true
+  }
+
+  const saveBusiness = async () => {
+    businessForm.ipAddress = sessionStorage.getItem('CLIENT')
+    businessForm.country = businessForm.nationality
+
+    try {
+      const valid = await businessFormRef.value.validate()
+      if (!valid) return
+
+      if (isAdd.value) {
+        const res = await UcardService.merchantRegister({
+          cId: selectedUserCid.value,
+          operateUser: user.value.id,
+          ...businessForm,
+        })
+        if (res.code !== 200) {
+          throw new Error(res.msg)
+        }
+        Message.success(t('Ucard.Business.ms5'))
+      } else if (businessForm.uniqueId) {
+        const res = await UcardService.merchantUpdate({
+          ...businessForm,
+          merchantOrderNo: businessForm.uniqueId || '',
+        })
+        if (res.code !== 200) {
+          throw new Error(res.msg)
+        }
+        Message.success(t('Ucard.Business.ms7'))
+      } else {
+        throw new Error(t('Ucard.Business.ms13'))
+      }
+
+      dialogBusinessEdit.value = false
+      resetForm()
+      await searchFunc()
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  const closeAdd = () => {
+    dialogInfoTradingAdd.value = false
+  }
+
+  const closeDiaAdd = () => {
+    dialogInfoTradingAdd.value = false
+  }
+
+  const confirmToReload = () => {
+    closeDiaAdd()
+    searchFunc()
+  }
+
+  const remoteMethod = async (query) => {
+    if (!query) return
+    const params = { email: query }
+    try {
+      const res = await UcardService.merchantSearch(params)
+      if (res.code === 200) {
+        searchUserList.value = res.data
+        options.value = res.data.map((item) => ({
+          label: item.email,
+          value: item.cId,
+          name: item.firstName && item.lastName ? item.lastName + item.firstName : '',
+          nationality: item.nationality,
+        }))
+      }
+    } catch (e) {
+      // console.log(e);
+    }
+  }
+
+  const getOccupationList = async () => {
+    try {
+      const res = await UcardService.getOccupationList()
+      if (res.code === 200) {
+        occupationList.value = res.data
+      }
+    } catch (e) {
+      occupationList.value = []
+    }
+  }
+
+  const changeSelect = (cId) => {
+    const selectedUser = searchUserList.value.find((item) => item.cId === cId)
+    if (selectedUser) {
+      businessForm.uniqueId = selectedUser.uniqueId || undefined
+      businessForm.areaCode = selectedUser.areaCode || undefined
+      businessForm.mobile = selectedUser.phone || undefined
+      businessForm.email = selectedUser.email || undefined
+      businessForm.customId = selectedUser.id || undefined
+
+      const lastName = selectedUser.lastName || undefined
+      const firstName = selectedUser.firstName || undefined
+      const containsChinese = (str) => /[\u4e00-\u9fa5]/.test(str)
+
+      if (containsChinese(lastName)) {
+        businessForm.lastName = pinyin(lastName, {
+          toneType: 'none',
+          type: 'capitalize',
+        })
+      } else {
+        businessForm.lastName = lastName
+      }
+
+      if (containsChinese(firstName)) {
+        businessForm.firstName = pinyin(firstName, {
+          toneType: 'none',
+          type: 'capitalize',
+        })
+      } else {
+        businessForm.firstName = firstName
+      }
+
+      businessForm.address = selectedUser.address || undefined
+      businessForm.postCode = selectedUser.postCode || undefined
+      businessForm.birthday = selectedUser.birthday || undefined
+      businessForm.nationality = selectedUser.nationality || undefined
+      businessForm.sex = selectedUser.sex || undefined
+      businessForm.country = selectedUser.country || selectedUser.countryCode || undefined
+      businessForm.town = selectedUser.town || undefined
+      businessForm.idType = selectedUser.idType || undefined
+      businessForm.idNo = selectedUser.idNo || undefined
+      businessForm.idNoExpiryDate = selectedUser.idNoExpiryDate || undefined
+      businessForm.idFrontUrl = selectedUser.idFrontUrl || undefined
+      businessForm.idBackUrl = selectedUser.idBackUrl || undefined
+      businessForm.extField = selectedUser.extField || undefined
+      selectedUserCid.value = selectedUser.cId
+    }
+  }
+
+  const resetForm = () => {
+    const defaultForm = {
+      uniqueId: undefined,
+      areaCode: undefined,
+      mobile: undefined,
+      email: undefined,
+      lastName: undefined,
+      firstName: undefined,
+      birthday: undefined,
+      nationality: undefined,
+      sex: undefined,
+      country: undefined,
+      town: undefined,
+      address: undefined,
+      postCode: undefined,
+      idType: undefined,
+      idNo: undefined,
+      idNoExpiryDate: undefined,
+      idFrontUrl: undefined,
+      idBackUrl: undefined,
+      extField: undefined,
+      cId: undefined,
+    }
+
+    Object.assign(businessForm, defaultForm)
+    options.value = []
+    searchUserList.value = []
+    isAdd.value = true
+    selectedUserCid.value = ''
+    searchEmail.value = ''
+    showOptions.value = false
+  }
+
+  const handleKycFileUpload = async (option) => {
+    const formData = new FormData()
+    formData.append('file', option.file)
+    try {
+      const res = await UcardService.ucardUpload(formData)
+      if (res.code === 200 && res.data) {
+        kycUploadForm.data = res.data
+        Message.success(t('Ucard.Business.ms11'))
+        option.onSuccess(res, option.file)
+      } else {
+        Message.error(res.msg)
+        option.onError()
+      }
+    } catch (e) {
+      Message.error(t('Ucard.Business.ms12'))
+      option.onError()
+    }
+  }
+
+  const submitKycUpload = async () => {
+    const uniqueId = kycUploadUniqueId.value || businessForm.uniqueId
+    if (!uniqueId) {
+      Message.error(t('Ucard.Business.ms13'))
+      return
+    }
+    if (!kycUploadForm.type || !kycUploadForm.data) {
+      Message.error(t('Ucard.Business.ms14'))
+      return
+    }
+    const params = {
+      uniqueId,
+      type: kycUploadForm.type,
+      data: kycUploadForm.data,
+    }
+    try {
+      const res = await UcardService.kycUpload(params)
+      if (res.code === 0) {
+        Message.success(res.msg)
+        kycUploadForm.type = ''
+        kycUploadForm.data = ''
+        dialogKycUpload.value = false
+      } else {
+        Message.error(res.msg)
+      }
+    } catch (e) {
+      Message.error(t('Ucard.Business.ms16'))
+    }
+  }
+
+  const closeKycAuth = (val) => {
+    dialogKycAuth.value = val
+  }
+
+  const debouncedRemoteMethod = _.debounce((query) => {
+    if (!query) return
+    remoteMethod(query)
+  }, 500)
+
+  const updateSearchEmail = (val) => {
+    searchEmail.value = val
+  }
+
+  const handleSearch = () => {
+    if (!searchEmail.value) return
+    debouncedRemoteMethod(searchEmail.value)
+    showOptions.value = true
+  }
+
+  const selectOption = (item) => {
+    businessForm.cId = item.value
+    searchEmail.value = item.label
+    changeSelect(item.value)
+    showOptions.value = false
+  }
+
+  const getCountryListForSelect = async () => {
+    const res = await UcardService.ucardCountryCity({ code: '' })
+    if (res.code === 200 || res.code === 0) {
+      countryCityList.value = res.data || []
+    }
+  }
+
+  const getCityListForSelect = async (countryCode) => {
+    const res = await UcardService.ucardCountryCity({ code: countryCode })
+    if (res.code === 200 || res.code === 0) {
+      cityList.value = res.data || []
+    }
+  }
+
+  const accountOpen = (cId) => {
+    router.push({ name: 'R-CustomerDetail', params: { cId: cId } })
+  }
+
+  const closeCidDialog = (val) => {
+    dialogInfoCid.value = val
+  }
+
+  const isBusinessFormValid = () => {
+    const requiredFields = ['areaCode', 'mobile', 'email', 'lastName', 'firstName', 'address']
+    return requiredFields.every((field) => !!businessForm[field])
+  }
+
+  // 生命周期
+  onMounted(async () => {
+    try {
+      await Promise.all([searchFunc(), getCountryListForSelect()])
+    } catch (error) {
+      console.error('Initialization error:', error)
+    }
+  })
+
+  // 监听器
+  watch(
+    () => search.tag,
+    () => {
+      search.cId = ''
+      search.email = ''
+      search.mobile = ''
+    }
+  )
+
+  watch(dialogBusinessEdit, (val) => {
+    if (val) {
+      getOccupationList()
+      if (isAdd.value) {
+        searchEmail.value = ''
+        showOptions.value = false
+        options.value = []
+      }
+    } else {
+      resetForm()
+      isAdd.value = true
+    }
+  })
+
+  watch(
+    () => businessForm.nationality,
+    (val) => {
+      if (val) {
+        getCityListForSelect(val)
+        idTypesConfigList(val)
+      } else {
+        cityList.value = []
+        businessForm.town = ''
+        businessForm.idType = ''
+      }
+    }
+  )
+</script>
+
+<style scoped lang="scss">
+  @import 'index.scss';
+</style>
+<style lang="scss">
+  #review_Email {
+    .dialog_header_w {
+      .crm_search_down {
+        width: 400px;
+      }
+    }
+  }
+</style>

src/views/card/CardOrder/index.vue

@@ -4,7 +4,6 @@
     v-loading="pictLoading"
     class="view"
     element-loading-background="rgba(43, 48, 67, 0.65)"
-    element-loading-spinner="el-icon-loading"
   >
     <div class="crm_search">
       <el-form ref="formRef" :model="search" label-width="">
@@ -13,8 +12,7 @@
             <el-form-item>
               <el-select
                 v-model="search.tag"
-                style="width: 140px; min-width: 140px"
-                class="crm_search_down crm-border-radius-no"
+                class="crm_search_down crm-border-radius-no select-tag"
                 :placeholder="$t('Placeholder.Choose')"
               >
                 <el-option :label="$t('Label.CidAccount')" :value="1"></el-option>
@@ -243,10 +241,10 @@
                   <el-dropdown-menu>
                     <el-dropdown-item
                       v-if="display['R-CardOrder-Btn1'].show"
-                      :command="{ type: 1, row: scope.row }"
+                      :command="{ type: '1', row: scope.row }"
                     >
-                      <i class="el-icon-s-operation"></i
-                      ><span v-t="'R-CardOrder-Btn1'">
+                      <el-icon><Operation /></el-icon>
+                      <span>
                         {{ $t('R-CardOrder-Btn1') }}
                       </span>
                     </el-dropdown-item>
@@ -259,10 +257,10 @@
                         scope.row.tradeStatus == '2' &&
                         scope.row.approveStatus == '2'
                       "
-                      :command="{ type: 2, row: scope.row }"
+                      :command="{ type: '2', row: scope.row }"
                     >
-                      <i class="el-icon-s-operation"></i
-                      ><span>
+                      <el-icon><Operation /></el-icon>
+                      <span>
                         {{ $t('R-CardOrder-Btn2') }}
                       </span>
                     </el-dropdown-item>
@@ -272,10 +270,10 @@
                         scope.row.approveStatus == '1' &&
                         scope.row.tradeStatus == '2'
                       "
-                      :command="{ type: 3, row: scope.row }"
+                      :command="{ type: '3', row: scope.row }"
                     >
-                      <i class="el-icon-s-operation"></i
-                      ><span>
+                      <el-icon><Operation /></el-icon>
+                      <span>
                         {{ $t('R-CardOrder-Btn3') }}
                       </span>
                     </el-dropdown-item>
@@ -350,7 +348,7 @@
   import ViewCardSingle from '@/views/components/ViewCardSingle/index.vue'
   import { exportExcel } from '@/utils/export.js'
   import { useI18n } from 'vue-i18n'
-  import { Search } from '@element-plus/icons-vue'
+  import { Operation, Search } from '@element-plus/icons-vue'
   // 混入
   const Session = inject('session')
   const pigeon = inject('pigeon')
@@ -372,7 +370,7 @@
   })
   const formRef = ref()
   const editor = ref('')
-  const addType = ref('')
+  let addType = ref('')
   const myInfo = ref({})
   const dInfo = ref({})
   const formList = ref({})
@@ -505,7 +503,7 @@
   // 点击操作的回调
   const handleCommand = async (command) => {
     switch (command.type) {
-      case 1:
+      case '1':
         await getDetail(command.row)
         await nextTick(() => {
           formList.value = { ...command.row, ...dInfo.value }
@@ -519,8 +517,8 @@
           pigeon.MessageOK(t('Msg.Success9'))
         }
         break
-      case 3:
-        addType.value = 4
+      case '3':
+        addType.value = '4'
         dialogInfoTradingAdd.value = true
         formList.value = { ...command.row }
         break

src/views/card/CardType/index.vue

@@ -4,7 +4,6 @@
     v-loading="pictLoading"
     class="view"
     element-loading-background="rgba(43, 48, 67, 0.65)"
-    element-loading-spinner="el-icon-loading"
   >
     <div class="crm_search">
       <el-form ref="formRef" label-position="" :model="search" label-width="">
@@ -129,7 +128,7 @@
                       v-if="display['R-CardType-Edit']?.show"
                       :command="{ type: 1, row: scope.row }"
                     >
-                      <i class="el-icon-edit"></i>
+                      <el-icon><EditPen /></el-icon>
                       <span>{{ $t('R-CardType-Edit') }}</span>
                     </el-dropdown-item>
                   </el-dropdown-menu>
@@ -218,7 +217,7 @@
   import Service from '@/service/ucard'
   import Config from '@/config/index'
   import { useI18n } from 'vue-i18n'
-  import { Search } from '@element-plus/icons-vue'
+  import { EditPen, Search } from '@element-plus/icons-vue'
 
   const { Code } = Config
   const pigeon = inject('pigeon')

src/views/card/KycAuth/index.scss

@@ -0,0 +1,111 @@
+#review_Email {
+  .dialog_header_w {
+    .crm_search_down {
+      width: 400px;
+    }
+  }
+
+  .image-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100px;
+    border: 1px dashed #d9d9d9;
+    border-radius: 4px;
+    padding: 10px;
+    background-color: #fafafa;
+    width: 100%;
+    img {
+      border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    span {
+      color: #999;
+      font-style: italic;
+    }
+
+    .image-gallery {
+      width: 100%;
+      position: relative;
+
+      .image-grid {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+
+        .image-item {
+          width: 150px;
+          height: 150px;
+          border: 1px solid #d9d9d9;
+          border-radius: 4px;
+          overflow: hidden;
+          background-color: #fafafa;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          position: relative;
+
+          &:hover {
+            border-color: #409eff;
+            box-shadow: 0 2px 12px rgba(64, 158, 255, 0.3);
+            transform: translateY(-2px);
+
+            &::after {
+              content: '点击放大';
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              background-color: rgba(0, 0, 0, 0.7);
+              color: white;
+              padding: 4px 8px;
+              border-radius: 4px;
+              font-size: 12px;
+              z-index: 10;
+            }
+          }
+
+          .el-image {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+      .el-carousel {
+        border-radius: 4px;
+        overflow: hidden;
+      }
+
+      .image-count {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        background-color: rgba(0, 0, 0, 0.6);
+        color: white;
+        padding: 2px 6px;
+        border-radius: 10px;
+        font-size: 12px;
+        z-index: 1;
+      }
+    }
+  }
+
+  .info-title {
+    margin-bottom: 20px;
+    min-width: 120px;
+    text-align: left;
+    padding: 0 12px 0 10px;
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 4px;
+      height: 16px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: red;
+    }
+  }
+}

src/views/card/KycAuth/index.vue

@@ -0,0 +1,910 @@
+<template>
+  <div
+    id="review_Email"
+    v-loading="pictLoading"
+    class="view"
+    element-loading-background="rgba(43, 48, 67, 0.65)"
+  >
+    <div class="crm_search">
+      <el-form ref="formRef" label-position="" :model="search" label-width="">
+        <el-row>
+          <el-col :span="24" :md="24" :lg="24">
+            <el-form-item>
+              <el-select
+                v-model="search.tag"
+                class="crm_search_down crm-border-radius-no"
+                :placeholder="$t('Placeholder.Choose')"
+              >
+                <el-option :label="$t('Label.CidAccount')" :value="1"></el-option>
+                <el-option :label="$t('Ucard.KycAuth.item2')" :value="2"></el-option>
+                <el-option :label="$t('Ucard.KycAuth.item3')" :value="3"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item style="margin-right: 10px">
+              <el-input
+                v-if="search.tag == 1"
+                v-model.trim="search.cId"
+                class="crm-border-left-no crm-border-radius-no"
+                clearable
+                :placeholder="$t('Placeholder.Input')"
+                @keyup.enter="toSearch"
+              ></el-input>
+              <el-input
+                v-if="search.tag == 2"
+                v-model.trim="search.mobile"
+                class="crm-border-left-no crm-border-radius-no"
+                clearable
+                :placeholder="$t('Placeholder.Input')"
+                @keyup.enter="toSearch"
+              ></el-input>
+              <el-input
+                v-if="search.tag == 3"
+                v-model.trim="search.email"
+                class="crm-border-left-no crm-border-radius-no"
+                clearable
+                :placeholder="$t('Placeholder.Input')"
+                @keyup.enter="toSearch"
+              ></el-input>
+              <el-select
+                v-if="search.tag == 4"
+                v-model="search.type"
+                class="crm-border-left-no crm-border-radius-no"
+                clearable
+                :placeholder="$t('Placeholder.Choose')"
+                @change="toSearch"
+              >
+                <el-option :label="$t('Ucard.KycAuth.t1')" :value="0"></el-option>
+                <el-option :label="$t('Ucard.KycAuth.t2')" :value="1"></el-option>
+                <el-option :label="$t('Ucard.KycAuth.t3')" :value="2"></el-option>
+                <el-option :label="$t('Ucard.KycAuth.t4')" :value="3"></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item style="margin-right: 10px">
+              <el-select
+                v-model="search.kycStatus"
+                class="crm-border-radius-no"
+                clearable
+                :placeholder="$t('card.Info.s42')"
+                @change="toSearch"
+              >
+                <el-option :label="$t('card.Info.t10')" :value="1"></el-option>
+                <el-option :label="$t('Ucard.KycAuth.t7')" :value="2"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item style="margin-right: 10px">
+              <el-select
+                v-model="search.photoStatus"
+                class="crm-border-radius-no"
+                clearable
+                :placeholder="$t('card.New1.f4')"
+                @change="toSearch"
+              >
+                <el-option :label="$t('Yes')" :value="1"></el-option>
+                <el-option :label="$t('No')" :value="2"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-select
+                v-model="search.status"
+                class="crm-border-radius-no"
+                clearable
+                :placeholder="$t('Ucard.KycAuth.s2')"
+                @change="toSearch"
+              >
+                <el-option :label="$t('Ucard.KycAuth.t6')" :value="1"></el-option>
+                <el-option :label="$t('Ucard.KycAuth.t7')" :value="2"></el-option>
+                <el-option :label="$t('Ucard.KycAuth.t8')" :value="3"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button class="crm-border-radius-no crm-border-left-no" @click="toSearch">
+                <el-icon><Search /></el-icon>
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item>
+          <el-button
+            v-if="display['R-KycAuth-Export'] && display['R-KycAuth-Export'].show"
+            type="primary"
+            style="margin-left: 8px"
+            @click="exportAgents"
+          >
+            <span>{{ $t('Btn.Export') }}</span>
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <div class="card-mock-demo" style="margin: 30px 0">
+        <el-table :data="mock_tableData" stripe style="margin-top: 20px; width: 100%">
+          <el-table-column prop="" align="left" :label="$t('Label.CidAccount')">
+            <template #default="scope">
+              <span
+                v-if="scope.row.cId && display['R-KycAuth-Single'].show"
+                class="crm-text-underline"
+                @click="accountOpen(scope.row.cId)"
+                >{{ scope.row.cId || '--' }}</span
+              >
+              <span v-else>{{ scope.row.cId || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="" align="left" :label="$t('Label.Name')">
+            <template #default="scope">
+              <span v-if="scope.row.firstName">{{ scope.row.firstName + ' ' }}</span>
+              <span v-if="scope.row.lastName">{{ scope.row.lastName }}</span>
+              <span v-if="!scope.row.firstName && !scope.row.lastName">{{ '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="mobile" align="left" :label="$t('Ucard.KycAuth.item2')">
+            <template #default="scope"> {{ scope.row.areaCode }} {{ scope.row.mobile }} </template>
+          </el-table-column>
+          <el-table-column prop="email" align="left" :label="$t('Ucard.KycAuth.item3')" />
+          <el-table-column prop="kycStatus" align="left" :label="$t('card.Info.s42')">
+            <template #default="scope">
+              <span v-if="scope.row.kycStatus === 2" class="state crm_state_blue">{{
+                $t('Ucard.KycAuth.t7')
+              }}</span>
+              <span v-else-if="scope.row.kycStatus === 3" class="state crm_state_gray">{{
+                $t('Ucard.KycAuth.t8')
+              }}</span>
+              <span v-else class="state crm_state_yellow">{{ $t('card.Info.t10') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="balance" :label="$t('card.New1.f4')">
+            <template #default="scope">
+              <span v-if="scope.row.photoStatus == '1'" class="state crm_state_blue">{{
+                $t('State.Yes')
+              }}</span>
+              <span v-if="scope.row.photoStatus != '1'" class="state crm_state_red">{{
+                $t('State.No')
+              }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" align="left" :label="$t('Ucard.KycAuth.item6')">
+            <template #default="scope">
+              <span v-if="scope.row.status === -1" class="state crm_state_yellow">{{
+                $t('Ucard.KycAuth.t5')
+              }}</span>
+              <span v-if="scope.row.status === 1" class="state crm_state_orange">{{
+                $t('Ucard.KycAuth.t6')
+              }}</span>
+              <span v-if="scope.row.status === 2" class="state crm_state_blue">{{
+                $t('Ucard.KycAuth.t7')
+              }}</span>
+              <span v-if="scope.row.status === 3" class="state crm_state_gray">{{
+                $t('Ucard.KycAuth.t8')
+              }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="" align="center" :label="$t('Label.Action')">
+            <template #default="scope">
+              <el-dropdown trigger="click" @command="handleCommand">
+                <span class="el-dropdown-link crm-cursor">
+                  <i style="font-weight: bold; font-size: 20px" class="iconfont iconcaidan"></i>
+                </span>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item
+                      v-if="display['R-KycAuth-Single'].show"
+                      :command="{ type: 4, row: scope.row }"
+                    >
+                      <el-icon><Operation /></el-icon>
+                      <span>{{ $t('R-Hire-Check') }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      v-if="display['R-KycAuth-Btn1'].show && scope.row.status == '1'"
+                      :command="{ type: 5, row: scope.row }"
+                    >
+                      <el-icon><Operation /></el-icon>
+                      <span>{{ $t('R-KycAuth-Btn1') }}</span>
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      v-if="display['R-KycAuth-Btn2'].show && scope.row.status == '2'"
+                      :command="{ type: 12, row: scope.row }"
+                    >
+                      <el-icon><Operation /></el-icon>
+                      <span>{{ $t('R-KycAuth-Btn2') }}</span>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div v-if="pagerInfo.rowTotal" class="crm_pagination">
+      <div class="crm_page_total">
+        <span>{{ $t('Page.total.item1') }}</span>
+        <span>{{ pagerInfo.rowTotal }}</span>
+        <span>{{ $t('Page.total.item2') }}</span>
+      </div>
+      <el-pagination
+        class="page"
+        background
+        layout="sizes, prev, pager, next"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pagerInfo.row"
+        :total="pagerInfo.rowTotal"
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"
+      >
+      </el-pagination>
+    </div>
+
+    <detailed-info-cid
+      :dialog-info-cid="dialogInfoCid"
+      :form-info="formInfo"
+      :is-trading="true"
+      @close="close"
+    >
+    </detailed-info-cid>
+    <div v-if="dialogInfoCid" class="crm_verified_info_mask" @click="closeDia"></div>
+    <ViewCardSingle
+      :dialog-info-trading-single="dialogInfoTradingSingle"
+      :form-list="formSingle"
+      :editor-type="editorType"
+      @close-single="closeSingle"
+    >
+    </ViewCardSingle>
+    <div v-if="dialogInfoTradingSingle" class="crm_verified_info_mask" @click="closeSingle"></div>
+    <trading-info-add
+      :dialog-info-trading-add="dialogInfoTradingAdd"
+      :editor="editor"
+      :add-type="addType"
+      :my-info="myInfo"
+      :form-list="formList"
+      @confirm-to-reload="confirmToReload"
+      @close-add="closeAdd"
+    ></trading-info-add>
+    <div v-if="dialogInfoTradingAdd" class="crm_verified_info_mask" @click="closeDiaAdd"></div>
+
+    <el-dialog
+      v-model="approveDialogVisible"
+      :title="addType == 5 ? $t('R-Review-Dialog-Title') : $t('R-VerifiedUser-Single')"
+      width="800px"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="approveFormRef"
+        :disable="addType == 4"
+        :model="approveForm"
+        :rules="approveRules"
+        label-width="120px"
+      >
+        <!-- 展示字段 -->
+        <h3 class="info-title">{{ $t('card.New2.p7') }}</h3>
+        <el-form-item label="cId" prop="cId">
+          <el-input v-model="approveForm.cId" disabled :placeholder="$t('R-Review-CId')">
+          </el-input>
+        </el-form-item>
+
+        <el-form-item :label="$t('R-Review-Name')" prop="name">
+          <el-input v-model="approveForm.infoName" disabled :placeholder="$t('R-Review-Name')">
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('R-Review-Email')" prop="email">
+          <el-input v-model="approveForm.email" disabled :placeholder="$t('R-Review-Email')">
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('R-Review-Phone')" prop="mobile">
+          <el-input v-model="approveForm.phone" disabled :placeholder="$t('R-Review-Phone')">
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('Apply_info.BasicInfo.IdentityNumber')" prop="identityNumber">
+          <el-input
+            v-model="approveForm.identity"
+            disabled
+            :placeholder="$t('Apply_info.BasicInfo.IdentityNumber')"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('Label.IdPhoto')" prop="image">
+          <div class="image-preview">
+            <div v-if="approveForm.images1 && approveForm.images1.length > 0" class="image-gallery">
+              <div class="image-grid">
+                <div v-for="(image, index) in approveForm.images1" :key="index" class="image-item">
+                  <el-image
+                    :src="imgUrl + image.path"
+                    :preview-src-list="approveForm.images1.map((img) => imgUrl + img.path)"
+                    :initial-index="index"
+                    style="width: 100%; height: 100%; object-fit: contain"
+                    fit="contain"
+                    preview-teleported
+                  >
+                    <template #error>
+                      <div class="image-slot">
+                        <el-icon><Picture /></el-icon>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+              </div>
+            </div>
+            <span v-else>{{ $t('Label.IdPhoto') }}</span>
+          </div>
+        </el-form-item>
+
+        <h3 class="info-title">{{ $t('card.New2.p8') }}</h3>
+        <el-form-item :label="$t('R-Review-Name')" prop="name">
+          <el-input v-model="approveForm.cardName" disabled :placeholder="$t('R-Review-Name')">
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('R-Review-Phone')" prop="mobile">
+          <el-input v-model="approveForm.mobile" disabled :placeholder="$t('R-Review-Phone')">
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="idType" :label="$t('card.Form.f16')">
+          <el-select v-model="approveForm.idType" disabled :placeholder="$t('card.vaildate.v14')">
+            <el-option
+              v-for="(item, index) in idTypeList"
+              :key="index"
+              :label="$t(item.name)"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('Apply_info.BasicInfo.IdentityNumber')" prop="identityNumber">
+          <el-input
+            v-model="approveForm.idNumber"
+            disabled
+            :placeholder="$t('Apply_info.BasicInfo.IdentityNumber')"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('card.Form.f19')" prop="identityNumber">
+          <el-input
+            v-model="approveForm.issueDate"
+            disabled
+            :placeholder="$t('Apply_info.BasicInfo.IdentityNumber')"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('card.Form.f20')" prop="identityNumber">
+          <el-input
+            v-model="approveForm.idNoExpiryDate"
+            disabled
+            :placeholder="$t('Apply_info.BasicInfo.IdentityNumber')"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('Label.IdPhoto')" prop="image">
+          <div class="image-preview">
+            <div
+              v-if="approveForm.cardFiles && approveForm.cardFiles.length > 0"
+              class="image-gallery"
+            >
+              <div class="image-grid">
+                <div
+                  v-for="(image, index) in approveForm.cardFiles"
+                  :key="index"
+                  class="image-item"
+                >
+                  <el-image
+                    :src="imgUrl + image.path"
+                    :preview-src-list="approveForm.cardFiles.map((img) => imgUrl + img.path)"
+                    :initial-index="index"
+                    style="width: 100%; height: 100%; object-fit: contain"
+                    fit="contain"
+                    preview-teleported
+                  >
+                    <template #error>
+                      <div class="image-slot">
+                        <el-icon><Picture /></el-icon>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+              </div>
+            </div>
+            <span v-else>{{ $t('Label.IdPhoto') }}</span>
+          </div>
+        </el-form-item>
+        <h3 class="info-title">{{ $t('card.New2.p9') }}</h3>
+        <el-form-item :label="$t('Apply_info.BasicInfo.KycIdNumber')" prop="kycIdNumber">
+          <el-input
+            v-model="approveForm.kycIdNumber"
+            disabled
+            :placeholder="$t('Apply_info.BasicInfo.KycIdNumber')"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('Apply_info.BasicInfo.KycNumber')" prop="kycNumber">
+          <el-input
+            v-model="approveForm.kycNumber"
+            disabled
+            :placeholder="$t('Apply_info.BasicInfo.KycNumber')"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('Apply_info.BasicInfo.KycName')" prop="kycName">
+          <el-input
+            v-model="approveForm.kycName"
+            disabled
+            :placeholder="$t('Apply_info.BasicInfo.KycName')"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item :label="$t('Label.IdPhoto')" prop="image">
+          <div class="image-preview">
+            <div v-if="approveForm.images && approveForm.images.length > 0" class="image-gallery">
+              <div class="image-grid">
+                <div v-for="(image, index) in approveForm.images" :key="index" class="image-item">
+                  <el-image
+                    :src="imgUrl + image.path"
+                    :preview-src-list="approveForm.images.map((img) => imgUrl + img.path)"
+                    :initial-index="index"
+                    style="width: 100%; height: 100%; object-fit: contain"
+                    fit="contain"
+                    preview-teleported
+                  >
+                    <template #error>
+                      <div class="image-slot">
+                        <el-icon><Picture /></el-icon>
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+              </div>
+            </div>
+            <span v-else>{{ $t('Label.IdPhoto') }}</span>
+          </div>
+        </el-form-item>
+        <template v-if="addType == 5">
+          <el-form-item :label="$t('R-Review-Status')" prop="status">
+            <el-select v-model="approveForm.status" :placeholder="$t('R-Review-Status-Select')">
+              <el-option :value="2" :label="$t('R-Review-Status-Approve')"></el-option>
+              <el-option :value="3" :label="$t('R-Review-Status-Reject')"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="approveForm.status == 3"
+            prop="approveDesc"
+            :label="$t('Label.Descr') + '：'"
+          >
+            <el-select
+              v-model="approveForm.approveDesc"
+              filterable
+              class="crm_search_down"
+              :placeholder="$t('Placeholder.Choose')"
+              allow-create
+            >
+              <el-option
+                v-for="item in reasons"
+                :key="item.id"
+                :label="Session.get('lang') == 'cn' ? item.content : item.enContent"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </template>
+      </el-form>
+      <template #footer>
+        <div v-if="addType == 5" class="dialog-footer">
+          <el-button @click="approveDialogVisible = false">{{ $t('Btn.Cancel') }}</el-button>
+          <el-button type="primary" :loading="approveLoading" @click="kycSubmit">{{
+            $t('Btn.Confirm')
+          }}</el-button>
+        </div>
+        <div v-if="addType == 4" class="dialog-footer">
+          <el-button @click="approveDialogVisible = false">{{ $t('Btn.Close') }}</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { ref, reactive, computed, onMounted, watch, inject } from 'vue'
+  import { useRouter } from 'vue-router'
+  import Service from '@/service/ucard'
+  import Service1 from '@/service/customer'
+  import Config from '@/config/index'
+  import ViewCardSingle from '@/views/components/ViewCardSingle'
+  import DetailedInfoCid from '@/views/components/DetailedInfoCid'
+  import TradingInfoAdd from '@/views/components/VirtualCard'
+  import Service2 from '@/service/apply'
+  import { exportExcel } from '@/utils/export'
+  import { useI18n } from 'vue-i18n'
+  import { Operation, Picture, Search } from '@element-plus/icons-vue'
+
+  const { t } = useI18n()
+  const router = useRouter()
+  const { Code } = Config
+  const pigeon = inject('pigeon')
+  const Session = inject('session')
+  // Refs
+  const formRef = ref(null)
+  const approveFormRef = ref(null)
+  const imgUrl = Config.Host85
+  const pictLoading = ref(false)
+  const dialogInfoTradingAdd = ref(false)
+  const approveLoading = ref(false)
+  const dialogInfoTradingSingle = ref(false)
+  const dialogInfoCid = ref(false)
+  const approveDialogVisible = ref(false)
+
+  // Reactive data
+  const search = reactive({
+    tag: 1,
+    mobile: '',
+    type: '',
+    cId: '',
+    email: '',
+    status: '',
+  })
+
+  const mock_tableData = ref([])
+  const formInfo = ref({})
+  const formSingle = ref({})
+  const editor = ref('')
+  const editorType = ref(2)
+  const addType = ref('')
+  const myInfo = ref({})
+  const formList = ref({})
+  const pagerInfo = reactive({ row: 10, current: 1, pageTotal: 0, rowTotal: 0 })
+
+  const idTypeList = ref([
+    { name: 'card.Form.v4', value: 'PASSPORT' },
+    { name: 'card.Form.v3', value: 'HK_HKID' },
+    { name: 'card.Form.v5', value: 'DLN' },
+    { name: 'card.Form.v6', value: 'GOVERNMENT_ISSUED_ID_CARD' },
+  ])
+
+  const approveForm = reactive({
+    id: null,
+    cId: '',
+    name: '',
+    email: '',
+    mobile: '',
+    idNumber: '',
+    kycIdNumber: '',
+    kycNumber: '',
+    kycName: '',
+    images: [],
+    images1: [],
+    status: 2,
+    approveDesc: '',
+  })
+
+  const approveRules = reactive({
+    status: [
+      {
+        required: true,
+        message: t('R-Review-Status-Select'),
+        trigger: 'change',
+      },
+    ],
+    approveDesc: [
+      {
+        required: true,
+        message: t('R-Review-Desc-Input'),
+        trigger: 'blur',
+      },
+    ],
+  })
+
+  const reasons = ref({})
+  const dInfo = ref({})
+
+  // Computed
+  const display = computed(() => {
+    return JSON.parse(Session.Get('display', true) || '{}')
+  })
+
+  const user = computed(() => {
+    return JSON.parse(Session.Get('user', true) || '{}')
+  })
+
+  // Methods
+  //导出
+  const exportAgents = async () => {
+    exportExcel(pigeon, '/wasabi/merchant/kyc/list/export', { ...search }, 'KYC_Verification')
+  }
+
+  const getDetail = async (row) => {
+    try {
+      let res = await Service.merchantList({
+        cId: row.cId,
+        page: {
+          current: pagerInfo.current,
+          row: pagerInfo.row,
+        },
+      })
+      dInfo.value = res.data[0]
+    } catch (error) {
+      pigeon.MessageError(t('Msg.SearchFail'))
+    }
+  }
+
+  const handleCommand = async (command) => {
+    switch (command.type) {
+      case 4:
+        addType.value = 4
+        openApproveDialog(command.row)
+        break
+      case 5:
+        addType.value = 5
+        openApproveDialog(command.row)
+        break
+      case 12:
+        await getDetail(command.row)
+        addType.value = 12
+        formList.value = { ...command.row, ...dInfo.value }
+        dialogInfoTradingAdd.value = true
+        break
+    }
+  }
+
+  const openApproveDialog = async (row) => {
+    pictLoading.value = true
+    try {
+      let res = await Service.kycSearchSingle({ id: row.id })
+      if (res.code == Code.StatusOK) {
+        const detailData = res.data
+        approveForm.id = row.id
+        approveForm.cId = detailData.cId || row.cId || ''
+        approveForm.areaCodeMobile =
+          detailData.areaCode + ' ' + detailData.mobile || row.areaCode + ' ' + row.mobile || ''
+        approveForm.infoName = detailData.infoName || ''
+        approveForm.phone = detailData.phone
+        approveForm.email = detailData.email || ''
+        approveForm.identity = detailData.identity
+        approveForm.images1 = detailData.infoFiles || []
+        approveForm.cardName = detailData.cardName || ''
+        approveForm.idType = detailData.idType || ''
+        approveForm.idNumber = detailData.idNumber
+        approveForm.mobile = detailData.mobile || ''
+        approveForm.issueDate = detailData.issueDate
+        approveForm.idNoExpiryDate = detailData.idNoExpiryDate
+        approveForm.cardFiles = detailData.cardFiles || []
+        approveForm.kycIdNumber = detailData.kycIdNumber || ''
+        approveForm.kycNumber = detailData.kycNumber || ''
+        approveForm.kycName = detailData.kycName || ''
+        approveForm.images = detailData.kycFiles || []
+        approveForm.status = 2
+        approveForm.approveDesc = ''
+        approveDialogVisible.value = true
+      } else {
+        pigeon.MessageError(res.msg)
+      }
+    } catch (error) {
+      console.log(error)
+      pigeon.MessageError(t('Msg.SearchFail'))
+    } finally {
+      pictLoading.value = false
+    }
+  }
+
+  // 确认审核
+  const kycSubmit = async () => {
+    approveFormRef.value.validate(async (valid) => {
+      if (valid) {
+        approveLoading.value = true
+        try {
+          let res = await Service.kycSubmit({
+            ...approveForm,
+            cId: user.value.cId,
+          })
+          if (res.code == Code.StatusOK) {
+            approveDialogVisible.value = false
+            pigeon.MessageOK('审核成功')
+            searchFunc()
+          } else {
+            pigeon.MessageError(res.msg)
+          }
+        } catch (error) {
+          pigeon.MessageError(t('Msg.SaveFail'))
+        } finally {
+          approveLoading.value = false
+        }
+      }
+    })
+  }
+
+  //详细信息cid
+  const accountOpen = (cId) => {
+    router.push({ name: 'R-CustomerDetail', params: { cId: cId } })
+  }
+
+  const searchSingleCid = async (cId) => {
+    let res = await Service1.cidRealSingle({
+      id: cId,
+    })
+    if (res.code == Code.StatusOK) {
+      if (editor.value) {
+        formList.value = res.data
+        // dialogInfoAdd.value = true
+      } else {
+        formInfo.value = res.data
+        searchRealAll(cId)
+      }
+    } else {
+      pigeon.MessageError(res.msg)
+    }
+  }
+
+  //获取cid下的真实账户信息
+  const searchRealAll = async (cId) => {
+    let res = await Service1.realCustomerListAll({
+      cId: cId,
+      page: {
+        current: 1,
+        row: 1,
+      },
+    })
+    if (res.code == Code.StatusOK) {
+      formInfo.value.realList = res.data
+      dialogInfoCid.value = true
+    } else {
+      pigeon.MessageError(res.msg)
+    }
+  }
+
+  //获取详细数据pibno
+  const searchSinglePIbNo = async (pIbNo) => {
+    let res = await Service1.pIbNoRealSingle({
+      ibNo: pIbNo,
+    })
+    if (res.code == Code.StatusOK) {
+      // formInfoPib.value = res.data
+      // dialogInfoPIbNo.value = true
+    } else {
+      pigeon.MessageError(res.msg)
+    }
+  }
+
+  //详细信息pibno
+  const agentOpen = (pIbNo) => {
+    searchSinglePIbNo(pIbNo)
+  }
+
+  //详细信息关闭cid/pibno
+  const closeDia = () => {
+    dialogInfoCid.value = false
+  }
+
+  const close = (val) => {
+    dialogInfoCid.value = val
+  }
+
+  // 查询KYC认证状态
+  const kycStatus = async ({ uniqueId, cardTypeId }) => {
+    let res = await Service.kycStatus({
+      uniqueId,
+      cardTypeId,
+      cId: user.value.cId,
+    })
+    if (res.code == Code.StatusOK) {
+      pigeon.MessageOK(t('Msg.Success8'))
+      searchFunc()
+    } else {
+      pigeon.MessageError(res.msg)
+    }
+  }
+
+  const closeSingle = () => {
+    dialogInfoTradingSingle.value = false
+  }
+
+  const closeAdd = (val) => {
+    formList.value = {}
+    dialogInfoTradingAdd.value = val
+  }
+
+  //获取原因列表
+  const searchReasons = async () => {
+    let res = await Service2.reasonsRefusalList({ type: 15 })
+    if (res.code == Code.StatusOK) {
+      if (res.data == null) {
+        reasons.value = {}
+      } else {
+        reasons.value = res.data
+      }
+    } else {
+      pigeon.MessageError(res.msg)
+    }
+  }
+
+  const closeDiaAdd = () => {
+    formList.value = {}
+    dialogInfoTradingAdd.value = false
+  }
+
+  const confirmToReload = () => {
+    closeDiaAdd()
+    searchFunc()
+  }
+
+  const toSearch = () => {
+    pagerInfo.current = 1
+    searchFunc()
+  }
+
+  // 列表
+  const searchFunc = async () => {
+    pictLoading.value = true
+    if (!display.value['R-KycAuth-Search']?.show) {
+      pigeon.MessageWarning(t('Msg.NotDisplay'))
+      pictLoading.value = false
+      return
+    }
+    let res = await Service.kycList({
+      ...search,
+      page: {
+        current: pagerInfo.current,
+        row: pagerInfo.row,
+      },
+    })
+    if (res.code == Code.StatusOK) {
+      mock_tableData.value = res.data
+      if (res.page != null) {
+        pagerInfo.rowTotal = res.page.rowTotal
+        pagerInfo.pageTotal = res.page.pageTotal
+      } else {
+        pagerInfo.rowTotal = 0
+      }
+      pigeon.MessageOK(t('Msg.SearchSuccess'))
+    } else {
+      pigeon.MessageError(res.msg)
+    }
+    pictLoading.value = false
+  }
+
+  const handleSizeChange = (val) => {
+    pagerInfo.row = val
+    searchFunc()
+  }
+
+  const handleCurrentChange = (val) => {
+    pagerInfo.current = val
+    searchFunc()
+  }
+
+  // 生命周期
+  onMounted(() => {
+    searchReasons()
+    searchFunc()
+  })
+
+  // Watchers
+  watch(
+    () => search.tag,
+    () => {
+      search.mobile = ''
+      search.email = ''
+      search.cId = ''
+      search.type = ''
+      search.status = ''
+    }
+  )
+</script>
+<style scoped lang="scss">
+  #review_Email {
+    .crm_search {
+      .search_action_btn {
+        .delete {
+          background-color: #a1a1a1;
+        }
+
+        .delete.active {
+          background-color: #368fec;
+        }
+      }
+    }
+
+    .el-table .state {
+      display: inline-block;
+      min-width: 80px;
+      max-width: 150px;
+      box-sizing: border-box;
+      line-height: 1.5;
+      border-radius: 2px;
+      padding: 2px 10px;
+      color: #ffffff;
+    }
+  }
+</style>
+<style lang="scss">
+  @import 'index.scss';
+</style>

src/views/components/KycAuth/index.vue

@@ -0,0 +1,256 @@
+<template>
+  <div>
+    <div v-if="dialogInfoTradingAdd" class="crm_verified_info_mask" @click="close"></div>
+    <div id="TradingDetailedInfoAdd" class="InfoBox" :class="{ active: dialogInfoTradingAdd }">
+      <div class="header">
+        <div>
+          <span class="title">{{ $t('Ucard.KycAuth.b2') }}</span>
+        </div>
+        <span class="close crm-cursor" @click="close"
+          ><el-icon><Close /></el-icon
+        ></span>
+      </div>
+      <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
+        <el-form-item :label="$t('Ucard.KycAuth.item8') + '：'">
+          <el-input v-model="form.cId" disabled placeholder=""></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('Ucard.KycAuth.item9') + '：'">
+          <el-input
+            v-model="form.lastName"
+            disabled
+            placeholder="姓"
+            style="width: 45%; display: inline-block"
+          ></el-input>
+          <el-input
+            v-model="form.firstName"
+            disabled
+            placeholder="名"
+            style="width: 45%; display: inline-block; margin-left: 10px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('Ucard.KycAuth.item10') + '：'">
+          <el-input v-model="form.email" disabled placeholder=""></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('Ucard.KycAuth.item11') + '：'">
+          <el-input v-model="form.mobile" disabled placeholder=""></el-input>
+        </el-form-item>
+        <!-- <el-form-item prop="uniqueId" :label="$t('Ucard.KycAuth.item7') + '：'">
+          <el-input
+            disabled
+            size="small"
+            v-model="form.uniqueId"
+            :placeholder="$t('Placeholder.Input')"
+          ></el-input>
+        </el-form-item> -->
+        <el-form-item prop="cardTypeId" :label="$t('Ucard.KycAuth.item1') + '：'">
+          <el-select v-model="form.cardTypeId" size="small" :placeholder="$t('Placeholder.Choose')">
+            <el-option
+              v-for="(item, index) in currencyList"
+              :key="index"
+              :value="item.cardTypeId"
+              :label="item.cardName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span class="btn crm-cursor" @click="confirm"
+        ><span>{{ $t('Btn.Confirm') }}</span></span
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, reactive, watch, computed, inject } from 'vue'
+  import Config from '@/config/index'
+  import Service from '@/service/ucard'
+  import { useI18n } from 'vue-i18n'
+
+  const { t } = useI18n()
+  const { Code } = Config
+  const pigeon = inject('pigeon')
+  const Session = inject('session')
+
+  // Props
+  const props = defineProps({
+    dialogInfoTradingAdd: {
+      type: Boolean,
+      default: false,
+    },
+    addType: {
+      default: '',
+    },
+    editor: {
+      default: '',
+    },
+    myInfo: {
+      default: '',
+    },
+    formList: {
+      default: '',
+    },
+  })
+
+  // Emits
+  const emit = defineEmits(['closeAdd', 'confirmToReload'])
+
+  // Refs
+  const formRef = ref(null)
+  const loading = ref(false)
+  const currencyList = ref([])
+  const isOk = ref(false)
+
+  // Reactive data
+  const form = reactive({})
+  const pagerInfo = reactive({ row: 10, current: 1, pageTotal: 0, rowTotal: 0 })
+  const received = reactive({ receivedCurrency: '', receivedAmount: '', exchangeRate: '' })
+
+  // Rules
+  const rules = reactive({
+    uniqueId: [
+      {
+        required: true,
+        message: t('Placeholder.Input'),
+        trigger: 'blur',
+      },
+    ],
+    cardTypeId: [
+      {
+        required: true,
+        message: t('Placeholder.Input'),
+        trigger: 'blur',
+      },
+    ],
+  })
+
+  // Computed
+  const AccessToken = computed(() => {
+    return {
+      'Access-Token': Session.Get('access_token'),
+    }
+  })
+
+  // Methods
+  // 提交KYC认证
+  const kycSubmit = async () => {
+    loading.value = true
+    try {
+      let res = await Service.kycSubmit(form)
+      if (res.code == Code.StatusOK) {
+        pigeon.MessageOK(t('Msg.SearchSuccess'))
+        searchFunc()
+      } else {
+        pigeon.MessageError(res.msg)
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 获取卡片类型列表
+  const cardTypesList = async () => {
+    let res = await Service.cardTypesList({
+      page: {
+        current: pagerInfo.current,
+        row: pagerInfo.row,
+      },
+    })
+    if (res.code == Code.StatusOK) {
+      currencyList.value = res.data
+    } else {
+      pigeon.MessageError(res.msg)
+    }
+  }
+
+  //关闭
+  const close = () => {
+    emit('closeAdd', false)
+  }
+
+  //提交成功后回调
+  const confirmToReload = () => {
+    emit('confirmToReload', true)
+  }
+
+  //提交
+  const confirm = () => {
+    formRef.value.validate((valid) => {
+      if (valid) {
+        kycSubmit()
+      } else {
+        return false
+      }
+    })
+  }
+
+  const searchFunc = () => {
+    // 这里需要根据实际情况实现搜索功能
+  }
+
+  // Watchers
+  watch(
+    () => props.formList,
+    (form) => {
+      Object.assign(form, {
+        uniqueId: form.uniqueId || form.cId || '',
+        lastName: form.lastName || '',
+        firstName: form.firstName || '',
+        email: form.email || '',
+        mobile: form.mobile || form.phone || '',
+        signaturePhoto: '',
+        currency: '',
+        activePhoto: '',
+      })
+    }
+  )
+
+  watch(
+    () => props.addType,
+    () => {
+      cardTypesList()
+    }
+  )
+</script>
+
+<style lang="scss" scoped>
+  .crm_verified_info_mask {
+    position: fixed;
+    z-index: 9999 !important;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.3);
+  }
+  .InfoBox {
+    width: 450px;
+    height: 100%;
+    padding: 15px 0;
+    border-radius: 2px;
+    box-sizing: border-box;
+    box-shadow: 0px 3px 5px 0px rgba(49, 49, 49, 0.35);
+    position: fixed;
+    background-color: #ffffff;
+    z-index: 10000 !important;
+    overflow: hidden;
+    overflow-y: auto;
+    top: 0;
+    right: -455px;
+    transition: all 0.6s;
+  }
+  .InfoBox.active {
+    right: 0;
+  }
+  .imgs {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .el-upload-list__item-actions {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+</style>

src/views/components/ReviewEmail/index.vue

@@ -0,0 +1,489 @@
+<template>
+  <el-drawer
+    v-model="visible"
+    :title="addType === 'kyc_upload' ? '上传KYC附件' : $t('Marketing.Email')"
+    :size="'25%'"
+    :before-close="close"
+    custom-class="review-email-drawer"
+    :wrapper-closable="true"
+    :modal-append-to-body="false"
+    :append-to-body="true"
+  >
+    <div class="drawer-content">
+      <el-form
+        ref="formRef"
+        :rules="rules"
+        :model="form"
+        label-width="120px"
+        class="review-email-form"
+      >
+        <template v-if="addType === 'kyc_upload'">
+          <el-form-item :label="$t('Ucard.Business.t8')" required>
+            <el-select
+              v-model="form.kycUploadForm.type"
+              :placeholder="$t('Ucard.Business.t9')"
+              style="width: 100%"
+            >
+              <el-option :label="$t('Ucard.Business.t10')" :value="1" />
+              <el-option :label="$t('Ucard.Business.t11')" :value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('Ucard.Business.t12')" required>
+            <el-upload
+              class="custom-upload-rect full-width-upload"
+              :http-request="handleKycFileUpload"
+              :show-file-list="false"
+              :before-upload="() => true"
+              :action="Config.Host85 + '/ucard/upload/file'"
+              list-type="text"
+            >
+              <template v-if="!form.kycUploadForm.data">
+                <div class="custom-upload-rect-trigger">
+                  <span class="custom-upload-rect-plus">+</span>
+                </div>
+              </template>
+              <template v-else>
+                <div class="custom-upload-rect-preview">
+                  <img :src="form.kycUploadForm.data" class="custom-upload-rect-img" />
+                  <span class="custom-upload-rect-delete" @click.stop="removeKycFile">×</span>
+                </div>
+              </template>
+            </el-upload>
+          </el-form-item>
+        </template>
+        <template v-else>
+          <el-form-item prop="email" :label="$t('Marketing.Email') + '：'">
+            <el-input v-model.trim="form.email" :placeholder="$t('Placeholder.Input')"></el-input>
+          </el-form-item>
+        </template>
+
+        <div class="button-container">
+          <el-button @click="close">{{ $t('Btn.Cancel') }}</el-button>
+          <el-button type="primary" @click="confirm">{{ $t('Btn.Confirm') }}</el-button>
+        </div>
+      </el-form>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup>
+  import { ref, reactive, watch, inject, computed } from 'vue'
+  import { ElMessage as Message } from 'element-plus'
+  import Service from '@/service/marketing'
+  import UcardService from '@/service/ucard'
+  import Config from '@/config/index'
+  import { useI18n } from 'vue-i18n'
+
+  const { t } = useI18n()
+  const { Code } = Config
+  const pigeon = inject('pigeon')
+  // Props
+  const props = defineProps({
+    dialogInfoTradingAdd: {
+      type: Boolean,
+      default: false,
+    },
+    editor: {
+      default: '',
+    },
+    myInfo: {
+      default: '',
+    },
+    formList: {
+      default: '',
+    },
+    addType: {
+      type: String,
+      default: '',
+    },
+  })
+
+  const visible = computed(() => props.dialogInfoTradingAdd)
+
+  // Emits
+  const emit = defineEmits(['closeAdd', 'confirmToReload'])
+
+  // Refs
+  const formRef = ref(null)
+  const flag = ref(false)
+  const loading = ref(false)
+
+  // Reactive data
+  const form = reactive({
+    email: '',
+    kycUploadForm: {
+      type: '',
+      data: '',
+    },
+    uniqueId: '',
+  })
+
+  const SourceList = ref([])
+
+  // Rules
+  const rules = reactive({
+    email: [
+      {
+        required: true,
+        message: t('vaildate.input.empty'),
+        trigger: 'blur',
+      },
+    ],
+  })
+
+  // Methods
+  const selectChange = () => {
+    // Vue3 中通常不需要强制更新
+  }
+
+  //关闭
+  const close = () => {
+    emit('closeAdd', false)
+  }
+
+  //提交成功后回调
+  const confirmToReload = () => {
+    emit('confirmToReload', true)
+  }
+
+  //提交
+  const confirm = () => {
+    if (props.addType === 'kyc_upload') {
+      submitKycUpload()
+    } else {
+      formRef.value.validate((valid) => {
+        if (valid) {
+          toConfirm()
+        } else {
+          return false
+        }
+      })
+    }
+  }
+
+  const toConfirm = () => {
+    if (!props.editor) {
+      emailAdd()
+    } else if (props.editor) {
+      emailUpdate()
+    }
+  }
+
+  //add
+  const emailAdd = async () => {
+    loading.value = true
+    try {
+      let res = await Service.emailAdd({
+        ...form,
+      })
+      if (res.code == Code.StatusOK) {
+        confirmToReload()
+        formRef.value.resetFields()
+        pigeon.MessageOK(t('Msg.Success'))
+      } else {
+        pigeon.MessageError(res.msg)
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  //update
+  const emailUpdate = async () => {
+    loading.value = true
+    try {
+      let res = await Service.emailUpdate({
+        ...form,
+      })
+      if (res.code == Code.StatusOK) {
+        confirmToReload()
+        close()
+        formRef.value.resetFields()
+        pigeon.MessageOK(t('Msg.Success'))
+      } else {
+        pigeon.MessageError(res.msg)
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  //来源列表
+  const getSourceList = async () => {
+    let res = await Service.emailList({})
+    if (res.code == Code.StatusOK) {
+      SourceList.value = res.data
+    } else {
+      pigeon.MessageError(res.msg)
+    }
+  }
+
+  const handleKycFileUpload = async (option) => {
+    const formData = new FormData()
+    formData.append('file', option.file)
+    try {
+      const res = await UcardService.ucardUpload(formData)
+      if (res.code === 200 && res.data) {
+        form.kycUploadForm.data = res.data
+        Message.success(t('Ucard.Business.ms11'))
+        option.onSuccess(res, option.file)
+      } else {
+        Message.error(res.msg)
+        option.onError()
+      }
+    } catch (e) {
+      Message.error(t('Ucard.Business.ms12'))
+      option.onError()
+    }
+  }
+
+  const submitKycUpload = async () => {
+    if (!form.uniqueId) {
+      Message.error(t('Ucard.Business.ms13'))
+      return
+    }
+    if (!form.kycUploadForm.type || !form.kycUploadForm.data) {
+      Message.error(t('Ucard.Business.ms14'))
+      return
+    }
+    loading.value = true
+    try {
+      const params = {
+        uniqueId: form.uniqueId,
+        type: form.kycUploadForm.type,
+        data: form.kycUploadForm.data,
+      }
+      const res = await UcardService.kycUpload(params)
+      if (res.code === 200) {
+        Message.success(res.msg || t('Ucard.Business.ms15'))
+        form.kycUploadForm = { type: '', data: '' }
+        close()
+        confirmToReload()
+      } else {
+        Message.error(res.msg || t('Ucard.Business.ms16'))
+      }
+    } catch (e) {
+      Message.error('KYC附件上传失败')
+    } finally {
+      loading.value = false
+      Message.error(t('Ucard.Business.ms16'))
+    }
+  }
+
+  const removeKycFile = () => {
+    form.kycUploadForm.data = ''
+  }
+
+  // Watchers
+  watch(
+    () => props.dialogInfoTradingAdd,
+    (type) => {
+      if (type == false && formRef.value) {
+        formRef.value.resetFields()
+      }
+    }
+  )
+
+  watch(
+    () => props.formList,
+    (formData) => {
+      if (formData) {
+        Object.assign(form, formData)
+        if (formData.kycUploadForm) {
+          Object.assign(form.kycUploadForm, formData.kycUploadForm)
+        }
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style lang="scss" scoped>
+  .review-email-drawer {
+    :deep(.el-drawer) {
+      display: flex;
+      flex-direction: column;
+    }
+
+    :deep(.el-drawer__header) {
+      margin-bottom: 0;
+      padding: 16px 20px;
+    }
+
+    :deep(.el-drawer__body) {
+      flex: 1;
+      overflow: hidden;
+      padding: 0;
+      position: relative;
+    }
+  }
+
+  .drawer-content {
+    position: relative;
+    min-height: 100%;
+    padding: 24px 32px 0 32px;
+    background: #fff;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    padding-bottom: 64px;
+  }
+
+  .review-email-form {
+    .el-form-item {
+      margin-bottom: 24px;
+    }
+
+    .el-input,
+    .el-select {
+      width: 100%;
+    }
+
+    .el-form-item__label {
+      white-space: nowrap;
+      text-align: right;
+      font-weight: 400;
+      color: #222;
+      font-size: 15px;
+      padding-right: 8px;
+    }
+
+    .el-form-item__content {
+      font-size: 15px;
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      height: 40px;
+      font-size: 15px;
+    }
+
+    .el-select .el-input__inner {
+      padding-right: 30px;
+    }
+
+    .el-select .el-input__icon {
+      right: 10px;
+    }
+
+    .el-form-item.is-required .el-form-item__label:before {
+      color: #eb3f57;
+      margin-right: 4px;
+    }
+
+    .el-form-item__error {
+      font-size: 13px;
+      color: #eb3f57;
+      margin-top: 2px;
+    }
+  }
+
+  .button-container {
+    text-align: right;
+    background: #fff;
+    padding: 24px 0 0 0;
+    max-width: 420px;
+    margin-left: auto;
+    margin-right: 0;
+
+    .el-button {
+      width: auto !important;
+      min-width: 120px;
+      margin-top: 0;
+    }
+
+    .el-button + .el-button {
+      margin-left: 24px;
+    }
+  }
+
+  // 完全仿照截图的自定义上传卡片样式
+  .custom-upload-rect {
+    width: 320px;
+    height: 180px;
+    background: #fafbfc;
+    border: 1.5px dashed #e5e6eb;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: border-color 0.2s;
+  }
+
+  .custom-upload-rect:hover {
+    border-color: #409eff;
+  }
+
+  .custom-upload-rect-trigger {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .custom-upload-rect-plus {
+    font-size: 48px;
+    color: #c0c4cc;
+    font-weight: 400;
+    line-height: 1;
+  }
+
+  .custom-upload-rect-preview {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .custom-upload-rect-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 8px;
+      background: #fff;
+      display: block;
+    }
+
+    .custom-upload-rect-delete {
+      position: absolute;
+      top: 8px;
+      right: 12px;
+      background: rgba(0, 0, 0, 0.5);
+      color: #fff;
+      border-radius: 50%;
+      width: 22px;
+      height: 22px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      cursor: pointer;
+      z-index: 2;
+      transition: background 0.2s;
+    }
+
+    .custom-upload-rect-delete:hover {
+      background: #eb3f57;
+    }
+  }
+
+  .full-width-upload {
+    width: 100% !important;
+    max-width: 100%;
+    .custom-upload-rect-trigger,
+    .custom-upload-rect-preview {
+      width: 100%;
+      min-height: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .custom-upload-rect-img {
+      width: 100%;
+      max-width: 100%;
+      object-fit: contain;
+      border-radius: 8px;
+      background: #fff;
+      display: block;
+    }
+  }
+</style>

src/views/components/VirtualCard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="InfoBox" id="TradingDetailedInfoAdd" :class="{ active: dialogInfoTradingAdd }">
+  <div id="TradingDetailedInfoAdd" class="InfoBox" :class="{ active: dialogInfoTradingAdd }">
     <div class="header">
       <div v-if="addType == '1'">
         <span class="title">{{ $t('Ucard.VirtualCard.d1') }}</span>
@@ -40,39 +40,28 @@
       <div v-if="addType == '13'">
         <span class="title">{{ $t('R-VirtualCard-Btn11') }}</span>
       </div>
-      <span class="close crm-cursor" @click="close"><i class="el-icon-close"></i></span>
+      <span class="close crm-cursor" @click="close">
+        <el-icon><Close /></el-icon>
+      </span>
     </div>
 
     <template v-if="addType == '1'">
       <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
         <el-form-item prop="uniqueId" :label="$t('Ucard.VirtualCard.item7') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.uniqueId"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="cardNumber" :label="$t('Ucard.VirtualCard.item2') + '：'">
-          <el-input
-            size="small"
-            v-model="form.cardNumber"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.cardNumber" :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
         <el-form-item prop="activeCode" :label="$t('card.Form.f26') + '：'">
-          <el-input
-            size="small"
-            v-model="form.activeCode"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.activeCode" :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
         <el-form-item prop="pin" :label="$t('card.Form.f25') + '：'">
-          <el-input
-            size="small"
-            v-model="form.pin"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.pin" :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
       </el-form>
       <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
@@ -84,61 +73,43 @@
 "
           :label="$t('Label.CidAccount') + '：'"
         >
-          <el-input
-            disabled
-            size="small"
-            v-model="form.cId"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.cId" disabled :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
         <el-form-item prop="lastName" :label="$t('Ucard.KycAuth.item4') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.lastName"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="firstName" :label="$t('Ucard.KycAuth.item5') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.firstName"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="mobile" :label="$t('Ucard.KycAuth.item2') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.mobile"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="email" :label="$t('Label.Email') + '：'">
-          <el-input
-            disabled
-            size="small"
-            v-model="form.email"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.email" disabled :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
 
         <el-form-item prop="cardNumber" :label="$t('Ucard.VirtualCard.item2') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.cardNumber"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
 
         <el-form-item prop="amount" :label="$t('Ucard.Recharge.item4') + '：'">
-          <el-input
-            size="small"
-            v-model="form.amount"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.amount" :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
       </el-form>
       <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
@@ -147,7 +118,7 @@
     <template v-if="addType == '3'">
       <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
         <el-form-item prop="currency" :label="$t('Ucard.VirtualCard.item9') + '：'">
-          <el-select size="small" v-model="form.currency" :placeholder="$t('Placeholder.Choose')">
+          <el-select v-model="form.currency" :placeholder="$t('Placeholder.Choose')">
             <el-option
               v-for="(item, index) in currencyList"
               :key="index"
@@ -157,15 +128,11 @@
           </el-select>
         </el-form-item>
         <el-form-item prop="amount" :label="$t('Ucard.Recharge.item4') + '：'">
-          <el-input
-            size="small"
-            v-model="form.amount"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.amount" :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
       </el-form>
       <span class="btn crm-cursor" @click="confirm">{{ $t('Ucard.VirtualCard.b9') }}</span>
-      <el-form ref="receivedRef" :model="received" label-width="120PX" v-if="isOk">
+      <el-form v-if="isOk" ref="receivedRef" :model="received" label-width="120PX">
         <el-form-item :label="$t('Ucard.Recharge.item7') + '：'">
           {{ received.receivedCurrency }}
         </el-form-item>
@@ -176,7 +143,7 @@
           {{ received.exchangeRate }}
         </el-form-item>
       </el-form>
-      <span class="btn crm-cursor" @click="close" v-if="isOk">{{
+      <span v-if="isOk" class="btn crm-cursor" @click="close">{{
         $t('Ucard.VirtualCard.b10')
       }}</span>
     </template>
@@ -184,46 +151,42 @@
     <template v-if="addType == '4'">
       <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
         <el-form-item :label="$t('Ucard.KycAuth.item8') + '：'">
-          <el-input disabled size="small" v-model="form.cId" placeholder=""></el-input>
+          <el-input v-model="form.cId" disabled placeholder=""></el-input>
         </el-form-item>
         <el-form-item :label="$t('Ucard.KycAuth.item9') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.lastName"
+            disabled
             style="width: 45%; display: inline-block"
           ></el-input>
           <el-input
-            disabled
-            size="small"
             v-model="form.firstName"
+            disabled
             style="width: 45%; display: inline-block; margin-left: 10px"
           ></el-input>
         </el-form-item>
         <el-form-item :label="$t('Ucard.KycAuth.item10') + '：'">
-          <el-input disabled size="small" v-model="form.email" placeholder=""></el-input>
+          <el-input v-model="form.email" disabled placeholder=""></el-input>
         </el-form-item>
         <el-form-item :label="$t('Ucard.KycAuth.item11') + '：'">
-          <el-input disabled size="small" v-model="form.mobile" placeholder=""></el-input>
+          <el-input v-model="form.mobile" disabled placeholder=""></el-input>
         </el-form-item>
         <el-form-item prop="status" :label="$t('Label.CheckResults') + '：'">
           <el-select
-            class="crm_search_down"
-            size="small"
             v-model="form.status"
-            @change="cardNumberList"
+            class="crm_search_down"
             :placeholder="$t('Placeholder.Choose')"
+            @change="cardNumberList"
           >
             <el-option :label="$t('Apply_info.VerifiedUser.Agree')" :value="2"></el-option>
             <el-option :label="$t('Apply_info.VerifiedUser.Refused')" :value="3"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item prop="approveDesc" :label="$t('Label.Descr') + '：'" v-if="form.status == 3">
+        <el-form-item v-if="form.status == 3" prop="approveDesc" :label="$t('Label.Descr') + '：'">
           <el-select
+            v-model="form.approveDesc"
             filterable
             class="crm_search_down"
-            size="small"
-            v-model="form.approveDesc"
             :placeholder="$t('Placeholder.Choose')"
             allow-create
           >
@@ -236,15 +199,14 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          prop="cardTypeId"
           v-if="form.status == 2"
+          prop="cardTypeId"
           :label="$t('Ucard.KycAuth.item1') + '：'"
         >
           <el-select
-            size="small"
             v-model="form.cardTypeId"
-            @change="changeCardType"
             :placeholder="$t('Placeholder.Choose')"
+            @change="changeCardType"
           >
             <el-option
               v-for="(item, index) in cardType"
@@ -255,16 +217,11 @@
           </el-select>
         </el-form-item>
         <el-form-item
+          v-if="cardTypes && form.status == 2"
           prop="cardNumber"
           :label="$t('card.Form.f24') + '：'"
-          v-if="cardTypes && form.status == 2"
         >
-          <el-select
-            size="small"
-            filterable
-            v-model="form.cardNumber"
-            :placeholder="$t('Placeholder.Choose')"
-          >
+          <el-select v-model="form.cardNumber" filterable :placeholder="$t('Placeholder.Choose')">
             <el-option
               v-for="(item, index) in cardNumbersList"
               :key="index"
@@ -280,45 +237,41 @@
     <template v-if="addType == '5'">
       <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
         <el-form-item :label="$t('Ucard.KycAuth.item8') + '：'">
-          <el-input disabled size="small" v-model="form.cId" placeholder=""></el-input>
+          <el-input v-model="form.cId" disabled placeholder=""></el-input>
         </el-form-item>
         <el-form-item :label="$t('Ucard.KycAuth.item9') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.lastName"
+            disabled
             style="width: 45%; display: inline-block"
           ></el-input>
           <el-input
-            disabled
-            size="small"
             v-model="form.firstName"
+            disabled
             style="width: 45%; display: inline-block; margin-left: 10px"
           ></el-input>
         </el-form-item>
         <el-form-item :label="$t('Ucard.KycAuth.item10') + '：'">
-          <el-input disabled size="small" v-model="form.email" placeholder=""></el-input>
+          <el-input v-model="form.email" disabled placeholder=""></el-input>
         </el-form-item>
         <el-form-item :label="$t('Ucard.KycAuth.item11') + '：'">
-          <el-input disabled size="small" v-model="form.mobile" placeholder=""></el-input>
+          <el-input v-model="form.mobile" disabled placeholder=""></el-input>
         </el-form-item>
         <el-form-item prop="status" :label="$t('Label.CheckResults') + '：'">
           <el-select
-            class="crm_search_down"
-            size="small"
             v-model="form.status"
+            class="crm_search_down"
             :placeholder="$t('Placeholder.Choose')"
           >
             <el-option :label="$t('Apply_info.VerifiedUser.Refused')" :value="3"></el-option>
             <el-option :label="$t('Apply_info.VerifiedUser.Agree')" :value="2"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item prop="approveDesc" :label="$t('Label.Descr') + '：'" v-if="form.status == 3">
+        <el-form-item v-if="form.status == 3" prop="approveDesc" :label="$t('Label.Descr') + '：'">
           <el-select
+            v-model="form.approveDesc"
             filterable
             class="crm_search_down"
-            size="small"
-            v-model="form.approveDesc"
             :placeholder="$t('Placeholder.Choose')"
             allow-create
           >
@@ -338,18 +291,13 @@
       <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
         <el-form-item prop="cardNumber" :label="$t('Ucard.VirtualCard.item2') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.cardNumber"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="pin" :label="$t('card.Form.f25') + '：'">
-          <el-input
-            size="small"
-            v-model="form.pin"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.pin" :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
       </el-form>
       <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
@@ -359,18 +307,13 @@
       <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
         <el-form-item prop="cardNumber" :label="$t('Ucard.VirtualCard.item2') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.cardNumber"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
         <el-form-item :label="$t('card.Form.f27') + '：'">
-          <el-input
-            size="small"
-            v-model="form.clientRemark"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.clientRemark" :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
       </el-form>
       <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
@@ -379,11 +322,7 @@
     <template v-if="addType == '9'">
       <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
         <el-form-item :label="$t('card.Form.f26') + '：'">
-          <el-input
-            size="small"
-            v-model="activationCode"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="activationCode" :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
       </el-form>
       <span class="btn crm-cursor" @click="confirm">{{ $t('card.Form.f62') }}</span>
@@ -396,57 +335,40 @@
 "
           :label="$t('Label.CidAccount') + '：'"
         >
-          <el-input
-            disabled
-            size="small"
-            v-model="form.cId"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.cId" disabled :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
         <el-form-item prop="lastName" :label="$t('Ucard.KycAuth.item4') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.lastName"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="firstName" :label="$t('Ucard.KycAuth.item5') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.firstName"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="mobile" :label="$t('Ucard.KycAuth.item2') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.mobile"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="email" :label="$t('Label.Email') + '：'">
-          <el-input
-            disabled
-            size="small"
-            v-model="form.email"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.email" disabled :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
         <el-form-item prop="type" :label="$t('card.Form.f52') + '：'">
-          <el-select size="small" v-model="form.type" :placeholder="$t('Placeholder.Choose')">
+          <el-select v-model="form.type" :placeholder="$t('Placeholder.Choose')">
             <el-option :value="1" :label="$t('card.Form.f60')"></el-option>
             <el-option :value="2" :label="$t('card.Form.f61')"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item prop="amount" :label="$t('Ucard.Recharge.item4') + '：'">
-          <el-input
-            size="small"
-            v-model="form.amount"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.amount" :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
       </el-form>
       <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
@@ -455,45 +377,41 @@
     <template v-if="addType == '11'">
       <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
         <el-form-item :label="$t('Ucard.KycAuth.item8') + '：'">
-          <el-input disabled size="small" v-model="form.cId" placeholder=""></el-input>
+          <el-input v-model="form.cId" disabled placeholder=""></el-input>
         </el-form-item>
         <el-form-item :label="$t('Ucard.KycAuth.item9') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.lastName"
+            disabled
             style="width: 45%; display: inline-block"
           ></el-input>
           <el-input
-            disabled
-            size="small"
             v-model="form.firstName"
+            disabled
             style="width: 45%; display: inline-block; margin-left: 10px"
           ></el-input>
         </el-form-item>
         <el-form-item :label="$t('Ucard.KycAuth.item10') + '：'">
-          <el-input disabled size="small" v-model="form.email" placeholder=""></el-input>
+          <el-input v-model="form.email" disabled placeholder=""></el-input>
         </el-form-item>
         <el-form-item :label="$t('Ucard.KycAuth.item11') + '：'">
-          <el-input disabled size="small" v-model="form.mobile" placeholder=""></el-input>
+          <el-input v-model="form.mobile" disabled placeholder=""></el-input>
         </el-form-item>
         <el-form-item prop="status" :label="$t('Label.CheckResults') + '：'">
           <el-select
-            class="crm_search_down"
-            size="small"
             v-model="form.status"
+            class="crm_search_down"
             :placeholder="$t('Placeholder.Choose')"
           >
             <el-option :label="$t('Apply_info.VerifiedUser.Agree')" :value="2"></el-option>
             <el-option :label="$t('Apply_info.VerifiedUser.Refused')" :value="3"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item prop="approveDesc" :label="$t('Label.Descr') + '：'" v-if="form.status == 3">
+        <el-form-item v-if="form.status == 3" prop="approveDesc" :label="$t('Label.Descr') + '：'">
           <el-select
+            v-model="form.approveDesc"
             filterable
             class="crm_search_down"
-            size="small"
-            v-model="form.approveDesc"
             :placeholder="$t('Placeholder.Choose')"
             allow-create
           >
@@ -512,34 +430,31 @@
     <template v-if="addType == '12'">
       <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
         <el-form-item :label="$t('Ucard.KycAuth.item8') + '：'">
-          <el-input disabled size="small" v-model="form.cId" placeholder=""></el-input>
+          <el-input v-model="form.cId" disabled placeholder=""></el-input>
         </el-form-item>
         <el-form-item :label="$t('Ucard.KycAuth.item9') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.lastName"
+            disabled
             style="width: 45%; display: inline-block"
           ></el-input>
           <el-input
-            disabled
-            size="small"
             v-model="form.firstName"
+            disabled
             style="width: 45%; display: inline-block; margin-left: 10px"
           ></el-input>
         </el-form-item>
         <el-form-item :label="$t('Ucard.KycAuth.item10') + '：'">
-          <el-input disabled size="small" v-model="form.email" placeholder=""></el-input>
+          <el-input v-model="form.email" disabled placeholder=""></el-input>
         </el-form-item>
         <el-form-item :label="$t('Ucard.KycAuth.item11') + '：'">
-          <el-input disabled size="small" v-model="form.mobile" placeholder=""></el-input>
+          <el-input v-model="form.mobile" disabled placeholder=""></el-input>
         </el-form-item>
         <el-form-item prop="cardTypeId" :label="$t('Ucard.KycAuth.item1') + '：'">
           <el-select
-            size="small"
             v-model="form.cardTypeId"
-            @change="changeCardType"
             :placeholder="$t('Placeholder.Choose')"
+            @change="changeCardType"
           >
             <el-option
               v-for="(item, index) in cardType"
@@ -577,8 +492,8 @@
         <el-form-item prop="addressCn" :label="$t('card.Form.f10')">
           <el-input
             v-model="form.addressCn"
-            @change="setAddress"
             :placeholder="$t('card.vaildate.v27')"
+            @change="setAddress"
           />
         </el-form-item>
         <el-form-item prop="address" :label="$t('card.New.n11')">
@@ -594,61 +509,43 @@
     <template v-if="addType == '13'">
       <el-form ref="formRef" :rules="rules" :model="form" label-width="120PX">
         <el-form-item prop="cId" :label="$t('Label.CidAccount') + '：'">
-          <el-input
-            disabled
-            size="small"
-            v-model="form.cId"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.cId" disabled :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
         <el-form-item prop="lastName" :label="$t('Ucard.KycAuth.item4') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.lastName"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="firstName" :label="$t('Ucard.KycAuth.item5') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.firstName"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="mobile" :label="$t('Ucard.KycAuth.item2') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.mobile"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
         <el-form-item prop="email" :label="$t('Label.Email') + '：'">
-          <el-input
-            disabled
-            size="small"
-            v-model="form.email"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.email" disabled :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
 
         <el-form-item prop="cardNumber" :label="$t('Ucard.VirtualCard.item2') + '：'">
           <el-input
-            disabled
-            size="small"
             v-model="form.cardNumber"
+            disabled
             :placeholder="$t('Placeholder.Input')"
           ></el-input>
         </el-form-item>
 
         <el-form-item prop="amount" :label="$t('card.Form.f55') + '：'">
-          <el-input
-            size="small"
-            v-model="form.amount"
-            :placeholder="$t('Placeholder.Input')"
-          ></el-input>
+          <el-input v-model="form.amount" :placeholder="$t('Placeholder.Input')"></el-input>
         </el-form-item>
       </el-form>
       <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
@@ -664,6 +561,7 @@
   import { pinyin } from 'pinyin-pro'
   import { useI18n } from 'vue-i18n'
   import { copyText } from '@/utils/untils'
+  import { Close } from '@element-plus/icons-vue'
 
   const { Code, Host85 } = Config
 

src/views/home2/Home.vue

@@ -8,7 +8,8 @@
         <el-row :gutter="10">
           <el-col :span="2">
             <div class="btn-control" @click="ChangeCollapse">
-              <i class="el-icon-s-fold iconfont"></i>
+              <el-icon v-show="!isCollapse"><Fold /></el-icon>
+              <el-icon v-show="isCollapse"><Expand /></el-icon>
             </div>
           </el-col>
           <el-col :span="22" class="tool-box">
@@ -88,7 +89,9 @@
               {{ $t('Home1.Time') }}
             </span>
             <span class="crm-cursor" @click="toReload">{{ time }}</span>
-            <i class="crm-cursor el-icon-refresh-right" @click="toReload"></i>
+            <el-icon class="crm-cursor el-icon-refresh-right" @click="toReload">
+              <RefreshRight />
+            </el-icon>
           </el-col>
         </el-row>
         <tab-menu></tab-menu>
@@ -188,7 +191,7 @@
   import { useRouter, useRoute } from 'vue-router'
   import { useStore } from 'vuex'
   import { ElMessage, ElMessageBox } from 'element-plus'
-  import { FullScreen, Refresh, ArrowDown } from '@element-plus/icons-vue'
+  import { FullScreen, Refresh, ArrowDown, RefreshRight } from '@element-plus/icons-vue'
   import axios from 'axios'
   import { useI18n } from 'vue-i18n'
 
@@ -276,7 +279,6 @@
   const initDisplay = () => {
     let display = {}
     const userData = safeGetUser(session)
-    console.log(userData, 'userData')
     if (userData && userData.display) {
       userData.display.forEach((item) => {
         item.children.forEach((item1) => {
@@ -646,15 +648,8 @@
         t('Msg.SystemPrompt'),
         t('Btn.Confirm'),
         t('Btn.Cancel'),
-        async function () {
-          let res = await Service.Logout({})
-          if (res.code == Code.StatusOK) {
-            sessionStorage.clear()
-            await router.push({ path: '/signin' })
-            store.commit('InfoExpire', false)
-          } else {
-            pigeon.MessageError(res.msg)
-          }
+        function () {
+          logout()
         },
         function () {
           store.commit('InfoExpire', false)