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

<template>
    <view class="cwg-sidebar">
        <view class="wallet-widget">
            <view class="wallet-header" :class="{'header-bottom':isWalletOpen}" @click="isWalletOpen = !isWalletOpen">
                <view class="wallet-header-left">
                    <cwg-icon name="crm-payment" :size="16" color="#141d22" />
                    <text class="wallet-header-text">{{ mode === 'customer' ? formattedBalance : ibBalance }} USD</text>
                </view>
                <view class="wallet-header-right" :class="{ 'expanded': isWalletOpen }">
                    <cwg-icon name="crm-chevron-down" :size="16" color="#6c8595" />
                </view>
            </view>
            
            <view class="wallet-body" v-if="isWalletOpen">
                <view class="wallet-body-header">
                    <text class="drawer-title">隐藏余额</text>
                    <switch :checked="!isShow" @change="toggleShow" color="#6c8595" style="transform:scale(0.7); margin-right: -10px;" />
                </view>
                
                <view class="wallet-body-content">
                    <view class="balance-amount">{{ mode === 'customer' ? formattedBalance : ibBalance }} USD</view>
                    <view class="wallet-type">{{ mode === 'customer' ? t('wallet.pendingWithdraw') : t('Ib.Index.TotalRevenue') }}</view>
                    <view class="wallet-id-box">
                      {{ mode === 'customer' ? formattedPendingWithdrawAmount : ibTotalBalance }}
                    </view>
                </view>
                
                <view class="wallet-actions" v-if="mode === 'customer'">
                  <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 class="wallet-actions" v-if="mode === 'ib'">
                  <button class="action-btn" @click.stop="goIbPages(1)" v-t="'Custom.Index.Withdrawals'"></button>
                  <button class="action-btn" @click.stop="goIbPages(2)" v-t="'Home.page_ib.item4'"></button>
<!--                  <button class="action-btn" @click.stop="goIbPages(3)" v-t="'Ib.Transfer.CommissionIssue'"></button>-->
                </view>
            </view>
        </view>

        <view class="menu-list">
            <view class="menu" v-for="(item, index) in menus" :key="item.path">
                <view class="menu-item" @click="handleClick(index)">
                    <cwg-icon :name="item.icon" :size="20" color="#6c8595" />
                    <view class="menu-label" v-t="item.label" />
                    <view class="chevron-icon" :class="{ 'expanded': item.isOpenMenu }">
                        <cwg-icon v-if="item.children && item.children.length" name="crm-chevron-down" :size="20"
                            color="#6c8595" />
                    </view>
                </view>
                <view :ref="(el) => setSubmenuRef(index, el)" class="submenu-box" :a="index" :key1="item.path + index"
                    :b="item" :style="{
                        height: !(item.children && item.children.length) ? '0px' : item.isOpenMenu ? item.submenuHeight + 'px' : '0px',
                        transition: 'height 281ms cubic-bezier(0.4, 0, 0.2, 1)'
                    }" :class="{ 'active': item.isOpenMenu }">
                    <cwg-submenu v-if="item.children && item.children.length" :submenu-items="item.children"
                        @submenu-click="handleSubmenuClick" />
                </view>
            </view>
        </view>
        <view class="menu fixed">
            <view class="menu-item ib-box" @click="setMode('ib')" v-if="mode !== 'ib' && ibStatus">
                <cwg-icon name="crm-ib" :size="20" color="#6c8595" />
                <view class="menu-label" v-t="'Home.msg.Ib'" />
            </view>
            <view class="menu-item ib-box" @click="setMode('customer')" v-if="mode !== 'customer'">
                <cwg-icon name="crm-trade" :size="20" color="#6c8595" />
                <view class="menu-label" v-t="'Home.msg.Custom'" />
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted } from 'vue'
import useUserStore from '@/stores/use-user-store'
import { useMenuSplit } from '@/composables/useMenuSplit'
import { storeToRefs } from 'pinia'
import { drawApi } from '@/service/draw'
import { ibApi } from '@/service/ib'
import { userToken } from '@/composables/config'
import useRouter from '@/hooks/useRouter'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const router = useRouter()
const handleClick1 = (item: MenuItem) => {
    console.log(item)
    emit('handle-click', item)
}
const { menus, setSubmenuRef, setMode, handleClick, handleSubmenuClick, mode } = useMenuSplit(handleClick1)
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const emit = defineEmits(['handle-click'])

// ib按钮展示
const ibStatus = computed(() => {
    const info: any = userInfo.value
    return !!info && !!info.customInfo && info.customInfo.ibInvalid == 0 && !!info.ibInfo
})

const isWalletOpen = ref(true)
const isShow = ref(true)
const walletbalance = ref(0)
const pendingWithdrawAmount = ref(0)
const ibData = ref({} as any)

