yml2213
3631e70321
- 新增 order_checkouts 表，支持结账明细（消耗/押金扣除/退回/号主入账） - 租客发起结账 → 号主确认 → 已完成（正常路径） - 号主修改结账 → 租客确认修正 → 已完成（修正路径） - 结账阶段任一方发起争议 → 后台仲裁 → 已完成/已关闭/异常（争议路径） - 争议模块适配结账争议类型，仲裁结果新增 mark_abnormal - 超时任务适配新的 pending_checkout_confirm 状态 - 前端结账明细面板、发起结账/确认/修正/拒绝表单全部实现 - 移除旧的 SubmitReturn/ConfirmReturn 接口
517 lines
17 KiB
Vue
517 lines
17 KiB
Vue
<script setup lang="ts">
|
||
import { ElMessage } from 'element-plus'
|
||
import { computed, onMounted, ref } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
|
||
import { createDispute } from '@/api/disputes'
|
||
import { uploadFile } from '@/api/files'
|
||
import {
|
||
acceptCheckout,
|
||
cancelOrder,
|
||
confirmCheckout,
|
||
confirmReceive,
|
||
counterCheckout,
|
||
fetchHandoffRecords,
|
||
fetchOrder,
|
||
submitCheckout,
|
||
submitHandoff,
|
||
type HandoffRecord,
|
||
type Order,
|
||
} from '@/api/orders'
|
||
import { useSessionStore } from '@/stores/session'
|
||
import { handoffStatusLabel, orderStatusLabel } from '@/utils/statusLabels'
|
||
import { formatDateTime } from '@/utils/time'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const session = useSessionStore()
|
||
const loading = ref(false)
|
||
const cancelling = ref(false)
|
||
const handoffing = ref(false)
|
||
const confirming = ref(false)
|
||
const returning = ref(false)
|
||
const completing = ref(false)
|
||
const countering = ref(false)
|
||
const acceptingCheckout = ref(false)
|
||
const rejectingCheckout = ref(false)
|
||
const disputing = ref(false)
|
||
const uploadingEvidence = ref(false)
|
||
const order = ref<Order | null>(null)
|
||
const handoffRecords = ref<HandoffRecord[]>([])
|
||
const handoffContent = ref('')
|
||
const checkoutForm = ref({
|
||
content: '',
|
||
consumable_amount: 0,
|
||
coin_consumed_m: 0,
|
||
other_amount: 0,
|
||
evidenceText: '',
|
||
})
|
||
const counterForm = ref({
|
||
consumable_amount: 0,
|
||
coin_consumed_m: 0,
|
||
other_amount: 0,
|
||
deposit_deduct_amount: 0,
|
||
reason: '',
|
||
evidenceText: '',
|
||
})
|
||
const rejectReason = ref('')
|
||
const disputeType = ref('cannot_login')
|
||
const disputeDescription = ref('')
|
||
const disputeEvidenceText = ref('')
|
||
|
||
const isOwner = computed(() => order.value?.owner_id === session.userId)
|
||
const isRenter = computed(() => order.value?.renter_id === session.userId)
|
||
const canOpenDispute = computed(() => {
|
||
if (!order.value || (!isOwner.value && !isRenter.value)) return false
|
||
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)
|
||
})
|
||
|
||
onMounted(loadOrder)
|
||
|
||
async function loadOrder() {
|
||
loading.value = true
|
||
try {
|
||
order.value = await fetchOrder(String(route.params.id))
|
||
handoffRecords.value = await fetchHandoffRecords(String(route.params.id))
|
||
hydrateCounterForm()
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
async function handleCancel() {
|
||
if (!order.value) return
|
||
cancelling.value = true
|
||
try {
|
||
await cancelOrder(order.value.id)
|
||
ElMessage.success('订单已取消，账号已释放')
|
||
await router.push('/orders')
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '取消失败'))
|
||
} finally {
|
||
cancelling.value = false
|
||
}
|
||
}
|
||
|
||
async function handleSubmitHandoff() {
|
||
if (!order.value) return
|
||
handoffing.value = true
|
||
try {
|
||
await submitHandoff(order.value.id, handoffContent.value)
|
||
handoffContent.value = ''
|
||
ElMessage.success('交接说明已提交')
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '提交交接失败'))
|
||
} finally {
|
||
handoffing.value = false
|
||
}
|
||
}
|
||
|
||
async function handleConfirmReceive() {
|
||
if (!order.value) return
|
||
confirming.value = true
|
||
try {
|
||
await confirmReceive(order.value.id)
|
||
ElMessage.success('已确认收号，订单进入使用中')
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '确认收号失败'))
|
||
} finally {
|
||
confirming.value = false
|
||
}
|
||
}
|
||
|
||
async function handleSubmitCheckout() {
|
||
if (!order.value) return
|
||
returning.value = true
|
||
try {
|
||
await submitCheckout(order.value.id, {
|
||
content: checkoutForm.value.content,
|
||
consumable_amount: checkoutForm.value.consumable_amount,
|
||
coin_consumed_m: checkoutForm.value.coin_consumed_m,
|
||
other_amount: checkoutForm.value.other_amount,
|
||
evidence_urls: linesToList(checkoutForm.value.evidenceText),
|
||
})
|
||
checkoutForm.value = {
|
||
content: '',
|
||
consumable_amount: 0,
|
||
coin_consumed_m: 0,
|
||
other_amount: 0,
|
||
evidenceText: '',
|
||
}
|
||
ElMessage.success('结账已发起，等待号主确认')
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '发起结账失败'))
|
||
} finally {
|
||
returning.value = false
|
||
}
|
||
}
|
||
|
||
async function handleConfirmCheckout() {
|
||
if (!order.value) return
|
||
completing.value = true
|
||
try {
|
||
await confirmCheckout(order.value.id)
|
||
ElMessage.success('结账已确认，订单完成')
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '确认结账失败'))
|
||
} finally {
|
||
completing.value = false
|
||
}
|
||
}
|
||
|
||
async function handleCounterCheckout() {
|
||
if (!order.value) return
|
||
countering.value = true
|
||
try {
|
||
await counterCheckout(order.value.id, {
|
||
consumable_amount: counterForm.value.consumable_amount,
|
||
coin_consumed_m: counterForm.value.coin_consumed_m,
|
||
other_amount: counterForm.value.other_amount,
|
||
deposit_deduct_amount: counterForm.value.deposit_deduct_amount,
|
||
reason: counterForm.value.reason,
|
||
evidence_urls: linesToList(counterForm.value.evidenceText),
|
||
})
|
||
ElMessage.success('结账修正已提交，等待租客确认')
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '修改结账失败'))
|
||
} finally {
|
||
countering.value = false
|
||
}
|
||
}
|
||
|
||
async function handleAcceptCheckout() {
|
||
if (!order.value) return
|
||
acceptingCheckout.value = true
|
||
try {
|
||
await acceptCheckout(order.value.id)
|
||
ElMessage.success('已确认修正结账，订单完成')
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '确认修正失败'))
|
||
} finally {
|
||
acceptingCheckout.value = false
|
||
}
|
||
}
|
||
|
||
async function handleRejectCheckout() {
|
||
if (!order.value) return
|
||
rejectingCheckout.value = true
|
||
try {
|
||
await createDispute(order.value.id, {
|
||
type: 'checkout_dispute',
|
||
description: rejectReason.value,
|
||
evidence_urls: [],
|
||
})
|
||
rejectReason.value = ''
|
||
ElMessage.success('已拒绝修正结账，订单进入争议处理')
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '拒绝修正失败'))
|
||
} finally {
|
||
rejectingCheckout.value = false
|
||
}
|
||
}
|
||
|
||
async function handleCreateDispute() {
|
||
if (!order.value) return
|
||
disputing.value = true
|
||
try {
|
||
const evidence_urls = linesToList(disputeEvidenceText.value)
|
||
await createDispute(order.value.id, {
|
||
type: isCheckoutDisputeStage.value ? 'checkout_dispute' : disputeType.value,
|
||
description: disputeDescription.value,
|
||
evidence_urls,
|
||
})
|
||
disputeDescription.value = ''
|
||
disputeEvidenceText.value = ''
|
||
disputeType.value = 'cannot_login'
|
||
ElMessage.success('申诉已提交，订单进入仲裁处理')
|
||
await loadOrder()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '提交申诉失败'))
|
||
} finally {
|
||
disputing.value = false
|
||
}
|
||
}
|
||
|
||
async function handleEvidenceUpload(event: Event) {
|
||
const input = event.target as HTMLInputElement
|
||
const file = input.files?.[0]
|
||
input.value = ''
|
||
if (!file) return
|
||
uploadingEvidence.value = true
|
||
try {
|
||
const uploaded = await uploadFile(file, 'dispute')
|
||
disputeEvidenceText.value = [disputeEvidenceText.value, uploaded.url].filter(Boolean).join('\n')
|
||
ElMessage.success('证据文件已上传')
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '上传失败'))
|
||
} finally {
|
||
uploadingEvidence.value = false
|
||
}
|
||
}
|
||
|
||
function hydrateCounterForm() {
|
||
if (!order.value?.checkout) return
|
||
const checkout = order.value.checkout
|
||
counterForm.value.consumable_amount = checkout.consumable_amount
|
||
counterForm.value.coin_consumed_m = checkout.coin_consumed_m
|
||
counterForm.value.other_amount = checkout.other_amount
|
||
counterForm.value.deposit_deduct_amount = checkout.deposit_deduct_amount
|
||
counterForm.value.evidenceText = (checkout.evidence_urls || []).join('\n')
|
||
}
|
||
|
||
function linesToList(value: string) {
|
||
return value
|
||
.split('\n')
|
||
.map((item) => item.trim())
|
||
.filter(Boolean)
|
||
}
|
||
|
||
function readError(error: unknown, fallback: string) {
|
||
if (typeof error === 'object' && error && 'response' in error) {
|
||
const response = (error as { response?: { data?: { message?: string } } }).response
|
||
return response?.data?.message || fallback
|
||
}
|
||
return fallback
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="page" v-loading="loading">
|
||
<div v-if="order" class="page-header">
|
||
<p class="eyebrow">{{ order.order_no }}</p>
|
||
<h1>订单详情</h1>
|
||
<p>{{ order.title }} · {{ order.server_region }} / {{ order.login_platform }}</p>
|
||
</div>
|
||
|
||
<div v-if="order" class="detail-grid">
|
||
<div class="metric-card">
|
||
<span>状态</span>
|
||
<strong>{{ orderStatusLabel(order.status) }}</strong>
|
||
</div>
|
||
<div class="metric-card">
|
||
<span>交接</span>
|
||
<strong>{{ handoffStatusLabel(order.handoff_status) }}</strong>
|
||
</div>
|
||
<div class="metric-card">
|
||
<span>订单金额</span>
|
||
<strong>¥{{ order.rent_amount }}</strong>
|
||
</div>
|
||
<div class="metric-card">
|
||
<span>押金</span>
|
||
<strong>¥{{ order.deposit_amount }}</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="order" class="order-panel">
|
||
<p>开始：{{ formatDateTime(order.rent_start_at, '未开始') }}</p>
|
||
<p>预计截止：{{ formatDateTime(order.rent_end_at, '未设置') }}</p>
|
||
<el-button v-if="order.status === 'pending_handoff'" type="danger" :loading="cancelling" @click="handleCancel">
|
||
取消订单并释放账号
|
||
</el-button>
|
||
</div>
|
||
|
||
<div v-if="order" class="order-panel">
|
||
<h2>交接记录</h2>
|
||
<el-empty v-if="handoffRecords.length === 0" description="暂无交接记录" />
|
||
<div v-for="record in handoffRecords" :key="record.id" class="timeline-item">
|
||
<strong>{{ record.type }}</strong>
|
||
<p>{{ record.content }}</p>
|
||
<span>{{ formatDateTime(record.created_at) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="order && isOwner && order.status === 'pending_handoff' && order.handoff_status === 'pending_owner'" class="order-panel">
|
||
<h2>提交交接说明</h2>
|
||
<el-input v-model="handoffContent" type="textarea" :rows="4" placeholder="填写登录方式、注意事项和交接说明" />
|
||
<el-button class="panel-action" type="primary" :loading="handoffing" @click="handleSubmitHandoff">提交交接</el-button>
|
||
</div>
|
||
|
||
<div
|
||
v-if="order && isRenter && order.status === 'pending_handoff' && order.handoff_status === 'pending_renter_confirm'"
|
||
class="order-panel"
|
||
>
|
||
<h2>确认收号</h2>
|
||
<p>确认账号可以正常登录后，订单会进入使用中并重新计算预计截止时间。</p>
|
||
<el-button type="primary" :loading="confirming" @click="handleConfirmReceive">确认已收到账号</el-button>
|
||
</div>
|
||
|
||
<div v-if="order?.checkout" class="order-panel">
|
||
<h2>结账明细</h2>
|
||
<div class="detail-grid">
|
||
<div class="metric-card">
|
||
<span>押金扣除</span>
|
||
<strong>¥{{ order.checkout.deposit_deduct_amount }}</strong>
|
||
</div>
|
||
<div class="metric-card">
|
||
<span>租客退回</span>
|
||
<strong>¥{{ order.checkout.renter_refund_amount }}</strong>
|
||
</div>
|
||
<div class="metric-card">
|
||
<span>号主入账</span>
|
||
<strong>¥{{ order.checkout.owner_income_amount }}</strong>
|
||
</div>
|
||
<div class="metric-card">
|
||
<span>消耗</span>
|
||
<strong>{{ order.checkout.coin_consumed_m }}M</strong>
|
||
</div>
|
||
</div>
|
||
<p v-if="order.checkout.content">租客说明：{{ order.checkout.content }}</p>
|
||
<p v-if="order.checkout.owner_adjustment_reason">号主修正：{{ order.checkout.owner_adjustment_reason }}</p>
|
||
</div>
|
||
|
||
<div v-if="order && isRenter && ['renting', 'overdue'].includes(order.status)" class="order-panel">
|
||
<h2>发起结账</h2>
|
||
<el-input v-model="checkoutForm.content" type="textarea" :rows="4" placeholder="填写使用结束说明、账号状态和需要号主核对的内容" />
|
||
<div class="form-grid panel-action">
|
||
<el-input-number
|
||
v-model="checkoutForm.consumable_amount"
|
||
class="full-control"
|
||
:min="0"
|
||
:precision="2"
|
||
controls-position="right"
|
||
placeholder="消耗扣款"
|
||
/>
|
||
<el-input-number
|
||
v-model="checkoutForm.coin_consumed_m"
|
||
class="full-control"
|
||
:min="0"
|
||
:precision="2"
|
||
controls-position="right"
|
||
placeholder="消耗哈夫币 M"
|
||
/>
|
||
<el-input-number
|
||
v-model="checkoutForm.other_amount"
|
||
class="full-control"
|
||
:min="0"
|
||
:precision="2"
|
||
controls-position="right"
|
||
placeholder="其他扣款"
|
||
/>
|
||
</div>
|
||
<el-input
|
||
v-model="checkoutForm.evidenceText"
|
||
class="panel-action"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="结账证据链接，一行一个。可填写截图地址或备注链接"
|
||
/>
|
||
<el-button class="panel-action" type="primary" :loading="returning" @click="handleSubmitCheckout">发起结账</el-button>
|
||
</div>
|
||
|
||
<div v-if="order && isOwner && order.status === 'pending_checkout_confirm'" class="order-panel">
|
||
<h2>确认结账</h2>
|
||
<p>确认账号状态和扣款金额无误后，订单会完成，账号重新上架。</p>
|
||
<el-button type="primary" :loading="completing" @click="handleConfirmCheckout">确认结账并完成订单</el-button>
|
||
|
||
<h2 class="panel-action">修改结账</h2>
|
||
<div class="form-grid">
|
||
<el-input-number
|
||
v-model="counterForm.consumable_amount"
|
||
class="full-control"
|
||
:min="0"
|
||
:precision="2"
|
||
controls-position="right"
|
||
placeholder="消耗扣款"
|
||
/>
|
||
<el-input-number
|
||
v-model="counterForm.coin_consumed_m"
|
||
class="full-control"
|
||
:min="0"
|
||
:precision="2"
|
||
controls-position="right"
|
||
placeholder="消耗哈夫币 M"
|
||
/>
|
||
<el-input-number
|
||
v-model="counterForm.other_amount"
|
||
class="full-control"
|
||
:min="0"
|
||
:precision="2"
|
||
controls-position="right"
|
||
placeholder="其他扣款"
|
||
/>
|
||
<el-input-number
|
||
v-model="counterForm.deposit_deduct_amount"
|
||
class="full-control"
|
||
:min="0"
|
||
:max="order.deposit_amount"
|
||
:precision="2"
|
||
controls-position="right"
|
||
placeholder="押金扣除"
|
||
/>
|
||
</div>
|
||
<el-input
|
||
v-model="counterForm.reason"
|
||
class="panel-action"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="填写修改原因，例如额外资产损耗、哈夫币消耗差异或截图核对结果"
|
||
/>
|
||
<el-input
|
||
v-model="counterForm.evidenceText"
|
||
class="panel-action"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="修正证据链接，一行一个"
|
||
/>
|
||
<el-button class="panel-action" type="warning" :loading="countering" @click="handleCounterCheckout">提交修正给租客确认</el-button>
|
||
</div>
|
||
|
||
<div v-if="order && isRenter && order.status === 'pending_checkout_accept'" class="order-panel">
|
||
<h2>确认修正结账</h2>
|
||
<p>同意后订单会完成结算；不同意会进入结账争议，由客服仲裁。</p>
|
||
<el-button type="primary" :loading="acceptingCheckout" @click="handleAcceptCheckout">同意修正并完成订单</el-button>
|
||
<el-input
|
||
v-model="rejectReason"
|
||
class="panel-action"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="不同意时填写原因，会进入争议处理"
|
||
/>
|
||
<el-button class="panel-action" type="danger" :loading="rejectingCheckout" @click="handleRejectCheckout">拒绝修正并发起争议</el-button>
|
||
</div>
|
||
|
||
<div v-if="order && canOpenDispute" class="order-panel">
|
||
<h2>{{ isCheckoutDisputeStage ? '发起结账争议' : '发起申诉' }}</h2>
|
||
<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" />
|
||
<el-option label="资产损失" value="asset_loss" />
|
||
<el-option label="哈夫币争议" value="haf_coin_dispute" />
|
||
<el-option label="超时未交接" value="handoff_timeout" />
|
||
<el-option label="超时未归还" value="return_timeout" />
|
||
</el-select>
|
||
<el-input
|
||
v-model="disputeDescription"
|
||
class="panel-action"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="说明争议经过、时间点和希望客服核查的证据"
|
||
/>
|
||
<el-input
|
||
v-model="disputeEvidenceText"
|
||
class="panel-action"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="证据链接，一行一个。开发阶段可先填截图地址或备注链接"
|
||
/>
|
||
<div class="panel-action upload-line">
|
||
<input type="file" accept="image/jpeg,image/png,image/webp,application/pdf" :disabled="uploadingEvidence" @change="handleEvidenceUpload" />
|
||
</div>
|
||
<el-button class="panel-action" type="warning" :loading="disputing" @click="handleCreateDispute">
|
||
{{ isCheckoutDisputeStage ? '提交结账争议' : '提交申诉' }}
|
||
</el-button>
|
||
</div>
|
||
</section>
|
||
</template>
|