de-net/src/view/components/preview-balance.vue

<template>
    <div class="card-amount">
        <img class="icon" src="@/assets/subject/icon-balance.png" />
        <div class="con">
            <div class="desc">Balance</div>
            <div class="price">{{ currentCurrencyInfo.balance }} {{ props.tokenSymbol }}</div>
        </div>
        <img class="refresh" :class="{ 'icon-refresh-rotate': refreshRotate }" @click="updateCurrencyBanlce"
            :src="require('@/assets/svg/icon-form-refresh-blue.svg')" />
    </div>
</template>
<script setup>
import { ref, onMounted, reactive, defineProps, defineEmits } from "vue";
import { syncChainTokenRechargeRecord } from "@/http/publishApi";
const emits = defineEmits(["updateData"]);
const props = defineProps({
    dialogVisible: {
        type: Object,
        default: {},
    },
    currencyCode: {
        type: String,
        default: ''
    },
    tokenSymbol: {
        type: String,
        default: ''
    }
});

/**
 * 同步链上交易
 */
const asyncTokenRechRecord = () => {
    syncChainTokenRechargeRecord({
        params: {
            currencyCode: props.currencyCode
        }
    }).then(res => {
        if (res.code == 0) {
            let data = res.data || []
            if (data.length > 0) {
                let currencyInfo = data[0];
                if (currencyInfo.currencyCode == props.currencyCode) {
                    currentCurrencyInfo.balance = currencyInfo.balance;
                    emits('updateData', currentCurrencyInfo)
                }
            } else {
                currentCurrencyInfo.balance = 0
                emits('updateData', currentCurrencyInfo)
            }
        }
    })
}
// 刷新按钮旋转
let refreshRotate = ref(false);

// 当前选择的货币信息
let currentCurrencyInfo = reactive({
    currencyCode: "",
    currencyName: "",
    balance: "",
    currencyType: "",
    iconPath: "",
    minAmount: "",
    tokenChain: "",
    tokenSymbol: "",
    usdEstimateBalance: ""
});

/**
 * 更新货币余额
 */
const updateCurrencyBanlce = () => {
    if (!refreshRotate.value) {
        refreshRotate.value = true;
        setTimeout(() => {
            refreshRotate.value = false;
        }, 1000)
    }
    asyncTokenRechRecord()
}


onMounted(() => {
    console.log(props.currencyCode)
    if (!props.currencyCode) {
        return
    }
    asyncTokenRechRecord()
    setInterval(() => {
        asyncTokenRechRecord()
    }, 10000)
})

</script>

<style lang="scss" scoped>
.card-amount {
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #E6E6E6;

    .icon {
        width: 40px;
        height: 40px;
    }

    .con {
        flex: 1;
        padding: 0 10px;

        .desc {
            color: rgba($color: #000000, $alpha: 0.5);
            font-size: 12px;
            margin-bottom: 4px;
            line-height: 14px;
        }

        .price {
            font-size: 16px;
            font-weight: bold;
            line-height: 19px;
        }
    }

    .refresh {
        cursor: pointer;
        width: 30px;
        height: 30px;
        margin-top: -5px;
    }


}

.icon-refresh-rotate {
    transform: rotate(360deg);
    transition-duration: 1s;
}
</style>