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

<template>
    <view class="notice-container">
        <cwg-dropdown ref="dropdownRef" :menu-list="customMenuList" @menuClick="handleMenuClick">
            <view class="pc-header-btn">
                <cwg-icon name="crm-payment" color="#141d22" @click="openNotice" />
                {{ formattedBalance }} USD
            </view>
            <template #btn>
                <view class="right-drawer">

                    <view class="drawer-item">
                        <view class="drawer-item-title">钱包余额</view>
                        <view class="drawer-item-content">{{ formattedBalance }} USD</view>
                    </view>
                    <view class="drawer-item">
                        <view class="drawer-item-title">处理中出金金额</view>
                        <view class="drawer-item-content">{{ formattedPendingWithdrawAmount }} USD</view>
                    </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'
const { t, locale } = useI18n()
import { userToken } from "@/composables/config";
const isRed = ref(false)
const dropdownRef = ref(null)
const close = () => {
    dropdownRef.value.close()
}
const router = useRouter();
const customMenuList = computed(() =>
    [{
        label: t('wallet.item6'),
        type: 1
    },
    {
        label: t('wallet.item7'),
        type: 2
    },
    ])

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 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 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%;
        }
    }

    .right-drawer {
        width: px2rpx(300);
        background-color: var(--color-white);
        display: flex;
        flex-direction: column;
        padding: 20px 16px;
        box-sizing: border-box;
    }

    .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>