gypsy-crm-frontend-vu/pages/ib/linkList.vue

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
    <cwg-header :title="t('Ib.Index.CreateLink')" />
    <view class="account-section">
      <view class="add-link" @click="addLink">
        <view class="add-link-content" @click="addLink">
          <cwg-icon name="icon_add" :size="18" color="#fff"></cwg-icon>
          {{ t('Ib.Index.CreateLink') }}
        </view>
      </view>
      <cwg-tabel ref="tableRef" :columns="columns" :mobilePrimaryFields="mobilePrimaryFields" :api="listApi"
        :show-operation="false" :showPagination="true" isPages pagesToDetail @goPages="openDetail">
        <template #link="{ row }">
          <view class="link-cell">
            <uni-easyinput class="read-input" disabled v-model.trim="row.link"></uni-easyinput>
            <view class="qr-code-icon cursor-pointer" @click.stop="showQrCodeDialog(row.link)"
              :data-tooltip="t('vu.tooltip.t19')">
              <svg style="width: 18px; height: 18px; fill: #409eff; vertical-align: middle;" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M3 3h8v8H3V3zm2 2v4h4V5H5zm8-2h8v8h-8V3zm2 2v4h4V5h-4zM3 13h8v8H3v-8zm2 2v4h4v-4H5zm13-2h3v2h-3v-2zm0 4h3v2h-3v-2zm-4-4h2v6h-2v-6zm4-8h2v2h-2V3zm0 4h2v2h-2V7zm-4 0h2v2h-2V7z" />
              </svg>
            </view>
            <view class="copy cursor-pointer" @click.stop="CopyLink(row.link)" :data-tooltip="t('vu.tooltip.t18')">
              {{ t('Ib.Index.Copy') }}
            </view>
          </view>
        </template>
        <template #linkValue="{ row }">
          <view class="link-cell">
            <uni-easyinput class="read-input" disabled v-model.trim="row.linkValue"></uni-easyinput>
            <view class="copy cursor-pointer" :data-tooltip="t('vu.tooltip.t20')" @click.stop="CopyLink(row.linkValue)">
              {{ t('Ib.Index.Copy') }}
            </view>
          </view>
        </template>
      </cwg-tabel>
      <!--详情-->
      <link-detail-dialog :visible="datailVisible" @close="closeDetail" :detail="detail"
        @showQrCode="showQrCodeDialog" />

      <cwg-popup ref="linkPopup" :visible="dialogLink" type="center" :title="t('Ib.Index.CreateLink')" showFooterLine
        @close="dialogLink = false" @confirm="saveLink">
        <view class="dia-content">
          <view class="content" style="font-size: 14px; text-align: left">
            <view class="label">{{ t('Ib.Custom.NameLabelColon') }}</view>
            <uni-easyinput v-model="linkName" :placeholder="t('Ib.Custom.NameLabel')" />

            <view class="label-tit">{{ t('Ib.Index.Spread5') }} ：</view>
            <!--标准账户-->
            <view class="label">{{ t('AccountType.StandardAccount') }} </view>
            <cwg-combox v-model:value="accountTypeSettings.standard.selectedIndex" :options="getAvailableSpreads('7')"
              @change="(val) => handleAccountTypeChange('standard', '7', val)" :placeholder="t('placeholder.choose')" />

            <view class="label">{{ t('AccountType.SeniorAccount') }}</view>
            <cwg-combox v-model:value="accountTypeSettings.ecn.selectedIndex" :options="getAvailableSpreads('2')"
              @change="(val) => handleAccountTypeChange('ecn', '2', val)" :placeholder="t('placeholder.choose')" />

            <view class="label">{{ t('AccountType.CentAccount') }}</view>
            <cwg-combox v-model:value="accountTypeSettings.cent.selectedIndex" :options="getAvailableSpreads('8')"
              @change="(val) => handleAccountTypeChange('cent', '8', val)" :placeholder="t('placeholder.choose')" />

            <view class="btn-top">
              <button hover-class="" style="width: 150px"
                class="crm-cursor btn btn-dark btn-sm waves-effect waves-light btn-outline-dark1" @click="CreateLink">{{
                  t('Ib.Index.CreateLink') }}
              </button>
            </view>
            <view class="link qrCode" v-if="link">
              <QrCode ref="qrCode" :text="link" :width="200" :height="200" />
              <view class="btn-top">
                <button hover-class="" class="crm-cursor btn btn-dark btn-sm waves-effect waves-light btn-outline-dark1"
                  @click="downloadQrCode()">{{ t('Btn.item9') }}
                </button>
              </view>
            </view>
            <view class="link" v-if="link">
              <uni-easyinput disabled v-model="link" />
              <button hover-class="" class="btn-copy" @click="CopyLink(link)">
                {{ t('Ib.Index.Copy') }}
              </button>
            </view>

            <view class="account-adjust-notes-panel">
              <view class="account-adjust-notes-section">
                <view class="account-adjust-notes-title">
                  <cwg-icon name="icon_about us" color="#333" :size="18" class="account-adjust-notes-title-icon" />
                  <text class="account-adjust-notes-title-text">{{ t('Ib.Custom.AccountAdjustNotesSection1Title')
                    }}</text>
                </view>
                <view class="account-adjust-notes-list">
                  <view class="account-adjust-notes-item">{{ t('Ib.Custom.AccountAdjustNotesSection1Item1') }}</view>
                  <view class="account-adjust-notes-item">{{ t('Ib.Custom.AccountAdjustNotesSection1Item2') }}</view>
                </view>
              </view>
            </view>

          </view>
        </view>
      </cwg-popup>
      <cwg-popup :visible="qrCodeDialogVisible" type="center" :title="t('Ib.Index.QrCode')" showFooterLine
        @singleClick="qrCodeDialogVisible = false" :singleBtnText="t('Btn.Cancel')" :footerType="'single'"
        @close="qrCodeDialogVisible = false">
        <view class="qr-code-dialog-content">
          <QrCode ref="dialogQrCode" v-if="currentQrCodeLink" :text="currentQrCodeLink" :width="300" :height="300">
          </QrCode>
          <view v-if="currentQrCodeLink" class="qr-code-btn">
            <button hover-class="" class="crm-cursor btn btn-dark btn-sm waves-effect waves-light btn-outline-dark1"
              @click="downloadDialogQrCode">
              {{ t('Btn.item9') }}
            </button>
          </view>
        </view>
      </cwg-popup>
    </view>
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n' // uni-app 中已集成，但需配置
import { customApi } from '@/service/custom'
import { financialApi } from '@/service/financial'
import Config from '@/config/index'
import PaymentMethodsList from './components/PaymentMethodsList.vue'
import { ibApi } from '@/service/ib'
import useUserStore from '@/stores/use-user-store'
import QrCode from '@/components/QrCode.vue'
import LinkDetailDialog from '@/pages/ib/components/linkDetailDialog.vue'

