gypsy-crm-frontend-vu/components/cwg-payment.vue

<template>
  <view class="notice-container">
    <cwg-dropdown ref="dropdownRef" :menu-list="[]" @menuClick="handleMenuClick">
      <view class="pc-header-btn pc-payment-btn" v-if="mode === 'customer'">
        <cwg-icon name="crm-payment" color="#97A1C0" />
        <text class="balance-text">{{ formattedBalance }} USD</text>
      </view>
      <view class="pc-header-btn pc-payment-btn" v-if="mode === 'ib'">
        <cwg-icon name="crm-payment" color="#97A1C0" />
        <text class="balance-text">{{ ibBalance }} USD</text>
      </view>
      <view class="pc-header-btn pc-payment-btn" v-if="mode === 'follow'">
        <cwg-icon name="crm-payment" color="#97A1C0" />
        <text class="balance-text">{{ followBalance }} USD</text>
      </view>
      <template #btn>
        <view class="right-drawer custom-payment-drawer" v-if="mode === 'customer'">
          <view class="drawer-header">
            <text class="drawer-title">{{ t('vu.item21') }}</text>
            <switch class="cursor-pointer" :data-tooltip="!isShow ? t('vu.tooltip.t12') : t('vu.tooltip.t11')"
              :checked="!isShow" @change="toggleShow" color="#6c8595" style="transform:scale(0.7)" />
          </view>
          <view class="drawer-content">
            <view class="balance-amount">{{ formattedBalance }} USD</view>
            <view class="cursor-pointer cursor-pointer1" @click="toPaymentHistory"
              :data-tooltip="t('wallet.pendingWithdraw1')" data-placement="top">
              <view class="account-number">${{ formattedPendingWithdrawAmount }}</view>
              <view class="account-type" v-t="'wallet.pendingWithdraw1'"></view>
            </view>

          </view>
          <view class="drawer-actions">
            <button hover-class="" class="action-btn btn btn-outline-danger waves-effect waves-light "
              :data-tooltip="t('wallet.item6')" data-placement="top" @click.stop="goPages(1)"
              v-t="'wallet.item6'"></button>
            <button hover-class="" class="action-btn btn btn-outline-danger waves-effect waves-light "
              :data-tooltip="t('wallet.item7')" data-placement="top" @click.stop="goPages(2)"
              v-t="'wallet.item7'"></button>
          </view>
        </view>
        <view class="right-drawer custom-payment-drawer" v-if="mode === 'ib'">
          <view class="drawer-header">
            <text class="drawer-title">{{ t('vu.item21') }}</text>
            <switch class="cursor-pointer" :data-tooltip="!isShow ? t('vu.tooltip.t12') : t('vu.tooltip.t11')"
              :checked="!isShow" @change="toggleShow" color="#6c8595" style="transform:scale(0.7)" />
          </view>
          <view class="drawer-content">
            <view class="balance-amount">{{ ibBalance }} USD</view>
            <view>
              <view class="account-number">${{ ibTotalBalance }}</view>
              <view class="account-type" v-t="'Ib.Index.TotalRevenue'"></view>
            </view>

          </view>
          <view class="drawer-actions">
            <button hover-class="" class="action-btn btn btn-outline-danger waves-effect waves-light "
              @click.stop="goIbPages(1)" v-t="'Custom.Index.Withdrawals'"></button>
            <button hover-class="" class="action-btn btn btn-outline-danger waves-effect waves-light"
              :data-tooltip="t('Home.page_ib.item4')" data-placement="top" @click.stop="goIbPages(2)"
              v-t="'Home.page_ib.item4'"></button>
            <button hover-class="" class="action-btn btn btn-outline-danger waves-effect waves-light "
              data-placement="top" :data-tooltip="t('Ib.Transfer.CommissionIssue')" @click.stop="goIbPages(3)"
              v-t="'Ib.Transfer.CommissionIssue'"></button>
          </view>
        </view>
        <view class="right-drawer custom-payment-drawer" v-if="mode === 'follow'">
          <view class="drawer-header">
            <text class="drawer-title">{{ t('vu.item21') }}</text>
            <switch class="cursor-pointer" :data-tooltip="!isShow ? t('vu.tooltip.t12') : t('vu.tooltip.t11')"
              :checked="!isShow" @change="toggleShow" color="#6c8595" style="transform:scale(0.7)" />
          </view>
          <view class="drawer-content">
            <view class="balance-amount">{{ t('Documentary.console.item15') }}{{ followBalance }} USD</view>

          </view>
          <view class="drawer-actions">
            <button hover-class="" class="action-btn btn btn-outline-danger waves-effect waves-light "
              :data-tooltip="t('Documentary.console.item17')" @click.stop="goFollowPages(1)"
              v-t="'Documentary.console.item17'"></button>
          </view>
        </view>
      </template>
    </cwg-dropdown>
  </view>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
