90 lines
2.7 KiB
Vue
90 lines
2.7 KiB
Vue
<template>
|
|
<n-drawer :show="show" :width="680" @update:show="$emit('update:show', $event)">
|
|
<n-drawer-content title="充值卡详情" closable>
|
|
<n-spin :show="loading">
|
|
<template v-if="detail.card">
|
|
<n-descriptions bordered :column="1" size="small" label-placement="left">
|
|
<n-descriptions-item label="卡密">{{ detail.card.password || '-' }}</n-descriptions-item>
|
|
<n-descriptions-item label="面额">{{ detail.card.amount || 0 }}</n-descriptions-item>
|
|
<n-descriptions-item label="余额">{{ detail.card.balance || 0 }}</n-descriptions-item>
|
|
<n-descriptions-item label="状态">{{ detail.card.status_label || detail.card.status }}</n-descriptions-item>
|
|
<n-descriptions-item label="创建时间">{{ detail.card.created_at || '-' }}</n-descriptions-item>
|
|
<n-descriptions-item label="过期时间">{{ detail.card.expires_at || '-' }}</n-descriptions-item>
|
|
<n-descriptions-item label="使用时间">{{ detail.card.used_at || '-' }}</n-descriptions-item>
|
|
<n-descriptions-item label="使用者">
|
|
{{ detail.card.used_by_user?.display_name || '-' }}
|
|
</n-descriptions-item>
|
|
</n-descriptions>
|
|
|
|
<div class="aksrt-charge-drawer__section">
|
|
<div class="aksrt-charge-drawer__title">备注</div>
|
|
<n-alert type="info" :show-icon="false">
|
|
{{ detail.card.note || '暂无备注' }}
|
|
</n-alert>
|
|
</div>
|
|
</template>
|
|
|
|
<n-empty v-else description="暂无充值卡详情" />
|
|
</n-spin>
|
|
</n-drawer-content>
|
|
</n-drawer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
import { useMessage } from 'naive-ui'
|
|
import api from '@/api'
|
|
|
|
const props = defineProps({
|
|
show: { type: Boolean, default: false },
|
|
cardId: { type: [Number, String], default: null },
|
|
})
|
|
|
|
defineEmits(['update:show'])
|
|
|
|
const message = useMessage()
|
|
const loading = ref(false)
|
|
const detail = ref({ card: null })
|
|
|
|
watch(
|
|
() => [props.show, props.cardId],
|
|
async ([visible, id]) => {
|
|
if (visible && id) {
|
|
await loadDetail()
|
|
}
|
|
if (!visible) {
|
|
detail.value = { card: null }
|
|
}
|
|
},
|
|
)
|
|
|
|
async function loadDetail() {
|
|
if (!props.cardId) {
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
try {
|
|
const res = await api.request(`/payment/charge-cards/${props.cardId}`)
|
|
detail.value = res?.data || { card: null }
|
|
} catch (error) {
|
|
message.error(error?.message || '加载充值卡详情失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.aksrt-charge-drawer__section {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.aksrt-charge-drawer__title {
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
}
|
|
</style>
|