feat：侧边栏

components/cwg-sidebar.vue

@@ -1,5 +1,42 @@
 <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)">
@@ -34,10 +71,18 @@
 </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 { computed } from 'vue'
 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)
@@ -54,6 +99,125 @@ const ibStatus = computed(() => {
     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">
@@ -73,6 +237,115 @@ const ibStatus = computed(() => {
     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);
     }