import useRouter from '@/hooks/useRouter'
import { drawApi } from '@/service/draw'
import { useI18n } from 'vue-i18n'
import { useMenuSplit } from '@/composables/useMenuSplit'
import useUserStore from '@/stores/use-user-store'
import { userToken } from '@/composables/config'
import { ibApi } from '@/service/ib'
import { documentaryApi } from '@/service/documentary'
import { useFilters } from '@/composables/useFilters'
const { numberDecimal } = useFilters()
const { mode } = useMenuSplit()

const { t, locale } = useI18n()
const userStore = useUserStore()

const isRed = ref(false)
const dropdownRef = ref(null)
const close = () => {
  dropdownRef.value.close()
}
const router = useRouter()
const menuList = []
const ibData = ref({})
const walletData = ref({})

const handleMenuClick = ({ value }) => {
  goPages(value)
}
const NumberDesensitization = (value) => {
  let realVal = ''
  if (!isNaN(value) && value !== '') {
    value = value.toString()
    realVal = '*****'
  } else {
    realVal = '--'
  }
  return realVal
}
const isShow = ref(true)
const walletbalance = ref(0)
const pendingWithdrawAmount = ref(0)
const formattedBalance = computed(() => {
  const value = walletbalance.value || '0'
  const decimalValue = numberDecimal(value)
  return isShow.value ? decimalValue : NumberDesensitization(decimalValue)
})
const formattedPendingWithdrawAmount = computed(() => {
  const value = pendingWithdrawAmount.value || '0'
  const decimalValue = numberDecimal(value)
  return isShow.value ? decimalValue : NumberDesensitization(decimalValue)
})

//ib金额
const ibBalance = computed(() => {
  const value = numberDecimal(ibData.value?.balance || 0)
  return isShow.value ? value : NumberDesensitization(value)
})
const ibTotalBalance = computed(() => {
  const value = numberDecimal(ibData.value?.all || 0)
  return isShow.value ? value : NumberDesensitization(value)
})
// 跟单
const followBalance = computed(() => {
  const value = numberDecimal(walletData.value?.walletAmount || 0)
  return isShow.value ? value : NumberDesensitization(value)
})
const getWalletList = async () => {
  let res = await drawApi.walletbalance({})
  if (res.code == 200) {
    if (res.data != null) {
      walletbalance.value = res.data
    }
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }
}

//获取处理中出金金额
const getPendingWithdrawAmount = async () => {
  let res = await drawApi.pendingWithdrawAmount({})
  if (res.code == 200) {
    if (res.data != null) {
      pendingWithdrawAmount.value = res.data
    }
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }
}
const toggleShow = (e) => {
  isShow.value = !e.detail.value
}
//跟单金额
const getMoneyList = async () => {
  let res = await documentaryApi.followWalletSingle({})
  if (res.code == 200) {
    if (res.data != null) {
      walletData.value = res.data
    }
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }
}

const goPages = (type) => {
  let path
  if (type == 1) {
    path = '/pages/customer/wallet-transfer'
  } else if (type == 2) {
    path = '/pages/customer/wallet-history' // 此处根据实际“出金”路由修改
  }
  router.push(path)
  close()
}

const goFollowPages = (type) => {
  // let path
  router.push('/pages/follow/transfer')
  close()
}

const goIbPages = (type) => {
  let path, query
  if (type == 1) {
    path = '/pages/ib/withdraw-select'
  } else if (type == 2) {
    path = '/pages/ib/transfer'
  } else if (type == 3) {
    path = '/pages/ib/transfer'
    query = { tab: 2 }
  }
  router.push({ path, query })
  close()
}