const { Code, Host80 } = Config
const { t, locale } = useI18n()
// 列表数据
const tableData = ref([])
const loading = ref(false)
const listApi = ref(null)
const currentQrCodeLink = ref('')
const qrCodeDialogVisible = ref(false)
const datailVisible = ref(false)
const detail = ref({})
// 按账户类型分组的数据
const accountTypeData = ref({
  ecn: [], // loginType = 2
  standard: [], // loginType = 7
  cent: [], // loginType = 8
})
const tableRef = ref(null)
// 弹窗中的二维码组件
const dialogQrCode = ref(null)
const excludeList = ref([])
const excludeLists = ref([])
const excludeListVN = ref([])
const excludeShowLoginTypes = ref([])
// 账户类型设置：每个账户类型对应一个点差设置
const accountTypeSettings = ref({
  // ECN账户，存储选中的完整对象
  ecn: { selectedIndex: null, selectedItem: null, loginType: '2' },
  // 标准账户
  standard: { selectedIndex: null, selectedItem: null, loginType: '7' },
  // 美分账户
  cent: { selectedIndex: null, selectedItem: null, loginType: '8' },
})

const selectedSpreadId = ref('')
const linkName = ref('')
const loginTypes = ref('')
const link = ref('')
const linkValue = ref('')
const ibInvalid = ref('B0')
const dialogLink = ref(false)
const qrCode = ref(null)

const { userInfo } = useUserStore()

