fix(operator): fix operator edit issue
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 4m35s
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 4m35s
This commit is contained in:
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<ElCard shadow="never" class="info-card wallet-overview-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>钱包概况</span>
|
||||
<ElTag v-if="walletInfo" :type="getWalletStatusType(walletInfo.status)" size="small">
|
||||
{{ walletInfo.status_text || '-' }}
|
||||
</ElTag>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="walletInfo">
|
||||
<!-- 钱包余额展示 -->
|
||||
<div class="wallet-balance-cards">
|
||||
<div class="balance-card total">
|
||||
<div class="balance-icon">💰</div>
|
||||
<div class="balance-info">
|
||||
<div class="balance-label">总余额</div>
|
||||
<div class="balance-value">{{ formatAmount(walletInfo.balance) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balance-card available">
|
||||
<div class="balance-icon">✅</div>
|
||||
<div class="balance-info">
|
||||
<div class="balance-label">可用余额</div>
|
||||
<div class="balance-value">{{ formatAmount(walletInfo.available_balance) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balance-card frozen">
|
||||
<div class="balance-icon">🔒</div>
|
||||
<div class="balance-info">
|
||||
<div class="balance-label">冻结余额</div>
|
||||
<div class="balance-value">{{ formatAmount(walletInfo.frozen_balance) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ElEmpty v-else-if="!loading" description="该资产暂无钱包记录" :image-size="100" />
|
||||
</ElCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElCard, ElTag, ElEmpty } from 'element-plus'
|
||||
import { useAssetFormatters } from '../composables/useAssetFormatters'
|
||||
|
||||
// Use formatters
|
||||
const { formatAmount, getWalletStatusType } = useAssetFormatters()
|
||||
|
||||
// Props
|
||||
interface WalletInfo {
|
||||
balance: number
|
||||
available_balance: number
|
||||
frozen_balance: number
|
||||
status: number
|
||||
status_text?: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
walletInfo: WalletInfo | null
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
loading: false
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wallet-overview-card {
|
||||
.wallet-balance-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.balance-card {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
background: var(--el-fill-color-light);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
box-shadow: 0 2px 6px rgb(0 0 0 / 6%);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.balance-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.balance-info {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
.balance-label {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.balance-value {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.total {
|
||||
.balance-value {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.available {
|
||||
.balance-value {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
}
|
||||
|
||||
&.frozen {
|
||||
.balance-value {
|
||||
color: var(--el-color-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user