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

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true" :bgColor="'#f8f9f9'">
    <cwg-header :title="t('Home.page_ib.item1')" />
    <uni-row class="demo-uni-row uni-row1">
      <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <view class="dashboard-container">
          <!-- 余额卡片 -->
          <view class="card balance-card">
            <view class="card-header">
              <view class="header-left">
                <cwg-icon name="qbye" :size="24" />
                <text class="header-title">{{ t('news_add_field.Label.Balance') }}</text>
              </view>
              <view class="header-right">
                <cwg-dropdown :menu-list="menuList" @menuClick="handleMenuClick">
                  <view class="pc-header-btn">
                    <cwg-icon name="crm-ellipsis" :size="24" />
                  </view>
                </cwg-dropdown>
              </view>
            </view>
            <view class="balance-content">
              <view class="balance-main">
                <text class="balance-currency">$</text>
                <text class="balance-amount">{{ balanceInt }}</text>
                <text class="balance-decimal">.{{ balanceDecimal }}</text>
              </view>
              <view class="total-earnings">
                <text class="total-label">{{ t('Ib.Index.TotalRevenue') }}</text>
                <text class="total-value">{{ totalEarnings }}</text>
              </view>
            </view>
          </view>

          <!-- 开户链接 -->
          <view class="card partner-card">
            <view class="card-header">
              <view class="header-left">
                <cwg-icon name="crm-share-nodes" :size="24" />
                <text class="header-title">{{ t('Ib.Index.Link') }}</text>
              </view>
            </view>
            <view class="partner-content">
              <view class="link-area">
                <button class="link-btn" @click="LinkActivity1">
                  {{ t('Ib.Index.CreateLink') }}
                </button>
                <button class="link-btn" @click="LinkActivity">
                  {{ t('Ib.Index.CreateLinkActivity') }}
                </button>
              </view>
            </view>
          </view>


          <!-- 名下客户 -->
          <view class="card custom-card">
            <view class="card-header">
              <view class="header-left">
                <cwg-icon name="crm-custom" :size="24" />
                <text class="header-title">{{ t('Ib.Index.NameCustom') }}</text>
              </view>
            </view>
            <view class="custom-content">
              <view class="con" @click="toCustomManagement">
                <view class="num">
                  {{ ibData.customAmount }}
                </view>
                <view class="des">
                  {{ t('Ib.Index.Custom') }}
                </view>
              </view>
              <view class="con" @click="toIbManagement">
                <view class="num">
                  {{ ibData.ibAmount }}
                </view>
                <view class="des">
                  {{ t('Ib.Index.Agent') }}
                </view>
              </view>
            </view>
          </view>
          <!-- 归属推荐码 -->
          <view class="card code-card">
            <view class="card-header">
              <view class="header-left">
                <text class="header-title">{{ t('Tips.AttributionCode') }}</text>
                <uni-tooltip placement="top">
                  <text class="icon-tip">？</text>
                  <template v-slot:content>
                    <view style="width: 100px;">
                      {{ t('Tips.tips') }}
                    </view>
                  </template>
                </uni-tooltip>
              </view>
            </view>
            <view class="code-content">
              <uni-easyinput class="code-input" :disabled="true" v-model="getInfoId" :clearable="false"></uni-easyinput>
              <button class="link-btn">{{ t('Ib.Index.Copy') }}</button>
            </view>
          </view>
        </view>
      </uni-col>
    </uni-row>

    <!-- 二维码弹窗 -->
    <uni-popup ref="linkPopup" type="center" :title="t('Ib.Index.CreateLink')" :mask-click="false" background-color="#fff">
      <view class="dia-content">
        <view class="content" style="font-size: 14px; text-align: left">
          <view class="label">{{ t("Ib.Index.Spread5") }} ：</view>
          <cwg-combox
            v-model="excludeShowLoginTypes"
            :multiple="true"
            :options="excludeList"
            :placeholder="t('placeholder.choose')"
          />

          <view class="label">{{ t("Ib.Index.Spread4") }} ：</view>
          <uni-data-select
            v-model="selectedSpreadId"
            :localdata="spreadList.map(item => ({
          value: item.id,
          text: t('Ib.Index.Commission') + ':' + item.comPoint +
            (levelNum === 1 ? '-' + t('Ib.Index.Hide') + ':' + item.hide :
            (fixedHide === 1 ? '' : '-' + t('Ib.Index.Hide') + ':' + item.hide))
        }))"
            :placeholder="t('placeholder.choose')"
            style="width: 100%"
          />

          <view class="label">{{ t('Ib.Index.IbInvalid') }}</view>
          <uni-data-select
            v-model="ibInvalid"
            :localdata="[
          { value: 'B0', text: t('Ib.Custom.Allow') },
          { value: 'B1', text: t('Ib.Custom.NotAllow') }
        ]"
            :placeholder="t('placeholder.choose')"
            style="width: 100%"
          />

          <view>
            <text style="line-height: 1.5">{{ t('ApplicationDialog.item1') }}</text>
          </view>

          <view>
            <text style="line-height: 1.5">{{ t('ApplicationDialog.item2') }}</text>
            <navigator
              :url="country == 'NG' || country == 'TH' || country == 'LA' || isAfterJuly7()
            ? `pdf/pdf6/all/Account Type Allocation Table - ${lang}.pdf`
            : `pdf/pdf6/no/Account Type Allocation Table-${lang}.pdf`"
              target="_blank"
            >
              {{ t('ApplicationDialog.item3') }}
            </navigator>
          </view>

          <view class="btn">
            <text
              class="crm-cursor"
              @click="CreateLink"
            >{{ t('Ib.Index.CreateLink') }}</text>
          </view>

          <view class="link qrCode" v-if="link">
            <QrCode
              ref="qrCode"
              :text="link"
              :width="200"
              :height="200"
            />
            <view class="btn">
              <text
                class="crm-cursor"
                style="height: 16px"
                @click="downloadQrCode"
              >{{ t('Btn.item9') }}</text>
            </view>
          </view>

          <view class="link">
            <uni-easyinput
              readonly
              v-model="link"
              placeholder=""
              id="custom_link"
            />
            <view class="btn">
              <text
                class="crm-cursor"
                @click="CopyShareLink('custom_link')"
              >{{ t('Ib.Index.Copy') }}</text>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </cwg-page-wrapper>
