feature: 工具类，全局组件迁移

package.json

@@ -40,6 +40,7 @@
     "path-to-regexp": "^6.2.0",
     "pinia": "^2.0.21",
     "pinia-plugin-persistedstate": "^2.1.1",
+    "pinyin-pro": "^3.27.0",
     "print-js": "^1.6.0",
     "raf": "^3.4.1",
     "resize-observer-polyfill": "^1.5.1",

src/routers/modules/uCard.ts

@@ -87,7 +87,7 @@ const uCardRoute = {
     //     },
     //     path: 'virtual',
     //     name: 'R-VirtualCard',
-    //     component: () => import(/* webpackChunkName: "VirtualCard" */ '@/views/card/VirtualCard.vue'),
+    //     component: () => import(/* webpackChunkName: "VirtualCard" */ '@/views/card/index.vue'),
     //   },
     //   {
     //     meta: {

src/service/ucard.ts

@@ -20,6 +20,81 @@ class UCardService extends Service {
   async applyList(params = {}) {
     return await this.post('/wasabi/card/apply/page', params)
   }
+  // 银行卡下拉框
+  async cardNumberDropdown(params = {}) {
+    return await this.post('/wasabi/card/number/dropdown', params)
+  }
+  // 国家城市
+  async ucardCountryCity(params = {}) {
+    return await this.post('/wasabi/card/country', params)
+  }
+  // 银行卡激活
+  async ucardActivate(params = {}) {
+    return await this.post('/wasabi/card/activate', params)
+  }
+  // 冻结卡片
+  async ucardFreeze(params = {}) {
+    return await this.post('/wasabi/card/freeze', params)
+  }
+  // 解冻卡片
+  async ucardUnfreeze(params = {}) {
+    return await this.post('/wasabi/card/unfreeze', params)
+  }
+  // 银行卡充值
+  async ucardRecharge(params = {}) {
+    return await this.post('/wasabi/card/recharge', params)
+  }
+  // 银行卡扣款
+  async ucardRithdraw(params = {}) {
+    return await this.post('/wasabi/card/withdraw', params)
+  }
+  //获取卡片类型列表
+  async cardTypesList(params = {}) {
+    return await this.post('/wasabi/card/types/page', params)
+  }
+
+  // 开卡审批
+  async applyApprove(params = {}) {
+    return await this.post('/wasabi/card/apply/approve', params)
+  }
+  // 申请卡片更新地址
+  async addressUpdate(params = {}) {
+    return await this.post('/wasabi/merchant/user/address/update', params)
+  }
+
+  // 申请开卡
+  async ucardApply(params = {}) {
+    return await this.post('/wasabi/card/apply', params)
+  }
+  // 充值审批
+  async rechargeApprove(params = {}) {
+    return await this.post('/wasabi/card/recharge/approve', params)
+  }
+
+  // 找回密码
+  async ucardResetPassword(params = {}) {
+    return await this.post('/wasabi/card/password/reset', params)
+  }
+
+  // 提交KYC认证
+  async kycSubmit(params = {}) {
+    return await this.post('/wasabi/merchant/kyc/manual/submit', params)
+  }
+
+  // 卡片是否可用
+  async numberVerify(params = {}) {
+    return await this.post('/wasabi/card/number/verify', params)
+  }
+
+  // 获取激活卡
+  async getActivationCode(params = {}) {
+    return await this.post('/wasabi/get/activation/code', params)
+  }
+
+  // 调整余额
+  async balanceUpdate(params = {}) {
+    return await this.post('/wasabi/card/wallet/balance/update', params)
+  }
 }
 
 export default new UCardService()

src/utils/export.js

@@ -0,0 +1,43 @@
+import axios from 'axios'
+export function exportExcel(that, url, params, name = 'Download') {
+  axios
+    .post(url, { ...params }, { responseType: 'blob' })
+    .then((res) => {
+      try {
+        if (res.status == 200) {
+          if ('msSaveOrOpenBlob' in navigator) {
+            window.navigator.msSaveOrOpenBlob(res.data, name)
+          } else {
+            let url = window.URL.createObjectURL(res.data)
+            let a = document.createElement('a')
+            document.body.appendChild(a)
+            a.href = url
+            a.download = name + '_' + formatDate() + '.xlsx'
+            a.click()
+            window.URL.revokeObjectURL(url)
+          }
+        } else {
+          that.$pigeon.MessageError(that.$i18n.t('Msg.Download'))
+        }
+      } catch (error) {
+        that.$pigeon.MessageError(that.$i18n.t('Msg.Download'))
+      }
+    })
+    .catch(() => {
+      that.$pigeon.MessageError(that.$i18n.t('Msg.SystemError'))
+    })
+}
+function formatDate(date = new Date(), format = 'yyyyMMddHHmmss') {
+  const pad = (num) => String(num).padStart(2, '0')
+
+  const map = {
+    yyyy: date.getFullYear(),
+    MM: pad(date.getMonth() + 1),
+    dd: pad(date.getDate()),
+    HH: pad(date.getHours()),
+    mm: pad(date.getMinutes()),
+    ss: pad(date.getSeconds()),
+  }
+
+  return format.replace(/yyyy|MM|dd|HH|mm|ss/g, (key) => map[key])
+}

src/utils/exprotExcel.ts

@@ -1,279 +0,0 @@
-import ExcelJS from 'exceljs'
-const autoWidthAction = (val, width = 10) => {
-  if (val == null) {
-    width = 10
-  } else if (val.toString().charCodeAt(0) > 255) {
-    /*if chinese*/
-    width = val.toString().length * 2
-  } else {
-    width = val.toString().length
-  }
-  return width
-}
-export const exportExcel = async ({ column, data, filename, autoWidth, format }) => {
-  // 创建excel
-  const workbook = new ExcelJS.Workbook()
-  // 设置信息
-  workbook.creator = 'Me'
-  workbook.title = filename
-  workbook.created = new Date()
-  workbook.modified = new Date()
-  // 创建工作表
-  const worksheet = workbook.addWorksheet(filename)
-  // 设置列名
-  const columnsName = []
-  column.forEach((item, index) => {
-    const obj = {
-      header: item.label,
-      key: item.name,
-      width: null,
-    }
-    if (autoWidth) {
-      const maxArr = [autoWidthAction(item.label)]
-      data.forEach((ite) => {
-        const str = ite[item.name] || ''
-        if (str) {
-          maxArr.push(autoWidthAction(str))
-        }
-      })
-      obj.width = Math.max(...maxArr) + 5
-    }
-    // 设置列名、键和宽度
-    columnsName.push(obj)
-  })
-  worksheet.columns = columnsName
-  // 添加行
-  worksheet.addRows(data)
-  // 写入文件
-
-  const uint8Array =
-    format === 'xlsx' ? await workbook.xlsx.writeBuffer() : await workbook.csv.writeBuffer()
-
-  const blob = new Blob([uint8Array], { type: 'application/octet-binary' })
-  if (window.navigator.msSaveOrOpenBlob) {
-    // msSaveOrOpenBlob方法返回boolean值
-    navigator.msSaveBlob(blob, filename + `.${format}`)
-    // 本地保存
-  } else {
-    const link = document.createElement('a') // a标签下载
-    link.href = window.URL.createObjectURL(blob) // href属性指定下载链接
-    link.download = filename + `.${format}` // dowload属性指定文件名
-    link.click() // click()事件触发下载
-    window.URL.revokeObjectURL(link.href) // 释放内存
-  }
-}
-export function addCellStyle(cell, attr) {
-  const { color, fontSize, horizontal, bold } = attr || {}
-  // eslint-disable-next-line no-param-reassign
-  cell.fill = {
-    type: 'pattern',
-    pattern: 'solid',
-    fgColor: { argb: color },
-  }
-  // eslint-disable-next-line no-param-reassign
-  cell.font = {
-    bold: bold ?? true,
-    size: fontSize ?? 11,
-    // italic: true,
-    // name: '微软雅黑',
-    color: { argb: 'ff0000' },
-  }
-  // eslint-disable-next-line no-param-reassign
-  cell.alignment = { vertical: 'middle', wrapText: true, horizontal: horizontal ?? 'left' }
-}
-
-export const exportStyleExcel = async ({ column, data, filename, autoWidth, format }) => {
-  // 创建excel
-  const workbook = new ExcelJS.Workbook()
-  // 设置信息
-  workbook.creator = 'Me'
-  workbook.title = filename
-  workbook.created = new Date()
-  workbook.modified = new Date()
-  // 创建工作表
-  const worksheet = workbook.addWorksheet(filename)
-  // 设置列名
-  const columnsName = []
-  column.forEach((item, index) => {
-    const obj = {
-      header: item.label,
-      key: item.name,
-      width: null,
-    }
-    if (autoWidth) {
-      const maxArr = [autoWidthAction(item.label)]
-      data.forEach((ite) => {
-        const str = ite[item.name] || ''
-        if (str) {
-          maxArr.push(autoWidthAction(str))
-        }
-      })
-      obj.width = Math.max(...maxArr) + 5
-    }
-    // 设置列名、键和宽度
-    columnsName.push(obj)
-  })
-  worksheet.columns = columnsName
-  // 添加行
-  worksheet.addRows(data)
-  // 写入文件
-
-  // 设置表头颜色
-  // 给表头添加背景色。因为表头是第一行，可以通过 getRow(1) 来获取表头这一行
-  const headerRow = worksheet.getRow(1)
-  // 通过 cell 设置样式，更精准
-  headerRow.eachCell((cell) =>
-    addCellStyle(cell, { color: 'dff8ff', fontSize: 12, horizontal: 'left' })
-  )
-
-  const uint8Array =
-    format === 'xlsx' ? await workbook.xlsx.writeBuffer() : await workbook.csv.writeBuffer()
-
-  const blob = new Blob([uint8Array], { type: 'application/octet-binary' })
-  if (window.navigator.msSaveOrOpenBlob) {
-    // msSaveOrOpenBlob方法返回boolean值
-    navigator.msSaveBlob(blob, filename + `.${format}`)
-    // 本地保存
-  } else {
-    const link = document.createElement('a') // a标签下载
-    link.href = window.URL.createObjectURL(blob) // href属性指定下载链接
-    link.download = filename + `.${format}` // dowload属性指定文件名
-    link.click() // click()事件触发下载
-    window.URL.revokeObjectURL(link.href) // 释放内存
-  }
-}
-
-// 默认的列宽
-export const DEFAULT_COLUMN_WIDTH = 20
-
-function getColumnNumber(width: number) {
-  // 需要的列数，四舍五入
-  return Math.round(width / DEFAULT_COLUMN_WIDTH)
-}
-
-function addData(worksheet, headerKeys, headers, data) {}
-
-export const exportMultiHeaderExcel = ({ column, data, filename, autoWidth }) => {
-  // 创建excel
-  const workbook = new ExcelJS.Workbook()
-  // 创建工作表
-  const sheet = workbook.addWorksheet('sheet1')
-
-  // 添加表头
-  sheet.getRow(1).values = ['序号', '日期', '地址', '配送消息', , ,]
-  sheet.getRow(2).values = ['序号', '日期', '地址', '省份', '城市', '邮编']
-  const headers = []
-  column.forEach((item, index) => {
-    if (item.children) {
-      item.children.forEach((itemChild) => {
-        const obj = {
-          key: itemChild.name,
-          width: null,
-        }
-        const maxArr = [autoWidthAction(itemChild.label)]
-        data.forEach((ite) => {
-          const str = ite[itemChild.name] || ''
-          if (str) {
-            maxArr.push(autoWidthAction(str))
-          }
-        })
-        obj.width = Math.max(...maxArr) + 5
-        // 设置列名、键和宽度
-        headers.push(obj)
-      })
-    } else {
-      const obj = {
-        key: item.name,
-        width: null,
-      }
-      const maxArr = [autoWidthAction(item.label)]
-      data.forEach((ite) => {
-        const str = ite[item.name] || ''
-        if (str) {
-          maxArr.push(autoWidthAction(str))
-        }
-      })
-      obj.width = Math.max(...maxArr) + 5
-      // 设置列名、键和宽度
-      headers.push(obj)
-    }
-  })
-  sheet.columns = headers
-  sheet.addRows(data)
-
-  // 合并单元格
-  sheet.mergeCells(`D1:F1`)
-  sheet.mergeCells('A1:A2')
-  sheet.mergeCells('B1:B2')
-  sheet.mergeCells('C1:C2')
-  // 写入文件
-  workbook.xlsx.writeBuffer().then((data) => {
-    const blob = new Blob([data, { type: 'application/vnd.ms-excel' }])
-    if (window.navigator.msSaveOrOpenBlob) {
-      // msSaveOrOpenBlob方法返回boolean值
-      navigator.msSaveBlob(blob, filename + '.xlsx')
-      // 本地保存
-    } else {
-      const link = document.createElement('a') // a标签下载
-      link.href = window.URL.createObjectURL(blob) // href属性指定下载链接
-      link.download = filename + '.xlsx' // dowload属性指定文件名
-      link.click() // click()事件触发下载
-      window.URL.revokeObjectURL(link.href) // 释放内存
-    }
-  })
-}
-
-function mergeColumnCell(headers, rowHeader1, rowHeader2, nameRow1, nameRow2, worksheet) {
-  // 当前 index 的指针
-  let pointer = -1
-  nameRow1.forEach((name, index) => {
-    // 当 index 小于指针时，说明这一列已经被合并过了，不能再合并
-    if (index <= pointer) return
-    // 是否应该列合并
-    const shouldVerticalMerge = name === nameRow2[index]
-
-    // 是否应该行合并
-    const shouldHorizontalMerge = index !== nameRow1.lastIndexOf(name)
-
-    console.log(
-      '==',
-      name,
-      nameRow2[index],
-      index,
-      nameRow1.lastIndexOf(name),
-      shouldVerticalMerge,
-      shouldHorizontalMerge
-    )
-
-    pointer = nameRow1.lastIndexOf(name)
-    if (shouldVerticalMerge && shouldHorizontalMerge) {
-      // 两个方向都合并
-      worksheet.mergeCells(
-        Number(rowHeader1.number),
-        index + 1,
-        Number(rowHeader2.number),
-        nameRow1.lastIndexOf(name) + 1
-      )
-      console.log('==')
-    } else if (shouldVerticalMerge && !shouldHorizontalMerge) {
-      // 只在垂直方向上同一列的两行合并
-      worksheet.mergeCells(
-        Number(rowHeader1.number),
-        index + 1,
-        Number(rowHeader2.number),
-        index + 1
-      )
-    } else if (!shouldVerticalMerge && shouldHorizontalMerge) {
-      // 只有水平方向同一行的多列合并
-      worksheet.mergeCells(
-        Number(rowHeader1.number),
-        index + 1,
-        Number(rowHeader1.number),
-        nameRow1.lastIndexOf(name) + 1
-      )
-      // eslint-disable-next-line no-param-reassign
-      const cell = rowHeader1.getCell(index + 1)
-      cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true }
-    }
-  })
-}

