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">
        <cwg-icon name="crm-payment" color="#141d22" @click="openNotice" />
        <text class="balance-text">{{ formattedBalance }} USD</text>
      </view>
      <template #btn>
        <view class="right-drawer custom-payment-drawer">
          <view class="drawer-header">
            <text class="drawer-title">隐藏余额</text>
            <switch :checked="!isShow" @change="toggleShow" color="#6c8595" style="transform:scale(0.7)" />
          </view>
          <view class="drawer-content">
            <view class="balance-amount">{{ formattedBalance }} USD</view>
            <view @click="toPaymentHistory">
              <view class="account-number">${{ formattedPendingWithdrawAmount }}</view>
              <view class="account-type" v-t="'wallet.pendingWithdraw'"></view>
            </view>

          </view>
          <view class="drawer-actions">
            <button class="action-btn" @click.stop="goPages(1)" v-t="'wallet.item6'"></button>
            <button class="action-btn" @click.stop="goPages(2)" v-t="'wallet.item7'"></button>
          </view>
        </view>
      </template>
    </cwg-dropdown>
  </view>
</template>

<script setup lang="ts">
  import { computed, ref, onMounted } from 'vue'
  import { newsApi } from '@/service/news'
  import useRouter from '@/hooks/useRouter'
  import { drawApi } from '@/service/draw'
  import { useI18n } from 'vue-i18n'
  import useUserStore from '@/stores/use-user-store'

  const { t, locale } = useI18n()
  const userStore = useUserStore()
  import { userToken } from '@/composables/config'

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

  const handleMenuClick = ({ value }) => {
    goPages(value)
  }
  const NumberDecimal = (value) => {
    let realVal = ''
    if (!isNaN(value) && value !== '') {
      // 截取当前数据到小数点后两位
      realVal = parseFloat(value).toFixed(2)
    } else {
      realVal = '0'
    }
    return realVal
  }
  const NumberDesensitization = (value) => {
    let realVal = ''
    if (!isNaN(value) && value !== '') {
      value = value.toString()
      realVal = value.substr(0, 2) + '****' + value.substr(-2)
    } 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)
  })
  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 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 toPaymentHistory = () => {
    router.push({ path: '/pages/customer/payment-history',query:{fromPending: "true"} })
  }
  const goMore = () => {
    router.push({
      path: '/pages/common/notice',
    })
    close()
  }
  onMounted(() => {
    if (!userToken.value) return
    getWalletList()
    getPendingWithdrawAmount()
  })
</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(12);


      &.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(12);
      height: px2rpx(36);
      cursor: pointer;

      .balance-text {
        margin-left: px2rpx(6);
        font-size: px2rpx(14);
        font-weight: 500;
        color: #141d22;
      }
    }

    .custom-payment-drawer {
      width: px2rpx(260);
      background-color: var(--color-white);
      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 #f0f0f0;

        .drawer-title {
          font-size: px2rpx(14);
          color: #333;
        }
      }

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

        .balance-amount {
          font-size: px2rpx(18);
          font-weight: bold;
          color: #141d22;
          margin-bottom: px2rpx(8);
        }

        .account-type {
          font-size: px2rpx(13);
          color: #666;
          margin-bottom: px2rpx(4);
        }

        .account-number {
          font-size: px2rpx(13);
          color: #999;
        }
      }

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

        .action-btn {
          flex: 1;
          height: px2rpx(36);
          line-height: px2rpx(36);
          background-color: #f5f7fa;
          color: #333;
          font-size: px2rpx(13);
          border-radius: px2rpx(4);
          margin: 0;

          &::after {
            border: none;
          }

          &:active {
            background-color: #e4e7ed;
          }
        }
      }
    }

    .notification-list {
      width: 100%;
    }

    .notification-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: px2rpx(12) px2rpx(16);
      border-bottom: 1px solid #f0f0f0;
      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: #333;
          line-height: 1.4;
          margin-bottom: px2rpx(4);
        }

        .item-time {
          font-size: px2rpx(12);
          color: #999;
        }
      }

      .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: #ff9800;
      font-weight: 600;
      cursor: pointer;
    }
  }
</style>