</template>

<script setup>
  import { ref, computed, watch, onMounted } from 'vue'
  import { useI18n } from 'vue-i18n'
  import useRouter from '@/hooks/useRouter'
  import {ibApi} from '@/service/ib'
  import config from '@/config/index'
  import  useUserStore from '@/stores/use-user-store'

  const { t } = useI18n()
  const router = useRouter()
  const {Code } = config
  const { userInfo } = useUserStore()
  // 数据
  const balanceInt = ref(0)
  const balanceDecimal = ref('00')
  const totalEarnings = ref(0.00)
  const partnerLink = ref('https://one.exnessonelink.com/a/plokue4yj3')
  const partnerCode = ref('PLOKUE4YJ3')
  const activeTab = ref('link') // 'link' 或 'code'
  const getInfoId = ref('123123')
  const ibData = ref({
      customAmount: "",
      ibAmount: "",
    }
  )
  const selectedSpreadId = ref('')
  const spreadList = ref([])
  const excludeShowLoginTypes = ref([])
  const pammManagerValid = ref()
  const menuList = ref([
    {label: t('Custom.Index.Withdrawals'),type: 1},
    {label: t('Custom.Index.Transfer'),type: 2},
  ])
  const excludeList = ref([])
  const excludeLists = ref([
    {text: t('AccountType.SeniorAccount'),value: '2'},
    // {text: t('AccountType.SeniorAccount'),value: '3'},
    {text: t('AccountType.StandardAccount'),value: '7'},
    {text: t('AccountType.CentAccount'),value: '8'},
  ])

  // 开户链接
  const linkPopup = ref(null)
  const qrSize = ref(200)

  // 显示内容
  const displayContent = computed(() => {
    return activeTab.value === 'link' ? partnerLink.value : partnerCode.value
  })

  // 复制内容
  const handleCopy = () => {
    uni.setClipboardData({
      data: displayContent.value,
      success: () => {
        uni.showToast({
          title: '复制成功',
          icon: 'success',
        })
      },
      fail: () => {
        uni.showToast({
          title: '复制失败',
          icon: 'none',
        })
      },
    })
  }

  // 查看所有合作伙伴链接
  const handleViewAllLinks = () => {
    // 根据实际路由配置跳转，此处示例为复制提示或跳转内部页面
    uni.navigateTo({
      url: '/pages/promo/registration_tools/links',
      fail: () => {
        uni.showToast({
          title: '页面开发中，敬请期待',
          icon: 'none',
        })
      },
    })
  }
  const loginTypeList = async () => {
    const res = await ibApi.loginTypeList(
      {
        page:{
          current: 1,
          row: 100
        }
      }
    )
    if (res.code === Code.StatusOK) {
      spreadList.value = res.data
    }else {
      uni.showToast(res.msg)
    }
  }
  const getAgentAccountSetting = async () => {
    console.log(userInfo)
    const {agentAccountSetting = ''} = userInfo.ibInfo ?? {}
    if (agentAccountSetting === 0) {
      const excludeValues = userInfo.customInfo.excludeShowLoginTypes;
      try{
        excludeList.value = excludeLists.value.filter(
          (item) => !excludeValues.includes(item.value)
        )
        excludeShowLoginTypes.value = []
      }catch(e){
        excludeShowLoginTypes.value = []
        excludeList.value = excludeLists.value
      }
    }else {
      excludeShowLoginTypes.value = []
      excludeList.value = excludeLists.value
    }
  }
  // 生成开户链接
  const LinkActivity1 = async () => {
    // await loginTypeList()
    await getAgentAccountSetting()
    selectedSpreadId.value = ''
    linkPopup.value.open()
  }
  // 生成活动分享链接
  const LinkActivity = () => {
    // 根据实际路由配置跳转，此处示例为复制提示或跳转内部页面
    uni.navigateTo({
      url: '/pages/promo/registration_tools/links',
      fail: () => {
        uni.showToast({
          title: '页面开发中，敬请期待',
          icon: 'none',
        })
      },
    })
  }
  const handleMenuClick = ({value})=>{
    console.log(value.type)
    if (value.type === 1) {
      toWithdraw()
    }else {
      toTransfer()
    }
  }

  const toWithdraw = () => {
    router.push({
      path: '/pages/ib/withdraw',
    }
    )
  }
  const toTransfer = () => {
    router.push({
      path: '/pages/ib/transfer',
    }
    )
  }
  const toCustomManagement = () => {
    router.push({
      path: '/pages/ib/customer',
      query: {  type: 3 }
    }
    )
  }
  const toIbManagement = () => {
    router.push({
      path: '/pages/ib/customer',
      query: {  type: 2 }
    }
    )
  }
  const getIbData = async () => {
    const res = await ibApi.IbData()
    if (res.code === Code.StatusOK) {
      if (res.data != null)
      ibData.value = res.data
    }else {
      uni.showToast(res.msg)
    }
  }
  const getPammManagerValid = async () => {
    const res = await ibApi.mamApplyPammManagerValid()
    if (res.code === Code.StatusOK) {
      if (res.data != null)
        pammManagerValid.value = res.data
    }else {
      uni.showToast(res.msg)
    }
  }

  onMounted(() => {
    // 初始化数据
    getIbData()
    getPammManagerValid()
  })