const country = computed(() => {
  return userInfo.customInfo.country
})
const agentAccountSetting = computed(() => {
  return userInfo.ibInfo.agentAccountSetting ||
    0
})
const getInfoId = computed(() => {
  console.log(userInfo.ibInfo.id, 'userInfo.ibInfo.id')
  return userInfo.ibInfo.id ||
    0
})

listApi.value = ibApi.customLinkSearchList

const columns = computed(() => ([
  {
    prop: 'name',
    label: t('Ib.Custom.NameLabel'),
    align: 'center',
  },
  {
    prop: 'link',
    label: t('Ib.Index.Link'),
    align: 'center',
    slot: 'link',
    width: 480,
  },
  {
    prop: 'linkValue',
    label: t('Ib.Index.LinkValue'),
    align: 'center',
    slot: 'linkValue',
    width: 200,
  },
  {
    prop: 'customNum',
    label: t('Ib.Index.CustomNum'),
    align: 'center',
  },
  {
    prop: 'comPoint',
    label: t('AccountType.StandardAccount'),
    align: 'center',
    formatter: ({ row }) => getGroupNameByLoginType(row.loginConfig, 7),
  },
  {
    prop: 'hide',
    label: 'ECN',
    align: 'center',
    formatter: ({ row }) => getGroupNameByLoginType(row.loginConfig, 2),

  },
  {
    prop: 'loginTypes',
    label: t('AccountType.CentAccount'),
    align: 'center',
    formatter: ({ row }) => getGroupNameByLoginType(row.loginConfig, 8),
  },
]))

const mobilePrimaryFields = ref([
  {
    prop: 'name',
    label: t('Ib.Custom.NameLabel'),
    align: 'center',
  },
  {
    prop: 'customNum',
    label: t('Ib.Index.CustomNum'),
    align: 'center',
  },
  {
    prop: 'more',
    type: 'more',
    width: 20,
    align: 'center',
  },
])

const getGroupNameByLoginType = (loginConfig, loginType) => {
  if (!loginConfig) return '--'

  // 如果 loginConfig 是字符串，尝试解析为数组
  let config = loginConfig
  if (typeof loginConfig === 'string') {
    try {
      config = JSON.parse(loginConfig)
    } catch (e) {
      return '--'
    }
  }

  // 确保是数组
  if (!Array.isArray(config)) {
    return '--'
  }

  // 查找匹配的 loginType
  const matchedItem = config.find(item => {
    // 支持数字和字符串类型的比较
    return item.loginType === loginType ||
      item.loginType === String(loginType) ||
      String(item.loginType) === String(loginType)
  })

  return matchedItem ? (matchedItem.groupName || '--') : '--'
}

const CopyLink = (link) => {
  uni.setClipboardData({
    data: link,
    success: () => {
      uni.showToast({
        title: t('card.Msg.m8'),
        icon: 'success',
      })
    },
  })
}
const showQrCodeDialog = (link) => {
  if (!link) return
  currentQrCodeLink.value = link
  qrCodeDialogVisible.value = true
}
// 获取开户链接账户类型列表
const getCustomLinkTypes = async () => {
  let res = await ibApi.customLinkTypes()
  if (res.code == Code.StatusOK) {
    // 按 loginType 分组数据
    const data = res.data || []
    console.log(data, '123')
    accountTypeData.value = {
      ecn: data.filter(item => item.loginType === 2 || item.loginType === '2'),
      standard: data.filter(item => item.loginType === 7 || item.loginType === '7'),
      cent: data.filter(item => item.loginType === 8 || item.loginType === '8'),
    }
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
    accountTypeData.value = {
      ecn: [],
      standard: [],
      cent: [],
    }
  }
}

