232 lines
8.2 KiB
Vue
232 lines
8.2 KiB
Vue
<template>
|
|
<el-dialog
|
|
class="ba-operate-dialog deposit-detail-dialog"
|
|
:close-on-click-modal="false"
|
|
:model-value="isOpen"
|
|
width="640px"
|
|
@close="onDialogClose"
|
|
>
|
|
<template #header>
|
|
<div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
|
|
{{ t('order.depositOrder.detail_title') }}
|
|
</div>
|
|
</template>
|
|
|
|
<el-scrollbar v-loading="loading" class="ba-table-form-scrollbar">
|
|
<div
|
|
class="ba-operate-form ba-edit-form"
|
|
:style="config.layout.shrink ? '' : 'width: calc(100% - ' + (baTable.form.labelWidth ?? 120) / 2 + 'px)'"
|
|
>
|
|
<el-form
|
|
v-if="!loading"
|
|
:label-position="config.layout.shrink ? 'top' : 'right'"
|
|
:label-width="(baTable.form.labelWidth ?? 120) + 'px'"
|
|
@submit.prevent=""
|
|
>
|
|
<el-form-item :label="t('order.depositOrder.order_no')">
|
|
<el-input :model-value="form.order_no" readonly />
|
|
</el-form-item>
|
|
<el-form-item :label="t('order.depositOrder.idempotency_key')">
|
|
<el-input :model-value="form.idempotency_key || '-'" readonly />
|
|
</el-form-item>
|
|
<el-form-item :label="t('order.depositOrder.user_username')">
|
|
<el-input :model-value="form.user_text" readonly />
|
|
</el-form-item>
|
|
<el-form-item :label="t('order.depositOrder.channel_name')">
|
|
<el-input :model-value="form.channel_text" readonly />
|
|
</el-form-item>
|
|
<el-form-item :label="t('order.depositOrder.status')">
|
|
<el-tag :type="statusTagType" effect="dark" size="small">{{ statusLabel }}</el-tag>
|
|
</el-form-item>
|
|
|
|
<el-form-item :label="t('order.depositOrder.amount')">
|
|
<el-input :model-value="amountText" readonly />
|
|
</el-form-item>
|
|
<el-form-item :label="t('order.depositOrder.bonus_amount')">
|
|
<el-input :model-value="bonusText" readonly />
|
|
</el-form-item>
|
|
<el-form-item :label="t('order.depositOrder.total_credit')">
|
|
<el-input :model-value="totalCreditText" readonly />
|
|
</el-form-item>
|
|
|
|
<el-form-item :label="t('order.depositOrder.pay_channel')">
|
|
<el-input :model-value="form.pay_channel || '-'" readonly />
|
|
</el-form-item>
|
|
<el-form-item :label="t('order.depositOrder.pay_time')">
|
|
<el-input :model-value="form.pay_time_text" readonly />
|
|
</el-form-item>
|
|
<el-form-item :label="t('order.depositOrder.deposit_tier_id')">
|
|
<el-input :model-value="form.deposit_tier_id || '-'" readonly />
|
|
</el-form-item>
|
|
<el-form-item :label="t('order.depositOrder.remark')">
|
|
<el-input v-model="form.remark" type="textarea" :rows="2" readonly />
|
|
</el-form-item>
|
|
<el-form-item :label="t('order.depositOrder.create_time')">
|
|
<el-input :model-value="form.create_time_text" readonly />
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-scrollbar>
|
|
|
|
<template #footer>
|
|
<div class="detail-footer">
|
|
<el-button type="primary" v-blur @click="onDialogClose">{{ t('order.depositOrder.close_btn') }}</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, inject, reactive, ref, watch } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useConfig } from '/@/stores/config'
|
|
import type baTableClass from '/@/utils/baTable'
|
|
|
|
const config = useConfig()
|
|
const baTable = inject('baTable') as baTableClass
|
|
const { t } = useI18n()
|
|
|
|
const loading = ref(false)
|
|
|
|
const form = reactive({
|
|
id: 0,
|
|
order_no: '',
|
|
idempotency_key: '',
|
|
user_text: '-',
|
|
channel_text: '-',
|
|
pay_channel: '',
|
|
pay_time_text: '-',
|
|
deposit_tier_id: '',
|
|
remark: '',
|
|
create_time_text: '-',
|
|
amount: 0,
|
|
bonus_amount: 0,
|
|
status: 0,
|
|
})
|
|
|
|
const isOpen = computed(() => ['Edit'].includes(baTable.form.operate ?? ''))
|
|
|
|
watch(
|
|
() => ({ visible: isOpen.value, loadingState: baTable.form.loading, items: baTable.form.items }),
|
|
({ visible, loadingState }) => {
|
|
if (!visible) return
|
|
loading.value = loadingState === true
|
|
if (loadingState) return
|
|
hydrate()
|
|
},
|
|
{ deep: true, immediate: true }
|
|
)
|
|
|
|
const hydrate = () => {
|
|
const row = baTable.form.items as Record<string, unknown> | undefined
|
|
if (!row || !row['id']) {
|
|
return
|
|
}
|
|
form.id = Number(row['id'] ?? 0)
|
|
form.order_no = String(row['order_no'] ?? '')
|
|
form.idempotency_key = String(row['idempotency_key'] ?? '')
|
|
form.pay_channel = String(row['pay_channel'] ?? '')
|
|
form.deposit_tier_id = String(row['deposit_tier_id'] ?? '')
|
|
form.remark = String(row['remark'] ?? '')
|
|
form.amount = parseNumber(row['amount'])
|
|
form.bonus_amount = parseNumber(row['bonus_amount'])
|
|
form.status = Number(row['status'] ?? 0)
|
|
form.create_time_text = formatTime(row['create_time'])
|
|
form.pay_time_text = formatTime(row['pay_time'])
|
|
form.user_text = resolveRelationText(row, 'user', row['user_id'])
|
|
form.channel_text = resolveRelationText(row, 'channel', row['channel_id'])
|
|
}
|
|
|
|
const statusLabel = computed(() => t('order.depositOrder.status ' + form.status))
|
|
const statusTagType = computed(() => {
|
|
switch (form.status) {
|
|
case 1:
|
|
return 'success'
|
|
case 2:
|
|
return 'danger'
|
|
case 3:
|
|
return 'warning'
|
|
default:
|
|
return 'info'
|
|
}
|
|
})
|
|
|
|
const amountText = computed(() => formatAmount(form.amount))
|
|
const bonusText = computed(() => formatAmount(form.bonus_amount))
|
|
const totalCreditText = computed(() => formatAmount(Number((form.amount + form.bonus_amount).toFixed(2))))
|
|
|
|
const onDialogClose = () => {
|
|
baTable.toggleForm()
|
|
}
|
|
|
|
function parseNumber(raw: unknown): number {
|
|
if (raw === null || raw === undefined || raw === '') return 0
|
|
const n = Number(raw)
|
|
if (!Number.isFinite(n)) return 0
|
|
return Number(n.toFixed(2))
|
|
}
|
|
|
|
function formatAmount(value: number): string {
|
|
if (!Number.isFinite(value)) return '0.00'
|
|
return value.toFixed(2)
|
|
}
|
|
|
|
function formatTime(raw: unknown): string {
|
|
if (raw === null || raw === undefined || raw === '' || raw === 0) return '-'
|
|
const sec = Number(raw)
|
|
if (!Number.isFinite(sec) || sec <= 0) return '-'
|
|
const d = new Date(sec * 1000)
|
|
const pad = (n: number) => (n < 10 ? '0' + n : String(n))
|
|
return (
|
|
d.getFullYear() +
|
|
'-' +
|
|
pad(d.getMonth() + 1) +
|
|
'-' +
|
|
pad(d.getDate()) +
|
|
' ' +
|
|
pad(d.getHours()) +
|
|
':' +
|
|
pad(d.getMinutes()) +
|
|
':' +
|
|
pad(d.getSeconds())
|
|
)
|
|
}
|
|
|
|
function resolveRelationText(row: Record<string, unknown>, relationKey: string, fallbackId: unknown): string {
|
|
const rel = row[relationKey]
|
|
if (rel && typeof rel === 'object') {
|
|
const r = rel as Record<string, unknown>
|
|
const name = r['username'] ?? r['name']
|
|
if (typeof name === 'string' && name !== '') {
|
|
const id = fallbackId === null || fallbackId === undefined || fallbackId === '' ? '' : ' (ID: ' + String(fallbackId) + ')'
|
|
return name + id
|
|
}
|
|
}
|
|
if (fallbackId === null || fallbackId === undefined || fallbackId === '') {
|
|
return '-'
|
|
}
|
|
return 'ID: ' + String(fallbackId)
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.deposit-detail-dialog {
|
|
:deep(.el-dialog__body) {
|
|
padding-top: 8px;
|
|
}
|
|
}
|
|
|
|
.detail-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
:deep(.deposit-detail-dialog) {
|
|
width: calc(100vw - 24px) !important;
|
|
max-width: 100vw;
|
|
}
|
|
}
|
|
</style>
|