118 lines
3.0 KiB
Vue
118 lines
3.0 KiB
Vue
<template>
|
||
<div class="commission-display" :class="{ 'is-compact': compact }">
|
||
<div v-if="!compact" class="commission-item">
|
||
<span class="commission-label">佣金类型：</span>
|
||
<span class="commission-value">{{ commissionTypeLabel }}</span>
|
||
</div>
|
||
|
||
<div class="commission-item">
|
||
<span class="commission-label">{{ compact ? '' : '佣金金额：' }}</span>
|
||
<span class="commission-value commission-amount">
|
||
{{ formattedAmount }}
|
||
</span>
|
||
</div>
|
||
|
||
<div v-if="showRate && rate !== undefined" class="commission-item">
|
||
<span class="commission-label">{{ compact ? '' : '佣金比例：' }}</span>
|
||
<span class="commission-value">{{ rate }}%</span>
|
||
</div>
|
||
|
||
<div v-if="showStatus && status !== undefined" class="commission-item">
|
||
<span class="commission-label">{{ compact ? '' : '状态：' }}</span>
|
||
<el-tag :type="statusType" size="small">
|
||
{{ statusLabel }}
|
||
</el-tag>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import { formatMoney } from '@/utils/business'
|
||
import { WithdrawalStatus } from '@/types/api/commission'
|
||
import {
|
||
getCommissionTypeLabel,
|
||
getWithdrawalStatusLabel,
|
||
getWithdrawalStatusType
|
||
} from '@/config/constants'
|
||
|
||
interface Props {
|
||
// 佣金金额（单位：分）
|
||
amount: number
|
||
// 佣金类型
|
||
type?: string
|
||
// 佣金比例
|
||
rate?: number
|
||
// 状态（用于提现记录）
|
||
status?: WithdrawalStatus
|
||
// 是否显示比例
|
||
showRate?: boolean
|
||
// 是否显示状态
|
||
showStatus?: boolean
|
||
// 紧凑模式（只显示金额）
|
||
compact?: boolean
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
showRate: true,
|
||
showStatus: false,
|
||
compact: false
|
||
})
|
||
|
||
const formattedAmount = computed(() => formatMoney(props.amount))
|
||
|
||
const commissionTypeLabel = computed(() => {
|
||
return props.type !== undefined ? getCommissionTypeLabel(props.type) : '-'
|
||
})
|
||
|
||
const statusLabel = computed(() => {
|
||
return props.status !== undefined ? getWithdrawalStatusLabel(props.status) : '-'
|
||
})
|
||
|
||
const statusType = computed(() => {
|
||
return props.status !== undefined ? getWithdrawalStatusType(props.status) : 'info'
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.commission-display {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
|
||
&.is-compact {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.commission-item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
|
||
.commission-label {
|
||
margin-right: 8px;
|
||
color: var(--el-text-color-secondary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.commission-value {
|
||
font-weight: 500;
|
||
color: var(--el-text-color-primary);
|
||
|
||
&.commission-amount {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--el-color-success);
|
||
}
|
||
}
|
||
}
|
||
|
||
&.is-compact .commission-item {
|
||
.commission-label {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
</style>
|