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 class="account-type">交易账户</view>
                        <view class="account-number">#{{ userStore.userInfo.customInfo?.cId || '--' }}</view>
                    </view>
                    <view class="drawer-actions">
                        <button class="action-btn" @click.stop="goPages(1)">转账</button>
                        <button class="action-btn" @click.stop="goPages(2)">出金</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 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 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 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 {
        background-color: #e4e9ec;
        border: 1px solid #141d22;
        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>