gypsy-crm-frontend-vu/pages/customer/components/AmountWallet.vue

<template>
    <view class="amount-wallet">
        <view class="content-title">
            <view>{{ greeting }}, {{ fullName }}</view>
            <view class="content-title-btns">
                <view class="btn-primary btn-primary1" @click="openAddFileDialog(1)">
                    <cwg-icon icon="crm-circle-dollar-to-slot" :size="20" color="#fff" />
                    <text v-t="'Custom.Index.Deposit'" />
                </view>
                <view class="btn-primary btn-primary1" @click="openDeleteAccountDialogs()">
                    <cwg-icon icon="crm-credit-card" :size="20" color="#fff" />
                    <text v-t="'Custom.Index.Withdrawals'" />
                </view>
            </view>
        </view>
        <view class="amount-wallet-content">
            <uni-row class="form-row uni-row1">
                <uni-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" v-for="(row, index) in list" :key="index">
                    <view class="amount-wallet-item" :class="row.className">
                        <view class="item-left">
                            <view class="item-name">{{ row.name }}</view>
                            <view class="text">{{ row.content }}</view>
                        </view>
                        <view class="cwg-icon">
                            <cwg-icon :name="row.icon" :size="24" :color="row.color" />
                        </view>
                        <view class="bg">
                            <cwg-icon :name="row.icon" :size="48" :color="row.color" />
                        </view>
                    </view>
                </uni-col>

            </uni-row>

        </view>

    </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { drawApi } from "@/service/draw";
import { useFilters } from '@/composables/useFilters'
const { numberFormat, numberDecimal } = useFilters()
import useUserStore from "@/stores/use-user-store";
const { userInfo } = useUserStore()
import { formatName } from '@/utils/nameFormat'
import { useGreeting } from '../composables/useGreeting'

// 基础用法
const { greeting } = useGreeting()
const { t, locale } = useI18n()
const list = computed(() => [
    {
        name: t('wallet.item4'), icon: 'crm-user', color: '#1ac23a', className: 'className1', content: 'CID: ' + (userInfo?.customInfo?.cId || '')
    },
    { name: t('wallet.item5'), icon: 'crm-wallet', color: '#0ea5e9', className: 'className2', content: '$ ' + formattedBalance.value },
    { name: t('wallet.pendingWithdraw'), icon: 'crm-wallet', color: '#ff9800', className: 'className3', content: '$ ' + formattedPendingWithdrawAmount.value }
])
const fullName = computed(() => formatName(userInfo?.customInfo))
//获取钱包信息
const walletbalance = ref(0)
const pendingWithdrawAmount = ref(0)
// 使用计算属性
const formattedBalance = computed(() => {
    const value = walletbalance.value || "0"
    const decimalValue = numberDecimal(value)
    return numberFormat(decimalValue)
})

const formattedPendingWithdrawAmount = computed(() => {
    const value = pendingWithdrawAmount.value || "0"
    const decimalValue = numberDecimal(value)
    return numberFormat(decimalValue)
})

const getWalletList = async () => {
    let res = await drawApi.walletbalance({});
    if (res.code == 200) {
        if (res.data != null) {
            walletbalance.value = res.data || 0
        }
    } else {
        // this.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 || 0
        }
    } else {
        // this.uni.showToast({ title: res.msg, icon: 'none' })
    }
}
getWalletList()
getPendingWithdrawAmount()
</script>

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

.amount-wallet {
    width: 100%;
    position: relative;


    .content-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: px2rpx(20);
        font-weight: 500;
        color: var(--color-slate-800);
        background-color: rgba(255, 255, 255, 0);

        .content-title-btns {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: px2rpx(12);


            .btn-primary {
                min-width: px2rpx(120);
                background-color: var(--color-error);
                color: var(--color-slate-150);
                padding: 0 px2rpx(12);
                border: none;
                font-size: px2rpx(14);
                text-align: center;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: px2rpx(8);
            }

            .btn-primary1 {
                background-color: #cf1322;
                ;
            }
        }
    }

    .amount-wallet-content {
        width: 100%;
        display: flex;
        align-items: center;
        gap: px2rpx(20);
    }


    .amount-wallet-item {
        position: relative;
        margin-top: px2rpx(20);
        flex: 1;
        height: px2rpx(80);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        overflow: hidden;
        padding: px2rpx(16);
        background-color: var(--color-white);

        .item-left {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: px2rpx(80);
        }

        .text {
            font-size: px2rpx(24);
            font-weight: 600;
            color: var(--color-slate-700);
        }

        .item-name {
            font-size: px2rpx(14);
            color: var(--color-slate-900);
        }


        .cwg-icon {
            width: px2rpx(40);
            height: px2rpx(40);
            border-radius: px2rpx(10);
            display: flex;
            align-items: center;
            justify-content: center;
            background-color:
                color-mix(in oklab, var(--color-secondary) 10%, transparent);
        }

        .bg {
            position: absolute;
            width: px2rpx(40);
            height: px2rpx(40);
            border-radius: px2rpx(10);
            bottom: px2rpx(-8);
            right: px2rpx(-8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            opacity: 0.25;
        }

    }

    .className2 {
        .cwg-icon {
            background-color:
                color-mix(in oklab, var(--color-info) 10%, transparent);
        }

    }

    .className3 {
        background-color:
            color-mix(in oklab, var(--color-warning) 10%, transparent);

        .cwg-icon {
            background-color:
                color-mix(in oklab, var(--color-warning) 10%, transparent);
        }
    }
}
</style>