src/utils/untils.ts

@@ -0,0 +1,25 @@
+/**
+ * 复制文本到剪切板
+ * @param {String} text - 复制的文本
+ */
+export function copyText(text = '') {
+  if (navigator.clipboard) {
+    // clipboard api 复制
+    navigator.clipboard.writeText(text)
+  } else {
+    const textarea = document.createElement('textarea')
+    document.body.appendChild(textarea)
+    // 隐藏此输入框
+    textarea.style.position = 'fixed'
+    textarea.style.clip = 'rect(0 0 0 0)'
+    textarea.style.top = '10px'
+    // 赋值
+    textarea.value = text
+    // 选中
+    textarea.select()
+    // 复制
+    document.execCommand('copy', true)
+    // 移除输入框
+    document.body.removeChild(textarea)
+  }
+}

src/views/card/CardOrder/index.vue

@@ -335,7 +335,7 @@
     >
     </ViewCardSingle>
     <div v-if="dialogInfoTradingSingle" class="crm_verified_info_mask" @click="closeSingle"></div>
-    <trading-info-add
+    <VirtualCard
       :dialog-info-trading-add="dialogInfoTradingAdd"
       :editor="editor"
       :add-type="addType"
@@ -343,7 +343,7 @@
       :form-list="formList"
       @confirm-to-reload="confirmToReload"
       @close-add="closeAdd"
