2050 lines
64 KiB
Vue
2050 lines
64 KiB
Vue
<script setup lang="ts">
|
||
import { readError } from '@/shared/utils/error'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { computed, onMounted, ref } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
|
||
import {
|
||
adminCloseOrder,
|
||
adminForceHandoff,
|
||
adminHoldDeposit,
|
||
adminMarkOfflineSettlement,
|
||
adminMarkOrderAbnormal,
|
||
adminPlatformCheckoutCounter,
|
||
adminPlatformCheckoutConfirm,
|
||
adminPlatformCheckoutDispute,
|
||
adminPlatformHandoff,
|
||
adminRefundOrder,
|
||
adminRefundStatus,
|
||
adminReleaseDeposit,
|
||
adminResetHandoff,
|
||
adminSealOrder,
|
||
fetchAdminHandoffRecords,
|
||
fetchAdminOrder,
|
||
type HandoffRecord,
|
||
type Order,
|
||
type RefundStatus,
|
||
} from '@/features/orders'
|
||
import { adminCreateOrderDispute } from '@/features/disputes'
|
||
import { fetchAdminPayments, type AdminPayment } from '@/features/admin/api/adminPayments'
|
||
import {
|
||
getSnapshotHafCoinM,
|
||
linesToList,
|
||
readSnapshot,
|
||
readSnapshotResources,
|
||
} from '@/features/orders/composables/useOrderSnapshot'
|
||
import { adminPath } from '@/shared/utils/adminPath'
|
||
import { centToYuan, formatCentWithSymbol } from '@/shared/utils/money'
|
||
import {
|
||
disputeStatusLabel,
|
||
orderHandoffStatusLabel,
|
||
orderStatusLabel,
|
||
refundStatusLabel,
|
||
settlementStatusLabel,
|
||
} from '@/shared/utils/statusLabels'
|
||
import { formatDateTime } from '@/shared/utils/time'
|
||
import { formatGameName, formatListingNo } from '@/shared/utils/listingDisplay'
|
||
|
||
const route = useRoute()
|
||
const loading = ref(false)
|
||
const submitting = ref(false)
|
||
const order = ref<Order | null>(null)
|
||
const handoffRecords = ref<HandoffRecord[]>([])
|
||
const paymentRecords = ref<AdminPayment[]>([])
|
||
type OrderActionType =
|
||
| 'close'
|
||
| 'seal'
|
||
| 'abnormal'
|
||
| 'reset'
|
||
| 'platform_checkout_confirm'
|
||
| 'platform_checkout_dispute'
|
||
| 'deposit_hold'
|
||
| 'deposit_release'
|
||
| ''
|
||
const actionType = ref<OrderActionType>('')
|
||
const reason = ref('')
|
||
const refundStatus = ref<RefundStatus | null>(null)
|
||
const platformHandoffVisible = ref(false)
|
||
const platformHandoffContent = ref('')
|
||
const platformHandoffReason = ref('')
|
||
const forceHandoffVisible = ref(false)
|
||
const forceHandoffContent = ref('')
|
||
const forceHandoffReason = ref('')
|
||
const platformCheckoutCounterVisible = ref(false)
|
||
const platformCheckoutCounterForm = ref({
|
||
consumableAmountYuan: 0,
|
||
coin_consumed_m: 0,
|
||
depositDeductAmountYuan: 0,
|
||
reason: '',
|
||
evidenceText: '',
|
||
})
|
||
const offlineSettlementVisible = ref(false)
|
||
const offlineSettlementRemark = ref('')
|
||
const platformSubmitting = ref(false)
|
||
const adminDisputeVisible = ref(false)
|
||
const adminDisputeSubmitting = ref(false)
|
||
const adminDisputeForm = ref({
|
||
type: 'cannot_login',
|
||
targetRole: 'renter',
|
||
description: '',
|
||
evidenceText: '',
|
||
})
|
||
|
||
type FundSplitRow = {
|
||
label: string
|
||
amountCent: number | null | undefined
|
||
}
|
||
|
||
const listingCode = computed(() =>
|
||
order.value ? formatListingNo(order.value.listing_no, order.value.listing_id) : '-'
|
||
)
|
||
const returnTarget = computed(() => {
|
||
const from = firstQueryValue(route.query.from)
|
||
const chatID = firstQueryValue(route.query.chat_id)
|
||
const chatFilter = firstQueryValue(route.query.chat_filter)
|
||
const chatStage = firstQueryValue(route.query.chat_stage)
|
||
const chatKeyword = firstQueryValue(route.query.chat_keyword)
|
||
if (from === 'chat' && chatID) {
|
||
return {
|
||
path: adminPath('chats'),
|
||
query: {
|
||
chat_id: chatID,
|
||
...(chatFilter ? { chat_filter: chatFilter } : {}),
|
||
...(chatStage ? { chat_stage: chatStage } : {}),
|
||
...(chatKeyword ? { chat_keyword: chatKeyword } : {}),
|
||
},
|
||
}
|
||
}
|
||
return adminPath('orders')
|
||
})
|
||
const returnLabel = computed(() =>
|
||
firstQueryValue(route.query.from) === 'chat' && firstQueryValue(route.query.chat_id)
|
||
? '返回会话'
|
||
: '返回列表'
|
||
)
|
||
const refunding = ref(false)
|
||
|
||
const snapshotText = computed(() => JSON.stringify(order.value?.account_snapshot || {}, null, 2))
|
||
const canOperate = computed(
|
||
() => !!order.value && !['completed', 'cancelled', 'closed'].includes(order.value.status)
|
||
)
|
||
const resetAction = computed(() => order.value?.admin_actions?.reset_handoff)
|
||
const platformHandoffAction = computed(() => order.value?.admin_actions?.platform_handoff)
|
||
const forceHandoffAction = computed(() => order.value?.admin_actions?.force_handoff)
|
||
const platformCheckoutConfirmAction = computed(
|
||
() => order.value?.admin_actions?.platform_checkout_confirm
|
||
)
|
||
const platformCheckoutCounterAction = computed(
|
||
() => order.value?.admin_actions?.platform_checkout_counter
|
||
)
|
||
const platformCheckoutDisputeAction = computed(
|
||
() => order.value?.admin_actions?.platform_checkout_dispute
|
||
)
|
||
const offlineSettlementAction = computed(
|
||
() => order.value?.admin_actions?.platform_offline_settlement
|
||
)
|
||
const resetActionLabel = computed(() => {
|
||
return resetAction.value?.label || '重置'
|
||
})
|
||
const canResetHandoff = computed(() => resetAction.value?.enabled === true)
|
||
const canPlatformHandoff = computed(() => platformHandoffAction.value?.enabled === true)
|
||
const canForceHandoff = computed(() => forceHandoffAction.value?.enabled === true)
|
||
const forceHandoffNeedsContent = computed(
|
||
() =>
|
||
order.value?.handoff_status === 'pending_owner' ||
|
||
order.value?.handoff_status === 'owner_timeout'
|
||
)
|
||
const canPlatformCheckoutConfirm = computed(
|
||
() => platformCheckoutConfirmAction.value?.enabled === true
|
||
)
|
||
const canPlatformCheckoutCounter = computed(
|
||
() => platformCheckoutCounterAction.value?.enabled === true
|
||
)
|
||
const canPlatformCheckoutDispute = computed(
|
||
() => platformCheckoutDisputeAction.value?.enabled === true
|
||
)
|
||
const canOfflineSettlement = computed(() => offlineSettlementAction.value?.enabled === true)
|
||
const canAdminCreateDispute = computed(() => canOperate.value && !order.value?.active_dispute)
|
||
const isPlatformManaged = computed(
|
||
() =>
|
||
order.value?.handoff_mode === 'platform' || order.value?.settlement_mode === 'platform_managed'
|
||
)
|
||
const offlineSettlementStatus = computed(() => order.value?.offline_settlement_status || 'none')
|
||
// 押金暂扣：仅进行中、有实付押金、且未暂扣过的订单可暂扣。
|
||
const depositHoldStatus = computed(() => order.value?.deposit_hold_status || 'none')
|
||
const depositHoldAmountCent = computed(() => Number(order.value?.deposit_hold_amount_cent || 0))
|
||
const isDepositHeld = computed(() => depositHoldStatus.value === 'held')
|
||
const canHoldDeposit = computed(
|
||
() =>
|
||
canOperate.value &&
|
||
depositHoldStatus.value === 'none' &&
|
||
Number(order.value?.deposit_amount_cent || 0) > 0
|
||
)
|
||
const canReleaseDeposit = computed(() => isDepositHeld.value && depositHoldAmountCent.value > 0)
|
||
const depositHoldStatusLabel = computed(() => {
|
||
switch (depositHoldStatus.value) {
|
||
case 'held':
|
||
return '押金已暂扣'
|
||
case 'released':
|
||
return '押金已归还'
|
||
default:
|
||
return ''
|
||
}
|
||
})
|
||
const actionTitle = computed(() => {
|
||
if (actionType.value === 'close') return '客服关闭订单'
|
||
if (actionType.value === 'seal') return '封存订单'
|
||
if (actionType.value === 'reset') return `${resetActionLabel.value}（恢复到对应待办）`
|
||
if (actionType.value === 'platform_checkout_confirm') return '客服确认结账'
|
||
if (actionType.value === 'platform_checkout_dispute') return '发起结账争议'
|
||
if (actionType.value === 'deposit_hold') return '暂扣押金'
|
||
if (actionType.value === 'deposit_release') return '归还暂扣押金'
|
||
return '标记订单异常'
|
||
})
|
||
const actionConfirmButtonType = computed(() => {
|
||
if (['deposit_release', 'platform_checkout_confirm'].includes(actionType.value)) return 'primary'
|
||
if (actionType.value === 'platform_checkout_dispute') return 'warning'
|
||
return 'danger'
|
||
})
|
||
const closeActionTip =
|
||
'关闭订单并归档商品/账号；已支付订单会原路退款，押金已暂扣时押金部分会继续挂起。'
|
||
const sealActionTip =
|
||
'封存订单：终止订单并原路退款，自动解散关联群聊，关联商品永久封存；押金已暂扣时押金部分会继续挂起。'
|
||
const depositHoldActionTip = '暂扣后订单继续流转；后续本应退给租客的押金会挂起，需客服手动归还。'
|
||
const depositReleaseActionTip = computed(() =>
|
||
depositHoldAmountCent.value > 0
|
||
? `将已暂扣的 ${moneyCent(depositHoldAmountCent.value)} 押金原路归还租客。`
|
||
: '暂扣金额为 0，需订单结算/关闭/仲裁产生暂扣金额后才能归还。'
|
||
)
|
||
const refundActionTip =
|
||
'仅发起后台人工原路退款，不关闭订单或调整商品/账号状态；押金已暂扣时仅退非暂扣部分。'
|
||
const refundButtonDisabled = computed(() => refundStatus.value?.refund_status === 'refunded')
|
||
const disputeTypeOptions = [
|
||
{ label: '无法登录', value: 'cannot_login' },
|
||
{ label: '描述不符', value: 'false_description' },
|
||
{ label: '账号封禁', value: 'account_banned' },
|
||
{ label: '资产损失', value: 'asset_loss' },
|
||
{ label: '哈夫币争议', value: 'haf_coin_dispute' },
|
||
{ label: '交接超时', value: 'handoff_timeout' },
|
||
{ label: '归还超时', value: 'return_timeout' },
|
||
{ label: '结账金额争议', value: 'checkout_amount' },
|
||
]
|
||
const orderTotalCent = computed(
|
||
() => Number(order.value?.rent_amount_cent || 0) + Number(order.value?.deposit_amount_cent || 0)
|
||
)
|
||
const latestPayment = computed(() => {
|
||
return [...paymentRecords.value].sort(
|
||
(a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
|
||
)[0]
|
||
})
|
||
const paidOrderPayment = computed(() =>
|
||
paymentRecords.value.find(item => item.biz_type === 'order_pay' && item.status === 'paid')
|
||
)
|
||
const currentSnapshot = computed(() => readSnapshot(order.value))
|
||
const snapshotHafCoinM = computed(() => getSnapshotHafCoinM(order.value))
|
||
const checkoutRemainingHafCoinM = computed(() => {
|
||
if (!order.value?.checkout) return 0
|
||
return Number(snapshotHafCoinM.value || 0) - Number(order.value.checkout.coin_consumed_m || 0)
|
||
})
|
||
const snapshotResources = computed(() => readSnapshotResources(order.value).slice(0, 6))
|
||
const assetSummary = computed(() => {
|
||
const snapshot = order.value?.account_snapshot
|
||
if (typeof snapshot !== 'object' || snapshot === null) return null
|
||
const summary = (snapshot as Record<string, unknown>).asset_summary
|
||
if (typeof summary !== 'object' || summary === null) return null
|
||
return summary as Record<string, unknown>
|
||
})
|
||
const snapshotPriceBreakdown = computed(() => {
|
||
const breakdown = assetSummary.value?.price_breakdown
|
||
if (typeof breakdown !== 'object' || breakdown === null) return null
|
||
return breakdown as Record<string, unknown>
|
||
})
|
||
const snapshotRatio = computed(() => {
|
||
const row = snapshotPriceBreakdown.value
|
||
if (!row) return null
|
||
const sellerRatio = Number(row.seller_ratio || 0)
|
||
const buyerRatio = Number(row.buyer_ratio || 0)
|
||
const publishRatio = Number(assetSummary.value?.publish_ratio || 0)
|
||
return {
|
||
recycleRatio: sellerRatio > 0 ? sellerRatio : publishRatio > 0 ? publishRatio : 0,
|
||
sellRatio: buyerRatio > 0 ? buyerRatio : 0,
|
||
}
|
||
})
|
||
const ownerCoinBasePriceCent = computed(() => readPriceBreakdownCent('seller_coin_base_price'))
|
||
const ownerLossPriceCent = computed(() => {
|
||
const consumableCent = readPriceBreakdownCent('consumable_price')
|
||
if (consumableCent !== null) return consumableCent
|
||
if (ownerCoinBasePriceCent.value === null || !order.value?.owner_rent_amount_cent) return null
|
||
return Math.max(Number(order.value.owner_rent_amount_cent) - ownerCoinBasePriceCent.value, 0)
|
||
})
|
||
const hasOwnerRentBreakdown = computed(() => ownerCoinBasePriceCent.value !== null)
|
||
const fundSplitRows = computed(() => {
|
||
if (!order.value) return []
|
||
const rows: FundSplitRow[] = []
|
||
rows.push(
|
||
{ label: '预收纯币原价', amountCent: order.value.pure_coin_original_amount_cent },
|
||
{ label: '预收额外物品', amountCent: order.value.extra_item_original_amount_cent }
|
||
)
|
||
if (Number(order.value.rent_discount_amount_cent || 0) > 0) {
|
||
rows.push(
|
||
{ label: '原始租金', amountCent: order.value.rent_original_amount_cent },
|
||
{
|
||
label: `${order.value.renter_growth_level_name || '成长等级'}优惠`,
|
||
amountCent: -Number(order.value.rent_discount_amount_cent || 0),
|
||
}
|
||
)
|
||
}
|
||
if (order.value.status === 'completed') {
|
||
rows.push(
|
||
{ label: '最终实际纯币原价', amountCent: order.value.actual_pure_coin_amount_cent },
|
||
{
|
||
label: '最终实际纯币优惠',
|
||
amountCent: -Number(order.value.actual_pure_coin_discount_cent || 0),
|
||
},
|
||
{ label: '积分计算纯币基数', amountCent: order.value.growth_points_basis_cent }
|
||
)
|
||
}
|
||
rows.push({ label: '租客租金', amountCent: order.value.rent_amount_cent })
|
||
if (hasOwnerRentBreakdown.value) {
|
||
rows.push(
|
||
{ label: '号主纯币价格', amountCent: ownerCoinBasePriceCent.value },
|
||
{ label: '号主损耗', amountCent: ownerLossPriceCent.value ?? 0 },
|
||
{ label: '号主租金合计', amountCent: order.value.owner_rent_amount_cent }
|
||
)
|
||
} else {
|
||
rows.push({ label: '号主租金', amountCent: order.value.owner_rent_amount_cent })
|
||
}
|
||
rows.push(
|
||
{ label: '平台费用', amountCent: order.value.platform_fee_cent },
|
||
{ label: '实付押金', amountCent: order.value.deposit_amount_cent },
|
||
{ label: '原始押金', amountCent: order.value.deposit_original_amount_cent },
|
||
{ label: '免押额度', amountCent: order.value.deposit_waived_amount_cent }
|
||
)
|
||
return rows
|
||
})
|
||
const snapshotSeasonTags = computed(() => {
|
||
const tags = currentSnapshot.value?.season_tags
|
||
return Array.isArray(tags) ? tags.map(item => String(item)).filter(Boolean) : []
|
||
})
|
||
const accountSnapshotItems = computed(() => {
|
||
const snapshot = currentSnapshot.value
|
||
if (!snapshot) return []
|
||
return [
|
||
{ label: '账号ID', value: displayValue(snapshot.account_id) },
|
||
{ label: '账号标题', value: displayValue(snapshot.title) },
|
||
{ label: '游戏名称', value: formatGameName(snapshot.game_name, '-') },
|
||
{ label: '所在区服', value: displayValue(snapshot.server_region) },
|
||
{ label: '登录平台', value: displayValue(snapshot.login_platform) },
|
||
{ label: '段位等级', value: displayValue(snapshot.rank_level) },
|
||
].filter(item => item.value !== '-')
|
||
})
|
||
|
||
onMounted(loadOrder)
|
||
|
||
async function loadOrder() {
|
||
loading.value = true
|
||
try {
|
||
order.value = await fetchAdminOrder(String(route.params.id))
|
||
handoffRecords.value = await fetchAdminHandoffRecords(String(route.params.id))
|
||
paymentRecords.value = (await fetchAdminPayments({ order_id: String(route.params.id) })).items
|
||
await loadRefundStatus()
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
async function loadRefundStatus() {
|
||
try {
|
||
refundStatus.value = await adminRefundStatus(Number(route.params.id))
|
||
} catch {
|
||
refundStatus.value = null
|
||
}
|
||
}
|
||
|
||
function openAction(type: Exclude<OrderActionType, ''>) {
|
||
actionType.value = type
|
||
reason.value = ''
|
||
}
|
||
|
||
async function confirmCloseAction() {
|
||
if (!order.value || !canOperate.value) return
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
'客服关闭会终止订单，归档关联商品和账号；若订单已支付，将发起原路退款。若押金已暂扣，押金部分会继续挂起。确认继续？',
|
||
'确认客服关闭',
|
||
{
|
||
confirmButtonText: '继续关闭',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}
|
||
)
|
||
} catch {
|
||
return
|
||
}
|
||
openAction('close')
|
||
}
|
||
|
||
async function confirmSealAction() {
|
||
if (!order.value || !canOperate.value) return
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
'封存会终止订单并发起原路退款，自动解散关联群聊，关联商品将被永久封存。若押金已暂扣，押金部分会继续挂起。确认继续？',
|
||
'确认封存订单',
|
||
{
|
||
confirmButtonText: '继续封存',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}
|
||
)
|
||
} catch {
|
||
return
|
||
}
|
||
openAction('seal')
|
||
}
|
||
|
||
async function confirmHoldDeposit() {
|
||
if (!order.value || !canHoldDeposit.value) return
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
'暂扣后订单继续流转；后续结算、关闭或仲裁中本应退给租客的押金会被挂起，需客服手动归还。确认继续？',
|
||
'确认暂扣押金',
|
||
{
|
||
confirmButtonText: '继续暂扣',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}
|
||
)
|
||
} catch {
|
||
return
|
||
}
|
||
openAction('deposit_hold')
|
||
}
|
||
|
||
async function confirmReleaseDeposit() {
|
||
if (!order.value || !isDepositHeld.value) return
|
||
if (!canReleaseDeposit.value) {
|
||
ElMessage.warning('暂扣押金尚未形成可归还金额')
|
||
return
|
||
}
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
`将已暂扣的 ${moneyCent(depositHoldAmountCent.value)} 押金原路归还租客。确认继续？`,
|
||
'确认归还押金',
|
||
{
|
||
confirmButtonText: '继续归还',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}
|
||
)
|
||
} catch {
|
||
return
|
||
}
|
||
openAction('deposit_release')
|
||
}
|
||
|
||
async function submitAction() {
|
||
if (!order.value || !actionType.value) return
|
||
submitting.value = true
|
||
try {
|
||
if (actionType.value === 'close') {
|
||
await adminCloseOrder(order.value.id, reason.value)
|
||
ElMessage.success('订单已关闭')
|
||
} else if (actionType.value === 'seal') {
|
||
await adminSealOrder(order.value.id, reason.value)
|
||
ElMessage.success('订单已封存，群聊已解散')
|
||
} else if (actionType.value === 'reset') {
|
||
await adminResetHandoff(order.value.id, reason.value)
|
||
ElMessage.success(`${resetActionLabel.value}成功`)
|
||
} else if (actionType.value === 'platform_checkout_confirm') {
|
||
await adminPlatformCheckoutConfirm(order.value.id, reason.value)
|
||
ElMessage.success('结账已确认')
|
||
} else if (actionType.value === 'platform_checkout_dispute') {
|
||
await adminPlatformCheckoutDispute(order.value.id, reason.value)
|
||
ElMessage.success('已发起结账争议')
|
||
} else if (actionType.value === 'deposit_hold') {
|
||
await adminHoldDeposit(order.value.id, reason.value)
|
||
ElMessage.success('押金已暂扣')
|
||
} else if (actionType.value === 'deposit_release') {
|
||
await adminReleaseDeposit(order.value.id, reason.value)
|
||
ElMessage.success('暂扣押金已发起归还')
|
||
} else {
|
||
await adminMarkOrderAbnormal(order.value.id, reason.value)
|
||
ElMessage.success('订单已标记异常')
|
||
}
|
||
actionType.value = ''
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '操作失败'))
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
|
||
function openPlatformHandoff() {
|
||
platformHandoffContent.value = ''
|
||
platformHandoffReason.value = ''
|
||
platformHandoffVisible.value = true
|
||
}
|
||
|
||
async function submitPlatformHandoff() {
|
||
if (!order.value) return
|
||
if (!platformHandoffContent.value.trim() || !platformHandoffReason.value.trim()) {
|
||
ElMessage.warning('请填写交接说明和操作原因')
|
||
return
|
||
}
|
||
platformSubmitting.value = true
|
||
try {
|
||
await adminPlatformHandoff(
|
||
order.value.id,
|
||
platformHandoffContent.value.trim(),
|
||
platformHandoffReason.value.trim()
|
||
)
|
||
ElMessage.success('客服代交接已提交')
|
||
platformHandoffVisible.value = false
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '代交接失败'))
|
||
} finally {
|
||
platformSubmitting.value = false
|
||
}
|
||
}
|
||
|
||
function openForceHandoff() {
|
||
forceHandoffContent.value = ''
|
||
forceHandoffReason.value = ''
|
||
forceHandoffVisible.value = true
|
||
}
|
||
|
||
async function submitForceHandoff() {
|
||
if (!order.value) return
|
||
if (!forceHandoffReason.value.trim()) {
|
||
ElMessage.warning('请填写客服操作原因')
|
||
return
|
||
}
|
||
if (forceHandoffNeedsContent.value && !forceHandoffContent.value.trim()) {
|
||
ElMessage.warning('当前尚无交接说明，请填写交接内容')
|
||
return
|
||
}
|
||
platformSubmitting.value = true
|
||
try {
|
||
await adminForceHandoff(
|
||
order.value.id,
|
||
forceHandoffContent.value.trim(),
|
||
forceHandoffReason.value.trim()
|
||
)
|
||
ElMessage.success('客服已确认交接，订单进入使用中')
|
||
forceHandoffVisible.value = false
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '客服一键交接失败'))
|
||
} finally {
|
||
platformSubmitting.value = false
|
||
}
|
||
}
|
||
|
||
function openPlatformCheckoutCounter() {
|
||
const checkout = order.value?.checkout
|
||
platformCheckoutCounterForm.value = {
|
||
consumableAmountYuan: centToYuan(checkout?.consumable_amount_cent || 0),
|
||
coin_consumed_m: Number(checkout?.coin_consumed_m || snapshotHafCoinM.value || 0),
|
||
depositDeductAmountYuan: centToYuan(
|
||
checkout?.deposit_deduct_amount_cent || checkout?.other_amount_cent || 0
|
||
),
|
||
reason: '',
|
||
evidenceText: Array.isArray(checkout?.evidence_urls) ? checkout.evidence_urls.join('\n') : '',
|
||
}
|
||
platformCheckoutCounterVisible.value = true
|
||
}
|
||
|
||
async function submitPlatformCheckoutCounter() {
|
||
if (!order.value) return
|
||
const form = platformCheckoutCounterForm.value
|
||
if (!form.reason.trim()) {
|
||
ElMessage.warning('请填写修改原因')
|
||
return
|
||
}
|
||
platformSubmitting.value = true
|
||
try {
|
||
await adminPlatformCheckoutCounter(order.value.id, {
|
||
content: form.reason.trim(),
|
||
consumableAmountYuan: form.consumableAmountYuan,
|
||
coin_consumed_m: form.coin_consumed_m,
|
||
otherAmountYuan: form.depositDeductAmountYuan,
|
||
depositDeductAmountYuan: form.depositDeductAmountYuan,
|
||
reason: form.reason.trim(),
|
||
evidence_urls: linesToList(form.evidenceText),
|
||
})
|
||
ElMessage.success('结账方案已修改，等待租客确认')
|
||
platformCheckoutCounterVisible.value = false
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '修改结账方案失败'))
|
||
} finally {
|
||
platformSubmitting.value = false
|
||
}
|
||
}
|
||
|
||
function openAdminDispute() {
|
||
adminDisputeForm.value = {
|
||
type: ['pending_checkout_confirm', 'pending_checkout_accept'].includes(
|
||
order.value?.status || ''
|
||
)
|
||
? 'checkout_amount'
|
||
: 'cannot_login',
|
||
targetRole: 'renter',
|
||
description: '',
|
||
evidenceText: '',
|
||
}
|
||
adminDisputeVisible.value = true
|
||
}
|
||
|
||
async function submitAdminDispute() {
|
||
if (!order.value) return
|
||
const form = adminDisputeForm.value
|
||
if (!form.description.trim()) {
|
||
ElMessage.warning('请填写申诉说明')
|
||
return
|
||
}
|
||
adminDisputeSubmitting.value = true
|
||
try {
|
||
await adminCreateOrderDispute(order.value.id, {
|
||
type: form.type,
|
||
target_role: form.targetRole,
|
||
description: form.description.trim(),
|
||
evidence_urls: linesToList(form.evidenceText),
|
||
})
|
||
ElMessage.success('申诉已发起，订单进入仲裁流程')
|
||
adminDisputeVisible.value = false
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '发起申诉失败'))
|
||
} finally {
|
||
adminDisputeSubmitting.value = false
|
||
}
|
||
}
|
||
|
||
function openOfflineSettlement() {
|
||
offlineSettlementRemark.value = ''
|
||
offlineSettlementVisible.value = true
|
||
}
|
||
|
||
async function submitOfflineSettlement() {
|
||
if (!order.value) return
|
||
platformSubmitting.value = true
|
||
try {
|
||
await adminMarkOfflineSettlement(order.value.id, offlineSettlementRemark.value.trim())
|
||
ElMessage.success('线下结算已确认')
|
||
offlineSettlementVisible.value = false
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '确认线下结算失败'))
|
||
} finally {
|
||
platformSubmitting.value = false
|
||
}
|
||
}
|
||
|
||
function orderRentedAt() {
|
||
return order.value?.rented_at
|
||
}
|
||
|
||
function orderEstimatedEndAt() {
|
||
if (!order.value) return undefined
|
||
if (order.value.estimated_end_at) return order.value.estimated_end_at
|
||
const rentedAt = orderRentedAt()
|
||
const durationHours = Number(order.value.estimated_duration_hours || 0)
|
||
if (!rentedAt || durationHours <= 0) return undefined
|
||
return new Date(new Date(rentedAt).getTime() + durationHours * 60 * 60 * 1000).toISOString()
|
||
}
|
||
|
||
async function handleRefund() {
|
||
if (!order.value) return
|
||
refunding.value = true
|
||
try {
|
||
refundStatus.value = await adminRefundOrder(order.value.id)
|
||
ElMessage.success('退款已发起')
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '退款失败'))
|
||
} finally {
|
||
refunding.value = false
|
||
}
|
||
}
|
||
|
||
async function confirmRefund() {
|
||
if (!order.value || refundButtonDisabled.value) return
|
||
const hasRefundInProgress = ['pending', 'refunding'].includes(
|
||
refundStatus.value?.refund_status || ''
|
||
)
|
||
const message = hasRefundInProgress
|
||
? '当前订单已有退款处理中，继续人工退款可能导致重复全量退款。确认仍要发起？'
|
||
: isDepositHeld.value
|
||
? '人工退款不会关闭订单或调整商品状态；当前押金已暂扣，本次仅退非暂扣部分。确认继续？'
|
||
: '人工退款只会发起原路退款，不会关闭订单或调整商品状态。请确认该订单确实需要补发退款。'
|
||
try {
|
||
await ElMessageBox.confirm(message, '确认人工退款', {
|
||
confirmButtonText: '确认退款',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
} catch {
|
||
return
|
||
}
|
||
await handleRefund()
|
||
}
|
||
|
||
function paymentStatusLabel(status: string) {
|
||
const map: Record<string, string> = {
|
||
created: '已创建',
|
||
paying: '支付中',
|
||
paid: '已支付',
|
||
refunding: '退款中',
|
||
refunded: '已退款',
|
||
failed: '失败',
|
||
}
|
||
return map[status] || status
|
||
}
|
||
|
||
function paymentStatusType(status: string) {
|
||
if (['paid', 'refunded'].includes(status)) return 'success'
|
||
if (status === 'failed') return 'danger'
|
||
if (['paying', 'refunding'].includes(status)) return 'warning'
|
||
return 'info'
|
||
}
|
||
|
||
function paymentBizTypeLabel(type: string) {
|
||
const map: Record<string, string> = {
|
||
order_pay: '订单支付',
|
||
checkout_refund: '结账退款',
|
||
arbitration_refund: '仲裁退款',
|
||
admin_refund: '人工退款',
|
||
cancel_refund: '取消退款',
|
||
admin_close_refund: '客服关闭退款',
|
||
admin_seal_refund: '封存退款',
|
||
deposit_refund: '暂扣押金归还',
|
||
}
|
||
return map[type] || type
|
||
}
|
||
|
||
function moneyCent(value: number | undefined | null) {
|
||
return formatCentWithSymbol(Number(value || 0))
|
||
}
|
||
|
||
function readPriceBreakdownCent(key: string) {
|
||
const raw = snapshotPriceBreakdown.value?.[key]
|
||
if (raw === undefined || raw === null || raw === '') return null
|
||
const value = Number(raw)
|
||
if (!Number.isFinite(value)) return null
|
||
return Math.round(value * 100)
|
||
}
|
||
|
||
function firstQueryValue(value: unknown) {
|
||
if (Array.isArray(value)) return typeof value[0] === 'string' ? value[0] : ''
|
||
return typeof value === 'string' ? value : ''
|
||
}
|
||
|
||
function formatHandoffRecordType(type: string) {
|
||
const typeMap: Record<string, string> = {
|
||
owner_handoff: '卖家交接',
|
||
platform_handoff: '客服代交接',
|
||
renter_checkout: '买家结账',
|
||
owner_counter_checkout: '卖家反驳结账',
|
||
platform_checkout_counter: '客服修改结账',
|
||
renter_confirm_checkout: '买家确认结账',
|
||
owner_accept_checkout: '卖家接受结账',
|
||
admin_arbitration: '客服仲裁',
|
||
platform_checkout_dispute_opened: '客服发起结账争议',
|
||
}
|
||
return typeMap[type] || type
|
||
}
|
||
|
||
function handoffModeLabel(mode?: string) {
|
||
const map: Record<string, string> = {
|
||
owner: '号主交接',
|
||
platform: '平台代管',
|
||
}
|
||
return map[mode || 'owner'] || mode || '-'
|
||
}
|
||
|
||
function settlementModeLabel(mode?: string) {
|
||
const map: Record<string, string> = {
|
||
owner_wallet: '号主钱包',
|
||
platform_managed: '线下结算',
|
||
}
|
||
return map[mode || 'owner_wallet'] || mode || '-'
|
||
}
|
||
|
||
function offlineSettlementStatusLabel(status?: string) {
|
||
const map: Record<string, string> = {
|
||
none: '无需线下结算',
|
||
pending: '待线下结算',
|
||
settled: '已线下结算',
|
||
}
|
||
return map[status || 'none'] || status || '-'
|
||
}
|
||
|
||
function offlineSettlementStatusType(status?: string) {
|
||
if (status === 'settled') return 'success'
|
||
if (status === 'pending') return 'warning'
|
||
return 'info'
|
||
}
|
||
|
||
function orderStatusType(status: string) {
|
||
if (['completed', 'renting'].includes(status)) return 'success'
|
||
if (['overdue', 'abnormal', 'checkout_disputing'].includes(status)) return 'danger'
|
||
if (['pending_payment', 'pending_handoff', 'pending_checkout_confirm'].includes(status)) {
|
||
return 'warning'
|
||
}
|
||
if (['cancelled', 'closed'].includes(status)) return 'info'
|
||
return 'primary'
|
||
}
|
||
|
||
function settlementStatusType(status: string) {
|
||
if (['settled', 'refunded', 'arbitrated'].includes(status)) return 'success'
|
||
if (['disputed', 'frozen'].includes(status)) return 'danger'
|
||
if (['pending', 'unsettled'].includes(status)) return 'warning'
|
||
return 'info'
|
||
}
|
||
|
||
function refundStatusType(status: string) {
|
||
if (status === 'refunded') return 'success'
|
||
if (status === 'failed') return 'danger'
|
||
if (['pending', 'refunding'].includes(status)) return 'warning'
|
||
return 'info'
|
||
}
|
||
|
||
function checkoutStatusLabel(status: string) {
|
||
const map: Record<string, string> = {
|
||
submitted: '待确认',
|
||
countered: '号主已修正',
|
||
accepted: '已接受',
|
||
disputed: '争议中',
|
||
}
|
||
return map[status] || settlementStatusLabel(status)
|
||
}
|
||
|
||
function priceRoleLabel(role?: string) {
|
||
const map: Record<string, string> = {
|
||
renter: '租客视角',
|
||
owner: '号主视角',
|
||
admin: '客服处理',
|
||
}
|
||
return map[role || ''] || role || '-'
|
||
}
|
||
|
||
function disputeTypeLabel(type: string) {
|
||
const map: Record<string, string> = {
|
||
handoff: '交接申诉',
|
||
checkout: '结账争议',
|
||
order: '订单争议',
|
||
cannot_login: '无法登录',
|
||
false_description: '描述不符',
|
||
account_banned: '账号封禁',
|
||
asset_loss: '资产损失',
|
||
haf_coin_dispute: '哈夫币争议',
|
||
handoff_timeout: '交接超时',
|
||
return_timeout: '归还超时',
|
||
checkout_amount: '结账金额争议',
|
||
checkout_dispute: '结账争议',
|
||
}
|
||
return map[type] || type || '-'
|
||
}
|
||
|
||
function disputeInitiatorLabel() {
|
||
const active = order.value?.active_dispute
|
||
if (!active) return '-'
|
||
if (active.initiator_type === 'admin') {
|
||
return active.initiator_admin_id ? `客服 ID ${active.initiator_admin_id}` : '客服'
|
||
}
|
||
return `用户 ID ${active.initiator_id}`
|
||
}
|
||
|
||
function userDisplay(phone: string | undefined, id: number) {
|
||
return phone ? `${phone} / ID ${id}` : `ID ${id}`
|
||
}
|
||
|
||
function sellerDisplay(row: Order) {
|
||
if (row.handoff_mode === 'platform' || row.settlement_mode === 'platform_managed') {
|
||
return row.managed_admin_id ? `平台代管 / 客服ID ${row.managed_admin_id}` : '平台代管'
|
||
}
|
||
return userDisplay(row.owner_phone, row.owner_id)
|
||
}
|
||
|
||
function displayValue(value: unknown) {
|
||
if (value === undefined || value === null || value === '') return '-'
|
||
if (Array.isArray(value))
|
||
return (
|
||
value
|
||
.map(item => String(item))
|
||
.filter(Boolean)
|
||
.join('、') || '-'
|
||
)
|
||
if (typeof value === 'object') return JSON.stringify(value)
|
||
return String(value)
|
||
}
|
||
|
||
function quantity(value: unknown) {
|
||
return Number(value || 0).toLocaleString('zh-CN', {
|
||
maximumFractionDigits: 2,
|
||
})
|
||
}
|
||
|
||
function formatRatioNumber(value: number) {
|
||
const rounded = Math.round(value * 100) / 100
|
||
return Number.isInteger(rounded) ? `${rounded}` : rounded.toFixed(2)
|
||
}
|
||
|
||
function paymentPaidAt(record: AdminPayment) {
|
||
return record.paid_at || record.updated_at || record.created_at
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="finance-page-container" v-loading="loading">
|
||
<!-- 头部卡片 -->
|
||
<header v-if="order" class="page-header-card">
|
||
<div class="header-main">
|
||
<div class="title-group">
|
||
<div class="eyebrow-tag">
|
||
<span>ORDER: {{ order.order_no }}</span>
|
||
</div>
|
||
<h1 class="page-title">订单详情</h1>
|
||
<p class="page-subtitle">
|
||
商品编号 {{ listingCode }} · {{ order.title }} · {{ order.server_region }} /
|
||
{{ order.login_platform }}
|
||
</p>
|
||
</div>
|
||
<div class="toolbar-actions">
|
||
<RouterLink :to="returnTarget">
|
||
<el-button>{{ returnLabel }}</el-button>
|
||
</RouterLink>
|
||
<el-button v-if="canResetHandoff" type="success" @click="openAction('reset')">
|
||
{{ resetActionLabel }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="canPlatformHandoff"
|
||
class="platform-handoff-button"
|
||
type="primary"
|
||
@click="openPlatformHandoff"
|
||
>
|
||
{{ platformHandoffAction?.label || '客服代交接' }}
|
||
</el-button>
|
||
<el-button v-if="canForceHandoff" type="warning" @click="openForceHandoff">
|
||
{{ forceHandoffAction?.label || '客服一键交接' }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="canPlatformCheckoutConfirm"
|
||
type="primary"
|
||
@click="openAction('platform_checkout_confirm')"
|
||
>
|
||
{{ platformCheckoutConfirmAction?.label || '客服确认结账' }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="canPlatformCheckoutCounter"
|
||
type="warning"
|
||
plain
|
||
@click="openPlatformCheckoutCounter"
|
||
>
|
||
{{ platformCheckoutCounterAction?.label || '客服修改结账方案' }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="canPlatformCheckoutDispute"
|
||
type="warning"
|
||
@click="openAction('platform_checkout_dispute')"
|
||
>
|
||
{{ platformCheckoutDisputeAction?.label || '发起结账争议' }}
|
||
</el-button>
|
||
<el-button v-if="canOfflineSettlement" type="success" @click="openOfflineSettlement">
|
||
{{ offlineSettlementAction?.label || '确认线下结算' }}
|
||
</el-button>
|
||
<el-button v-if="canAdminCreateDispute" type="warning" plain @click="openAdminDispute">
|
||
发起申诉
|
||
</el-button>
|
||
<el-button type="warning" :disabled="!canOperate" @click="openAction('abnormal')"
|
||
>标记异常</el-button
|
||
>
|
||
<el-tooltip :content="closeActionTip" placement="top">
|
||
<span>
|
||
<el-button type="danger" :disabled="!canOperate" @click="confirmCloseAction"
|
||
>客服关闭</el-button
|
||
>
|
||
</span>
|
||
</el-tooltip>
|
||
<el-tooltip :content="sealActionTip" placement="top">
|
||
<span>
|
||
<el-button type="danger" plain :disabled="!canOperate" @click="confirmSealAction"
|
||
>封存订单</el-button
|
||
>
|
||
</span>
|
||
</el-tooltip>
|
||
<el-tooltip v-if="canHoldDeposit" :content="depositHoldActionTip" placement="top">
|
||
<span>
|
||
<el-button type="warning" plain @click="confirmHoldDeposit"> 暂扣押金 </el-button>
|
||
</span>
|
||
</el-tooltip>
|
||
<el-tooltip v-if="isDepositHeld" :content="depositReleaseActionTip" placement="top">
|
||
<span>
|
||
<el-button
|
||
type="success"
|
||
plain
|
||
:disabled="!canReleaseDeposit"
|
||
@click="confirmReleaseDeposit"
|
||
>
|
||
归还押金
|
||
</el-button>
|
||
</span>
|
||
</el-tooltip>
|
||
<el-tooltip :content="refundActionTip" placement="top">
|
||
<span>
|
||
<el-button
|
||
type="primary"
|
||
:loading="refunding"
|
||
:disabled="refundButtonDisabled"
|
||
@click="confirmRefund"
|
||
>
|
||
{{ refundButtonDisabled ? '已退款' : '人工退款' }}
|
||
</el-button>
|
||
</span>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div v-if="order" class="metric-grid dashboard-metrics order-metrics">
|
||
<div class="metric-card">
|
||
<span>订单状态</span>
|
||
<strong>{{ orderStatusLabel(order.status) }}</strong>
|
||
<small>{{ orderHandoffStatusLabel(order) }}</small>
|
||
</div>
|
||
<div class="metric-card">
|
||
<span>结算状态</span>
|
||
<strong>{{ settlementStatusLabel(order.settlement_status) }}</strong>
|
||
<small>更新 {{ formatDateTime(order.updated_at) }}</small>
|
||
</div>
|
||
<div v-if="isPlatformManaged" class="metric-card">
|
||
<span>线下结算</span>
|
||
<strong>{{ offlineSettlementStatusLabel(offlineSettlementStatus) }}</strong>
|
||
<small>{{ moneyCent(order.offline_settlement_amount_cent) }}</small>
|
||
</div>
|
||
<div class="metric-card">
|
||
<span>订单总额</span>
|
||
<strong>{{ moneyCent(orderTotalCent) }}</strong>
|
||
<small
|
||
>租金 {{ moneyCent(order.rent_amount_cent) }} / 押金
|
||
{{ moneyCent(order.deposit_amount_cent) }}</small
|
||
>
|
||
</div>
|
||
<div class="metric-card">
|
||
<span>支付状态</span>
|
||
<strong>{{ latestPayment ? paymentStatusLabel(latestPayment.status) : '暂无流水' }}</strong>
|
||
<small v-if="paidOrderPayment">支付 {{ moneyCent(paidOrderPayment.amount_cent) }}</small>
|
||
</div>
|
||
<div class="metric-card">
|
||
<span>退款状态</span>
|
||
<strong>{{ refundStatusLabel(refundStatus?.refund_status || '') }}</strong>
|
||
<small v-if="refundStatus?.refund_amount_cent">
|
||
{{ moneyCent(refundStatus.refund_amount_cent) }}
|
||
</small>
|
||
</div>
|
||
<div class="metric-card">
|
||
<span>预计截止</span>
|
||
<strong>{{ formatDateTime(orderEstimatedEndAt(), '未设置') }}</strong>
|
||
<small>{{ order.estimated_duration_hours }} 小时</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="order" class="order-detail-grid">
|
||
<section class="dashboard-panel detail-panel">
|
||
<div class="panel-heading">
|
||
<h2>订单概览</h2>
|
||
<div class="status-tags">
|
||
<el-tag :type="orderStatusType(order.status)" effect="light">
|
||
{{ orderStatusLabel(order.status) }}
|
||
</el-tag>
|
||
<el-tag :type="settlementStatusType(order.settlement_status)" effect="light">
|
||
{{ settlementStatusLabel(order.settlement_status) }}
|
||
</el-tag>
|
||
</div>
|
||
</div>
|
||
<dl class="detail-list">
|
||
<div>
|
||
<dt>订单编号</dt>
|
||
<dd>{{ order.order_no }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>订单ID</dt>
|
||
<dd>{{ order.id }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>商品编号</dt>
|
||
<dd>{{ listingCode }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>账号ID</dt>
|
||
<dd>{{ order.account_id }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>游戏区服</dt>
|
||
<dd>{{ order.server_region }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>登录平台</dt>
|
||
<dd>{{ order.login_platform }}</dd>
|
||
</div>
|
||
<div class="wide">
|
||
<dt>商品标题</dt>
|
||
<dd>{{ order.title }}</dd>
|
||
</div>
|
||
</dl>
|
||
</section>
|
||
|
||
<section class="dashboard-panel detail-panel">
|
||
<div class="panel-heading">
|
||
<h2>用户与时间</h2>
|
||
</div>
|
||
<dl class="detail-list">
|
||
<div>
|
||
<dt>租客</dt>
|
||
<dd>{{ userDisplay(order.renter_phone, order.renter_id) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>号主</dt>
|
||
<dd>{{ sellerDisplay(order) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>创建时间</dt>
|
||
<dd>{{ formatDateTime(order.created_at) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>支付截止</dt>
|
||
<dd>{{ formatDateTime(order.payment_deadline_at, '未设置') }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>开始租用</dt>
|
||
<dd>{{ formatDateTime(orderRentedAt(), '未开始') }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>预计结束</dt>
|
||
<dd>{{ formatDateTime(orderEstimatedEndAt(), '未设置') }}</dd>
|
||
</div>
|
||
</dl>
|
||
</section>
|
||
|
||
<section v-if="isPlatformManaged" class="dashboard-panel detail-panel">
|
||
<div class="panel-heading">
|
||
<h2>平台代管</h2>
|
||
<el-tag :type="offlineSettlementStatusType(offlineSettlementStatus)" effect="light">
|
||
{{ offlineSettlementStatusLabel(offlineSettlementStatus) }}
|
||
</el-tag>
|
||
</div>
|
||
<dl class="detail-list">
|
||
<div>
|
||
<dt>交接模式</dt>
|
||
<dd>{{ handoffModeLabel(order.handoff_mode) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>结算模式</dt>
|
||
<dd>{{ settlementModeLabel(order.settlement_mode) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>负责客服</dt>
|
||
<dd>{{ order.managed_admin_id ? `ID ${order.managed_admin_id}` : '-' }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>待打款金额</dt>
|
||
<dd>{{ moneyCent(order.offline_settlement_amount_cent) }}</dd>
|
||
</div>
|
||
<div v-if="order.offline_settled_by">
|
||
<dt>确认客服</dt>
|
||
<dd>ID {{ order.offline_settled_by }}</dd>
|
||
</div>
|
||
<div v-if="order.offline_settled_at">
|
||
<dt>确认时间</dt>
|
||
<dd>{{ formatDateTime(order.offline_settled_at) }}</dd>
|
||
</div>
|
||
<div v-if="order.offline_settlement_remark" class="wide">
|
||
<dt>线下备注</dt>
|
||
<dd>{{ order.offline_settlement_remark }}</dd>
|
||
</div>
|
||
</dl>
|
||
</section>
|
||
|
||
<section class="dashboard-panel detail-panel">
|
||
<div class="panel-heading">
|
||
<h2>资金拆分</h2>
|
||
<span class="panel-subtitle">{{ priceRoleLabel(order.price_role) }}</span>
|
||
</div>
|
||
<div class="money-list">
|
||
<div v-for="row in fundSplitRows" :key="row.label" class="money-row">
|
||
<span>{{ row.label }}</span>
|
||
<strong>{{ moneyCent(row.amountCent) }}</strong>
|
||
</div>
|
||
<div class="money-row total">
|
||
<span>订单实付合计</span>
|
||
<strong>{{ moneyCent(orderTotalCent) }}</strong>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="dashboard-panel detail-panel">
|
||
<div class="panel-heading">
|
||
<h2>退款概况</h2>
|
||
<el-tag :type="refundStatusType(refundStatus?.refund_status || '')" effect="light">
|
||
{{ refundStatusLabel(refundStatus?.refund_status || '') }}
|
||
</el-tag>
|
||
</div>
|
||
<dl class="detail-list">
|
||
<div>
|
||
<dt>退款金额</dt>
|
||
<dd>{{ moneyCent(refundStatus?.refund_amount_cent) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>可退上限</dt>
|
||
<dd>{{ moneyCent(orderTotalCent) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>退款完成</dt>
|
||
<dd>{{ formatDateTime(refundStatus?.refunded_at, '未完成') }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>支付流水</dt>
|
||
<dd>{{ paymentRecords.length }} 条</dd>
|
||
</div>
|
||
<div>
|
||
<dt>押金暂扣</dt>
|
||
<dd>{{ depositHoldStatusLabel || '未暂扣' }}</dd>
|
||
</div>
|
||
<div v-if="depositHoldStatus !== 'none'">
|
||
<dt>已暂扣金额</dt>
|
||
<dd>{{ moneyCent(depositHoldAmountCent) }}</dd>
|
||
</div>
|
||
<div v-if="order.deposit_hold_reason" class="wide">
|
||
<dt>暂扣原因</dt>
|
||
<dd>{{ order.deposit_hold_reason }}</dd>
|
||
</div>
|
||
<div v-if="order.deposit_held_at">
|
||
<dt>暂扣时间</dt>
|
||
<dd>{{ formatDateTime(order.deposit_held_at) }}</dd>
|
||
</div>
|
||
<div v-if="order.deposit_hold_released_at">
|
||
<dt>归还时间</dt>
|
||
<dd>{{ formatDateTime(order.deposit_hold_released_at) }}</dd>
|
||
</div>
|
||
</dl>
|
||
</section>
|
||
|
||
<section v-if="order.checkout" class="dashboard-panel detail-panel">
|
||
<div class="panel-heading">
|
||
<h2>结账明细</h2>
|
||
<el-tag effect="light">{{ checkoutStatusLabel(order.checkout.status) }}</el-tag>
|
||
</div>
|
||
<dl class="detail-list">
|
||
<div>
|
||
<dt>结算租金</dt>
|
||
<dd>{{ moneyCent(order.checkout.display_amount_cent) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>实际纯币原价</dt>
|
||
<dd>{{ moneyCent(order.checkout.pure_coin_amount_cent) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>实际纯币优惠</dt>
|
||
<dd>{{ moneyCent(order.checkout.pure_coin_discount_cent) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>折后纯币金额</dt>
|
||
<dd>{{ moneyCent(order.checkout.pure_coin_payable_cent) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>退还租客</dt>
|
||
<dd>{{ moneyCent(order.checkout.renter_refund_amount_cent) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>号主收入</dt>
|
||
<dd>{{ moneyCent(order.checkout.owner_income_amount_cent) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>押金赔付扣除</dt>
|
||
<dd>{{ moneyCent(order.checkout.deposit_deduct_amount_cent) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>消耗品金额</dt>
|
||
<dd>{{ moneyCent(order.checkout.consumable_amount_cent) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>哈夫币消耗</dt>
|
||
<dd>{{ quantity(order.checkout.coin_consumed_m) }}M</dd>
|
||
</div>
|
||
<div>
|
||
<dt>哈夫币预计剩余</dt>
|
||
<dd v-if="checkoutRemainingHafCoinM >= 0">
|
||
{{ quantity(checkoutRemainingHafCoinM) }}M
|
||
</dd>
|
||
<dd v-else class="danger-text">
|
||
打超 {{ quantity(-checkoutRemainingHafCoinM) }}M（按比例从押金扣）
|
||
</dd>
|
||
</div>
|
||
<div v-if="order.status === 'completed'">
|
||
<dt>积分计算基数</dt>
|
||
<dd>{{ moneyCent(order.growth_points_basis_cent) }}</dd>
|
||
</div>
|
||
<div v-if="order.status === 'completed'">
|
||
<dt>本单成长积分</dt>
|
||
<dd>{{ order.growth_points_awarded || 0 }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>发起人</dt>
|
||
<dd>ID {{ order.checkout.initiated_by }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>凭证数量</dt>
|
||
<dd>{{ order.checkout.evidence_urls?.length || 0 }} 张</dd>
|
||
</div>
|
||
<div v-if="order.checkout.content" class="wide">
|
||
<dt>结账说明</dt>
|
||
<dd>{{ order.checkout.content }}</dd>
|
||
</div>
|
||
<div v-if="order.checkout.owner_adjustment_reason" class="wide">
|
||
<dt>号主修正</dt>
|
||
<dd>{{ order.checkout.owner_adjustment_reason }}</dd>
|
||
</div>
|
||
</dl>
|
||
</section>
|
||
|
||
<section v-if="order.active_dispute" class="dashboard-panel detail-panel">
|
||
<div class="panel-heading">
|
||
<h2>争议信息</h2>
|
||
<el-tag type="warning" effect="light">
|
||
{{ disputeStatusLabel(order.active_dispute.status) }}
|
||
</el-tag>
|
||
</div>
|
||
<dl class="detail-list">
|
||
<div>
|
||
<dt>争议ID</dt>
|
||
<dd>{{ order.active_dispute.id }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>争议类型</dt>
|
||
<dd>{{ disputeTypeLabel(order.active_dispute.type) }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>发起人</dt>
|
||
<dd>{{ disputeInitiatorLabel() }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>当前状态</dt>
|
||
<dd>{{ disputeStatusLabel(order.active_dispute.status) }}</dd>
|
||
</div>
|
||
</dl>
|
||
</section>
|
||
|
||
<section class="dashboard-panel detail-panel order-wide-panel">
|
||
<div class="panel-heading">
|
||
<h2>支付与退款流水</h2>
|
||
<span class="panel-subtitle">共 {{ paymentRecords.length }} 条</span>
|
||
</div>
|
||
<el-empty v-if="paymentRecords.length === 0" description="暂无支付流水" />
|
||
<div v-else class="record-list">
|
||
<article v-for="record in paymentRecords" :key="record.id" class="record-item">
|
||
<div class="record-main">
|
||
<strong>
|
||
{{ paymentBizTypeLabel(record.biz_type) }} · {{ moneyCent(record.amount_cent) }}
|
||
</strong>
|
||
<el-tag :type="paymentStatusType(record.status)" size="small" effect="light">
|
||
{{ paymentStatusLabel(record.status) }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="record-meta">
|
||
<span>流水号：{{ record.payment_no }}</span>
|
||
<span>用户：{{ record.user_phone || record.user_id }}</span>
|
||
<span>渠道：{{ record.provider || '-' }}</span>
|
||
<span>商户：{{ record.merchant_id || '-' }}</span>
|
||
<span>三方单号：{{ record.third_order_id || '-' }}</span>
|
||
<span>渠道单号：{{ record.provider_order_id || '-' }}</span>
|
||
<span>创建：{{ formatDateTime(record.created_at) }}</span>
|
||
<span>完成：{{ formatDateTime(paymentPaidAt(record), '-') }}</span>
|
||
</div>
|
||
<p v-if="record.error_message" class="danger-text">
|
||
{{ record.error_code }} {{ record.error_message }}
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="dashboard-panel detail-panel order-wide-panel">
|
||
<div class="panel-heading">
|
||
<h2>交接记录</h2>
|
||
<span class="panel-subtitle">共 {{ handoffRecords.length }} 条</span>
|
||
</div>
|
||
<el-empty v-if="handoffRecords.length === 0" description="暂无交接记录" />
|
||
<div v-else class="record-list">
|
||
<article v-for="record in handoffRecords" :key="record.id" class="record-item">
|
||
<div class="record-main">
|
||
<strong>{{ formatHandoffRecordType(record.type) }}</strong>
|
||
<span>{{ formatDateTime(record.created_at) }}</span>
|
||
</div>
|
||
<p>{{ record.content }}</p>
|
||
<div class="record-meta">
|
||
<span>发送：ID {{ record.from_user_id }}</span>
|
||
<span>接收：ID {{ record.to_user_id }}</span>
|
||
<span>租客确认：{{ formatDateTime(record.confirmed_by_renter_at, '-') }}</span>
|
||
<span>号主确认：{{ formatDateTime(record.confirmed_by_owner_at, '-') }}</span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="dashboard-panel detail-panel order-wide-panel">
|
||
<div class="panel-heading">
|
||
<h2>账号快照</h2>
|
||
<span class="panel-subtitle">哈夫币 {{ quantity(snapshotHafCoinM) }}M</span>
|
||
</div>
|
||
<dl v-if="accountSnapshotItems.length" class="detail-list snapshot-detail-list">
|
||
<div v-for="item in accountSnapshotItems" :key="item.label">
|
||
<dt>{{ item.label }}</dt>
|
||
<dd>{{ item.value }}</dd>
|
||
</div>
|
||
</dl>
|
||
<div
|
||
v-if="snapshotRatio && (snapshotRatio.recycleRatio > 0 || snapshotRatio.sellRatio > 0)"
|
||
class="ratio-row"
|
||
>
|
||
<div v-if="snapshotRatio.recycleRatio > 0" class="ratio-item">
|
||
<span class="ratio-label">回收比例</span>
|
||
<strong class="ratio-value"
|
||
>1:{{ formatRatioNumber(snapshotRatio.recycleRatio) }}</strong
|
||
>
|
||
</div>
|
||
<div v-if="snapshotRatio.sellRatio > 0" class="ratio-item">
|
||
<span class="ratio-label">售卖比例</span>
|
||
<strong class="ratio-value">1:{{ formatRatioNumber(snapshotRatio.sellRatio) }}</strong>
|
||
</div>
|
||
</div>
|
||
<div v-if="snapshotSeasonTags.length" class="snapshot-tags">
|
||
<el-tag v-for="tag in snapshotSeasonTags" :key="tag" size="small" effect="plain">
|
||
{{ tag }}
|
||
</el-tag>
|
||
</div>
|
||
<div v-if="snapshotResources.length" class="snapshot-resources">
|
||
<div v-for="resource in snapshotResources" :key="resource.key" class="resource-item">
|
||
<strong>{{ resource.label }}</strong>
|
||
<span>{{ quantity(resource.quantity) }} · {{ resource.price || resource.mode }}</span>
|
||
</div>
|
||
</div>
|
||
<pre class="snapshot-json">{{ snapshotText }}</pre>
|
||
</section>
|
||
</div>
|
||
|
||
<el-dialog
|
||
:model-value="!!actionType"
|
||
:title="actionTitle"
|
||
width="560px"
|
||
@update:model-value="actionType = ''"
|
||
>
|
||
<div v-if="order" class="dialog-body">
|
||
<p>
|
||
<strong>{{ order.order_no }}</strong> · 商品编号 {{ listingCode }} · {{ order.title }}
|
||
</p>
|
||
<el-input
|
||
v-model="reason"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="填写客服操作原因，会写入审计日志并通知双方"
|
||
/>
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="actionType = ''">取消</el-button>
|
||
<el-button :type="actionConfirmButtonType" :loading="submitting" @click="submitAction">
|
||
确认操作
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog v-model="platformHandoffVisible" title="客服代交接" width="560px" destroy-on-close>
|
||
<div v-if="order" class="dialog-body">
|
||
<p>
|
||
<strong>{{ order.order_no }}</strong> · 商品编号 {{ listingCode }} · {{ order.title }}
|
||
</p>
|
||
<el-input
|
||
v-model="platformHandoffContent"
|
||
type="textarea"
|
||
:rows="5"
|
||
placeholder="填写发给租客的交接说明"
|
||
/>
|
||
<el-input
|
||
v-model="platformHandoffReason"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="填写客服操作原因"
|
||
/>
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="platformHandoffVisible = false">取消</el-button>
|
||
<el-button type="primary" :loading="platformSubmitting" @click="submitPlatformHandoff">
|
||
提交交接
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog v-model="forceHandoffVisible" title="客服一键交接" width="560px" destroy-on-close>
|
||
<div v-if="order" class="dialog-body">
|
||
<p>
|
||
<strong>{{ order.order_no }}</strong> · 商品编号 {{ listingCode }} · {{ order.title }}
|
||
</p>
|
||
<el-alert
|
||
title="确认后将跳过号主交接与租客确认步骤，订单会立即进入使用中并开始计算租期。"
|
||
type="warning"
|
||
:closable="false"
|
||
show-icon
|
||
/>
|
||
<el-input
|
||
v-if="forceHandoffNeedsContent"
|
||
v-model="forceHandoffContent"
|
||
type="textarea"
|
||
:rows="5"
|
||
placeholder="填写可供租客查看的交接说明"
|
||
/>
|
||
<el-input
|
||
v-model="forceHandoffReason"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="填写客服确认双方已完成交接的原因"
|
||
/>
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="forceHandoffVisible = false">取消</el-button>
|
||
<el-button type="warning" :loading="platformSubmitting" @click="submitForceHandoff">
|
||
确认一键交接
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog v-model="adminDisputeVisible" title="发起订单申诉" width="620px" destroy-on-close>
|
||
<div v-if="order" class="dialog-body">
|
||
<p>
|
||
<strong>{{ order.order_no }}</strong> · 商品编号 {{ listingCode }} · {{ order.title }}
|
||
</p>
|
||
<div class="form-grid">
|
||
<label>
|
||
<span>申诉类型</span>
|
||
<el-select v-model="adminDisputeForm.type" placeholder="选择申诉类型">
|
||
<el-option
|
||
v-for="item in disputeTypeOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</label>
|
||
<label>
|
||
<span>被申诉方</span>
|
||
<el-select v-model="adminDisputeForm.targetRole" placeholder="选择被申诉方">
|
||
<el-option label="租客" value="renter" />
|
||
<el-option label="号主" value="owner" />
|
||
</el-select>
|
||
</label>
|
||
</div>
|
||
<el-input
|
||
v-model="adminDisputeForm.description"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="填写申诉说明，会通知订单双方并进入仲裁中心"
|
||
/>
|
||
<el-input
|
||
v-model="adminDisputeForm.evidenceText"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="证据链接，一行一个，可留空"
|
||
/>
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="adminDisputeVisible = false">取消</el-button>
|
||
<el-button type="primary" :loading="adminDisputeSubmitting" @click="submitAdminDispute">
|
||
发起申诉
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog
|
||
v-model="platformCheckoutCounterVisible"
|
||
title="客服修改结账方案"
|
||
width="620px"
|
||
destroy-on-close
|
||
>
|
||
<div v-if="order" class="dialog-body">
|
||
<p>
|
||
<strong>{{ order.order_no }}</strong> · 当前号主收入
|
||
{{ moneyCent(order.checkout?.owner_income_amount_cent) }}
|
||
</p>
|
||
<div class="form-grid">
|
||
<label>
|
||
<span>消耗品金额（元）</span>
|
||
<el-input-number
|
||
v-model="platformCheckoutCounterForm.consumableAmountYuan"
|
||
:min="0"
|
||
:precision="2"
|
||
:step="1"
|
||
controls-position="right"
|
||
/>
|
||
</label>
|
||
<label>
|
||
<span>哈夫币消耗（M）</span>
|
||
<el-input-number
|
||
v-model="platformCheckoutCounterForm.coin_consumed_m"
|
||
:min="0"
|
||
:precision="2"
|
||
:step="1"
|
||
controls-position="right"
|
||
/>
|
||
</label>
|
||
<label>
|
||
<span>押金赔付扣除（元）</span>
|
||
<el-input-number
|
||
v-model="platformCheckoutCounterForm.depositDeductAmountYuan"
|
||
:min="0"
|
||
:precision="2"
|
||
:step="1"
|
||
controls-position="right"
|
||
/>
|
||
</label>
|
||
</div>
|
||
<el-input
|
||
v-model="platformCheckoutCounterForm.reason"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="填写修改原因，将同步给租客并写入审计日志"
|
||
/>
|
||
<el-input
|
||
v-model="platformCheckoutCounterForm.evidenceText"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="证据链接，一行一个，可留空"
|
||
/>
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="platformCheckoutCounterVisible = false">取消</el-button>
|
||
<el-button
|
||
type="primary"
|
||
:loading="platformSubmitting"
|
||
@click="submitPlatformCheckoutCounter"
|
||
>
|
||
提交修改
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog
|
||
v-model="offlineSettlementVisible"
|
||
title="确认线下结算"
|
||
width="520px"
|
||
destroy-on-close
|
||
>
|
||
<div v-if="order" class="dialog-body">
|
||
<p>
|
||
待打款金额
|
||
<strong>{{ moneyCent(order.offline_settlement_amount_cent) }}</strong>
|
||
</p>
|
||
<el-input
|
||
v-model="offlineSettlementRemark"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="填写线下转账备注，可留空"
|
||
/>
|
||
</div>
|
||
<template #footer>
|
||
<el-button @click="offlineSettlementVisible = false">取消</el-button>
|
||
<el-button type="primary" :loading="platformSubmitting" @click="submitOfflineSettlement">
|
||
确认已结算
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.finance-page-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
padding: 0 4px 32px;
|
||
}
|
||
|
||
.page-header-card {
|
||
background: #ffffff;
|
||
border-radius: 16px;
|
||
padding: 24px 28px;
|
||
box-shadow:
|
||
0 1px 3px rgba(15, 23, 42, 0.04),
|
||
0 4px 12px rgba(15, 23, 42, 0.02);
|
||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||
}
|
||
|
||
.header-main {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.title-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.eyebrow-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.8px;
|
||
color: #3b82f6;
|
||
background: #eff6ff;
|
||
padding: 3px 10px;
|
||
border-radius: 20px;
|
||
width: fit-content;
|
||
}
|
||
|
||
.page-title {
|
||
margin: 0;
|
||
font-size: 26px;
|
||
font-weight: 800;
|
||
color: #0f172a;
|
||
letter-spacing: -0.5px;
|
||
}
|
||
|
||
.page-subtitle {
|
||
margin: 0;
|
||
font-size: 13.5px;
|
||
color: #64748b;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.toolbar-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.order-metrics {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.order-metrics .metric-card strong {
|
||
font-size: 20px;
|
||
line-height: 1.25;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.metric-card small {
|
||
display: block;
|
||
margin-top: 8px;
|
||
color: #8f9bba;
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.platform-handoff-button {
|
||
min-width: 96px;
|
||
border-color: #2563eb;
|
||
background: #2563eb;
|
||
color: #ffffff;
|
||
font-weight: 700;
|
||
box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
|
||
}
|
||
|
||
.platform-handoff-button:hover,
|
||
.platform-handoff-button:focus {
|
||
border-color: #1d4ed8;
|
||
background: #1d4ed8;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.platform-handoff-button:active {
|
||
border-color: #1e40af;
|
||
background: #1e40af;
|
||
}
|
||
|
||
.order-detail-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
|
||
gap: 20px;
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.detail-panel {
|
||
min-width: 0;
|
||
}
|
||
|
||
.order-wide-panel {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.panel-heading {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.panel-heading h2 {
|
||
margin: 0;
|
||
}
|
||
|
||
.panel-subtitle {
|
||
color: #8f9bba;
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
text-align: right;
|
||
}
|
||
|
||
.status-tags,
|
||
.snapshot-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.detail-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px 18px;
|
||
margin: 0;
|
||
}
|
||
|
||
.detail-list div {
|
||
min-width: 0;
|
||
border-top: 1px solid #f0f2f5;
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.detail-list .wide {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.detail-list dt {
|
||
margin-bottom: 5px;
|
||
color: #8f9bba;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.detail-list dd {
|
||
margin: 0;
|
||
color: #1b2559;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
line-height: 1.5;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.money-list {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
|
||
.money-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
border-top: 1px solid #f0f2f5;
|
||
padding-top: 9px;
|
||
color: #52616f;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.money-row strong {
|
||
color: #1b2559;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.money-row.total {
|
||
margin-top: 4px;
|
||
border-top-color: #d8e2f0;
|
||
color: #1b2559;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.money-row.total strong {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.record-list {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.record-item {
|
||
display: grid;
|
||
gap: 8px;
|
||
border: 1px solid #eef2f7;
|
||
border-radius: 8px;
|
||
background: #fbfcff;
|
||
padding: 14px;
|
||
}
|
||
|
||
.record-main {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.record-main strong {
|
||
color: #1b2559;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.record-main span {
|
||
color: #8f9bba;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.record-meta {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: 6px 12px;
|
||
color: #52616f;
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.record-item p {
|
||
margin: 0;
|
||
color: #52616f;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.snapshot-detail-list {
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.ratio-row {
|
||
display: flex;
|
||
gap: 24px;
|
||
margin-bottom: 14px;
|
||
padding: 12px 14px;
|
||
border: 1px solid #eef2f7;
|
||
border-radius: 8px;
|
||
background: #fbfcff;
|
||
}
|
||
|
||
.ratio-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.ratio-label {
|
||
font-size: 12px;
|
||
color: #8f9bba;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.ratio-value {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #1b2559;
|
||
}
|
||
|
||
.snapshot-tags {
|
||
justify-content: flex-start;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.snapshot-resources {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: 10px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.resource-item {
|
||
display: grid;
|
||
gap: 4px;
|
||
border: 1px solid #eef2f7;
|
||
border-radius: 8px;
|
||
background: #fbfcff;
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.resource-item strong {
|
||
color: #1b2559;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.resource-item span {
|
||
color: #52616f;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.snapshot-json {
|
||
overflow-x: auto;
|
||
max-height: 360px;
|
||
margin: 0;
|
||
border-radius: 8px;
|
||
background: #111827;
|
||
color: #dbe4ee;
|
||
padding: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.dialog-body {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.dialog-body p {
|
||
margin: 0;
|
||
color: #52616f;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.form-grid label {
|
||
display: grid;
|
||
gap: 6px;
|
||
color: #52616f;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.form-grid :deep(.el-input-number) {
|
||
width: 100%;
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.order-detail-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.panel-heading,
|
||
.record-main {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.detail-list {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.status-tags {
|
||
justify-content: flex-start;
|
||
}
|
||
}
|
||
</style>
|