// 获取账户类型设置
const getAgentAccountSetting = () => {
  // 如果是越南账户，显示标准账户、美分账户和ECN账户
  if (country.value === 'VN') {
    const standardAccount = excludeLists.value.find(
      (item) => item.value === '7',
    )
    const centAccount = excludeLists.value.find(
      (item) => item.value === '8',
    )
    const ecnAccount = excludeLists.value.find(
      (item) => item.value === '2',
    )
    excludeListVN.value = [standardAccount, centAccount, ecnAccount].filter(
      Boolean,
    )
    excludeShowLoginTypes.value = []
  } else {
    if (agentAccountSetting.value == 0) {
      const excludeValues = userInfo
        .customInfo.excludeShowLoginTypes
      try {
        const excludeList = excludeLists.value.filter(
          (item) => !excludeValues.includes(item.value),
        )
        excludeList.value = excludeList
        excludeShowLoginTypes.value = []
      } catch (error) {
        excludeShowLoginTypes.value = []
        excludeList.value = excludeLists.value
      }
    } else {
      excludeShowLoginTypes.value = []
      excludeList.value = excludeLists.value

    }
  }
}
// add
const addLink = async () => {
  console.log(getInfoId.value, 'getInfo.id')
  await getCustomLinkTypes()
  getAgentAccountSetting()
  // 重置所有表单字段
  selectedSpreadId.value = ''
  linkName.value = ''
  loginTypes.value = ''
  linkValue.value = ''
  // 重置账户类型设置
  accountTypeSettings.value = {
    ecn: { selectedIndex: null, selectedItem: null, loginType: '2' },
    standard: { selectedIndex: null, selectedItem: null, loginType: '7' },
    cent: { selectedIndex: null, selectedItem: null, loginType: '8' },
  }
  dialogLink.value = true
}
const onNameChange = (e) => {
  console.log(e)
}
// 账户类型选择变化处理
const handleAccountTypeChange = (type, loginType, val) => {
  console.log(type, loginType, val, '221')
  const setting = accountTypeSettings.value[type]
  const availableSpreads = getAvailableSpreads(loginType)
  if (setting.selectedIndex !== null && setting.selectedIndex !== undefined) {
    accountTypeSettings.value[type].selectedItem = availableSpreads[setting.selectedIndex] || null
  } else {
    accountTypeSettings.value[type].selectedItem = null
  }
}
// 获取指定账户类型可用的点差设置
const getAvailableSpreads = (loginType) => {
  // 根据 loginType 返回对应的数据
  if (loginType === '2') {
    return accountTypeData.value.ecn?.map((item, index) => ({ ...item, value: index, text: item.groupName })) || []
  } else if (loginType === '7') {
    return accountTypeData.value.standard?.map((item, index) => ({
      ...item,
      value: index,
      text: item.groupName,
    })) || []
  } else if (loginType === '8') {
    return accountTypeData.value.cent?.map((item, index) => ({ ...item, value: index, text: item.groupName })) || []
  }
  return []
}
// 获取链接值
const getLink1 = async () => {
  // 收集所有选中的账户类型和对应的点差设置
  const selectedAccountTypes = []
  const loginConfig = []

  // 检查每个账户类型是否已选择点差设置
  Object.keys(accountTypeSettings.value).forEach((key) => {
    const setting = accountTypeSettings.value[key]
    if (setting.selectedItem) {
      selectedAccountTypes.push(setting.loginType)
      // 将选中的整个对象添加到 loginConfig 数组
      loginConfig.push(setting.selectedItem)
    }
  })

  if (selectedAccountTypes.length === 0) {
    uni.showToast({
      title: t('Ib.Index.Spread5'),
      icon: 'none',
    })
    link.value = ''
    return
  }

  // 构建请求参数
  const validList = {
    loginConfig: loginConfig,
  }

  // 直接调用接口生成链接
  const res = await ibApi.customLinkCode(validList)
  if (res.code === Code.StatusOK) {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
    return res.data
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'error',
    })
    return ''
  }
}