</script>

<style lang="scss" scoped>
  @import "@/uni.scss";

  .dashboard-container {
    min-height: 100vh;
    box-sizing: border-box;
  }

  /* 卡片通用样式 */
  .card {
    background: var(--color-white);
    color: #333;
    padding: px2rpx(12) px2rpx(16);
    border-radius: 4px;
    margin-bottom: px2rpx(20);
    box-shadow: 0 px2rpx(4) px2rpx(12) rgba(0, 0, 0, 0.2);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: px2rpx(12);
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }

  .header-title {
    font-size: px2rpx(14);
    font-weight: 600;
  }

  .header-right {
    display: flex;
    align-items: center;
  }

  .action-btn {
    background: #ffde02;
    border: none;
    border-radius: 50%;
    width: px2rpx(32);
    height: px2rpx(32);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;

    &:after {
      border: none;
    }
  }

  /* 余额区域 */
  .balance-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16rpx;
  }

  .balance-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
  }

  .balance-amount {
    font-size: px2rpx(20);
    font-weight: 700;
    line-height: 1;
  }

  .balance-decimal {
    font-size: px2rpx(16);
    font-weight: 500;
    line-height: 1;
  }

  .balance-currency {
    font-size: px2rpx(16);
    font-weight: 500;
  }

  .total-earnings {
    display: flex;
    gap: 12px;
    color: rgba(20, 29, 34, 0.6);
    font-size: px2rpx(12);
  }

  .total-value {
  }

  /* 合作伙伴卡片 */
  .partner-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .link-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 12px;
  }

  .link-btn {
    height: px2rpx(32);
    background-color: rgb(108, 133, 149);
    line-height: px2rpx(32);
    color: var(--color-white);
    border-radius: px2rpx(16);
    font-size: px2rpx(14);
    margin: 0;
  }

  .code-content {
    display: flex;
    justify-content: center;
  }

  .code-input {
    width: 50%;
    max-width: px2rpx(178);
    margin-right: px2rpx(20);
  }

  .custom-content {
    display: flex;
    justify-content: center;
    justify-content: space-around;
    flex-wrap: wrap;

    .con {
      cursor: pointer;
      text-align: center;
      font-size: px2rpx(16);
      margin: 5px;
    }

    .num {
      font-weight: bold;
    }

    .des {
      margin-top: px2rpx(5);

    }
  }


  /* 知识库卡片 */
  .knowledge-content {
    padding: 8rpx 0;
  }

  .knowledge-text {
    font-size: 28rpx;
    line-height: 1.5;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
  }

  /* 二维码弹窗样式 */
  .qr-modal {
    width: 560rpx;
    background: #1e1e2a;
    border-radius: 32rpx;
    overflow: hidden;
  }

  .qr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .qr-title {
    font-size: 32rpx;
    font-weight: 600;
  }

  .qr-close {
    font-size: 48rpx;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
    cursor: pointer;
  }

  .qr-body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32rpx;
  }

  .qr-canvas {
    width: 400rpx;
    height: 400rpx;
    background: #fff;
    border-radius: 16rpx;
  }

  .qr-footer {
    padding: 24rpx 32rpx;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
  }

  .qr-tip {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.6);
    word-break: break-all;
  }
  .dia-content {
    padding: 20rpx;
  }

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

  .label {
    font-weight: 500;
    margin-bottom: 8rpx;
  }

  .btn {
    margin-top: 16rpx;
    text-align: center;
  }

  .crm-cursor {
    cursor: pointer;
    color: #ea002a;
    text-decoration: underline;
  }

  .link {
    margin-top: 20rpx;
  }

  .qrCode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16rpx;
  }
</style>