gypsy-crm-frontend-vu/pages/ib/components/linkDetailDialog.vue

<template>
  <cwg-popup :title="t('Btn.Detail')" :visible="visible" @singleClick="closeDia" :footerType="'single'"
             :singleBtnText="t('Btn.Confirm')" @close="closeDia">
    <view class="dialog-content">
      <cwg-label-line-value
        v-for="(item, index) in items"
        :key="index"
        :label="item.label"
        :value="item.value"
      />
      <view>
        <view>
          <view class="label">
            {{ t('Ib.Index.Link') }}
          </view>
          <view class="link-cell">
            <uni-easyinput class="read-input" disabled v-model.trim="detail.link"></uni-easyinput>
            <view class="qr-code-icon" @click.stop="showQrCodeDialog(detail.link)">
              <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" @click.stop="CopyLink(detail.link)">
              {{ t('Ib.Index.Copy') }}
            </view>
          </view>
        </view>
        <view>
          <view class="label">
            {{ t('Ib.Index.LinkValue') }}
          </view>
          <view class="link-cell">
            <uni-easyinput class="read-input" disabled v-model.trim="detail.linkValue"></uni-easyinput>
            <view class="copy" @click.stop="CopyLink(detail.linkValue)">
              {{ t('Ib.Index.Copy') }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </cwg-popup>
</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'

  const props = defineProps({
    // 是否显示弹窗
    visible: {
      type: Boolean,
      default: false,
    },
    // 详情
    detail: { type: Object, default: () => ({}) },
  })
  const { Code, Host80 } = Config
  const { t } = useI18n()
  const columns = computed(()=>[
    {
      prop: 'name',
      label: t('Ib.Custom.NameLabel'),
      align: 'center',
    },
    {
      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 emit = defineEmits(['close','showQrCode'])
  const items = computed(() => {
    return columns.value.map(item => {
        return {
          label: item.label,
          value: item.formatter ? item.formatter({ row: props.detail }) : props.detail[item.prop],
        }
      },
    )
  })


  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
    emit('showQrCode', link)
  }


  const downloadQrCode = (type = 0) => {
    qrCode.value.download()
  }
  // 下载弹窗中的二维码
  const downloadDialogQrCode = (type = 0) => {
    dialogQrCode.value.download()
  }

  const closeDia = () => {
    emit('close')
  }
</script>
<style lang="scss" scoped>
  @import "@/uni.scss";

  @media screen and (max-width: 768px) {

    .dialog-content {
      padding: 0 px2rpx(10);
    }
  }
  .label {
    color: #6c8595;
    font-size: px2rpx(14);
    line-height: px2rpx(24);
  }
  .link-cell {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    white-space: nowrap;

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

    .copy {
      cursor: pointer;
      line-height: px2rpx(28);
    }
  }
</style>