const toPaymentHistory = () => {
  router.push({ path: '/pages/customer/payment-history', query: { fromPending: 'true' } })
}

const getIbData = async () => {
  const res = await ibApi.IbData()
  if (res.code === 200) {
    if (res.data != null)
      ibData.value = res.data
  } else {
    uni.showToast({ title: res.msg, icon: 'none' })
  }
}
const getPay = (newMode) => {
  if (newMode == 'customer') {
    getWalletList()
    getPendingWithdrawAmount()
  } else if (newMode == 'ib') {
    getIbData()
  } else if (newMode == 'follow') {
    getMoneyList()
  }
}
watch(() => mode.value, (newMode) => {
  if (!userToken.value) return
  console.log(newMode, 'mode')
  getPay(newMode)
},
  { immediate: true })
onMounted(() => {
  uni.$on('updatePayment', () => {
    getPay(mode.value)
  })
})
onUnmounted(() => {
  uni.$off('updatePayment')
})
</script>

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

.notice-container {
  :deep(.cwg-dropdown-menu-container) {
    //left: px2rpx(-280) !important;
    //right: px2rpx(0) !important;
  }

  @media screen and (max-width: 991px) {
    :deep(.cwg-dropdown-menu-container) {
      left: px2rpx(-270) !important;
      //max-width: px2rpx(400);
    }
  }

  .pc-header-btn {
    position: relative;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 px2rpx(8);


    &.has-dot::after {
      content: '';
      position: absolute;
      top: px2rpx(4);
      right: px2rpx(4);
      width: px2rpx(8);
      height: px2rpx(8);
      background-color: #f56c6c;
      border-radius: 50%;
    }
  }

  .pc-payment-btn {
    border-radius: px2rpx(4);
    padding: px2rpx(4) px2rpx(8);
    height: px2rpx(36);
    cursor: pointer;

    .balance-text {
      margin-left: px2rpx(6);
      font-size: px2rpx(14);
      font-weight: 500;
      color: var(--bs-heading-color);
    }
  }

  .custom-payment-drawer {
    width: px2rpx(320);
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
    padding: 0;
    border-radius: px2rpx(8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    .drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: px2rpx(12) px2rpx(16);
      border-bottom: 1px solid var(--bs-border-color);

      .drawer-title {
        font-size: px2rpx(14);
        color: var(--bs-heading-color);
      }
    }

    .drawer-content {
      padding: px2rpx(20) px2rpx(16);
      //cursor: pointer;

      .balance-amount {
        font-size: px2rpx(18);
        font-weight: bold;
        color: var(--bs-heading-color);
        margin-bottom: px2rpx(8);
      }

      .account-type {
        font-size: px2rpx(13);
        color: var(--cwg-placeholder-color);
        margin-bottom: px2rpx(4);
      }

      .account-number {
        font-size: px2rpx(13);
        color: var(--cwg-placeholder-color);
      }
    }

    .drawer-actions {
      position: relative;
      display: flex;
      gap: px2rpx(10);
      padding: 0 px2rpx(16) px2rpx(20);

      .action-btn {
        flex: 1;
        height: px2rpx(36);
        line-height: px2rpx(36);
        font-size: px2rpx(13);
        margin: 0;
        padding: 0 px2rpx(8);

        &::after {
          border: none;
        }
      }
    }
  }

  .notification-list {
    width: 100%;
  }

  .notification-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: px2rpx(12) px2rpx(16);
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }

    .item-content {
      flex: 1;

      .item-title {
        font-size: px2rpx(14);
        color: var(--bs-heading-color);
        line-height: 1.4;
        margin-bottom: px2rpx(4);
      }

      .item-time {
        font-size: px2rpx(12);
        color: var(--bs-heading-color);
      }
    }

    .item-badge {
      margin-left: px2rpx(12);

      .dot {
        width: px2rpx(8);
        height: px2rpx(8);
        background-color: #f56c6c;
        border-radius: 50%;
      }
    }
  }

  .logout-wrap {
    margin-top: auto;
    padding: 20px 16px;
    margin-bottom: 20px;
  }

  .logout-btn {
    height: 44px;
    background: #f4eadf;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
  }
}
</style>