增加前端格式检查配置
This commit is contained in:
yml2213
@@ -79,18 +79,32 @@ const isOwner = computed(() => order.value?.owner_id === session.userId)
|
||||
const isRenter = computed(() => order.value?.renter_id === session.userId)
|
||||
const orderAmountLabel = computed(() => (isOwner.value ? '预计租金' : '支付租金'))
|
||||
const orderRentDisplayAmount = computed(() => (order.value ? orderRentAmount(order.value) : 0))
|
||||
const ownerIncomeDisplayAmount = computed(() => (order.value ? ownerActualIncome(order.value) : null))
|
||||
const ownerIncomeLabel = computed(() => (order.value?.status === 'completed' ? '实际到手' : '结账预计到手'))
|
||||
const ownerIncomeDisplayAmount = computed(() =>
|
||||
order.value ? ownerActualIncome(order.value) : null
|
||||
)
|
||||
const ownerIncomeLabel = computed(() =>
|
||||
order.value?.status === 'completed' ? '实际到手' : '结账预计到手'
|
||||
)
|
||||
const canOpenDispute = computed(() => {
|
||||
if (!order.value || (!isOwner.value && !isRenter.value)) return false
|
||||
return !['completed', 'cancelled', 'closed', 'disputing', 'checkout_disputing', 'abnormal'].includes(order.value.status)
|
||||
return ![
|
||||
'completed',
|
||||
'cancelled',
|
||||
'closed',
|
||||
'disputing',
|
||||
'checkout_disputing',
|
||||
'abnormal',
|
||||
].includes(order.value.status)
|
||||
})
|
||||
const isCheckoutDisputeStage = computed(() => {
|
||||
return !!order.value && ['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.value.status)
|
||||
return (
|
||||
!!order.value &&
|
||||
['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.value.status)
|
||||
)
|
||||
})
|
||||
const checkoutResources = computed(() => {
|
||||
const resources = readSnapshotResources()
|
||||
return resources.filter((item) => item.quantity > 0)
|
||||
return resources.filter(item => item.quantity > 0)
|
||||
})
|
||||
const resourceChargeAmount = computed(() => {
|
||||
return roundMoney(
|
||||
@@ -98,7 +112,7 @@ const resourceChargeAmount = computed(() => {
|
||||
if (!isChargedResource(item)) return sum
|
||||
const used = readResourceUsage(item.key)
|
||||
return sum + used * item.unitPrice
|
||||
}, 0),
|
||||
}, 0)
|
||||
)
|
||||
})
|
||||
const snapshotHafCoinM = computed(() => {
|
||||
@@ -106,20 +120,22 @@ const snapshotHafCoinM = computed(() => {
|
||||
return roundQuantity(readNumber(snapshot?.haf_coin_amount) / 1000000)
|
||||
})
|
||||
const remainingHafCoinM = computed(() => {
|
||||
return roundQuantity(Math.max(snapshotHafCoinM.value - Number(checkoutForm.value.coin_consumed_m || 0), 0))
|
||||
return roundQuantity(
|
||||
Math.max(snapshotHafCoinM.value - Number(checkoutForm.value.coin_consumed_m || 0), 0)
|
||||
)
|
||||
})
|
||||
|
||||
function getOrderStep(status: string) {
|
||||
const stepMap: Record<string, number> = {
|
||||
'pending_payment': 0,
|
||||
'pending_handoff': 1,
|
||||
'renting': 2,
|
||||
'overdue': 2,
|
||||
'pending_checkout_confirm': 3,
|
||||
'pending_checkout_accept': 3,
|
||||
'completed': 4,
|
||||
'cancelled': 0,
|
||||
'closed': 4,
|
||||
pending_payment: 0,
|
||||
pending_handoff: 1,
|
||||
renting: 2,
|
||||
overdue: 2,
|
||||
pending_checkout_confirm: 3,
|
||||
pending_checkout_accept: 3,
|
||||
completed: 4,
|
||||
cancelled: 0,
|
||||
closed: 4,
|
||||
}
|
||||
return stepMap[status] ?? 0
|
||||
}
|
||||
@@ -489,7 +505,7 @@ function readSnapshotResources(): CheckoutResource[] {
|
||||
if (!Array.isArray(resources)) return []
|
||||
return resources
|
||||
.filter(isRecord)
|
||||
.map((item) => {
|
||||
.map(item => {
|
||||
const key = String(item.key || item.label || '')
|
||||
const label = String(item.label || key || '额外消耗品')
|
||||
const price = String(item.price || '')
|
||||
@@ -502,13 +518,16 @@ function readSnapshotResources(): CheckoutResource[] {
|
||||
unitPrice: readUnitPrice(price),
|
||||
}
|
||||
})
|
||||
.filter((item) => item.key && item.quantity > 0)
|
||||
.filter(item => item.key && item.quantity > 0)
|
||||
}
|
||||
|
||||
function hydrateResourceUsage() {
|
||||
const next: Record<string, number> = {}
|
||||
for (const item of checkoutResources.value) {
|
||||
next[item.key] = Math.min(Math.max(Number(resourceUsage.value[item.key] || 0), 0), item.quantity)
|
||||
next[item.key] = Math.min(
|
||||
Math.max(Number(resourceUsage.value[item.key] || 0), 0),
|
||||
item.quantity
|
||||
)
|
||||
}
|
||||
resourceUsage.value = next
|
||||
}
|
||||
@@ -527,16 +546,21 @@ function resourceLineAmount(item: CheckoutResource) {
|
||||
|
||||
function checkoutContentWithSummary() {
|
||||
const lines = [checkoutForm.value.content.trim()].filter(Boolean)
|
||||
const usedResources = checkoutResources.value.filter((item) => readResourceUsage(item.key) > 0)
|
||||
const usedResources = checkoutResources.value.filter(item => readResourceUsage(item.key) > 0)
|
||||
if (usedResources.length) {
|
||||
lines.push(
|
||||
`额外消耗品：${usedResources
|
||||
.map((item) => `${item.label} ${readResourceUsage(item.key)}/${item.quantity}${isChargedResource(item) ? `，金额¥${money(resourceLineAmount(item))}` : '，赠送不扣款'}`)
|
||||
.join('；')}`,
|
||||
.map(
|
||||
item =>
|
||||
`${item.label} ${readResourceUsage(item.key)}/${item.quantity}${isChargedResource(item) ? `，金额¥${money(resourceLineAmount(item))}` : '，赠送不扣款'}`
|
||||
)
|
||||
.join('；')}`
|
||||
)
|
||||
}
|
||||
if (Number(checkoutForm.value.coin_consumed_m || 0) > 0) {
|
||||
lines.push(`哈夫币消耗：${quantity(Number(checkoutForm.value.coin_consumed_m))}M，预计剩余${quantity(remainingHafCoinM.value)}M`)
|
||||
lines.push(
|
||||
`哈夫币消耗：${quantity(Number(checkoutForm.value.coin_consumed_m))}M，预计剩余${quantity(remainingHafCoinM.value)}M`
|
||||
)
|
||||
}
|
||||
if (lines.length === 0) {
|
||||
lines.push('租客发起结账。')
|
||||
@@ -571,7 +595,8 @@ function money(value: unknown) {
|
||||
}
|
||||
|
||||
function orderRentAmount(item: Order) {
|
||||
if (item.owner_id === session.userId) return Number(item.owner_rent_amount ?? item.display_amount ?? 0)
|
||||
if (item.owner_id === session.userId)
|
||||
return Number(item.owner_rent_amount ?? item.display_amount ?? 0)
|
||||
if (item.renter_id === session.userId) return Number(item.rent_amount ?? item.display_amount ?? 0)
|
||||
return Number(item.display_amount ?? 0)
|
||||
}
|
||||
@@ -608,7 +633,7 @@ function hydrateCounterForm() {
|
||||
function linesToList(value: string) {
|
||||
return value
|
||||
.split('\n')
|
||||
.map((item) => item.trim())
|
||||
.map(item => item.trim())
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
@@ -662,7 +687,7 @@ function formatHandoffRecordType(type: string) {
|
||||
<p class="order-meta">{{ order.server_region }} / {{ order.login_platform }}</p>
|
||||
</div>
|
||||
<el-button type="primary" :loading="openingChat" @click="openOrderChat">
|
||||
<el-icon style="margin-right: 4px;"><ChatDotRound /></el-icon>
|
||||
<el-icon style="margin-right: 4px"><ChatDotRound /></el-icon>
|
||||
联系对方
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -670,308 +695,488 @@ function formatHandoffRecordType(type: string) {
|
||||
|
||||
<div v-if="order" class="content-layout">
|
||||
<div class="main-content">
|
||||
<div v-if="order" class="order-progress-section">
|
||||
<el-steps :active="getOrderStep(order.status)" align-center finish-status="success" process-status="process">
|
||||
<el-step title="待支付" :description="order.status === 'pending_payment' ? '等待租客支付' : ''" />
|
||||
<el-step title="待交接" :description="order.status === 'pending_handoff' ? handoffStatusLabel(order.handoff_status) : ''" />
|
||||
<el-step title="使用中" :description="['renting', 'overdue'].includes(order.status) ? '租赁进行中' : ''" />
|
||||
<el-step title="结账中" :description="['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status) ? '等待确认' : ''" />
|
||||
<el-step title="已完成" :description="order.status === 'completed' ? '订单完成' : ''" />
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
<div v-if="order" class="detail-grid">
|
||||
<div class="metric-card primary">
|
||||
<span class="metric-label">订单状态</span>
|
||||
<strong class="metric-value">{{ orderStatusLabel(order.status) }}</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span class="metric-label">交接状态</span>
|
||||
<strong class="metric-value">{{ handoffStatusLabel(order.handoff_status) }}</strong>
|
||||
</div>
|
||||
<div class="metric-card highlight">
|
||||
<span class="metric-label">{{ orderAmountLabel }}</span>
|
||||
<strong class="metric-value amount">¥{{ money(orderRentDisplayAmount) }}</strong>
|
||||
</div>
|
||||
<div v-if="isOwner && ownerIncomeDisplayAmount !== null" class="metric-card income">
|
||||
<span class="metric-label">{{ ownerIncomeLabel }}</span>
|
||||
<strong class="metric-value amount">¥{{ money(ownerIncomeDisplayAmount) }}</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span class="metric-label">押金</span>
|
||||
<strong class="metric-value">¥{{ money(order.deposit_amount) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order" class="info-section">
|
||||
<div class="info-card">
|
||||
<div class="info-row">
|
||||
<span class="info-label">开始时间</span>
|
||||
<span class="info-value">{{ formatDateTime(orderRentedAt(), '未开始') }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">预计截止</span>
|
||||
<span class="info-value">{{ formatDateTime(orderEstimatedEndAt(), '未设置') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order.status === 'pending_payment'" class="action-card warning">
|
||||
<p class="action-message">订单待支付，支付后账号进入交接流程。</p>
|
||||
<div class="action-buttons">
|
||||
<el-button v-if="isRenter" type="primary" size="large" :loading="startingPayment" @click="handlePay">
|
||||
立即支付订单
|
||||
</el-button>
|
||||
<el-button type="danger" plain :loading="cancelling" @click="handleCancel">
|
||||
取消订单并释放账号
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order.status === 'pending_handoff'" class="action-card info">
|
||||
<div class="action-buttons">
|
||||
<el-button type="danger" plain :loading="cancelling" @click="handleCancel">
|
||||
取消订单并释放账号
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order" class="timeline-section">
|
||||
<div class="section-header">
|
||||
<h2>交接记录</h2>
|
||||
</div>
|
||||
<el-empty v-if="handoffRecords.length === 0" description="暂无交接记录" />
|
||||
<el-timeline v-else>
|
||||
<el-timeline-item
|
||||
v-for="record in handoffRecords"
|
||||
:key="record.id"
|
||||
:timestamp="formatDateTime(record.created_at)"
|
||||
placement="top"
|
||||
>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">{{ formatHandoffRecordType(record.type) }}</div>
|
||||
<div class="timeline-body">{{ record.content }}</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="order && isRenter && ['renting', 'overdue'].includes(order.status)" class="form-section checkout-form-section">
|
||||
<div class="section-header">
|
||||
<h2>发起结账</h2>
|
||||
</div>
|
||||
<div class="form-card">
|
||||
<el-input v-model="checkoutForm.content" type="textarea" :rows="4" placeholder="填写结账说明、租后资产状态或注意事项" />
|
||||
<div class="checkout-resource-panel">
|
||||
<div class="checkout-resource-head">
|
||||
<strong>额外消耗品</strong>
|
||||
<span class="amount-highlight">已用金额：¥{{ money(resourceChargeAmount) }}</span>
|
||||
</div>
|
||||
<el-empty v-if="checkoutResources.length === 0" description="订单快照中暂无额外消耗品" />
|
||||
<div v-for="item in checkoutResources" v-else :key="item.key" class="checkout-resource-row">
|
||||
<div class="checkout-resource-meta">
|
||||
<strong>{{ item.label }}</strong>
|
||||
<span>库存 {{ item.quantity }}，{{ item.mode }}，{{ item.price || '未设置单价' }}</span>
|
||||
</div>
|
||||
<el-input-number
|
||||
v-model="resourceUsage[item.key]"
|
||||
:min="0"
|
||||
:max="item.quantity"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
<div v-if="order" class="order-progress-section">
|
||||
<el-steps
|
||||
:active="getOrderStep(order.status)"
|
||||
align-center
|
||||
finish-status="success"
|
||||
process-status="process"
|
||||
>
|
||||
<el-step
|
||||
title="待支付"
|
||||
:description="order.status === 'pending_payment' ? '等待租客支付' : ''"
|
||||
/>
|
||||
<span class="checkout-resource-amount">¥{{ money(resourceLineAmount(item)) }}</span>
|
||||
<el-step
|
||||
title="待交接"
|
||||
:description="
|
||||
order.status === 'pending_handoff' ? handoffStatusLabel(order.handoff_status) : ''
|
||||
"
|
||||
/>
|
||||
<el-step
|
||||
title="使用中"
|
||||
:description="['renting', 'overdue'].includes(order.status) ? '租赁进行中' : ''"
|
||||
/>
|
||||
<el-step
|
||||
title="结账中"
|
||||
:description="
|
||||
['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status)
|
||||
? '等待确认'
|
||||
: ''
|
||||
"
|
||||
/>
|
||||
<el-step title="已完成" :description="order.status === 'completed' ? '订单完成' : ''" />
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
<div v-if="order" class="detail-grid">
|
||||
<div class="metric-card primary">
|
||||
<span class="metric-label">订单状态</span>
|
||||
<strong class="metric-value">{{ orderStatusLabel(order.status) }}</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span class="metric-label">交接状态</span>
|
||||
<strong class="metric-value">{{ handoffStatusLabel(order.handoff_status) }}</strong>
|
||||
</div>
|
||||
<div class="metric-card highlight">
|
||||
<span class="metric-label">{{ orderAmountLabel }}</span>
|
||||
<strong class="metric-value amount">¥{{ money(orderRentDisplayAmount) }}</strong>
|
||||
</div>
|
||||
<div v-if="isOwner && ownerIncomeDisplayAmount !== null" class="metric-card income">
|
||||
<span class="metric-label">{{ ownerIncomeLabel }}</span>
|
||||
<strong class="metric-value amount">¥{{ money(ownerIncomeDisplayAmount) }}</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span class="metric-label">押金</span>
|
||||
<strong class="metric-value">¥{{ money(order.deposit_amount) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<el-form class="form-grid" label-position="top">
|
||||
<el-form-item label="消耗哈夫币（M）">
|
||||
<el-input-number v-model="checkoutForm.coin_consumed_m" class="full-control" :min="0" :max="snapshotHafCoinM" :precision="2" controls-position="right" />
|
||||
<span class="field-hint">订单快照 {{ quantity(snapshotHafCoinM) }}M，预计剩余 {{ quantity(remainingHafCoinM) }}M</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="其他押金赔付（元）">
|
||||
<el-input-number v-model="checkoutForm.other_amount" class="full-control" :min="0" :precision="0" controls-position="right" />
|
||||
<span class="field-hint">不含上方额外消耗品；仅填写封禁、违规、资产损坏等需要从押金赔付的费用。</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="checkout-deduct-preview">
|
||||
<div>
|
||||
<span>额外消耗品已用</span>
|
||||
<strong>¥{{ money(resourceChargeAmount) }}</strong>
|
||||
<em>按上方物资数量自动计算，计入实际结算租金</em>
|
||||
|
||||
<div v-if="order" class="info-section">
|
||||
<div class="info-card">
|
||||
<div class="info-row">
|
||||
<span class="info-label">开始时间</span>
|
||||
<span class="info-value">{{ formatDateTime(orderRentedAt(), '未开始') }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">预计截止</span>
|
||||
<span class="info-value">{{ formatDateTime(orderEstimatedEndAt(), '未设置') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>其他押金赔付</span>
|
||||
<strong>¥{{ money(checkoutForm.other_amount) }}</strong>
|
||||
<em>作为押金赔付扣除，和额外消耗品分开展示</em>
|
||||
|
||||
<div v-if="order.status === 'pending_payment'" class="action-card warning">
|
||||
<p class="action-message">订单待支付，支付后账号进入交接流程。</p>
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
v-if="isRenter"
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="startingPayment"
|
||||
@click="handlePay"
|
||||
>
|
||||
立即支付订单
|
||||
</el-button>
|
||||
<el-button type="danger" plain :loading="cancelling" @click="handleCancel">
|
||||
取消订单并释放账号
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order.status === 'pending_handoff'" class="action-card info">
|
||||
<div class="action-buttons">
|
||||
<el-button type="danger" plain :loading="cancelling" @click="handleCancel">
|
||||
取消订单并释放账号
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="checkoutForm.evidenceText"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="结账证据链接，一行一个。可填写截图地址或备注链接"
|
||||
/>
|
||||
<el-button type="primary" size="large" :loading="returning" @click="handleSubmitCheckout">发起结账</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order && order.checkout && ['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status)" class="info-section">
|
||||
<div class="section-header">
|
||||
<h2>结账明细</h2>
|
||||
</div>
|
||||
<div class="checkout-summary-card">
|
||||
<div class="summary-row">
|
||||
<span>实际结算租金</span>
|
||||
<strong>¥{{ money(order.checkout.display_amount) }}</strong>
|
||||
<div v-if="order" class="timeline-section">
|
||||
<div class="section-header">
|
||||
<h2>交接记录</h2>
|
||||
</div>
|
||||
<el-empty v-if="handoffRecords.length === 0" description="暂无交接记录" />
|
||||
<el-timeline v-else>
|
||||
<el-timeline-item
|
||||
v-for="record in handoffRecords"
|
||||
:key="record.id"
|
||||
:timestamp="formatDateTime(record.created_at)"
|
||||
placement="top"
|
||||
>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">{{ formatHandoffRecordType(record.type) }}</div>
|
||||
<div class="timeline-body">{{ record.content }}</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>预收押金</span>
|
||||
<strong>¥{{ money(order.checkout.deposit_amount) }}</strong>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>额外消耗品已用</span>
|
||||
<strong class="warning">¥{{ money(order.checkout.consumable_amount) }}</strong>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>押金赔付扣除</span>
|
||||
<strong class="warning">¥{{ money(order.checkout.deposit_deduct_amount) }}</strong>
|
||||
</div>
|
||||
<div v-if="isRenter" class="summary-row highlight">
|
||||
<span>退还租客（未使用租金 + 剩余押金）</span>
|
||||
<strong class="amount">¥{{ money(order.checkout.renter_refund_amount) }}</strong>
|
||||
</div>
|
||||
<div v-if="isOwner" class="summary-row highlight">
|
||||
<span>号主最终收入（租金 + 押金赔付）</span>
|
||||
<strong class="amount">¥{{ money(order.checkout.owner_income_amount) }}</strong>
|
||||
</div>
|
||||
<div v-if="order.checkout.content" class="summary-note">
|
||||
<label>说明：</label>
|
||||
<p>{{ order.checkout.content }}</p>
|
||||
</div>
|
||||
<div v-if="order.checkout.owner_adjustment_reason" class="summary-note warning">
|
||||
<label>修正原因：</label>
|
||||
<p>{{ order.checkout.owner_adjustment_reason }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order && isOwner && order.status === 'pending_checkout_confirm'" class="form-section counter-checkout-section">
|
||||
<div class="section-header">
|
||||
<h2>修改结账</h2>
|
||||
</div>
|
||||
<div class="form-card">
|
||||
<h3 class="sub-title">修改结账金额</h3>
|
||||
<el-form class="form-grid" label-position="top">
|
||||
<el-form-item label="额外消耗品已用金额">
|
||||
<el-input-number v-model="counterForm.consumable_amount" class="full-control" :min="0" :precision="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
<el-form-item label="消耗哈夫币（M）">
|
||||
<el-input-number v-model="counterForm.coin_consumed_m" class="full-control" :min="0" :precision="2" controls-position="right" />
|
||||
</el-form-item>
|
||||
<el-form-item label="其他押金扣款（元）">
|
||||
<el-input-number v-model="counterForm.other_amount" class="full-control" :min="0" :precision="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
<el-form-item label="押金扣除（元）">
|
||||
<el-input-number v-model="counterForm.deposit_deduct_amount" class="full-control" :min="0" :max="order.deposit_amount" :precision="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-input v-model="counterForm.reason" type="textarea" :rows="3" placeholder="填写修改原因" />
|
||||
<el-input v-model="counterForm.evidenceText" type="textarea" :rows="3" placeholder="修正证据链接，一行一个" />
|
||||
<el-button type="warning" size="large" :loading="countering" @click="handleCounterCheckout">提交修正给租客确认</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="order && isRenter && ['renting', 'overdue'].includes(order.status)"
|
||||
class="form-section checkout-form-section"
|
||||
>
|
||||
<div class="section-header">
|
||||
<h2>发起结账</h2>
|
||||
</div>
|
||||
<div class="form-card">
|
||||
<el-input
|
||||
v-model="checkoutForm.content"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="填写结账说明、租后资产状态或注意事项"
|
||||
/>
|
||||
<div class="checkout-resource-panel">
|
||||
<div class="checkout-resource-head">
|
||||
<strong>额外消耗品</strong>
|
||||
<span class="amount-highlight">已用金额：¥{{ money(resourceChargeAmount) }}</span>
|
||||
</div>
|
||||
<el-empty
|
||||
v-if="checkoutResources.length === 0"
|
||||
description="订单快照中暂无额外消耗品"
|
||||
/>
|
||||
<div
|
||||
v-for="item in checkoutResources"
|
||||
v-else
|
||||
:key="item.key"
|
||||
class="checkout-resource-row"
|
||||
>
|
||||
<div class="checkout-resource-meta">
|
||||
<strong>{{ item.label }}</strong>
|
||||
<span
|
||||
>库存 {{ item.quantity }}，{{ item.mode }}，{{
|
||||
item.price || '未设置单价'
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<el-input-number
|
||||
v-model="resourceUsage[item.key]"
|
||||
:min="0"
|
||||
:max="item.quantity"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
<span class="checkout-resource-amount">¥{{ money(resourceLineAmount(item)) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-form class="form-grid" label-position="top">
|
||||
<el-form-item label="消耗哈夫币（M）">
|
||||
<el-input-number
|
||||
v-model="checkoutForm.coin_consumed_m"
|
||||
class="full-control"
|
||||
:min="0"
|
||||
:max="snapshotHafCoinM"
|
||||
:precision="2"
|
||||
controls-position="right"
|
||||
/>
|
||||
<span class="field-hint"
|
||||
>订单快照 {{ quantity(snapshotHafCoinM) }}M，预计剩余
|
||||
{{ quantity(remainingHafCoinM) }}M</span
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item label="其他押金赔付（元）">
|
||||
<el-input-number
|
||||
v-model="checkoutForm.other_amount"
|
||||
class="full-control"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
<span class="field-hint"
|
||||
>不含上方额外消耗品；仅填写封禁、违规、资产损坏等需要从押金赔付的费用。</span
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="checkout-deduct-preview">
|
||||
<div>
|
||||
<span>额外消耗品已用</span>
|
||||
<strong>¥{{ money(resourceChargeAmount) }}</strong>
|
||||
<em>按上方物资数量自动计算，计入实际结算租金</em>
|
||||
</div>
|
||||
<div>
|
||||
<span>其他押金赔付</span>
|
||||
<strong>¥{{ money(checkoutForm.other_amount) }}</strong>
|
||||
<em>作为押金赔付扣除，和额外消耗品分开展示</em>
|
||||
</div>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="checkoutForm.evidenceText"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="结账证据链接，一行一个。可填写截图地址或备注链接"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="returning"
|
||||
@click="handleSubmitCheckout"
|
||||
>发起结账</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order && isRenter && order.status === 'pending_checkout_accept'" class="form-section reject-checkout-section">
|
||||
<div class="section-header">
|
||||
<h2>拒绝修正</h2>
|
||||
</div>
|
||||
<div class="form-card">
|
||||
<p class="form-hint">不同意修正时填写原因，订单会进入争议处理。</p>
|
||||
<el-input v-model="rejectReason" type="textarea" :rows="3" placeholder="不同意时填写原因，会进入争议处理" />
|
||||
<el-button type="danger" plain size="large" :loading="rejectingCheckout" @click="handleRejectCheckout">拒绝修正并发起争议</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
order &&
|
||||
order.checkout &&
|
||||
['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status)
|
||||
"
|
||||
class="info-section"
|
||||
>
|
||||
<div class="section-header">
|
||||
<h2>结账明细</h2>
|
||||
</div>
|
||||
<div class="checkout-summary-card">
|
||||
<div class="summary-row">
|
||||
<span>实际结算租金</span>
|
||||
<strong>¥{{ money(order.checkout.display_amount) }}</strong>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>预收押金</span>
|
||||
<strong>¥{{ money(order.checkout.deposit_amount) }}</strong>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>额外消耗品已用</span>
|
||||
<strong class="warning">¥{{ money(order.checkout.consumable_amount) }}</strong>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>押金赔付扣除</span>
|
||||
<strong class="warning">¥{{ money(order.checkout.deposit_deduct_amount) }}</strong>
|
||||
</div>
|
||||
<div v-if="isRenter" class="summary-row highlight">
|
||||
<span>退还租客（未使用租金 + 剩余押金）</span>
|
||||
<strong class="amount">¥{{ money(order.checkout.renter_refund_amount) }}</strong>
|
||||
</div>
|
||||
<div v-if="isOwner" class="summary-row highlight">
|
||||
<span>号主最终收入（租金 + 押金赔付）</span>
|
||||
<strong class="amount">¥{{ money(order.checkout.owner_income_amount) }}</strong>
|
||||
</div>
|
||||
<div v-if="order.checkout.content" class="summary-note">
|
||||
<label>说明：</label>
|
||||
<p>{{ order.checkout.content }}</p>
|
||||
</div>
|
||||
<div v-if="order.checkout.owner_adjustment_reason" class="summary-note warning">
|
||||
<label>修正原因：</label>
|
||||
<p>{{ order.checkout.owner_adjustment_reason }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧悬浮操作区 -->
|
||||
<div v-if="order" class="action-sidebar">
|
||||
<!-- 交接操作 -->
|
||||
<div v-if="isOwner && order.status === 'pending_handoff' && order.handoff_status === 'pending_owner'" class="sidebar-card">
|
||||
<h3 class="sidebar-title">提交交接说明</h3>
|
||||
<el-input v-model="handoffContent" type="textarea" :rows="5" placeholder="填写登录方式、注意事项和交接说明" />
|
||||
<el-button type="primary" size="large" :loading="handoffing" @click="handleSubmitHandoff">提交交接</el-button>
|
||||
<div
|
||||
v-if="order && isOwner && order.status === 'pending_checkout_confirm'"
|
||||
class="form-section counter-checkout-section"
|
||||
>
|
||||
<div class="section-header">
|
||||
<h2>修改结账</h2>
|
||||
</div>
|
||||
<div class="form-card">
|
||||
<h3 class="sub-title">修改结账金额</h3>
|
||||
<el-form class="form-grid" label-position="top">
|
||||
<el-form-item label="额外消耗品已用金额">
|
||||
<el-input-number
|
||||
v-model="counterForm.consumable_amount"
|
||||
class="full-control"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="消耗哈夫币（M）">
|
||||
<el-input-number
|
||||
v-model="counterForm.coin_consumed_m"
|
||||
class="full-control"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="其他押金扣款（元）">
|
||||
<el-input-number
|
||||
v-model="counterForm.other_amount"
|
||||
class="full-control"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="押金扣除（元）">
|
||||
<el-input-number
|
||||
v-model="counterForm.deposit_deduct_amount"
|
||||
class="full-control"
|
||||
:min="0"
|
||||
:max="order.deposit_amount"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-input
|
||||
v-model="counterForm.reason"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="填写修改原因"
|
||||
/>
|
||||
<el-input
|
||||
v-model="counterForm.evidenceText"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="修正证据链接，一行一个"
|
||||
/>
|
||||
<el-button
|
||||
type="warning"
|
||||
size="large"
|
||||
:loading="countering"
|
||||
@click="handleCounterCheckout"
|
||||
>提交修正给租客确认</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="order && isRenter && order.status === 'pending_checkout_accept'"
|
||||
class="form-section reject-checkout-section"
|
||||
>
|
||||
<div class="section-header">
|
||||
<h2>拒绝修正</h2>
|
||||
</div>
|
||||
<div class="form-card">
|
||||
<p class="form-hint">不同意修正时填写原因，订单会进入争议处理。</p>
|
||||
<el-input
|
||||
v-model="rejectReason"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="不同意时填写原因，会进入争议处理"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
size="large"
|
||||
:loading="rejectingCheckout"
|
||||
@click="handleRejectCheckout"
|
||||
>拒绝修正并发起争议</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 确认收号 -->
|
||||
<div
|
||||
v-if="isRenter && order.status === 'pending_handoff' && order.handoff_status === 'pending_renter_confirm'"
|
||||
class="sidebar-card"
|
||||
>
|
||||
<h3 class="sidebar-title">确认收号</h3>
|
||||
<p class="sidebar-hint">确认账号可以正常登录后，订单会进入使用中并重新计算预计截止时间。</p>
|
||||
<el-button type="primary" size="large" :loading="confirming" @click="handleConfirmReceive">确认已收到账号</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 发起结账 -->
|
||||
<div v-if="isRenter && ['renting', 'overdue'].includes(order.status)" class="sidebar-card highlight-card">
|
||||
<h3 class="sidebar-title">快捷结账</h3>
|
||||
<el-button type="primary" size="large" :loading="returning" @click="handleSubmitCheckout">
|
||||
立即提交结账
|
||||
</el-button>
|
||||
<p class="sidebar-hint">如需修改消耗品、哈夫币等详细信息，请先向下滚动填写完整表单后再提交</p>
|
||||
<el-button type="default" size="small" @click="scrollToCheckout">
|
||||
查看详细结账表单
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 确认结账 -->
|
||||
<div v-if="isOwner && order.status === 'pending_checkout_confirm'" class="sidebar-card">
|
||||
<h3 class="sidebar-title">确认结账</h3>
|
||||
<el-button type="primary" size="large" :loading="completing" @click="handleConfirmCheckout">
|
||||
确认结账并完成订单
|
||||
</el-button>
|
||||
<div class="section-divider-mini">
|
||||
<span>或者</span>
|
||||
<!-- 右侧悬浮操作区 -->
|
||||
<div v-if="order" class="action-sidebar">
|
||||
<!-- 交接操作 -->
|
||||
<div
|
||||
v-if="
|
||||
isOwner &&
|
||||
order.status === 'pending_handoff' &&
|
||||
order.handoff_status === 'pending_owner'
|
||||
"
|
||||
class="sidebar-card"
|
||||
>
|
||||
<h3 class="sidebar-title">提交交接说明</h3>
|
||||
<el-input
|
||||
v-model="handoffContent"
|
||||
type="textarea"
|
||||
:rows="5"
|
||||
placeholder="填写登录方式、注意事项和交接说明"
|
||||
/>
|
||||
<el-button type="primary" size="large" :loading="handoffing" @click="handleSubmitHandoff"
|
||||
>提交交接</el-button
|
||||
>
|
||||
</div>
|
||||
<el-button type="warning" plain size="large" @click="scrollToCounterCheckout">
|
||||
需要修改结账金额
|
||||
</el-button>
|
||||
<p class="sidebar-hint">如认为金额有误，点击上方按钮修改</p>
|
||||
</div>
|
||||
|
||||
<!-- 确认修正结账 -->
|
||||
<div v-if="isRenter && order.status === 'pending_checkout_accept'" class="sidebar-card">
|
||||
<h3 class="sidebar-title">确认修正结账</h3>
|
||||
<el-button type="primary" size="large" :loading="acceptingCheckout" @click="handleAcceptCheckout">
|
||||
同意修正并完成订单
|
||||
</el-button>
|
||||
<div class="section-divider-mini">
|
||||
<span>或者</span>
|
||||
<!-- 确认收号 -->
|
||||
<div
|
||||
v-if="
|
||||
isRenter &&
|
||||
order.status === 'pending_handoff' &&
|
||||
order.handoff_status === 'pending_renter_confirm'
|
||||
"
|
||||
class="sidebar-card"
|
||||
>
|
||||
<h3 class="sidebar-title">确认收号</h3>
|
||||
<p class="sidebar-hint">
|
||||
确认账号可以正常登录后，订单会进入使用中并重新计算预计截止时间。
|
||||
</p>
|
||||
<el-button type="primary" size="large" :loading="confirming" @click="handleConfirmReceive"
|
||||
>确认已收到账号</el-button
|
||||
>
|
||||
</div>
|
||||
<el-button type="danger" plain size="large" @click="scrollToRejectCheckout">
|
||||
不同意，发起争议
|
||||
</el-button>
|
||||
<p class="sidebar-hint">不同意修正时需填写原因，将进入争议处理</p>
|
||||
</div>
|
||||
|
||||
<!-- 发起申诉 -->
|
||||
<div v-if="canOpenDispute" class="sidebar-card dispute-card">
|
||||
<h3 class="sidebar-title">{{ isCheckoutDisputeStage ? '发起结账争议' : '发起申诉' }}</h3>
|
||||
<el-button type="warning" size="large" @click="scrollToDispute">
|
||||
{{ isCheckoutDisputeStage ? '提交结账争议' : '提交申诉' }}
|
||||
</el-button>
|
||||
<p class="sidebar-hint">点击后滚动到申诉表单填写详细信息</p>
|
||||
<!-- 发起结账 -->
|
||||
<div
|
||||
v-if="isRenter && ['renting', 'overdue'].includes(order.status)"
|
||||
class="sidebar-card highlight-card"
|
||||
>
|
||||
<h3 class="sidebar-title">快捷结账</h3>
|
||||
<el-button type="primary" size="large" :loading="returning" @click="handleSubmitCheckout">
|
||||
立即提交结账
|
||||
</el-button>
|
||||
<p class="sidebar-hint">
|
||||
如需修改消耗品、哈夫币等详细信息，请先向下滚动填写完整表单后再提交
|
||||
</p>
|
||||
<el-button type="default" size="small" @click="scrollToCheckout">
|
||||
查看详细结账表单
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 确认结账 -->
|
||||
<div v-if="isOwner && order.status === 'pending_checkout_confirm'" class="sidebar-card">
|
||||
<h3 class="sidebar-title">确认结账</h3>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="completing"
|
||||
@click="handleConfirmCheckout"
|
||||
>
|
||||
确认结账并完成订单
|
||||
</el-button>
|
||||
<div class="section-divider-mini">
|
||||
<span>或者</span>
|
||||
</div>
|
||||
<el-button type="warning" plain size="large" @click="scrollToCounterCheckout">
|
||||
需要修改结账金额
|
||||
</el-button>
|
||||
<p class="sidebar-hint">如认为金额有误，点击上方按钮修改</p>
|
||||
</div>
|
||||
|
||||
<!-- 确认修正结账 -->
|
||||
<div v-if="isRenter && order.status === 'pending_checkout_accept'" class="sidebar-card">
|
||||
<h3 class="sidebar-title">确认修正结账</h3>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="acceptingCheckout"
|
||||
@click="handleAcceptCheckout"
|
||||
>
|
||||
同意修正并完成订单
|
||||
</el-button>
|
||||
<div class="section-divider-mini">
|
||||
<span>或者</span>
|
||||
</div>
|
||||
<el-button type="danger" plain size="large" @click="scrollToRejectCheckout">
|
||||
不同意，发起争议
|
||||
</el-button>
|
||||
<p class="sidebar-hint">不同意修正时需填写原因，将进入争议处理</p>
|
||||
</div>
|
||||
|
||||
<!-- 发起申诉 -->
|
||||
<div v-if="canOpenDispute" class="sidebar-card dispute-card">
|
||||
<h3 class="sidebar-title">{{ isCheckoutDisputeStage ? '发起结账争议' : '发起申诉' }}</h3>
|
||||
<el-button type="warning" size="large" @click="scrollToDispute">
|
||||
{{ isCheckoutDisputeStage ? '提交结账争议' : '提交申诉' }}
|
||||
</el-button>
|
||||
<p class="sidebar-hint">点击后滚动到申诉表单填写详细信息</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order && canOpenDispute" class="form-section dispute-section">
|
||||
<div class="section-header">
|
||||
<h2>{{ isCheckoutDisputeStage ? '发起结账争议' : '发起申诉' }}</h2>
|
||||
</div>
|
||||
<div class="form-card">
|
||||
<el-select v-if="!isCheckoutDisputeStage" v-model="disputeType" class="full-control" placeholder="选择申诉类型">
|
||||
<el-select
|
||||
v-if="!isCheckoutDisputeStage"
|
||||
v-model="disputeType"
|
||||
class="full-control"
|
||||
placeholder="选择申诉类型"
|
||||
>
|
||||
<el-option label="无法登录" value="cannot_login" />
|
||||
<el-option label="虚假描述" value="false_description" />
|
||||
<el-option label="账号被封" value="account_banned" />
|
||||
@@ -993,7 +1198,12 @@ function formatHandoffRecordType(type: string) {
|
||||
placeholder="证据链接，一行一个。开发阶段可先填截图地址或备注链接"
|
||||
/>
|
||||
<div class="upload-line">
|
||||
<input type="file" accept="image/jpeg,image/png,image/webp,application/pdf" :disabled="uploadingEvidence" @change="handleEvidenceUpload" />
|
||||
<input
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp,application/pdf"
|
||||
:disabled="uploadingEvidence"
|
||||
@change="handleEvidenceUpload"
|
||||
/>
|
||||
</div>
|
||||
<el-button type="warning" size="large" :loading="disputing" @click="handleCreateDispute">
|
||||
{{ isCheckoutDisputeStage ? '提交结账争议' : '提交申诉' }}
|
||||
@@ -1597,7 +1807,7 @@ function formatHandoffRecordType(type: string) {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.upload-line input[type="file"] {
|
||||
.upload-line input[type='file'] {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user