const NumberDecimal = (value: any) => {
    let realVal = ''
    if (!isNaN(value) && value !== '') {
        realVal = parseFloat(value).toFixed(2)
    } else {
        realVal = '0.00'
    }
    return realVal
}
const NumberDesensitization = (value: any) => {
    let realVal = ''
    if (!isNaN(value) && value !== '') {
        value = value.toString()
        realVal = value.substr(0, 2) + '****' + value.substr(-2)
    } else {
        realVal = '--'
    }
    return realVal
}

const formattedBalance = computed(() => {
    const value = walletbalance.value || '0'
    const decimalValue = NumberDecimal(value)
    return isShow.value ? decimalValue : NumberDesensitization(decimalValue)
})

const ibBalance = computed(() => {
    const value = NumberDecimal(ibData.value?.balance || 0)
    return isShow.value ? value : NumberDesensitization(value)
})

const formattedPendingWithdrawAmount = computed(() => {
  const value = pendingWithdrawAmount.value || '0'
  const decimalValue = NumberDecimal(value)
  return isShow.value ? decimalValue : NumberDesensitization(decimalValue)
})

const ibTotalBalance = computed(() => {
  const value = NumberDecimal(ibData.value?.all || 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 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' })
    }
}

watch(() => mode.value, (newMode) => {
    if (!userToken.value) return
    if (newMode == 'customer') {
        getWalletList()
      getPendingWithdrawAmount()
    } else if (newMode == 'ib') {
        getIbData()
    }
}, { immediate: true })

const toggleShow = (e: any) => {
    isShow.value = !e.detail.value
}

const goPages = (type: number) => {
    let path = ''
    if (type == 1) {
        path = '/pages/customer/wallet-transfer'
    } else if (type == 2) {
        path = '/pages/customer/wallet-history'
    }
    if (path) router.push(path)
}

const goIbPages = (type: number) => {
    let path = ''
    let 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 }
    }
    if (path) router.push({ path, query })
}
</script>

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

.cwg-sidebar {
    width: px2rpx(280);
    color: #6c8595;
    height: calc(100vh - 56px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: px2rpx(8);
    padding-top: px2rpx(20);
    box-sizing: border-box;
    gap: px2rpx(8);
    border-right: 1px solid rgba(108, 133, 149, 0.12);

    .wallet-widget {
        width: 100%;
        //border-radius: px2rpx(4);
        border-top: 1px solid rgba(108, 133, 149, 0.12);
        border-bottom: 1px solid rgba(108, 133, 149, 0.12);
        overflow: hidden;
        margin-bottom: px2rpx(4);
        .header-bottom{
          border-bottom: 1px solid rgba(108, 133, 149, 0.12);
        }
        .wallet-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: px2rpx(10) px2rpx(12);
            //background: #f4f6f8;

            cursor: pointer;

            .wallet-header-left {
                display: flex;
                align-items: center;
                gap: px2rpx(8);
            }

            .wallet-header-text {
                font-size: 14px;
                color: #141d22;
                font-weight: 500;
            }
            
            .wallet-header-right {
                transition: transform 0.3s;
                &.expanded {
                    transform: rotate(180deg);
                }
            }
        }

        .wallet-body {
            padding: px2rpx(12);
            background: #ffffff;

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

                .drawer-title {
                    font-size: 13px;
                    color: #6c8595;
                }
            }

            .wallet-body-content {
                margin-bottom: px2rpx(16);

                .balance-amount {
                    font-size: 16px;
                    font-weight: 600;
                    color: #141d22;
                    margin-bottom: px2rpx(4);
                }

                .wallet-type {
                    font-size: 12px;
                    color: #999;
                    margin-bottom: px2rpx(4);
                }

                .wallet-id-box {
                    display: flex;
                    align-items: center;
                    gap: px2rpx(4);
                    
                    .wallet-id {
                        font-size: 12px;
                        color: #999;
                    }
                }
            }

            .wallet-actions {
                display: flex;
                gap: px2rpx(8);

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

                    &::after {
                        border: none;
                    }

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

    .logo {
        width: px2rpx(54);
    }

    .menu-list {
        flex: 1;
        width: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: px2rpx(8);
    }

    .submenu-box {
        width: 100%;
        height: 0;
        overflow: hidden;
    }

    .menu {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;

    }

    .menu-item {
        width: 100%;
        height: px2rpx(40);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: px2rpx(8);
        padding: px2rpx(10);
        box-sizing: border-box;
        font-size: 14px;

        .menu-label {
            flex: 1;
        }

        &:hover {
            background: rgba(108, 133, 149, 0.12) !important;
            border: 1px solid rgb(145, 163, 176) !important;
            border-radius: px2rpx(4);
        }

        .expanded .icon {
            transform: rotate(180deg);
        }
    }

    .ib-box {
        background: rgba(140, 69, 246, 0.08) !important;
        border: 1px solid rgba(140, 69, 246, 0.2) !important;
        font-size: px2rpx(18);
        font-weight: 600;
        color: #141d22;

        &:hover {
            background: rgba(140, 69, 246, 0.08) !important;
            border: 1px solid rgba(140, 69, 246, 0.2) !important;
        }
    }

    .zy-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fixed {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(8);
    }
}
</style>