feat: 手动实名和套餐列表退款
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 5m53s

This commit is contained in:
sexygoat
2026-04-23 18:13:07 +08:00
parent 719db517f2
commit cd2ca96873
12 changed files with 539 additions and 180 deletions

View File

@@ -174,7 +174,7 @@
<ElTableColumn prop="carrier_name" label="运营商" min-width="120" />
<ElTableColumn prop="slot_position" label="卡槽位置" width="130">
<template #default="scope">
<div style="display: flex; gap: 10px; align-items: center; justify-content: center">
<div style="display: flex; gap: 10px">
<span>SIM-{{ scope.row.slot_position }}</span>
<ElTag v-if="scope.row.is_current" type="primary" size="small">当前</ElTag>
</div>
@@ -204,7 +204,7 @@
{{ scope.row.real_name_at ? formatDateTime(scope.row.real_name_at) : '-' }}
</template>
</ElTableColumn>
<ElTableColumn label="操作" width="120">
<ElTableColumn label="操作" width="180">
<template #default="scope">
<!-- 根据网络状态显示启用或停用按钮 -->
<ElButton
@@ -227,6 +227,15 @@
>
停用此卡
</ElButton>
<ElButton
type="primary"
size="small"
link
@click="handleUpdateBindingCardRealnameStatus(scope.row)"
v-permission="'bound_card:update_realname_status'"
>
更新实名状态
</ElButton>
</template>
</ElTableColumn>
</ElTable>
@@ -395,6 +404,13 @@
>
实名认证策略
</ElButton>
<ElButton
v-permission="'iot_info:update_realname_status'"
type="primary"
@click="handleShowUpdateRealnameStatus"
>
更新实名状态
</ElButton>
</div>
<!-- 设备操作按钮 -->
@@ -575,8 +591,10 @@
(e: 'showSwitchMode'): void
(e: 'show-set-wifi'): void
(e: 'showRealnamePolicy'): void
(e: 'showUpdateRealnameStatus'): void
(e: 'enableBindingCard', payload: { card: BindingCard }): void
(e: 'disableBindingCard', payload: { card: BindingCard }): void
(e: 'updateBindingCardRealnameStatus', payload: { card: BindingCard }): void
(e: 'navigateToCard', iccid: string): void
(e: 'navigateToDevice', deviceNo: string): void
}
@@ -680,6 +698,10 @@
emit('showRealnamePolicy')
}
const handleShowUpdateRealnameStatus = () => {
emit('showUpdateRealnameStatus')
}
// 绑定卡操作
const handleEnableBindingCard = (card: BindingCard) => {
ElMessageBox.confirm(`确定要启用此卡(${card.iccid})吗?`, '启用确认', {
@@ -704,6 +726,10 @@
})
.catch(() => {})
}
const handleUpdateBindingCardRealnameStatus = (card: BindingCard) => {
emit('updateBindingCardRealnameStatus', { card })
}
</script>
<style scoped lang="scss">

View File

@@ -77,6 +77,9 @@
<!-- 套餐详情表格 -->
<ElDescriptions :column="3" border class="package-info-table">
<ElDescriptionsItem label="订单号">
{{ currentPackage.order_no || '-' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="套餐名称">
{{ currentPackage.package_name || '-' }}
</ElDescriptionsItem>

View File

@@ -25,6 +25,7 @@
</ElEmpty>
<div v-else-if="packageList && packageList.length > 0" class="table-scroll-container">
<ElTable :data="packageList" class="package-table" border>
<ElTableColumn prop="order_no" label="订单号" width="180" show-overflow-tooltip />
<ElTableColumn label="套餐名称" width="150">
<template #default="scope">
<ElButton
@@ -54,7 +55,7 @@
{{ formatDataSize(scope.row.data_limit_mb) }}
</template>
</ElTableColumn>
<ElTableColumn label="流量" min-width="220">
<ElTableColumn label="流量" min-width="320">
<template #default="scope">
<div class="traffic-progress">
<div class="progress-text">
@@ -107,17 +108,29 @@
{{ formatDateTime(scope.row.expires_at) }}
</template>
</ElTableColumn>
<ElTableColumn prop="created_at" label="创建时间" width="170" show-overflow-tooltip>
<ElTableColumn prop="created_at" label="购买时间" width="170" show-overflow-tooltip>
<template #default="scope">
{{ formatDateTime(scope.row.created_at) }}
</template>
</ElTableColumn>
<ElTableColumn label="操作" width="100" fixed="right">
<template #default="scope">
<ElButton
v-if="scope.row.status !== 4 && hasAuth('package:create_refund')"
type="primary"
link
@click="handleCreateRefund(scope.row)"
>
退款申请
</ElButton>
</template>
</ElTableColumn>
</ElTable>
<ElPagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.pageSize"
v-model:page-size="pagination.page_size"
:total="pagination.total"
:page-sizes="[10, 20, 50, 100]"
:page-sizes="[5, 10, 20]"
layout="total, sizes, prev, pager, next, jumper"
class="pagination"
@current-change="handlePageChange"
@@ -126,6 +139,13 @@
</div>
<ElEmpty v-else-if="!props.boundDeviceId" description="暂无套餐数据" :image-size="100" />
</div>
<!-- 退款申请对话框 -->
<CreateRefundDialog
v-model="createRefundDialogVisible"
:initial-order-no="currentRefundOrderNo"
@success="handleRefundSuccess"
/>
</ElCard>
</template>
@@ -147,9 +167,27 @@
import { formatDateTime } from '@/utils/business/format'
import type { AssetPackageUsageRecord } from '@/types/api'
import { useAuth } from '@/composables/useAuth'
import CreateRefundDialog from '@/components/business/CreateRefundDialog.vue'
const { hasAuth } = useAuth()
// 退款申请对话框
const createRefundDialogVisible = ref(false)
const currentRefundOrderNo = ref<string | undefined>(undefined)
const handleCreateRefund = (row: PackageInfo) => {
if (!hasAuth('package:create_refund')) {
ElMessage.warning('您没有创建退款申请的权限')
return
}
currentRefundOrderNo.value = row.order_no
createRefundDialogVisible.value = true
}
const handleRefundSuccess = () => {
emit('refresh')
}
// Props 使用 API 类型
type PackageInfo = AssetPackageUsageRecord
@@ -179,6 +217,7 @@
(e: 'page-change', page: number): void
(e: 'size-change', size: number): void
(e: 'navigateToDevice', deviceNo: string): void
(e: 'refresh'): void
}
const emit = defineEmits<Emits>()
@@ -186,7 +225,7 @@
// 分页状态
const pagination = ref({
page: props.page,
pageSize: props.pageSize,
page_size: props.pageSize,
total: props.total
})
@@ -195,7 +234,7 @@
() => [props.page, props.pageSize, props.total],
([newPage, newPageSize, newTotal]) => {
pagination.value.page = newPage
pagination.value.pageSize = newPageSize
pagination.value.page_size = newPageSize
pagination.value.total = newTotal
}
)