增加前端格式检查配置
This commit is contained in:
yml2213
File diff suppressed because it is too large
Load Diff
@@ -1,139 +1,143 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, computed } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { showDialog, showToast } from "vant";
|
||||
import MobileBottomNav from "@/components/MobileBottomNav.vue";
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { showDialog, showToast } from 'vant'
|
||||
import MobileBottomNav from '@/components/MobileBottomNav.vue'
|
||||
|
||||
import { fetchOrders, startOrderPayment, type Order, type PaymentOrder } from "@/features/orders/api/orders";
|
||||
import { useSessionStore } from "@/stores/session";
|
||||
import { formatDateMinute } from "@/utils/time";
|
||||
import {
|
||||
fetchOrders,
|
||||
startOrderPayment,
|
||||
type Order,
|
||||
type PaymentOrder,
|
||||
} from '@/features/orders/api/orders'
|
||||
import { useSessionStore } from '@/stores/session'
|
||||
import { formatDateMinute } from '@/utils/time'
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const session = useSessionStore();
|
||||
const loading = ref(false);
|
||||
const orders = ref<Order[]>([]);
|
||||
const activeTab = ref("all");
|
||||
const payingOrderId = ref<number | null>(null);
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const session = useSessionStore()
|
||||
const loading = ref(false)
|
||||
const orders = ref<Order[]>([])
|
||||
const activeTab = ref('all')
|
||||
const payingOrderId = ref<number | null>(null)
|
||||
|
||||
onMounted(() => {
|
||||
loadOrders();
|
||||
loadOrders()
|
||||
if (route.query.tab) {
|
||||
activeTab.value = String(route.query.tab);
|
||||
activeTab.value = String(route.query.tab)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
async function loadOrders() {
|
||||
loading.value = true;
|
||||
loading.value = true
|
||||
try {
|
||||
orders.value = await fetchOrders();
|
||||
orders.value = await fetchOrders()
|
||||
} catch {
|
||||
showToast({ message: "订单加载失败，请稍后重试", icon: "warning-o" });
|
||||
showToast({ message: '订单加载失败，请稍后重试', icon: 'warning-o' })
|
||||
} finally {
|
||||
loading.value = false;
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/* 状态筛选 */
|
||||
const statusTabs = [
|
||||
{ key: "all", label: "全部" },
|
||||
{ key: "pending_payment", label: "待支付" },
|
||||
{ key: "pending_handoff", label: "待交接" },
|
||||
{ key: "renting", label: "使用中" },
|
||||
{ key: "pending_checkout_confirm", label: "待结账" },
|
||||
{ key: "completed", label: "已完成" },
|
||||
];
|
||||
{ key: 'all', label: '全部' },
|
||||
{ key: 'pending_payment', label: '待支付' },
|
||||
{ key: 'pending_handoff', label: '待交接' },
|
||||
{ key: 'renting', label: '使用中' },
|
||||
{ key: 'pending_checkout_confirm', label: '待结账' },
|
||||
{ key: 'completed', label: '已完成' },
|
||||
]
|
||||
|
||||
const displayOrders = computed(() => {
|
||||
if (activeTab.value === "all") return orders.value;
|
||||
return orders.value.filter((o) => o.status === activeTab.value);
|
||||
});
|
||||
if (activeTab.value === 'all') return orders.value
|
||||
return orders.value.filter(o => o.status === activeTab.value)
|
||||
})
|
||||
|
||||
function statusLabel(status: string) {
|
||||
const map: Record<string, string> = {
|
||||
pending_payment: "待支付",
|
||||
pending_handoff: "待交接",
|
||||
renting: "使用中",
|
||||
overdue: "已逾期",
|
||||
pending_return_confirm: "待结账",
|
||||
pending_checkout_confirm: "待号主确认",
|
||||
pending_checkout_accept: "待租客确认",
|
||||
checkout_disputing: "结账争议中",
|
||||
completed: "已完成",
|
||||
cancelled: "已取消",
|
||||
disputing: "申诉中",
|
||||
abnormal: "异常",
|
||||
closed: "已关闭",
|
||||
};
|
||||
return map[status] || status;
|
||||
pending_payment: '待支付',
|
||||
pending_handoff: '待交接',
|
||||
renting: '使用中',
|
||||
overdue: '已逾期',
|
||||
pending_return_confirm: '待结账',
|
||||
pending_checkout_confirm: '待号主确认',
|
||||
pending_checkout_accept: '待租客确认',
|
||||
checkout_disputing: '结账争议中',
|
||||
completed: '已完成',
|
||||
cancelled: '已取消',
|
||||
disputing: '申诉中',
|
||||
abnormal: '异常',
|
||||
closed: '已关闭',
|
||||
}
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
function goDetail(id: number) {
|
||||
router.push(`/m/orders/${id}`);
|
||||
router.push(`/m/orders/${id}`)
|
||||
}
|
||||
|
||||
async function handlePay(order: Order) {
|
||||
payingOrderId.value = order.id;
|
||||
payingOrderId.value = order.id
|
||||
try {
|
||||
const payment = await startOrderPayment(order.id);
|
||||
const payment = await startOrderPayment(order.id)
|
||||
if (payment.paid) {
|
||||
showToast({ message: "支付成功，等待号主交接", icon: "passed" });
|
||||
await loadOrders();
|
||||
showToast({ message: '支付成功，等待号主交接', icon: 'passed' })
|
||||
await loadOrders()
|
||||
} else {
|
||||
openPaymentCashier(payment);
|
||||
openPaymentCashier(payment)
|
||||
}
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, "支付失败"), icon: "cross" });
|
||||
showToast({ message: readError(error, '支付失败'), icon: 'cross' })
|
||||
} finally {
|
||||
payingOrderId.value = null;
|
||||
payingOrderId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function openPaymentCashier(payment: PaymentOrder) {
|
||||
const payURL = payment.jspay_url || payment.td_code || payment.jspay_info || "";
|
||||
const payURL = payment.jspay_url || payment.td_code || payment.jspay_info || ''
|
||||
if (payURL && /^https?:\/\//i.test(payURL)) {
|
||||
window.location.href = payURL;
|
||||
return;
|
||||
window.location.href = payURL
|
||||
return
|
||||
}
|
||||
showDialog({
|
||||
title: "订单支付",
|
||||
message: payURL || "支付单已创建，请在订单详情页刷新支付状态。",
|
||||
confirmButtonText: "查看详情",
|
||||
title: '订单支付',
|
||||
message: payURL || '支付单已创建，请在订单详情页刷新支付状态。',
|
||||
confirmButtonText: '查看详情',
|
||||
}).then(() => {
|
||||
router.push(`/m/orders/${payment.order_id}`);
|
||||
});
|
||||
router.push(`/m/orders/${payment.order_id}`)
|
||||
})
|
||||
}
|
||||
|
||||
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;
|
||||
if (typeof error === 'object' && error && 'response' in error) {
|
||||
const response = (error as { response?: { data?: { message?: string } } }).response
|
||||
return response?.data?.message || fallback
|
||||
}
|
||||
return fallback;
|
||||
return fallback
|
||||
}
|
||||
|
||||
function money(value: unknown) {
|
||||
return Math.round(Number(value || 0));
|
||||
return Math.round(Number(value || 0))
|
||||
}
|
||||
|
||||
function isOwner(order: Order) {
|
||||
return order.owner_id === session.userId;
|
||||
return order.owner_id === session.userId
|
||||
}
|
||||
|
||||
function amountLabel(order: Order) {
|
||||
return isOwner(order) ? "预计租金" : "支付租金";
|
||||
return isOwner(order) ? '预计租金' : '支付租金'
|
||||
}
|
||||
|
||||
function orderRentAmount(order: Order) {
|
||||
if (isOwner(order)) return Number(order.owner_rent_amount ?? order.display_amount ?? 0);
|
||||
return Number(order.rent_amount ?? order.display_amount ?? 0);
|
||||
if (isOwner(order)) return Number(order.owner_rent_amount ?? order.display_amount ?? 0)
|
||||
return Number(order.rent_amount ?? order.display_amount ?? 0)
|
||||
}
|
||||
|
||||
function ownerActualIncome(order: Order) {
|
||||
if (!isOwner(order)) return null;
|
||||
const value = order.checkout?.owner_income_amount;
|
||||
return typeof value === "number" ? value : null;
|
||||
if (!isOwner(order)) return null
|
||||
const value = order.checkout?.owner_income_amount
|
||||
return typeof value === 'number' ? value : null
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -161,12 +165,7 @@ function ownerActualIncome(order: Order) {
|
||||
swipeable
|
||||
animated
|
||||
>
|
||||
<van-tab
|
||||
v-for="tab in statusTabs"
|
||||
:key="tab.key"
|
||||
:title="tab.label"
|
||||
:name="tab.key"
|
||||
/>
|
||||
<van-tab v-for="tab in statusTabs" :key="tab.key" :title="tab.label" :name="tab.key" />
|
||||
</van-tabs>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
@@ -203,12 +202,14 @@ function ownerActualIncome(order: Order) {
|
||||
<span class="info-tag">{{ order.server_region }}</span>
|
||||
<span class="info-tag">{{ order.login_platform }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="price-row">
|
||||
<div class="price-item">
|
||||
<span class="price-label">{{ amountLabel(order) }}</span>
|
||||
<span class="price-val">¥{{ money(orderRentAmount(order)) }}</span>
|
||||
<span v-if="ownerActualIncome(order) !== null" class="price-sub">实际到手 ¥{{ money(ownerActualIncome(order)) }}</span>
|
||||
<span v-if="ownerActualIncome(order) !== null" class="price-sub"
|
||||
>实际到手 ¥{{ money(ownerActualIncome(order)) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="price-item">
|
||||
<span class="price-label">押金金额</span>
|
||||
@@ -235,9 +236,7 @@ function ownerActualIncome(order: Order) {
|
||||
>
|
||||
去支付
|
||||
</van-button>
|
||||
<span v-else class="detail-link">
|
||||
查看详情 <van-icon name="arrow" :size="10" />
|
||||
</span>
|
||||
<span v-else class="detail-link"> 查看详情 <van-icon name="arrow" :size="10" /> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -334,8 +333,12 @@ function ownerActualIncome(order: Order) {
|
||||
border-radius: 16px;
|
||||
margin-bottom: 14px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.02);
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||
box-shadow:
|
||||
0 4px 18px rgba(0, 0, 0, 0.02),
|
||||
0 1px 4px rgba(0, 0, 0, 0.02);
|
||||
transition:
|
||||
transform 0.1s ease,
|
||||
box-shadow 0.1s ease;
|
||||
border: 1px solid rgba(243, 244, 246, 0.9);
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -368,19 +371,58 @@ function ownerActualIncome(order: Order) {
|
||||
}
|
||||
|
||||
/* 状态徽章颜色 - 现代轻量化配色 */
|
||||
.badge-pending_payment { color: #ff6a00; background: rgba(255, 106, 0, 0.08); }
|
||||
.badge-pending_handoff { color: #d97706; background: rgba(217, 119, 6, 0.08); }
|
||||
.badge-renting { color: #1477ff; background: rgba(20, 119, 255, 0.08); }
|
||||
.badge-overdue { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
|
||||
.badge-pending_return_confirm { color: #8b5cf6; background: rgba(139, 92, 246, 0.08); }
|
||||
.badge-pending_checkout_confirm { color: #8b5cf6; background: rgba(139, 92, 246, 0.08); }
|
||||
.badge-pending_checkout_accept { color: #a855f7; background: rgba(168, 85, 247, 0.08); }
|
||||
.badge-checkout_disputing { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
|
||||
.badge-completed { color: #10b981; background: rgba(16, 185, 129, 0.08); }
|
||||
.badge-cancelled { color: #9ca3af; background: rgba(156, 163, 175, 0.08); }
|
||||
.badge-disputing { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
|
||||
.badge-abnormal { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
|
||||
.badge-closed { color: #6b7280; background: rgba(107, 114, 128, 0.08); }
|
||||
.badge-pending_payment {
|
||||
color: #ff6a00;
|
||||
background: rgba(255, 106, 0, 0.08);
|
||||
}
|
||||
.badge-pending_handoff {
|
||||
color: #d97706;
|
||||
background: rgba(217, 119, 6, 0.08);
|
||||
}
|
||||
.badge-renting {
|
||||
color: #1477ff;
|
||||
background: rgba(20, 119, 255, 0.08);
|
||||
}
|
||||
.badge-overdue {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
}
|
||||
.badge-pending_return_confirm {
|
||||
color: #8b5cf6;
|
||||
background: rgba(139, 92, 246, 0.08);
|
||||
}
|
||||
.badge-pending_checkout_confirm {
|
||||
color: #8b5cf6;
|
||||
background: rgba(139, 92, 246, 0.08);
|
||||
}
|
||||
.badge-pending_checkout_accept {
|
||||
color: #a855f7;
|
||||
background: rgba(168, 85, 247, 0.08);
|
||||
}
|
||||
.badge-checkout_disputing {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
}
|
||||
.badge-completed {
|
||||
color: #10b981;
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
}
|
||||
.badge-cancelled {
|
||||
color: #9ca3af;
|
||||
background: rgba(156, 163, 175, 0.08);
|
||||
}
|
||||
.badge-disputing {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
}
|
||||
.badge-abnormal {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
}
|
||||
.badge-closed {
|
||||
color: #6b7280;
|
||||
background: rgba(107, 114, 128, 0.08);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 12px 0 0;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@ const statusTabs = [
|
||||
{ key: 'pending_checkout_confirm', label: '待结账' },
|
||||
{ key: 'completed', label: '已完成' },
|
||||
]
|
||||
const tabKeys = new Set(statusTabs.map((item) => item.key))
|
||||
const tabKeys = new Set(statusTabs.map(item => item.key))
|
||||
const activeTab = ref(readTab(route.query.tab))
|
||||
const fallbackPendingPaymentMinutes = 15
|
||||
|
||||
@@ -32,14 +32,15 @@ const displayOrders = computed(() => {
|
||||
let filtered = orders.value
|
||||
|
||||
if (activeTab.value !== 'all') {
|
||||
filtered = filtered.filter((order) => order.status === activeTab.value)
|
||||
filtered = filtered.filter(order => order.status === activeTab.value)
|
||||
}
|
||||
|
||||
if (searchKeyword.value.trim()) {
|
||||
const keyword = searchKeyword.value.trim().toLowerCase()
|
||||
filtered = filtered.filter((order) =>
|
||||
order.order_no.toLowerCase().includes(keyword) ||
|
||||
order.title.toLowerCase().includes(keyword)
|
||||
filtered = filtered.filter(
|
||||
order =>
|
||||
order.order_no.toLowerCase().includes(keyword) ||
|
||||
order.title.toLowerCase().includes(keyword)
|
||||
)
|
||||
}
|
||||
|
||||
@@ -48,9 +49,9 @@ const displayOrders = computed(() => {
|
||||
|
||||
const tabCounts = computed(() => {
|
||||
const counts: Record<string, number> = { all: orders.value.length }
|
||||
statusTabs.forEach((tab) => {
|
||||
statusTabs.forEach(tab => {
|
||||
if (tab.key !== 'all') {
|
||||
counts[tab.key] = orders.value.filter((order) => order.status === tab.key).length
|
||||
counts[tab.key] = orders.value.filter(order => order.status === tab.key).length
|
||||
}
|
||||
})
|
||||
return counts
|
||||
@@ -60,9 +61,9 @@ onMounted(loadOrders)
|
||||
|
||||
watch(
|
||||
() => route.query.tab,
|
||||
(tab) => {
|
||||
tab => {
|
||||
activeTab.value = readTab(tab)
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function readTab(tab: unknown) {
|
||||
@@ -193,7 +194,9 @@ function getCountdownMinutes(order: Order) {
|
||||
<template #label>
|
||||
<span class="tab-label">
|
||||
{{ tab.label }}
|
||||
<span v-if="(tabCounts?.[tab.key] ?? 0) > 0" class="tab-count">{{ tabCounts?.[tab.key] }}</span>
|
||||
<span v-if="(tabCounts?.[tab.key] ?? 0) > 0" class="tab-count">{{
|
||||
tabCounts?.[tab.key]
|
||||
}}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
@@ -208,7 +211,9 @@ function getCountdownMinutes(order: Order) {
|
||||
<el-table-column label="订单号" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="order-no-cell">
|
||||
<span class="order-no-text" :title="row.order_no">{{ shortenOrderNo(row.order_no) }}</span>
|
||||
<span class="order-no-text" :title="row.order_no">{{
|
||||
shortenOrderNo(row.order_no)
|
||||
}}</span>
|
||||
<el-icon class="copy-icon" @click="copyOrderNo(row.order_no)">
|
||||
<CopyDocument />
|
||||
</el-icon>
|
||||
@@ -221,7 +226,9 @@ function getCountdownMinutes(order: Order) {
|
||||
<div class="amount-cell">
|
||||
<span class="amount-value">¥{{ money(orderRentAmount(row)) }}</span>
|
||||
<span class="amount-label">{{ amountLabel(row) }}</span>
|
||||
<span v-if="ownerActualIncome(row) !== null" class="amount-sub">实际到手 ¥{{ money(ownerActualIncome(row)) }}</span>
|
||||
<span v-if="ownerActualIncome(row) !== null" class="amount-sub"
|
||||
>实际到手 ¥{{ money(ownerActualIncome(row)) }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -239,7 +246,10 @@ function getCountdownMinutes(order: Order) {
|
||||
<template #default="{ row }">
|
||||
<div class="status-cell">
|
||||
<span>{{ orderStatusLabel(row.status) }}</span>
|
||||
<span v-if="row.status === 'pending_payment' && getCountdownMinutes(row) > 0" class="countdown-badge">
|
||||
<span
|
||||
v-if="row.status === 'pending_payment' && getCountdownMinutes(row) > 0"
|
||||
class="countdown-badge"
|
||||
>
|
||||
{{ getCountdownMinutes(row) }}分钟后超时
|
||||
</span>
|
||||
</div>
|
||||
@@ -270,10 +280,17 @@ function getCountdownMinutes(order: Order) {
|
||||
</el-table>
|
||||
|
||||
<div class="mobile-cards">
|
||||
<div v-for="order in displayOrders" :key="order.id" class="order-card" @click="router.push(`/orders/${order.id}`)">
|
||||
<div
|
||||
v-for="order in displayOrders"
|
||||
:key="order.id"
|
||||
class="order-card"
|
||||
@click="router.push(`/orders/${order.id}`)"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="order-no-row">
|
||||
<span class="order-no-text" :title="order.order_no">{{ shortenOrderNo(order.order_no) }}</span>
|
||||
<span class="order-no-text" :title="order.order_no">{{
|
||||
shortenOrderNo(order.order_no)
|
||||
}}</span>
|
||||
<el-icon class="copy-icon" @click.stop="copyOrderNo(order.order_no)">
|
||||
<CopyDocument />
|
||||
</el-icon>
|
||||
@@ -304,7 +321,10 @@ function getCountdownMinutes(order: Order) {
|
||||
<div class="card-footer">
|
||||
<div class="status-info">
|
||||
<span class="status-label">{{ orderStatusLabel(order.status) }}</span>
|
||||
<span v-if="order.status === 'pending_payment' && getCountdownMinutes(order) > 0" class="countdown-badge">
|
||||
<span
|
||||
v-if="order.status === 'pending_payment' && getCountdownMinutes(order) > 0"
|
||||
class="countdown-badge"
|
||||
>
|
||||
{{ getCountdownMinutes(order) }}分钟后超时
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user