-    ></trading-info-add>
+    ></VirtualCard>
     <div v-if="dialogInfoTradingAdd" class="crm_verified_info_mask" @click="closeDiaAdd"></div>
   </div>
 </template>
@@ -355,10 +355,10 @@
   import Config from '@/config/index'
   import Service1 from '@/service/customer'
   import Service2 from '@/service/apply'
-  import DetailedInfoCid from '@/views/global/DetailedInfoCid'
-  import TradingInfoAdd from '@/views/global/VirtualCard'
-  import ViewCardSingle from '@/views/global/ViewCardSingle'
-  import { exportExcel } from '@/utils/export'
+  import DetailedInfoCid from '@/views/components/DetailedInfoCid/index.vue'
+  import VirtualCard from '@/views/components/VirtualCard/index.vue'
+  import ViewCardSingle from '@/views/global/ViewCardSingle/index.vue'
+  import { exportExcel } from '@/utils/export.js'
   // 混入
   const Session = inject('session')
   const { Code } = Config

src/views/components/ViewCardSingle/index.scss

@@ -0,0 +1,182 @@
+#TradingDetailedInfoAdd.InfoBox {
+  background: #fff;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+  width: 650px !important;
+  top: 50%;
+  right: 50% !important;
+  transform: translate(0%, -50%) !important;
+  height: 900px !important;
+  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
+  transition: none !important;
+  opacity: 0;
+  visibility: hidden;
+}
+#TradingDetailedInfoAdd.InfoBox.active {
+  right: 50% !important;
+  transform: translate(50%, -50%) !important;
+  opacity: 1;
+  visibility: visible;
+}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px 16px 24px;
+  border-bottom: 1px solid #f0f0f0;
+  .title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #222;
+  }
+  .close {
+    font-size: 20px;
+    color: #999;
+    transition: color 0.2s;
+    &:hover {
+      color: #409eff;
+    }
+  }
+}
+.detail-content {
+  padding: 24px 24px 0 24px;
+  .detail-item {
+    display: flex;
+    align-items: flex-start;
+    padding: 12px 0;
+    &:last-child {
+      border-bottom: none;
+    }
+    .label {
+      width: 110px;
+      min-width: 90px;
+      color: #888;
+      font-size: 14px;
+      font-weight: 500;
+      text-align: right;
+      padding-right: 12px;
+      line-height: 1.6;
+      flex-shrink: 0;
+    }
+    .value {
+      flex: 1;
+      color: #222;
+      font-size: 15px;
+      word-break: break-all;
+      text-align: left;
+      line-height: 1.6;
+      margin-left: 10px;
+      img {
+        width: 150px;
+        height: auto;
+      }
+    }
+  }
+}
+.dialog-footer {
+  padding: 20px 24px;
+  text-align: center;
+  .el-button {
+    width: 120px;
+    font-size: 15px;
+    border-radius: 6px;
+    font-weight: 500;
+    letter-spacing: 2px;
+  }
+}
+@media (max-width: 500px) {
+  .InfoBox {
+    max-width: 100vw;
+    min-width: 0;
+    margin: 0;
+    border-radius: 0;
+  }
+  .header,
+  .detail-content,
+  .dialog-footer {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+.imgs {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .el-upload-list__item-actions {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+.dispute-submit-container {
+  padding: 20px;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: #303133;
+}
+
+.section-divider {
+  margin: 30px 0 15px;
+  border-top: 1px solid #ebeef5;
+  padding-top: 15px;
+}
+
+.subsection-title {
+  font-size: 16px;
+  color: #606266;
+  margin-bottom: 10px;
+}
+
+.form-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 15px;
+}
+
+.note {
+  font-size: 12px;
+  color: #909399;
+  margin-left: 10px;
+}
+
+.info-item,
+.file-item {
+  position: relative;
+  padding: 20px;
+  margin-bottom: 15px;
+  border: 1px dashed #e4e7ed;
+  border-radius: 4px;
+}
+
+.remove-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.add-btn-container {
+  margin-bottom: 20px;
+}
+
+.upload-file {
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
+}
+
+.upload-file .el-upload {
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
+}
+
+.form-actions {
+  margin-top: 30px;
+}

src/views/components/ViewCardSingle/index.vue

@@ -0,0 +1,524 @@
+<template>
+  <div class="InfoBox" id="TradingDetailedInfoAdd" :class="{ active: dialogInfoTradingSingle }">
+    <div class="header">
+      <div>
+        <span class="title">{{ $t('R-Popup-Single') }}</span>
+      </div>
+      <span class="close crm-cursor" @click="close"><i class="el-icon-close"></i></span>
+    </div>
+    <template v-if="editorType == 1">
+      <div class="detail-content">
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.CidAccount') }}:</span>
+          <span class="value">{{ formList.cId || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.Name') }}:</span>
+          <span class="value">
+            <span v-if="formList.firstName">{{ formList.firstName + ' ' }}</span>
+            <span v-if="formList.middle">{{ formList.middle + ' ' }}</span>
+            <span v-if="formList.lastName">{{ formList.lastName }}</span>
+            <span v-if="!formList.firstName && !formList.lastName && !formList.middle">--</span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.Email') }}:</span>
+          <span class="value">{{ formList.email || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('card.New1.d13') }}:</span>
+          <span class="value">{{ formList.mailingAreaCode }} {{ formList.mailingMobile }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('card.New1.d8') }}:</span>
+          <span class="value">{{ formList.mailingCountry || '--' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('card.New1.d9') }}:</span>
+          <span class="value">{{ formList.mailingTown || '--' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('card.New1.d10') }}:</span>
+          <span class="value">{{ formList.mailingAddressCn || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('card.New1.d11') }}:</span>
+          <span class="value">{{ formList.mailingAddress || '--' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('card.New1.d12') }}:</span>
+          <span class="value">{{ formList.mailingPostCode || '--' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.KycAuth.item1') }}:</span>
+          <span class="value">
+            {{ formList.type }}
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label"> {{ $t('card.Form.f49') }}:</span>
+          <span class="value">
+            {{ formList.cardName }}
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.CardOrder.item5') }}:</span>
+          <span class="value">
+            <span v-if="formList.status === 'success'">{{ $t('Ucard.CardOrder.t6') }}</span>
+            <span v-else-if="formList.status === 'fail'">{{ $t('card.Status.t7') }}</span>
+            <span v-else>{{ $t('Ucard.CardOrder.t5') }}</span>
+          </span>
+        </div>
+      </div>
+    </template>
+    <template v-if="editorType == 2">
+      <div class="detail-content">
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.CidAccount') }}:</span>
+          <span class="value">{{ formList.cId || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.Name') }}:</span>
+          <span class="value">
+            <span v-if="formList.firstName">{{ formList.firstName + ' ' }}</span>
+            <span v-if="formList.middle">{{ formList.middle + ' ' }}</span>
+            <span v-if="formList.lastName">{{ formList.lastName }}</span>
+            <span v-if="!formList.firstName && !formList.lastName && !formList.middle">--</span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.Email') }}:</span>
+          <span class="value">{{ formList.email || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.KycAuth.item2') }}:</span>
+          <span class="value">{{ formList.areaCode }} {{ formList.mobile }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.CardOrder.item5') }}:</span>
+          <span class="value">
+            <span v-if="formList.status === -1">{{ $t('Ucard.KycAuth.t5') }}</span>
+            <span v-if="formList.status === 1">{{ $t('Ucard.KycAuth.t6') }}</span>
+            <span v-if="formList.status === 2">{{ $t('Ucard.KycAuth.t7') }}</span>
+            <span v-if="formList.status === 3">{{ $t('Ucard.KycAuth.t8') }}</span>
+          </span>
+        </div>
+      </div>
+    </template>
+    <template v-if="editorType == 3">
+      <div class="detail-content">
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.CidAccount') }}:</span>
+          <span class="value">{{ formList.cId || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.Name') }}:</span>
+          <span class="value">
+            <span v-if="formList.firstName">{{ formList.firstName + ' ' }}</span>
+            <span v-if="formList.middle">{{ formList.middle + ' ' }}</span>
+            <span v-if="formList.lastName">{{ formList.lastName }}</span>
+            <span v-if="!formList.firstName && !formList.lastName && !formList.middle">--</span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.Email') }}:</span>
+          <span class="value">{{ formList.email || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.KycAuth.item2') }}:</span>
+          <span class="value">{{ formList.areaCode }} {{ formList.mobile }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Recharge.item2') }}:</span>
+          <span class="value">{{ formList.cardNumber || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Recharge.item3') }}:</span>
+          <span class="value">{{ formList.currency || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Recharge.item4') }}:</span>
+          <span class="value">{{ formList.amount || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Recharge.item5') }}:</span>
+          <span class="value">{{ formList.fee || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Recharge.item6') }}:</span>
+          <span class="value">{{ formList.receivedAmount || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Recharge.item7') }}:</span>
+          <span class="value">{{ formList.receivedCurrency || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Recharge.item9') }}:</span>
+          <span class="value">{{ formList.addTime || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Recharge.item10') }}:</span>
+          <span class="value">
+            <span v-if="formList.status === 'success'">{{ $t('Ucard.Recharge.t1') }}</span>
+            <span v-else-if="formList.status === 'fail'">{{ $t('Ucard.Recharge.t2') }}</span>
+            <span v-else>{{ $t('Ucard.Recharge.t3') }}</span>
+          </span>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="editorType == 4">
+      <div class="detail-content">
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.CidAccount') }}:</span>
+          <span class="value">{{ formList.cId || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.Name') }}:</span>
+          <span class="value">
+            <span v-if="formList.firstName">{{ formList.firstName + ' ' }}</span>
+            <span v-if="formList.middle">{{ formList.middle + ' ' }}</span>
+            <span v-if="formList.lastName">{{ formList.lastName }}</span>
+            <span v-if="!formList.firstName && !formList.lastName && !formList.middle">--</span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.Email') }}:</span>
+          <span class="value">{{ formList.email || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.KycAuth.item2') }}:</span>
+          <span class="value">{{ formList.areaCode }} {{ formList.mobile }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Transactions.item2') }}:</span>
+          <span class="value">{{ formList.cardNumber || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Transactions.item3') }}:</span>
+          <span class="value">{{ formList.currency || 'USD' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Transactions.item4') }}:</span>
+          <span class="value">{{ formList.amount || '0' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Transactions.item5') }}:</span>
+          <span class="value">{{ formList.fee || '0' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Transactions.item8') }}:</span>
+          <span class="value">{{ formList.tradeNo || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Transactions.item9') }}:</span>
+          <span class="value">
+            <span v-if="formList.type === 'auth'">{{ $t('Ucard.Transactions.t1') }}</span>
+            <span v-else-if="formList.type === 'refund'">{{ $t('Ucard.Transactions.t2') }}</span>
+            <span v-else-if="formList.type === 'verification'">{{
+              $t('Ucard.Transactions.t3')
+            }}</span>
+            <span v-else-if="formList.type === 'auth'">{{ $t('Ucard.Transactions.t4') }}</span>
+            <span v-else-if="formList.type === 'withdraw'">{{ $t('R-VirtualCard-Btn11') }}</span>
+            <span v-else-if="formList.type === 'maintain_fee'">{{
+              $t('Ucard.Transactions.t5')
+            }}</span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Transactions.item11') }}:</span>
+          <span class="value">
+            <span v-if="formList.status === 'succeed' || formList.status === 'success'">{{
+              $t('Ucard.Transactions.t18')
+            }}</span>
+            <span v-else-if="formList.status === 'failed' || formList.status === 'fail'">{{
+              $t('Ucard.Transactions.t25')
+            }}</span>
+            <span v-else-if="formList.status === 'processing'">{{ $t('card.Status.t3') }}</span>
+            <span v-else-if="formList.status === 'wait_process'">{{ $t('card.Status.t5') }}</span>
+            <span v-else>{{ $t('Ucard.Transactions.t24') }}</span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Transactions.item13') }}:</span>
+          <span class="value">
+            <span> {{ formList.description || '--' }}</span>
+          </span>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="editorType == 5">
+      <div class="detail-content">
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.CidAccount') }}:</span>
+          <span class="value">{{ formList.cId || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.Name') }}:</span>
+          <span class="value">
+            <span v-if="formList.firstName">{{ formList.firstName + ' ' }}</span>
+            <span v-if="formList.middle">{{ formList.middle + ' ' }}</span>
+            <span v-if="formList.lastName">{{ formList.lastName }}</span>
+            <span v-if="!formList.firstName && !formList.lastName && !formList.middle">--</span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Label.Email') }}:</span>
+          <span class="value">{{ formList.email || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.KycAuth.item2') }}:</span>
+          <span class="value">{{ formList.areaCode }} {{ formList.mobile }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.VirtualCard.item2') }}:</span>
+          <span class="value">{{ formList.cardNumber || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.VirtualCard.item7') }}:</span>
+          <span class="value">{{ formList.uniqueId || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.VirtualCard.item3') }}:</span>
+          <span class="value">{{ formList.expireDate || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.VirtualCard.item4') }}:</span>
+          <span class="value">{{ formList.cvv || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.KycAuth.item1') }}:</span>
+          <span class="value">
+            <span>{{ formList.type }}</span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.VirtualCard.item5') }}:</span>
+          <span class="value">
+            <span v-if="formList.status === 'unactivate'">{{ $t('Ucard.VirtualCard.t9') }}</span>
+            <span v-else-if="formList.status === 'success'">{{ $t('Ucard.VirtualCard.t6') }}</span>
+            <span v-else-if="formList.status === 'fail'">{{ $t('Msg.Fail') }}</span>
+            <span v-else>{{ $t('Ucard.VirtualCard.t5') }}</span>
+
+            <span v-if="formList.status === 2">{{ $t('Ucard.VirtualCard.t10') }}</span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.VirtualCard.item6') }}:</span>
+          <span class="value">
+            <template v-if="formList.freezeType == 1">
+              <span v-if="formList.freezeStatus == 'success'">{{
+                $t('Ucard.VirtualCard.t7')
+              }}</span>
+              <span v-else>{{ $t('Ucard.VirtualCard.t13') }}</span>
+            </template>
+            <template v-else>
+              <span v-if="formList.freezeStatus == 'success'">{{
+                $t('Ucard.VirtualCard.t8')
+              }}</span>
+              <span v-else>{{ $t('Ucard.VirtualCard.t12') }}</span>
+            </template>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('card.New2.p1') }}:</span>
+          <span class="value">
+            <span v-if="formList.blocked">{{ $t('Yes') }}</span>
+            <span v-else>{{ $t('No') }}</span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('card.New2.p2') }}:</span>
+          <span class="value">
+            <span v-if="formList.cardStatus == 'cancel'">{{ $t('Yes') }}</span>
+            <span v-else>{{ $t('No') }}</span>
+          </span>
+        </div>
+      </div>
+    </template>
+    <template v-if="editorType == 6">
+      <div class="detail-content">
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item1') }}:</span>
+          <span class="value">
+            <span
+              v-if="formList.cId"
+              class="crm-text-underline"
+              style="cursor: pointer"
+              @click="accountOpen(formList.cId)"
+              >{{ formList.cId }}</span
+            >
+            <span v-else>--</span>
+          </span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item5') }}:</span>
+          <span class="value"> {{ formList.lastName }}{{ formList.firstName }} </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item21') }}:</span>
+          <span class="value">$ {{ formList.balance || 0 }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item4') }}:</span>
+          <span class="value">{{ formList.email || '--' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item3') }}:</span>
+          <span class="value">{{ formList.areaCode }} {{ formList.mobile }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item7') }}:</span>
+          <span class="value">{{ formList.birthday || '--' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item9') }}:</span>
+          <span class="value">
+            <span v-if="formList.gender === 'M'">{{ $t('Ucard.Business.t1') }}</span>
+            <span v-else-if="formList.gender === 'F'">{{ $t('Ucard.Business.t2') }}</span>
+            <span v-else>--</span>
+          </span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item8') }}:</span>
+          <span class="value">{{ formList.countryEnName || '--' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item11') }}:</span>
+          <span class="value">{{ formList.townEnName || '--' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item12') }}:</span>
+          <span class="value">{{ formList.address || '--' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item13') }}:</span>
+          <span class="value">{{ formList.postCode || '--' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('card.Form.f12') }}:</span>
+          <span class="value">{{ formList.occupationDesc || '--' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item14') }}:</span>
+          <span class="value">{{ idType }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item15') }}:</span>
+          <span class="value">{{ formList.idNumber || '--' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item16') }}:</span>
+          <span class="value">{{ formList.idNoExpiryDate || '--' }}</span>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item17') }}:</span>
+          <div class="value">
+            <img v-if="formList.idFrontUrl" :src="imgUrl + formList.idFrontUrl" alt="" />
+            <span v-else>--</span>
+          </div>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item18') }}:</span>
+          <div class="value">
+            <img v-if="formList.idBackUrl" :src="imgUrl + formList.idBackUrl" alt="" />
+            <span v-else>--</span>
+          </div>
+        </div>
+
+        <div class="detail-item">
+          <span class="label">{{ $t('Ucard.Business.item18') }}:</span>
+          <div class="value">
+            <img v-if="formList.idHoldUrl" :src="imgUrl + formList.idHoldUrl" alt="" />
+            <span v-else>--</span>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div class="dialog-footer">
+      <el-button @click="close">{{ $t('Btn.Cancel') }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  /* eslint-disable no-console */
+  import Config from '@/config/index'
+  import { ref, defineProps, defineEmits, computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  const { t } = useI18n()
+
+  const props = defineProps({
+    dialogInfoTradingSingle: {
+      type: Boolean,
+      default: false,
+    },
+    addType: {
+      default: '',
+    },
+    editorType: {
+      default: 1,
+    },
+    myInfo: {
+      default: '',
+    },
+    formList: {
+      default: '',
+    },
+  })
+
+  //
+  const idType = computed(() => {
+    const { formList } = props
+    let type = ''
+    switch (formList.idType) {
+      case 'HK_HKID':
+        type = t('card.Form.v3')
+        break
+      case 'PASSPORT':
+        type = t('card.Form.v4')
+        break
+      case 'DLN':
+        type = t('card.Form.v5')
+        break
+      case 'GOVERNMENT_ISSUED_ID_CARD':
+        type = t('card.Form.v6')
+        break
+      default:
+        return ''
+    }
+    return type
+  })
+
+  const emit = defineEmits(['closeSingle'])
+
+  const form = ref({})
+  const imgUrl = ref(Config.Host85)
+
+  const close = () => {
+    emit('closeSingle', false)
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import 'index.scss';
+</style>

src/views/components/VirtualCard/index.vue

@@ -0,0 +1,1414 @@
+<template>
+  <div class="InfoBox" id="TradingDetailedInfoAdd" :class="{ active: dialogInfoTradingAdd }">
+    <div class="header">
+      <div v-if="addType == '1'">
+        <span class="title">{{ $t('Ucard.VirtualCard.d1') }}</span>
+      </div>
+      <div v-if="addType == '2'">
+        <span class="title">{{ $t('Ucard.VirtualCard.d2') }}</span>
+      </div>
+      <div v-if="addType == '3'">
+        <span class="title">{{ $t('Ucard.VirtualCard.d3') }}</span>
+      </div>
+      <div v-if="addType == '4'">
+        <span class="title">{{ $t('R-CardOrder-Btn3') }}</span>
+      </div>
+      <div v-if="addType == '5'">
+        <span class="title">{{ $t('R-KycAuth-Btn1') }}</span>
+      </div>
+      <div v-if="addType == '6'">
+        <span class="title">{{ $t('Ucard.VirtualCard.d6') }}</span>
+      </div>
+      <div v-if="addType == '7'">
+        <span class="title">{{ $t('R-VirtualCard-Btn6') }}</span>
+      </div>
+      <div v-if="addType == '8'">
+        <span class="title">{{ $t('R-VirtualCard-Btn7') }}</span>
+      </div>
+      <div v-if="addType == '9'">
+        <span class="title">{{ $t('R-VirtualCard-Btn3') }}</span>
+      </div>
+      <div v-if="addType == '10'">
+        <span class="title">{{ $t('R-Business-Btn1') }}</span>
+      </div>
+      <div v-if="addType == '11'">
+        <span class="title">{{ $t('R-Recharge-Btn3') }}</span>
+      </div>
+      <div v-if="addType == '12'">
+        <span class="title">{{ $t('Ucard.KycAuth.b3') }}</span>
+      </div>
+      <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>
+    </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"
+            :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-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-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-form-item>
+      </el-form>
+      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
+    </template>
+    <template v-if="addType == '2'">
+      <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-form-item>
+        <el-form-item prop="lastName" :label="$t('Ucard.KycAuth.item4') + '：'">
+          <el-input
+            disabled
+            size="small"
+            v-model="form.lastName"
+            :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"
+            :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"
+            :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-form-item>
+
+        <el-form-item prop="cardNumber" :label="$t('Ucard.VirtualCard.item2') + '：'">
+          <el-input
+            disabled
+            size="small"
+            v-model="form.cardNumber"
+            :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-form-item>
+      </el-form>
+      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
+    </template>
+
+    <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-option
+              v-for="(item, index) in currencyList"
+              :key="index"
+              :value="item.currency"
+              :label="item.currency"
+            ></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-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-item :label="$t('Ucard.Recharge.item7') + '：'">
+          {{ received.receivedCurrency }}
+        </el-form-item>
+        <el-form-item :label="$t('Ucard.Recharge.item6') + '：'">
+          {{ received.receivedAmount }}
+        </el-form-item>
+        <el-form-item :label="$t('Ucard.Recharge.item8') + '：'">
+          {{ received.exchangeRate }}
+        </el-form-item>
+      </el-form>
+      <span class="btn crm-cursor" @click="close" v-if="isOk">{{
+        $t('Ucard.VirtualCard.b10')
+      }}</span>
+    </template>
+
+    <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-form-item>
+        <el-form-item :label="$t('Ucard.KycAuth.item9') + '：'">
+          <el-input
+            disabled
+            size="small"
+            v-model="form.lastName"
+            style="width: 45%; display: inline-block"
+          ></el-input>
+          <el-input
+            disabled
+            size="small"
+            v-model="form.firstName"
+            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-form-item>
+        <el-form-item :label="$t('Ucard.KycAuth.item11') + '：'">
+          <el-input disabled size="small" v-model="form.mobile" 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"
+            :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-select
+            filterable
+            class="crm_search_down"
+            size="small"
+            v-model="form.approveDesc"
+            :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>
+        <el-form-item
+          prop="cardTypeId"
+          v-if="form.status == 2"
+          :label="$t('Ucard.KycAuth.item1') + '：'"
+        >
+          <el-select
+            size="small"
+            v-model="form.cardTypeId"
+            @change="changeCardType"
+            :placeholder="$t('Placeholder.Choose')"
+          >
+            <el-option
+              v-for="(item, index) in cardType"
+              :key="index"
+              :value="item.cardTypeId"
+              :label="item.cardName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          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-option
+              v-for="(item, index) in cardNumbersList"
+              :key="index"
+              :value="item.cardNumber"
+              :label="item.cardNumber"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
+    </template>
+
+    <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-form-item>
+        <el-form-item :label="$t('Ucard.KycAuth.item9') + '：'">
+          <el-input
+            disabled
+            size="small"
+            v-model="form.lastName"
+            style="width: 45%; display: inline-block"
+          ></el-input>
+          <el-input
+            disabled
+            size="small"
+            v-model="form.firstName"
+            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-form-item>
+        <el-form-item :label="$t('Ucard.KycAuth.item11') + '：'">
+          <el-input disabled size="small" v-model="form.mobile" 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"
+            :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-select
+            filterable
+            class="crm_search_down"
+            size="small"
+            v-model="form.approveDesc"
+            :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>
+      </el-form>
+      <span class="btn crm-cursor" @click="confirm">{{ $t('Ucard.VirtualCard.b9') }}</span>
+    </template>
+
+    <template v-if="addType == '6'">
+      <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"
+            :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-form-item>
+      </el-form>
+      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
+    </template>
+
+    <template v-if="addType == '7' || addType == '8'">
+      <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"
+            :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-form-item>
+      </el-form>
+      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
+    </template>
+
+    <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-form-item>
+      </el-form>
+      <span class="btn crm-cursor" @click="confirm">{{ $t('card.Form.f62') }}</span>
+    </template>
+
+    <template v-if="addType == '10'">
+      <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-form-item>
+        <el-form-item prop="lastName" :label="$t('Ucard.KycAuth.item4') + '：'">
+          <el-input
+            disabled
+            size="small"
+            v-model="form.lastName"
+            :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"
+            :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"
+            :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-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-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-form-item>
+      </el-form>
+      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
+    </template>
+
+    <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-form-item>
+        <el-form-item :label="$t('Ucard.KycAuth.item9') + '：'">
+          <el-input
+            disabled
+            size="small"
+            v-model="form.lastName"
+            style="width: 45%; display: inline-block"
+          ></el-input>
+          <el-input
+            disabled
+            size="small"
+            v-model="form.firstName"
+            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-form-item>
+        <el-form-item :label="$t('Ucard.KycAuth.item11') + '：'">
+          <el-input disabled size="small" v-model="form.mobile" 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"
+            :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-select
+            filterable
+            class="crm_search_down"
+            size="small"
+            v-model="form.approveDesc"
+            :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>
+      </el-form>
+      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
+    </template>
+
+    <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-form-item>
+        <el-form-item :label="$t('Ucard.KycAuth.item9') + '：'">
+          <el-input
+            disabled
+            size="small"
+            v-model="form.lastName"
+            style="width: 45%; display: inline-block"
+          ></el-input>
+          <el-input
+            disabled
+            size="small"
+            v-model="form.firstName"
+            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-form-item>
+        <el-form-item :label="$t('Ucard.KycAuth.item11') + '：'">
+          <el-input disabled size="small" v-model="form.mobile" 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')"
+          >
+            <el-option
+              v-for="(item, index) in cardType"
+              :key="index"
+              :value="item.cardTypeId"
+              :label="item.cardName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="nationality" :label="$t('card.Form.f7')">
+          <el-select v-model="form.nationality" filterable :placeholder="$t('card.vaildate.v6')">
+            <el-option
+              v-for="item in countryCityList"
+              :key="item.id"
+              :label="item.cnName"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="town" :label="$t('card.Form.f9')">
+          <el-select
+            v-model="form.town"
+            filterable
+            :placeholder="$t('card.vaildate.v7')"
+            :disabled="!form.nationality"
+          >
+            <el-option
+              v-for="item in cityList"
+              :key="item.id"
+              :label="item.enName"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="addressCn" :label="$t('card.Form.f10')">
+          <el-input
+            v-model="form.addressCn"
+            @change="setAddress"
+            :placeholder="$t('card.vaildate.v27')"
+          />
+        </el-form-item>
+        <el-form-item prop="address" :label="$t('card.New.n11')">
+          <el-input v-model="form.address" :placeholder="$t('card.vaildate.v27')" />
+        </el-form-item>
+        <el-form-item prop="postCode" :label="$t('card.Form.f11')">
+          <el-input v-model="form.postCode" :placeholder="$t('card.vaildate.v8')" />
+        </el-form-item>
+      </el-form>
+      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
+    </template>
+
+    <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-form-item>
+        <el-form-item prop="lastName" :label="$t('Ucard.KycAuth.item4') + '：'">
+          <el-input
+            disabled
+            size="small"
+            v-model="form.lastName"
+            :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"
+            :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"
+            :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-form-item>
+
+        <el-form-item prop="cardNumber" :label="$t('Ucard.VirtualCard.item2') + '：'">
+          <el-input
+            disabled
+            size="small"
+            v-model="form.cardNumber"
+            :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-form-item>
+      </el-form>
+      <span class="btn crm-cursor" @click="confirm">{{ $t('Btn.Confirm') }}</span>
+    </template>
+  </div>
+</template>
+
+<script setup>
+  import { ref, reactive, computed, watch, onMounted } from 'vue'
+  import { ElMessageBox } from 'element-plus'
+  import Config from '@/config'
+  import Service from '@/service/ucard'
+  import Service2 from '@/service/apply'
+  import { pinyin } from 'pinyin-pro'
+  import { useI18n } from 'vue-i18n'
+  import { copyText } from '@/utils/untils'
+
+  const { Code, Host85 } = Config
+
+  const Session = inject('session')
+  const Pigeon = inject('pigeon')
+  const { t } = useI18n()
+  // Props
+  const props = defineProps({
+    dialogInfoTradingAdd: {
+      type: Boolean,
+      default: false,
+    },
+    addType: {
+      default: '',
+    },
+    editor: {
+      default: '',
+    },
+    myInfo: {
+      default: '',
+    },
+    formList: {
+      default: '',
+    },
+  })
+
+  // Emits
+  const emit = defineEmits(['closeAdd', 'confirmToReload'])
+
+  // 响应式数据
+  const form = ref({})
+  const formRef = ref()
+  const receivedRef = ref()
+  const cardType = ref([])
+  const cardTypes = ref(false)
+  const isOk = ref(false)
+  const currencyList = ref([])
+  const imgUrl = ref(Host85)
+  const pagerInfo = reactive({ row: 10, current: 1, pageTotal: 0, rowTotal: 0 })
+  const received = reactive({ receivedCurrency: '', receivedAmount: '', exchangeRate: '' })
+  const activationCode = ref('')
+  const reasons = ref([])
+  const countryCityList = ref([])
+  const cityList = ref([])
+  const cardNumbersList = ref([])
+
+  // 计算属性
+  const AccessToken = computed(() => ({
+    'Access-Token': sessionStorage.getItem('access_token'),
+  }))
+
+  const user = computed(() => {
+    try {
+      return JSON.parse(Session.Get('user', true) || '{}')
+    } catch (error) {
+      console.error('Error parsing user data:', error)
+      return {}
+    }
+  })
+
+  // 验证规则
+  const rules = reactive({
+    signaturePhoto: [
+      {
+        required: true,
+        message: t('vaildate.img.empty'),
+        trigger: 'change',
+      },
+    ],
+    currency: [
+      {
+        required: true,
+        message: t('Placeholder.Choose'),
+        trigger: 'change',
+      },
+    ],
+    cardNumber: [
+      {
+        required: true,
+        message: t('Placeholder.Input'),
+        trigger: 'blur',
+      },
+    ],
+    activeCode: [
+      {
+        validator: (rule, value, callback) => {
+          if (/^\d*$/.test(value)) {
+            callback()
+          } else {
+            callback(new Error(t('card.vaildate.v24')))
+          }
+        },
+        trigger: 'blur',
+        required: true,
+      },
+    ],
+    pin: [
+      {
+        required: true,
+        message: t('Placeholder.Input'),
+        trigger: 'blur',
+      },
+    ],
+    uniqueId: [
+      {
+        required: true,
+        message: t('Placeholder.Input'),
+        trigger: 'blur',
+      },
+    ],
+    amount: [
+      {
+        required: true,
+        message: t('Placeholder.Input'),
+        trigger: 'blur',
+      },
+    ],
+    cardTypeId: [
+      {
+        required: true,
+        message: t('vaildate.select.empty'),
+        trigger: 'blur',
+      },
+    ],
+    cardNo: [
+      {
+        required: true,
+        message: t('Placeholder.Input'),
+        trigger: 'blur',
+      },
+    ],
+    status: [
+      {
+        required: true,
+        message: t('vaildate.select.empty'),
+        trigger: 'blur',
+      },
+    ],
+    type: [
+      {
+        required: true,
+        message: t('vaildate.select.empty'),
+        trigger: 'blur',
+      },
+    ],
+    approveStatus: [
+      {
+        required: true,
+        message: t('vaildate.select.empty'),
+        trigger: 'blur',
+      },
+    ],
+    approveDesc: [
+      {
+        required: true,
+        message: t('vaildate.select.empty'),
+        trigger: 'blur',
+      },
+    ],
+    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',
+      },
+    ],
+    postCode: [
+      {
+        required: true,
+        message: t('card.vaildate.v8'),
+        trigger: 'blur',
+      },
+      {
+        validator: (rule, value, callback) => {
+          const regex = /^[a-zA-Z0-9]{1,15}$/
+          if (!regex.test(value)) {
+            callback(new Error(t('card.New.n2')))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur',
+      },
+    ],
+  })
+
+  // 方法
+  const getCountryListForSelect = async () => {
+    const res = await Service.ucardCountryCity({ code: '' })
+    if (res.code === 200) {
+      countryCityList.value = res.data || []
+    }
+  }
+
+  const cardNumberList = async () => {
+    const res = await Service.cardNumberDropdown({ status: 1 })
+    if (res.code === 200) {
+      cardNumbersList.value = res.data || []
+    }
+  }
+
+  const getCityListForSelect = async (countryCode) => {
+    const res = await Service.ucardCountryCity({ code: countryCode })
+    if (res.code === 200) {
+      cityList.value = res.data || []
+    }
+  }
+
+  const setAddress = (e) => {
+    const containsChinese = (str) => /[\u4e00-\u9fa5]/.test(str)
+    if (containsChinese(e)) {
+      form.value.address = formatText(e)
+    } else {
+      form.value.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 ucardActivate = async () => {
+    const res = await Service.ucardActivate({
+      ...form.value,
+      cId: user.value.cId,
+    })
+    if (res.code == Code.StatusOK) {
+      Pigeon.MessageOK(t('Msg.Success1'))
+      confirmToReload()
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  // 冻结卡片
+  const ucardFreeze = async () => {
+    const res = await Service.ucardFreeze({ ...form.value, cId: user.value.cId })
+    if (res.code == Code.StatusOK) {
+      Pigeon.MessageOK(t('Msg.Success4'))
+      confirmToReload()
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  // 解冻卡片
+  const ucardUnfreeze = async () => {
+    const res = await Service.ucardUnfreeze({
+      ...form.value,
+      cId: user.value.cId,
+    })
+    if (res.code == Code.StatusOK) {
+      Pigeon.MessageOK(t('Msg.Success5'))
+      confirmToReload()
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  // 银行卡充值
+  const ucardRecharge = async () => {
+    form.value.amount = Number(form.value.amount)
+    if (form.value.amount <= 0) {
+      Pigeon.MessageError(t('card.vaildate.v34'))
+      return
+    }
+    const res = await Service.ucardRecharge({
+      ...form.value,
+      cId: user.value.cId,
+    })
+    if (res.code == Code.StatusOK) {
+      Pigeon.MessageOK(t('Msg.Success2'))
+      confirmToReload()
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  const ucardRithdraw = async () => {
+    form.value.amount = Number(form.value.amount)
+    if (form.value.amount <= 0) {
+      Pigeon.MessageError(t('card.vaildate.v34'))
+      return
+    }
+    const res = await Service.ucardRithdraw({
+      ...form.value,
+      cId: user.value.cId,
+    })
+    if (res.code == Code.StatusOK) {
+      Pigeon.MessageOK(t('Msg.Success2'))
+      confirmToReload()
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  // 获取币种
+  const cardTypesList = async () => {
+    const res = await Service.cardTypesList({
+      cardTypeId: form.value.cardTypeId,
+      page: {
+        current: pagerInfo.current,
+        row: pagerInfo.row,
+      },
+    })
+    if (res.code == Code.StatusOK) {
+      cardType.value = res.data
+      currencyList.value = res.data[0]?.rechargeCurrencyInfoList || []
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  const changeCardType = (e) => {
+    const res = cardType.value.find((item) => item.cardTypeId == e)
+    if (res?.type == 'Physical') {
+      cardTypes.value = true
+    } else {
+      cardTypes.value = false
+    }
+  }
+
+  // 查询充值预估到账金额
+  const ucardRechargeEstimate = async ({ cardTypeId, currency, amount }) => {
+    const res = await Service.ucardRechargeEstimate({
+      cardTypeId,
+      currency,
+      amount,
+    })
+    if (res.code == Code.StatusOK) {
+      Pigeon.MessageOK(t('Msg.SearchSuccess'))
+      isOk.value = true
+      Object.assign(received, res.data)
+    } else {
+      isOk.value = false
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  //关闭
+  const close = () => {
+    emit('closeAdd', false)
+  }
+
+  //提交成功后回调
+  const confirmToReload = () => {
+    emit('confirmToReload', true)
+  }
+
+  //提交
+  const confirm = async () => {
+    const valid = await formRef.value.validate()
+    if (valid) {
+      toConfirm()
+    }
+  }
+
+  const toConfirm = () => {
+    if (form.value.cardNumber) {
+      form.value.cardNumber = form.value.cardNumber.replace(/\s+/g, '')
+    }
+    switch (props.addType) {
+      case '6':
+        ucardResetPassword()
+        break
+      case '3':
+        ucardRechargeEstimate({ ...form.value, cId: user.value.cId })
+        break
+      case '1':
+        ucardActivate()
+        break
+      case '2':
+        ucardRecharge()
+        break
+      case '4':
+        if (form.value.status == 3) {
+          applyApprove()
+        } else {
+          numberVerify()
+        }
+        break
+      case '5':
+        kycSubmit()
+        break
+      case '7':
+        ucardFreeze()
+        break
+      case '8':
+        ucardUnfreeze()
+        break
+      case '9':
+        copyText(activationCode.value)
+        break
+      case '10':
+        balanceUpdate()
+        break
+      case '11':
+        rechargeApprove()
+        break
+      case '12':
+        ucardApply()
+        break
+      case '13':
+        ucardRithdraw()
+        break
+    }
+  }
+
+  // 申请审批
+  const applyApprove = async () => {
+    const res = await Service.applyApprove({
+      cardTypeId: form.value.cardTypeId,
+      cardNumber: form.value.cardNumber,
+      uniqueId: form.value.uniqueId,
+      approveDesc: form.value.approveDesc,
+      approveStatus: form.value.status,
+      id: form.value.id,
+      cId: user.value.cId,
+    })
+    if (res.code == Code.StatusOK) {
+      if (form.value.status == 3) {
+        Pigeon.MessageOK(t('Msg.Success11'))
+      } else {
+        Pigeon.MessageOK(t('Msg.Success17'))
+      }
+      confirmToReload()
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  // 申请开卡
+  const ucardApply = async () => {
+    await Service.addressUpdate({
+      ...form.value,
+      mailingAddress: form.value.address,
+      mailingAddressCn: form.value.addressCn,
+    })
+    const res = await Service.ucardApply({
+      ...form.value,
+      cId: user.value.cId,
+    })
+    if (res.code == Code.StatusOK) {
+      Pigeon.MessageOK(t('Msg.Success7'))
+      confirmToReload()
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  // 审核充值
+  const rechargeApprove = async () => {
+    const res = await Service.rechargeApprove({
+      cardTypeId: form.value.cardTypeId,
+      cardNumber: form.value.cardNumber,
+      uniqueId: form.value.uniqueId,
+      approveDesc: form.value.approveDesc,
+      approveStatus: form.value.status,
+      ids: [form.value.id],
+      cId: user.value.cId,
+    })
+    if (res.code == Code.StatusOK) {
+      Pigeon.MessageOK(t('Msg.Success12'))
+      confirmToReload()
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  // 找回密码
+  const ucardResetPassword = async () => {
+    const res = await Service.ucardResetPassword({
+      ...form.value,
+      cId: user.value.cId,
+    })
+    if (res.code == Code.StatusOK) {
+      Pigeon.MessageOK(t('Msg.Success3'))
+      confirmToReload()
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  // 审核KYC认证
+  const kycSubmit = async () => {
+    const res = await Service.kycSubmit({ ...form.value, cId: user.value.cId })
+    if (res.code == Code.StatusOK) {
+      Pigeon.MessageOK(t('Msg.Success13'))
+      confirmToReload()
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  // 卡是否可用
+  const numberVerify = async () => {
+    const res = await Service.numberVerify({
+      cardNumber: form.value.cardNumber,
+    })
+    if (res.code == Code.StatusOK) {
+      Pigeon.MessageConfirm(
+        t('card.vaildate.v41'),
+        t('Msg.SystemPrompt'),
+        t('Btn.Confirm'),
+        t('Btn.Cancel'),
+        applyApprove,
+        function () {}
+      )
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  //获取原因列表
+  const searchReasons = async () => {
+    const res = await Service2.reasonsRefusalList({ type: 15 })
+    if (res.code == Code.StatusOK) {
+      reasons.value = res.data == null ? {} : res.data
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  //获取激活码
+  const getActivationCode = async () => {
+    const res = await Service.getActivationCode({
+      cardNo: form.value.cardNo,
+      cId: user.value.cId,
+    })
+    if (res.code == Code.StatusOK) {
+      activationCode.value = res.data.values
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  // 调整余额
+  const balanceUpdate = async () => {
+    form.value.amount = Number(form.value.amount)
+    if (form.value.amount <= 0) {
+      Pigeon.MessageError(t('card.vaildate.v34'))
+      return
+    }
+    const res = await Service.balanceUpdate({
+      amount: form.value.amount,
+      cId: form.value.cId,
+      uniqueId: form.value.uniqueId,
+      type: form.value.type,
+    })
+    if (res.code == Code.StatusOK) {
+      Pigeon.MessageOK(t('Msg.Success14'))
+      confirmToReload()
+    } else {
+      Pigeon.MessageError(res.msg)
+    }
+  }
+
+  // 生命周期
+  onMounted(() => {
+    cardNumberList()
+  })
+
+  // 监听器
+  watch(
+    () => props.formList,
+    (formData) => {
+      form.value = {}
+      isOk.value = false
+
+      Object.assign(received, {
+        receivedCurrency: '',
+        receivedAmount: '',
+        exchangeRate: '',
+      })
+
+      form.value = {
+        ...formData,
+        signaturePhoto: '',
+        currency: '',
+        clientRemark: '',
+        activePhoto: '',
+        status: '',
+      }
+
+      if (props.addType == '9' && props.dialogInfoTradingAdd) {
+        getActivationCode()
+      }
+    }
+  )
+
+  watch(
+    () => props.addType,
+    (type) => {
+      if (type == '3' || type == '2' || type == '4' || type == '12') {
+        cardTypesList()
+      }
+      if (type == '5' || type == '11' || type == '4') {
+        searchReasons()
+      }
+      if (type == '12') {
+        getCountryListForSelect()
+        if (props.formList.nationality) {
+          getCityListForSelect(props.formList.country)
+        }
+      }
+      if (type == '4') {
+        if (props.formList.type == 'Physical') {
+          cardTypes.value = true
+        } else {
+          cardTypes.value = false
+        }
+      }
+    }
+  )
+</script>
+
+<style lang="scss" scoped>
+  .imgs {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .el-upload-list__item-actions {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .dispute-submit-container {
+    padding: 20px;
+  }
+
+  .section-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    color: #303133;
+  }
+
+  .section-divider {
+    margin: 30px 0 15px;
+    border-top: 1px solid #ebeef5;
+    padding-top: 15px;
+  }
+
+  .subsection-title {
+    font-size: 16px;
+    color: #606266;
+    margin-bottom: 10px;
+  }
+
+  .form-tip {
+    font-size: 12px;
+    color: #909399;
+    margin-bottom: 15px;
+  }
+
+  .note {
+    font-size: 12px;
+    color: #909399;
+    margin-left: 10px;
+  }
+
+  .info-item,
+  .file-item {
+    position: relative;
+    padding: 20px;
+    margin-bottom: 15px;
+    border: 1px dashed #e4e7ed;
+    border-radius: 4px;
+  }
+
+  .remove-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+
+  .add-btn-container {
+    margin-bottom: 20px;
+  }
+
+  .upload-file {
+    width: 148px;
+    height: 148px;
+    line-height: 148px;
+  }
+
+  .upload-file .el-upload {
+    width: 148px;
+    height: 148px;
+    line-height: 148px;
+  }
+
+  .form-actions {
+    margin-top: 30px;
+  }
+</style>