const saveLink = async () => {
  if (!linkName.value) {
    uni.showToast({
      title: t('Ib.Custom.NameLabel'),
      icon: 'none',
    })
    return
  }
  if (!link.value) {
    uni.showToast({
      title: t('Ib.Index.CreateLink'),
      icon: 'none',
    })
    return
  }

  // 收集所有选中的账户类型配置
  const loginConfig = []

  Object.keys(accountTypeSettings.value).forEach((key) => {
    const setting = accountTypeSettings.value[key]
    if (setting.selectedItem) {
      // 将选中的整个对象添加到 loginConfig 数组
      loginConfig.push(setting.selectedItem)
    }
  })

  if (loginConfig.length === 0) {
    uni.showToast({
      title: t('Ib.Index.Spread5'),
      icon: 'none',
    })
    return
  }

  // 调用保存接口
  const res = await ibApi.customLinkAdd({
    name: linkName.value,
    link: link.value,
    linkValue: linkValue.value,
    loginConfig: loginConfig,
  })

  if (res.code === Code.StatusOK) {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
    dialogLink.value = false
    // 重置表单
    linkName.value = ''
    link.value = ''
    linkValue.value = ''
    excludeShowLoginTypes.value = []
    selectedSpreadId.value = ''
    accountTypeSettings.value = {
      ecn: { selectedIndex: null, selectedItem: null, loginType: '2' },
      standard: { selectedIndex: null, selectedItem: null, loginType: '7' },
      cent: { selectedIndex: null, selectedItem: null, loginType: '8' },
    }
    tableRef.value.refreshTable()
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'error',
    })
  }
}
watch(() => dialogLink.value, (val) => {
  // 关闭弹窗清空
  if (!val) {
    link.value = ''
  }
})
// 生成链接（不保存）
const CreateLink = async () => {
  console.log(linkName.value)
  if (!linkName.value) {
    uni.showToast({
      title: t('Ib.Custom.NameLabel'),
      icon: 'none',
    })
    return
  }
  const value = await getLink1()
  if (!value) return
  linkValue.value = value
  link.value = `${Host80}/#/signup/${getInfoId.value}/${value}/${ibInvalid.value}`
}

const downloadQrCode = (type = 0) => {
  qrCode.value.download()
}
// 下载弹窗中的二维码
const downloadDialogQrCode = (type = 0) => {
  dialogQrCode.value.download()
}
// 打开详情弹窗
const openDetail = (row) => {
  datailVisible.value = true
  detail.value = row
}
// 关闭详情弹窗
const closeDetail = () => {
  datailVisible.value = false
  detail.value = {}
}
</script>
<style lang="scss" scoped>
@import "@/uni.scss";

.add-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .add-link-content {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 0 px2rpx(10);
    background-color: var(--bs-secondary);
    font-size: px2rpx(16);
    font-weight: bold;
    line-height: px2rpx(36);
    border-radius: px2rpx(5);
  }
}

.link-cell {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  white-space: nowrap;

  .read-input {
    max-width: px2rpx(360);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }

  .copy {
    cursor: pointer;
    line-height: px2rpx(28);
  }
}

.qr-code-icon {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s;
  white-space: nowrap;
  line-height: 28px;
  display: flex;
  align-items: center;
  padding: 0 8px;

  &:hover {
    opacity: 0.7;
  }
}

.dia-content {
  padding: 20rpx;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.label-tit {
  font-weight: 500;
  font-size: px2rpx(18);
  margin-bottom: 8rpx;
}

.label {
  font-weight: 400;
  font-size: px2rpx(16);
  margin-bottom: 8rpx;
}

.btn-top {
  margin-top: px2rpx(16);
  text-align: center;
}

.link {
  display: flex;
  margin-top: px2rpx(20);

  .btn-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    height: px2rpx(36);
    margin: 0 px2rpx(10);
  }
}

.qrCode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: px2rpx(16);
}

.qr-code-dialog-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: px2rpx(20) 0;

  .qr-code-btn {
    margin-top: px2rpx(16);
  }
}

.account-adjust-notes-panel {
  margin-bottom: 18px;
  padding: 14px 16px;
  text-align: left;
  //background: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.account-adjust-notes-section {
  &+.account-adjust-notes-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #dcdfe6;
  }
}

.account-adjust-notes-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  line-height: 1.45;
}

.account-adjust-notes-title-icon {
  flex-shrink: 0;
  margin-top: 0px;
  font-size: 15px;
  color: #909399;
}

.account-adjust-notes-title-text {
  font-size: 13px;
  font-weight: 600;
  color: #303133;
}

.account-adjust-notes-list {
  margin: 0;
  padding-inline-start: 1.35em;
  color: #606266;
  font-size: 13px;
  line-height: 1.65;

  li {
    margin-bottom: 8px;
    padding-inline-start: 2px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>