拆分订单详情结账逻辑
This commit is contained in:
yml
@@ -5,7 +5,6 @@ import (
|
|||||||
|
|
||||||
"hfb_sys/backend/internal/model"
|
"hfb_sys/backend/internal/model"
|
||||||
"hfb_sys/backend/internal/modules/notification"
|
"hfb_sys/backend/internal/modules/notification"
|
||||||
"hfb_sys/backend/internal/modules/wallet"
|
|
||||||
|
|
||||||
"gorm.io/gorm"
|
"gorm.io/gorm"
|
||||||
"gorm.io/gorm/clause"
|
"gorm.io/gorm/clause"
|
||||||
@@ -228,108 +227,3 @@ func (r *Repository) AcceptCheckout(userID uint64, orderID uint64) error {
|
|||||||
r.startRefundBestEffort(refund)
|
r.startRefundBestEffort(refund)
|
||||||
return nil
|
return nil
|
||||||
}
|
}
|
||||||
|
|
||||||
func (r *Repository) finalizeCheckout(tx *gorm.DB, order *model.RentalOrder, checkout *model.OrderCheckout, renterContent string) (*refundAction, error) {
|
|
||||||
listing, account, err := r.lockListingAccountForOrder(tx, order)
|
|
||||||
if err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
now := time.Now()
|
|
||||||
order.Status = orderStatusCompleted
|
|
||||||
order.HandoffStatus = handoffStatusReturned
|
|
||||||
order.SettlementStatus = settlementStatusSettled
|
|
||||||
order.SettledAt = &now
|
|
||||||
order.OwnerSettledAt = &now
|
|
||||||
archiveAssets(listing, account)
|
|
||||||
orderID := order.ID
|
|
||||||
settlement := buildCheckoutSettlement(*order, checkout)
|
|
||||||
|
|
||||||
// 卖家收入进入站内钱包；租客资金不进入站内钱包。
|
|
||||||
var ownerEntries []wallet.Entry
|
|
||||||
if settlement.OwnerRentIncomeCent > 0 {
|
|
||||||
ownerEntries = append(ownerEntries, wallet.Entry{
|
|
||||||
UserID: order.OwnerID,
|
|
||||||
OrderID: &orderID,
|
|
||||||
Direction: "in",
|
|
||||||
AmountCent: settlement.OwnerRentIncomeCent,
|
|
||||||
BalanceType: "available",
|
|
||||||
BizType: walletBizOwnerIncome,
|
|
||||||
BizNo: order.OrderNo,
|
|
||||||
Remark: "订单结账租金收入",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if settlement.DepositCompensationCent > 0 {
|
|
||||||
ownerEntries = append(ownerEntries, wallet.Entry{
|
|
||||||
UserID: order.OwnerID,
|
|
||||||
OrderID: &orderID,
|
|
||||||
Direction: "in",
|
|
||||||
AmountCent: settlement.DepositCompensationCent,
|
|
||||||
BalanceType: "available",
|
|
||||||
BizType: walletBizDepositCompensation,
|
|
||||||
BizNo: order.OrderNo,
|
|
||||||
Remark: "订单结账押金赔付",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if len(ownerEntries) > 0 {
|
|
||||||
if err := wallet.AppendEntries(tx, ownerEntries...); err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var refund *refundAction
|
|
||||||
renterRefundTotalCent := settlement.RentRefundCent + settlement.DepositRefundCent
|
|
||||||
if renterRefundTotalCent > 0 {
|
|
||||||
action, err := r.prepareRefund(order, renterRefundTotalCent, refundBizCheckout, "结账退款原路退还")
|
|
||||||
if err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
refund = action
|
|
||||||
}
|
|
||||||
|
|
||||||
checkout.RentAmountCent = settlement.ActualRentAmountCent
|
|
||||||
checkout.OwnerRentAmountCent = settlement.OwnerRentIncomeCent
|
|
||||||
checkout.PlatformFeeCent = settlement.PlatformFeeCent
|
|
||||||
checkout.RenterRefundAmountCent = settlement.RenterRefundCent
|
|
||||||
checkout.OwnerIncomeAmountCent = settlement.OwnerIncomeCent
|
|
||||||
if err := notification.Append(tx,
|
|
||||||
notification.Entry{
|
|
||||||
UserID: order.RenterID,
|
|
||||||
Type: "settlement",
|
|
||||||
Title: "订单已完成",
|
|
||||||
Content: renterContent,
|
|
||||||
BizType: "order",
|
|
||||||
BizID: &orderID,
|
|
||||||
},
|
|
||||||
notification.Entry{
|
|
||||||
UserID: order.OwnerID,
|
|
||||||
Type: "settlement",
|
|
||||||
Title: "订单已完成",
|
|
||||||
Content: "订单已完成，结账金额已入账。",
|
|
||||||
BizType: "order",
|
|
||||||
BizID: &orderID,
|
|
||||||
},
|
|
||||||
); err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
if err := tx.Save(order).Error; err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
if err := tx.Save(checkout).Error; err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
if err := tx.Save(listing).Error; err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
if err := tx.Save(account).Error; err != nil {
|
|
||||||
return nil, err
|
|
||||||
}
|
|
||||||
return refund, nil
|
|
||||||
}
|
|
||||||
|
|
||||||
func hasOpenCheckout(tx *gorm.DB, orderID uint64) (bool, error) {
|
|
||||||
var count int64
|
|
||||||
err := tx.Model(&model.OrderCheckout{}).
|
|
||||||
Where("order_id = ? AND status IN ?", orderID, []string{checkoutStatusSubmitted, checkoutStatusCountered, checkoutStatusAccepted, checkoutStatusDisputed}).
|
|
||||||
Count(&count).Error
|
|
||||||
return count > 0, err
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -0,0 +1,134 @@
|
|||||||
|
package order
|
||||||
|
|
||||||
|
import (
|
||||||
|
"time"
|
||||||
|
|
||||||
|
"hfb_sys/backend/internal/model"
|
||||||
|
"hfb_sys/backend/internal/modules/notification"
|
||||||
|
"hfb_sys/backend/internal/modules/wallet"
|
||||||
|
|
||||||
|
"gorm.io/gorm"
|
||||||
|
)
|
||||||
|
|
||||||
|
func (r *Repository) finalizeCheckout(tx *gorm.DB, order *model.RentalOrder, checkout *model.OrderCheckout, renterContent string) (*refundAction, error) {
|
||||||
|
listing, account, err := r.lockListingAccountForOrder(tx, order)
|
||||||
|
if err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
now := time.Now()
|
||||||
|
order.Status = orderStatusCompleted
|
||||||
|
order.HandoffStatus = handoffStatusReturned
|
||||||
|
order.SettlementStatus = settlementStatusSettled
|
||||||
|
order.SettledAt = &now
|
||||||
|
order.OwnerSettledAt = &now
|
||||||
|
archiveAssets(listing, account)
|
||||||
|
|
||||||
|
settlement := buildCheckoutSettlement(*order, checkout)
|
||||||
|
if err := appendCheckoutOwnerIncome(tx, order, settlement); err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
refund, err := r.prepareCheckoutRefund(order, settlement)
|
||||||
|
if err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
applyCheckoutSettlement(checkout, settlement)
|
||||||
|
if err := appendCheckoutCompletedNotifications(tx, order, renterContent); err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
if err := saveFinalizedCheckout(tx, order, checkout, listing, account); err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
return refund, nil
|
||||||
|
}
|
||||||
|
|
||||||
|
func appendCheckoutOwnerIncome(tx *gorm.DB, order *model.RentalOrder, settlement checkoutSettlement) error {
|
||||||
|
orderID := order.ID
|
||||||
|
var ownerEntries []wallet.Entry
|
||||||
|
if settlement.OwnerRentIncomeCent > 0 {
|
||||||
|
ownerEntries = append(ownerEntries, wallet.Entry{
|
||||||
|
UserID: order.OwnerID,
|
||||||
|
OrderID: &orderID,
|
||||||
|
Direction: "in",
|
||||||
|
AmountCent: settlement.OwnerRentIncomeCent,
|
||||||
|
BalanceType: "available",
|
||||||
|
BizType: walletBizOwnerIncome,
|
||||||
|
BizNo: order.OrderNo,
|
||||||
|
Remark: "订单结账租金收入",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if settlement.DepositCompensationCent > 0 {
|
||||||
|
ownerEntries = append(ownerEntries, wallet.Entry{
|
||||||
|
UserID: order.OwnerID,
|
||||||
|
OrderID: &orderID,
|
||||||
|
Direction: "in",
|
||||||
|
AmountCent: settlement.DepositCompensationCent,
|
||||||
|
BalanceType: "available",
|
||||||
|
BizType: walletBizDepositCompensation,
|
||||||
|
BizNo: order.OrderNo,
|
||||||
|
Remark: "订单结账押金赔付",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if len(ownerEntries) == 0 {
|
||||||
|
return nil
|
||||||
|
}
|
||||||
|
return wallet.AppendEntries(tx, ownerEntries...)
|
||||||
|
}
|
||||||
|
|
||||||
|
func (r *Repository) prepareCheckoutRefund(order *model.RentalOrder, settlement checkoutSettlement) (*refundAction, error) {
|
||||||
|
renterRefundTotalCent := settlement.RentRefundCent + settlement.DepositRefundCent
|
||||||
|
if renterRefundTotalCent <= 0 {
|
||||||
|
return nil, nil
|
||||||
|
}
|
||||||
|
return r.prepareRefund(order, renterRefundTotalCent, refundBizCheckout, "结账退款原路退还")
|
||||||
|
}
|
||||||
|
|
||||||
|
func applyCheckoutSettlement(checkout *model.OrderCheckout, settlement checkoutSettlement) {
|
||||||
|
checkout.RentAmountCent = settlement.ActualRentAmountCent
|
||||||
|
checkout.OwnerRentAmountCent = settlement.OwnerRentIncomeCent
|
||||||
|
checkout.PlatformFeeCent = settlement.PlatformFeeCent
|
||||||
|
checkout.RenterRefundAmountCent = settlement.RenterRefundCent
|
||||||
|
checkout.OwnerIncomeAmountCent = settlement.OwnerIncomeCent
|
||||||
|
}
|
||||||
|
|
||||||
|
func appendCheckoutCompletedNotifications(tx *gorm.DB, order *model.RentalOrder, renterContent string) error {
|
||||||
|
orderID := order.ID
|
||||||
|
return notification.Append(tx,
|
||||||
|
notification.Entry{
|
||||||
|
UserID: order.RenterID,
|
||||||
|
Type: "settlement",
|
||||||
|
Title: "订单已完成",
|
||||||
|
Content: renterContent,
|
||||||
|
BizType: "order",
|
||||||
|
BizID: &orderID,
|
||||||
|
},
|
||||||
|
notification.Entry{
|
||||||
|
UserID: order.OwnerID,
|
||||||
|
Type: "settlement",
|
||||||
|
Title: "订单已完成",
|
||||||
|
Content: "订单已完成，结账金额已入账。",
|
||||||
|
BizType: "order",
|
||||||
|
BizID: &orderID,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
func saveFinalizedCheckout(tx *gorm.DB, order *model.RentalOrder, checkout *model.OrderCheckout, listing *model.RentalListing, account *model.GameAccount) error {
|
||||||
|
if err := tx.Save(order).Error; err != nil {
|
||||||
|
return err
|
||||||
|
}
|
||||||
|
if err := tx.Save(checkout).Error; err != nil {
|
||||||
|
return err
|
||||||
|
}
|
||||||
|
if err := tx.Save(listing).Error; err != nil {
|
||||||
|
return err
|
||||||
|
}
|
||||||
|
return tx.Save(account).Error
|
||||||
|
}
|
||||||
|
|
||||||
|
func hasOpenCheckout(tx *gorm.DB, orderID uint64) (bool, error) {
|
||||||
|
var count int64
|
||||||
|
err := tx.Model(&model.OrderCheckout{}).
|
||||||
|
Where("order_id = ? AND status IN ?", orderID, []string{checkoutStatusSubmitted, checkoutStatusCountered, checkoutStatusAccepted, checkoutStatusDisputed}).
|
||||||
|
Count(&count).Error
|
||||||
|
return count > 0, err
|
||||||
|
}
|
||||||
@@ -0,0 +1,240 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
|
import type { Order } from '@/features/orders/api/orders'
|
||||||
|
import { amountYuan, money } from '@/features/orders/composables/useOrderSnapshot'
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
variant?: 'desktop' | 'mobile'
|
||||||
|
order: Order
|
||||||
|
isOwner: boolean
|
||||||
|
isRenter: boolean
|
||||||
|
}>(),
|
||||||
|
{ variant: 'desktop' }
|
||||||
|
)
|
||||||
|
|
||||||
|
const checkout = computed(() => props.order.checkout)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section v-if="checkout && props.variant === 'mobile'" class="card-section">
|
||||||
|
<h3 class="section-title">结账结算账单</h3>
|
||||||
|
<van-cell-group inset :border="false">
|
||||||
|
<van-cell
|
||||||
|
title="实际结算租金"
|
||||||
|
:value="`¥${money(amountYuan(checkout.display_amount_cent))}`"
|
||||||
|
/>
|
||||||
|
<van-cell
|
||||||
|
title="押金总额"
|
||||||
|
:label="
|
||||||
|
amountYuan(props.order.deposit_waived_amount_cent) > 0
|
||||||
|
? `已免押 ¥${money(amountYuan(props.order.deposit_waived_amount_cent))}`
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
:value="`¥${money(amountYuan(checkout.deposit_amount_cent))}`"
|
||||||
|
/>
|
||||||
|
<van-cell
|
||||||
|
title="额外消耗品已用"
|
||||||
|
:value="`¥${money(amountYuan(checkout.consumable_amount_cent))}`"
|
||||||
|
/>
|
||||||
|
<van-cell
|
||||||
|
title="押金赔付扣除"
|
||||||
|
:value="`¥${money(amountYuan(checkout.deposit_deduct_amount_cent))}`"
|
||||||
|
value-class="red-text"
|
||||||
|
/>
|
||||||
|
<van-cell
|
||||||
|
v-if="props.isRenter"
|
||||||
|
title="退还租客"
|
||||||
|
:value="`¥${money(amountYuan(checkout.renter_refund_amount_cent))}`"
|
||||||
|
value-class="green-text"
|
||||||
|
/>
|
||||||
|
<van-cell
|
||||||
|
v-if="props.isOwner"
|
||||||
|
title="号主最终收入"
|
||||||
|
:value="`¥${money(amountYuan(checkout.owner_income_amount_cent))}`"
|
||||||
|
value-class="green-text"
|
||||||
|
/>
|
||||||
|
<van-cell v-if="checkout.content" title="结账备注" :label="checkout.content" />
|
||||||
|
<van-cell
|
||||||
|
v-if="checkout.owner_adjustment_reason"
|
||||||
|
title="号主修正原因"
|
||||||
|
:label="checkout.owner_adjustment_reason"
|
||||||
|
/>
|
||||||
|
</van-cell-group>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div v-else-if="checkout" class="info-section">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>结账明细</h2>
|
||||||
|
</div>
|
||||||
|
<div class="checkout-summary-card">
|
||||||
|
<div class="summary-row">
|
||||||
|
<span>实际结算租金</span>
|
||||||
|
<strong>¥{{ money(amountYuan(checkout.display_amount_cent)) }}</strong>
|
||||||
|
</div>
|
||||||
|
<div class="summary-row">
|
||||||
|
<span>预收押金</span>
|
||||||
|
<strong>
|
||||||
|
¥{{ money(amountYuan(checkout.deposit_amount_cent)) }}
|
||||||
|
<em v-if="amountYuan(props.order.deposit_waived_amount_cent) > 0">
|
||||||
|
已免押 ¥{{ money(amountYuan(props.order.deposit_waived_amount_cent)) }}
|
||||||
|
</em>
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
|
<div class="summary-row">
|
||||||
|
<span>额外消耗品已用</span>
|
||||||
|
<strong class="warning">¥{{ money(amountYuan(checkout.consumable_amount_cent)) }}</strong>
|
||||||
|
</div>
|
||||||
|
<div class="summary-row">
|
||||||
|
<span>押金赔付扣除</span>
|
||||||
|
<strong class="warning">
|
||||||
|
¥{{ money(amountYuan(checkout.deposit_deduct_amount_cent)) }}
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
|
<div v-if="props.isRenter" class="summary-row highlight">
|
||||||
|
<span>退还租客（未使用租金 + 剩余押金）</span>
|
||||||
|
<strong class="amount">¥{{ money(amountYuan(checkout.renter_refund_amount_cent)) }}</strong>
|
||||||
|
</div>
|
||||||
|
<div v-if="props.isOwner" class="summary-row highlight">
|
||||||
|
<span>号主最终收入（租金 + 押金赔付）</span>
|
||||||
|
<strong class="amount">¥{{ money(amountYuan(checkout.owner_income_amount_cent)) }}</strong>
|
||||||
|
</div>
|
||||||
|
<div v-if="checkout.content" class="summary-note">
|
||||||
|
<label>说明：</label>
|
||||||
|
<p>{{ checkout.content }}</p>
|
||||||
|
</div>
|
||||||
|
<div v-if="checkout.owner_adjustment_reason" class="summary-note warning">
|
||||||
|
<label>修正原因：</label>
|
||||||
|
<p>{{ checkout.owner_adjustment_reason }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.info-section {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1f2937;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-summary-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 12px 0;
|
||||||
|
border-bottom: 1px solid #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row.highlight {
|
||||||
|
padding: 16px;
|
||||||
|
background: #f0fdf4;
|
||||||
|
border: 1px solid #bbf7d0;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row span {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row strong {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row strong em {
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row strong.amount {
|
||||||
|
color: #16a34a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-row strong.warning {
|
||||||
|
color: #dc2626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-note {
|
||||||
|
padding: 16px;
|
||||||
|
background: #f8fafc;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-note.warning {
|
||||||
|
background: #fff7ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-note label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-note p {
|
||||||
|
margin: 0;
|
||||||
|
color: #1f2937;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-section {
|
||||||
|
margin: 12px 12px 0;
|
||||||
|
padding: 14px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #182232;
|
||||||
|
margin: 0 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.red-text) {
|
||||||
|
color: #ef4444;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.green-text) {
|
||||||
|
color: #16a34a;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,170 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { HandoffRecord } from '@/features/orders/api/orders'
|
||||||
|
import { formatHandoffRecordType } from '@/features/orders/composables/useOrderSnapshot'
|
||||||
|
import { formatDateTime } from '@/shared/utils/time'
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
variant?: 'desktop' | 'mobile'
|
||||||
|
records: HandoffRecord[]
|
||||||
|
listingCode: string
|
||||||
|
}>(),
|
||||||
|
{ variant: 'desktop' }
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section v-if="props.variant === 'mobile'" class="card-section">
|
||||||
|
<h3 class="section-title">交接日志 · 商品编号 {{ props.listingCode }}</h3>
|
||||||
|
<van-empty v-if="props.records.length === 0" image="search" description="暂无交接日志记录" />
|
||||||
|
<div v-else class="log-timeline">
|
||||||
|
<div v-for="record in props.records" :key="record.id" class="log-item">
|
||||||
|
<div class="log-dot"></div>
|
||||||
|
<div class="log-content-wrap">
|
||||||
|
<strong class="log-type">{{ formatHandoffRecordType(record.type) }}</strong>
|
||||||
|
<p class="log-desc">{{ record.content }}</p>
|
||||||
|
<span class="log-time">{{ formatDateTime(record.created_at) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div v-else class="timeline-section">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>交接记录</h2>
|
||||||
|
<span>商品编号 {{ props.listingCode }}</span>
|
||||||
|
</div>
|
||||||
|
<el-empty v-if="props.records.length === 0" description="暂无交接记录" />
|
||||||
|
<el-timeline v-else>
|
||||||
|
<el-timeline-item
|
||||||
|
v-for="record in props.records"
|
||||||
|
: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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.timeline-section {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1f2937;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-section :deep(.el-timeline) {
|
||||||
|
padding: 24px;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-content {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-body {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #64748b;
|
||||||
|
line-height: 1.6;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-section {
|
||||||
|
margin: 12px 12px 0;
|
||||||
|
padding: 14px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #182232;
|
||||||
|
margin: 0 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-timeline {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-timeline::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
top: 4px;
|
||||||
|
bottom: 4px;
|
||||||
|
width: 1px;
|
||||||
|
background: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-item {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-item:last-child {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-dot {
|
||||||
|
position: absolute;
|
||||||
|
left: -18px;
|
||||||
|
top: 4px;
|
||||||
|
z-index: 1;
|
||||||
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
border: 2px solid #ffffff;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ff6a00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-content-wrap {
|
||||||
|
display: grid;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-type {
|
||||||
|
color: #182232;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-desc {
|
||||||
|
margin: 0;
|
||||||
|
color: #5f6f86;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.55;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-time {
|
||||||
|
color: #a0aec0;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,547 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { CheckoutResource } from '@/features/orders/composables/useOrderSnapshot'
|
||||||
|
import { money, quantity } from '@/features/orders/composables/useOrderSnapshot'
|
||||||
|
|
||||||
|
type CheckoutFormModel = {
|
||||||
|
content: string
|
||||||
|
coin_consumed_m: number
|
||||||
|
otherAmountYuan: number
|
||||||
|
evidenceText: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
variant?: 'desktop' | 'mobile'
|
||||||
|
checkoutForm: CheckoutFormModel
|
||||||
|
resources: CheckoutResource[]
|
||||||
|
resourceUsage: Record<string, number>
|
||||||
|
resourceChargeAmount: number
|
||||||
|
snapshotHafCoinM: number
|
||||||
|
remainingHafCoinM: number
|
||||||
|
returning: boolean
|
||||||
|
resourceLineAmount: (item: CheckoutResource) => number
|
||||||
|
}>(),
|
||||||
|
{ variant: 'desktop' }
|
||||||
|
)
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
'update:checkoutForm': [value: CheckoutFormModel]
|
||||||
|
'update:resourceUsage': [value: Record<string, number>]
|
||||||
|
submit: []
|
||||||
|
}>()
|
||||||
|
|
||||||
|
function updateCheckoutForm(patch: Partial<CheckoutFormModel>) {
|
||||||
|
emit('update:checkoutForm', { ...props.checkoutForm, ...patch })
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateResourceUsage(key: string, value: number | string | null) {
|
||||||
|
emit('update:resourceUsage', {
|
||||||
|
...props.resourceUsage,
|
||||||
|
[key]: Number(value) || 0,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event: Event) {
|
||||||
|
updateCheckoutForm({ [field]: Number((event.target as HTMLInputElement).value) || 0 })
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section v-if="props.variant === 'mobile'" class="card-section action-card">
|
||||||
|
<h3 class="section-title">退号发起结账</h3>
|
||||||
|
<p class="action-hint">使用完毕，请输入在此期间消耗的物资与哈夫币进行结账申请。</p>
|
||||||
|
|
||||||
|
<van-field
|
||||||
|
:model-value="props.checkoutForm.content"
|
||||||
|
rows="3"
|
||||||
|
autosize
|
||||||
|
label="结账备注"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="可在此说明物品消耗情况或归还留言"
|
||||||
|
class="action-field"
|
||||||
|
@update:model-value="updateCheckoutForm({ content: String($event) })"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div v-if="props.resources.length" class="resource-usage-panel">
|
||||||
|
<strong class="resource-panel-title">额外物资消耗登记</strong>
|
||||||
|
<div v-for="item in props.resources" :key="item.key" class="resource-row">
|
||||||
|
<div class="resource-meta">
|
||||||
|
<span class="resource-name">{{ item.label }}</span>
|
||||||
|
<span class="resource-price-text">
|
||||||
|
上限 {{ item.quantity }} · {{ item.mode }} · {{ item.price }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="stepper-wrap">
|
||||||
|
<van-stepper
|
||||||
|
:model-value="props.resourceUsage[item.key]"
|
||||||
|
integer
|
||||||
|
min="0"
|
||||||
|
:max="item.quantity"
|
||||||
|
@update:model-value="updateResourceUsage(item.key, $event)"
|
||||||
|
/>
|
||||||
|
<span class="resource-line-amount">¥{{ money(props.resourceLineAmount(item)) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="resource-panel-footer">
|
||||||
|
<span>物资金额合计：</span>
|
||||||
|
<strong>¥{{ money(props.resourceChargeAmount) }}</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<van-cell-group inset :border="false" class="action-field">
|
||||||
|
<van-field label="消耗哈夫币" label-width="100px">
|
||||||
|
<template #input>
|
||||||
|
<div class="coin-input-wrap">
|
||||||
|
<input
|
||||||
|
:value="props.checkoutForm.coin_consumed_m"
|
||||||
|
type="number"
|
||||||
|
placeholder="消耗数量"
|
||||||
|
class="custom-inline-input"
|
||||||
|
@input="updateNumberField('coin_consumed_m', $event)"
|
||||||
|
/>
|
||||||
|
<span class="input-unit">M</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</van-field>
|
||||||
|
<div class="coin-hint">
|
||||||
|
订单快照 {{ quantity(props.snapshotHafCoinM) }}M，预计剩余
|
||||||
|
{{ quantity(props.remainingHafCoinM) }}M
|
||||||
|
</div>
|
||||||
|
<van-field label="其他押金赔付" label-width="100px">
|
||||||
|
<template #input>
|
||||||
|
<div class="coin-input-wrap">
|
||||||
|
<input
|
||||||
|
:value="props.checkoutForm.otherAmountYuan"
|
||||||
|
type="number"
|
||||||
|
placeholder="不含上方额外物资"
|
||||||
|
class="custom-inline-input"
|
||||||
|
@input="updateNumberField('otherAmountYuan', $event)"
|
||||||
|
/>
|
||||||
|
<span class="input-unit">元</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</van-field>
|
||||||
|
<div class="deposit-deduct-hint">仅填写封禁、违规、资产损坏等需要从押金赔付的费用。</div>
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
|
<div class="checkout-fee-preview">
|
||||||
|
<div>
|
||||||
|
<span>额外消耗品已用</span>
|
||||||
|
<strong>¥{{ money(props.resourceChargeAmount) }}</strong>
|
||||||
|
<em>计入实际结算租金</em>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>其他押金赔付</span>
|
||||||
|
<strong>¥{{ money(props.checkoutForm.otherAmountYuan) }}</strong>
|
||||||
|
<em>从押金赔付扣除</em>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<van-field
|
||||||
|
:model-value="props.checkoutForm.evidenceText"
|
||||||
|
rows="2"
|
||||||
|
autosize
|
||||||
|
label="结账证据"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="结账截图链接（每行一个）"
|
||||||
|
class="action-field"
|
||||||
|
@update:model-value="updateCheckoutForm({ evidenceText: String($event) })"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-button
|
||||||
|
type="primary"
|
||||||
|
block
|
||||||
|
round
|
||||||
|
:loading="props.returning"
|
||||||
|
loading-text="正在提交结账..."
|
||||||
|
@click="emit('submit')"
|
||||||
|
>
|
||||||
|
提交结账归还
|
||||||
|
</van-button>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div v-else class="form-section checkout-form-section">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>发起结账</h2>
|
||||||
|
</div>
|
||||||
|
<div class="form-card">
|
||||||
|
<el-input
|
||||||
|
:model-value="props.checkoutForm.content"
|
||||||
|
type="textarea"
|
||||||
|
:rows="4"
|
||||||
|
placeholder="填写结账说明、租后资产状态或注意事项"
|
||||||
|
@update:model-value="updateCheckoutForm({ content: String($event) })"
|
||||||
|
/>
|
||||||
|
<div class="checkout-resource-panel">
|
||||||
|
<div class="checkout-resource-head">
|
||||||
|
<strong>额外消耗品</strong>
|
||||||
|
<span class="amount-highlight">已用金额：¥{{ money(props.resourceChargeAmount) }}</span>
|
||||||
|
</div>
|
||||||
|
<el-empty v-if="props.resources.length === 0" description="订单快照中暂无额外消耗品" />
|
||||||
|
<div v-for="item in props.resources" 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
|
||||||
|
:model-value="props.resourceUsage[item.key]"
|
||||||
|
:min="0"
|
||||||
|
:max="item.quantity"
|
||||||
|
:precision="0"
|
||||||
|
controls-position="right"
|
||||||
|
@update:model-value="updateResourceUsage(item.key, $event)"
|
||||||
|
/>
|
||||||
|
<span class="checkout-resource-amount">¥{{ money(props.resourceLineAmount(item)) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-form class="form-grid" label-position="top">
|
||||||
|
<el-form-item label="消耗哈夫币（M）">
|
||||||
|
<el-input-number
|
||||||
|
:model-value="props.checkoutForm.coin_consumed_m"
|
||||||
|
class="full-control"
|
||||||
|
:min="0"
|
||||||
|
:max="props.snapshotHafCoinM"
|
||||||
|
:precision="2"
|
||||||
|
controls-position="right"
|
||||||
|
@update:model-value="updateCheckoutForm({ coin_consumed_m: Number($event) || 0 })"
|
||||||
|
/>
|
||||||
|
<span class="field-hint">
|
||||||
|
订单快照 {{ quantity(props.snapshotHafCoinM) }}M，预计剩余
|
||||||
|
{{ quantity(props.remainingHafCoinM) }}M
|
||||||
|
</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="其他押金赔付（元）">
|
||||||
|
<el-input-number
|
||||||
|
:model-value="props.checkoutForm.otherAmountYuan"
|
||||||
|
class="full-control"
|
||||||
|
:min="0"
|
||||||
|
:precision="0"
|
||||||
|
controls-position="right"
|
||||||
|
@update:model-value="updateCheckoutForm({ otherAmountYuan: Number($event) || 0 })"
|
||||||
|
/>
|
||||||
|
<span class="field-hint">
|
||||||
|
不含上方额外消耗品；仅填写封禁、违规、资产损坏等需要从押金赔付的费用。
|
||||||
|
</span>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div class="checkout-deduct-preview">
|
||||||
|
<div>
|
||||||
|
<span>额外消耗品已用</span>
|
||||||
|
<strong>¥{{ money(props.resourceChargeAmount) }}</strong>
|
||||||
|
<em>按上方物资数量自动计算，计入实际结算租金</em>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>其他押金赔付</span>
|
||||||
|
<strong>¥{{ money(props.checkoutForm.otherAmountYuan) }}</strong>
|
||||||
|
<em>作为押金赔付扣除，和额外消耗品分开展示</em>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-input
|
||||||
|
:model-value="props.checkoutForm.evidenceText"
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="结账证据链接，一行一个。可填写截图地址或备注链接"
|
||||||
|
@update:model-value="updateCheckoutForm({ evidenceText: String($event) })"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" size="large" :loading="props.returning" @click="emit('submit')">
|
||||||
|
发起结账
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.form-section {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1f2937;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 24px;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-resource-panel {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
background: #f9fafb;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-resource-head {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 2px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-resource-head strong {
|
||||||
|
color: #1f2937;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-highlight {
|
||||||
|
color: #ff6a00;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-resource-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto auto;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-resource-meta {
|
||||||
|
display: grid;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-resource-meta strong {
|
||||||
|
color: #1f2937;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-resource-meta span {
|
||||||
|
color: #6b7785;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-resource-amount {
|
||||||
|
min-width: 80px;
|
||||||
|
text-align: right;
|
||||||
|
color: #ff6a00;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-hint {
|
||||||
|
display: block;
|
||||||
|
margin-top: 6px;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-deduct-preview,
|
||||||
|
.checkout-fee-preview {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-deduct-preview {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-deduct-preview div,
|
||||||
|
.checkout-fee-preview div {
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-deduct-preview span,
|
||||||
|
.checkout-fee-preview span {
|
||||||
|
color: #4b5563;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-deduct-preview strong,
|
||||||
|
.checkout-fee-preview strong {
|
||||||
|
color: #ff6a00;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-deduct-preview em,
|
||||||
|
.checkout-fee-preview em {
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 12px;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-section {
|
||||||
|
margin: 12px 12px 0;
|
||||||
|
padding: 14px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-card {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #182232;
|
||||||
|
margin: 0 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-hint {
|
||||||
|
margin: 0 0 12px;
|
||||||
|
color: #5f6f86;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-field {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-usage-panel {
|
||||||
|
margin: 0 16px 12px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #edf2f7;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-panel-title {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #2d3748;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-bottom: 1px dashed #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-name {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #2d3748;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-price-text {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #a0aec0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-line-amount {
|
||||||
|
min-width: 50px;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #ff5f00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-panel-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: baseline;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #4a5568;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-panel-footer strong {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #ff5f00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-input-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-inline-input {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #182232;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-unit {
|
||||||
|
color: #8a94a6;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coin-hint,
|
||||||
|
.deposit-deduct-hint {
|
||||||
|
padding: 0 16px 10px;
|
||||||
|
color: #8a94a6;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-fee-preview {
|
||||||
|
margin: 0 16px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.checkout-resource-row {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-resource-amount {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkout-deduct-preview {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,80 +1,194 @@
|
|||||||
import type { Order } from '../api/orders'
|
import { computed, type Ref } from 'vue'
|
||||||
|
|
||||||
export interface SnapshotResource {
|
import { centToYuan, formatMoney } from '@/shared/utils/money'
|
||||||
|
import type { Checkout, Order } from '../api/orders'
|
||||||
|
|
||||||
|
export interface CheckoutFormSnapshot {
|
||||||
|
content: string
|
||||||
|
coin_consumed_m: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CounterFormSnapshot {
|
||||||
|
consumableAmountYuan: number
|
||||||
|
coin_consumed_m: number
|
||||||
|
otherAmountYuan: number
|
||||||
|
depositDeductAmountYuan: number
|
||||||
|
reason: string
|
||||||
|
evidenceText: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CheckoutResource {
|
||||||
key: string
|
key: string
|
||||||
label: string
|
label: string
|
||||||
|
price: string
|
||||||
|
mode: string
|
||||||
quantity: number
|
quantity: number
|
||||||
unitPrice: number
|
unitPrice: number
|
||||||
chargeMode: '赠送' | '收费'
|
}
|
||||||
|
|
||||||
|
export function useOrderCheckoutSnapshot(options: {
|
||||||
|
order: Ref<Order | null>
|
||||||
|
checkoutForm: Ref<CheckoutFormSnapshot>
|
||||||
|
resourceUsage: Ref<Record<string, number>>
|
||||||
|
}) {
|
||||||
|
const checkoutResources = computed(() => readSnapshotResources(options.order.value))
|
||||||
|
const resourceChargeAmount = computed(() =>
|
||||||
|
calculateResourceChargeAmount(checkoutResources.value, options.resourceUsage.value)
|
||||||
|
)
|
||||||
|
const snapshotHafCoinM = computed(() => getSnapshotHafCoinM(options.order.value))
|
||||||
|
const remainingHafCoinM = computed(() =>
|
||||||
|
roundQuantity(
|
||||||
|
Math.max(snapshotHafCoinM.value - Number(options.checkoutForm.value.coin_consumed_m || 0), 0)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
function hydrateResourceUsage() {
|
||||||
|
options.resourceUsage.value = normalizeResourceUsage(
|
||||||
|
checkoutResources.value,
|
||||||
|
options.resourceUsage.value
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function readResourceUsage(key: string) {
|
||||||
|
return readResourceUsageAmount(options.resourceUsage.value, key)
|
||||||
|
}
|
||||||
|
|
||||||
|
function resourceLineAmount(item: CheckoutResource) {
|
||||||
|
return roundMoney(readResourceUsage(item.key) * item.unitPrice)
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkoutContentWithSummary() {
|
||||||
|
return buildCheckoutContentWithSummary({
|
||||||
|
content: options.checkoutForm.value.content,
|
||||||
|
coinConsumedM: options.checkoutForm.value.coin_consumed_m,
|
||||||
|
checkoutResources: checkoutResources.value,
|
||||||
|
resourceUsage: options.resourceUsage.value,
|
||||||
|
remainingHafCoinM: remainingHafCoinM.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
checkoutResources,
|
||||||
|
resourceChargeAmount,
|
||||||
|
snapshotHafCoinM,
|
||||||
|
remainingHafCoinM,
|
||||||
|
hydrateResourceUsage,
|
||||||
|
readResourceUsage,
|
||||||
|
isChargedResource,
|
||||||
|
resourceLineAmount,
|
||||||
|
checkoutContentWithSummary,
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function readSnapshot(order: Order | null) {
|
export function readSnapshot(order: Order | null) {
|
||||||
if (!order?.listing_snapshot) return null
|
const snapshot = order?.account_snapshot
|
||||||
try {
|
return isRecord(snapshot) ? snapshot : null
|
||||||
return JSON.parse(order.listing_snapshot) as Record<string, any>
|
|
||||||
} catch {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function readNumber(value: unknown): number {
|
export function readAssetSummary(order: Order | null) {
|
||||||
const parsed = Number(value)
|
const summary = readSnapshot(order)?.asset_summary
|
||||||
return Number.isFinite(parsed) ? parsed : 0
|
return isRecord(summary) ? summary : null
|
||||||
}
|
}
|
||||||
|
|
||||||
export function roundQuantity(value: number): number {
|
export function readSnapshotResources(order: Order | null): CheckoutResource[] {
|
||||||
return Math.round(value * 10) / 10
|
const resources = readAssetSummary(order)?.resources
|
||||||
}
|
if (!Array.isArray(resources)) return []
|
||||||
|
return resources
|
||||||
export function roundMoney(value: number): number {
|
.filter(isRecord)
|
||||||
return Math.round(value * 100) / 100
|
.map(item => {
|
||||||
}
|
const key = String(item.key || item.label || '')
|
||||||
|
const label = String(item.label || key || '额外消耗品')
|
||||||
export function readSnapshotResources(order: Order | null): SnapshotResource[] {
|
const price = String(item.price || '')
|
||||||
const snapshot = readSnapshot(order)
|
return {
|
||||||
if (!snapshot?.quantities) return []
|
key,
|
||||||
|
label,
|
||||||
const quantities = snapshot.quantities as Record<string, any>[]
|
price,
|
||||||
return quantities
|
mode: String(item.mode || '收费'),
|
||||||
.map(item => ({
|
|
||||||
key: String(item.key || ''),
|
|
||||||
label: String(item.label || ''),
|
|
||||||
quantity: readNumber(item.quantity),
|
quantity: readNumber(item.quantity),
|
||||||
unitPrice: readNumber(item.price),
|
unitPrice: readUnitPrice(price),
|
||||||
chargeMode: (item.charge_mode === '收费' ? '收费' : '赠送') as SnapshotResource['chargeMode'],
|
}
|
||||||
}))
|
})
|
||||||
.filter(item => item.key && item.label)
|
.filter(item => item.key && item.quantity > 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isChargedResource(resource: SnapshotResource): boolean {
|
export function normalizeResourceUsage(
|
||||||
return resource.chargeMode === '收费'
|
resources: CheckoutResource[],
|
||||||
|
current: Record<string, number>
|
||||||
|
) {
|
||||||
|
const next: Record<string, number> = {}
|
||||||
|
for (const item of resources) {
|
||||||
|
next[item.key] = Math.min(Math.max(Number(current[item.key] || 0), 0), item.quantity)
|
||||||
|
}
|
||||||
|
return next
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getSnapshotHafCoinM(order: Order | null): number {
|
export function readResourceUsageAmount(resourceUsage: Record<string, number>, key: string) {
|
||||||
const snapshot = readSnapshot(order)
|
return Math.max(Number(resourceUsage[key] || 0), 0)
|
||||||
return roundQuantity(readNumber(snapshot?.haf_coin_amount) / 1000000)
|
}
|
||||||
|
|
||||||
|
export function isChargedResource(item: CheckoutResource) {
|
||||||
|
return item.mode !== '赠送'
|
||||||
}
|
}
|
||||||
|
|
||||||
export function calculateResourceChargeAmount(
|
export function calculateResourceChargeAmount(
|
||||||
resources: SnapshotResource[],
|
resources: CheckoutResource[],
|
||||||
resourceUsage: Record<string, number>
|
resourceUsage: Record<string, number>
|
||||||
): number {
|
) {
|
||||||
return roundMoney(
|
return roundMoney(
|
||||||
resources.reduce((sum, item) => {
|
resources.reduce((sum, item) => {
|
||||||
if (!isChargedResource(item)) return sum
|
if (!isChargedResource(item)) return sum
|
||||||
const used = resourceUsage[item.key] || 0
|
const used = readResourceUsageAmount(resourceUsage, item.key)
|
||||||
return sum + used * item.unitPrice
|
return sum + used * item.unitPrice
|
||||||
}, 0)
|
}, 0)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function calculateCheckoutTotal(
|
export function buildCheckoutContentWithSummary(options: {
|
||||||
resourceCharge: number,
|
content: string
|
||||||
consumableAmount: number,
|
coinConsumedM: number
|
||||||
coinConsumed: number,
|
checkoutResources: CheckoutResource[]
|
||||||
otherAmount: number
|
resourceUsage: Record<string, number>
|
||||||
): number {
|
remainingHafCoinM: number
|
||||||
return roundMoney(resourceCharge + consumableAmount + coinConsumed + otherAmount)
|
}) {
|
||||||
|
const lines = [options.content.trim()].filter(Boolean)
|
||||||
|
const usedResources = options.checkoutResources.filter(
|
||||||
|
item => readResourceUsageAmount(options.resourceUsage, item.key) > 0
|
||||||
|
)
|
||||||
|
if (usedResources.length) {
|
||||||
|
lines.push(
|
||||||
|
`额外消耗品：${usedResources
|
||||||
|
.map(item => {
|
||||||
|
const used = readResourceUsageAmount(options.resourceUsage, item.key)
|
||||||
|
const amount = roundMoney(used * item.unitPrice)
|
||||||
|
return `${item.label} ${used}/${item.quantity}${
|
||||||
|
isChargedResource(item) ? `，金额¥${money(amount)}` : '，赠送不扣款'
|
||||||
|
}`
|
||||||
|
})
|
||||||
|
.join('；')}`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (Number(options.coinConsumedM || 0) > 0) {
|
||||||
|
lines.push(
|
||||||
|
`哈夫币消耗：${quantity(options.coinConsumedM)}M，预计剩余${quantity(
|
||||||
|
options.remainingHafCoinM
|
||||||
|
)}M`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (lines.length === 0) {
|
||||||
|
lines.push('租客发起结账。')
|
||||||
|
}
|
||||||
|
return lines.join('\n')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function hydrateCounterFormFromCheckout(checkout: Checkout): CounterFormSnapshot {
|
||||||
|
return {
|
||||||
|
consumableAmountYuan: amountYuan(checkout.consumable_amount_cent),
|
||||||
|
coin_consumed_m: checkout.coin_consumed_m,
|
||||||
|
otherAmountYuan: amountYuan(checkout.other_amount_cent),
|
||||||
|
depositDeductAmountYuan: amountYuan(checkout.deposit_deduct_amount_cent),
|
||||||
|
reason: '',
|
||||||
|
evidenceText: '',
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function calculateCounterTotal(counterForm: {
|
export function calculateCounterTotal(counterForm: {
|
||||||
@@ -82,7 +196,7 @@ export function calculateCounterTotal(counterForm: {
|
|||||||
coin_consumed_m: number
|
coin_consumed_m: number
|
||||||
otherAmountYuan: number
|
otherAmountYuan: number
|
||||||
depositDeductAmountYuan: number
|
depositDeductAmountYuan: number
|
||||||
}): number {
|
}) {
|
||||||
return roundMoney(
|
return roundMoney(
|
||||||
counterForm.consumableAmountYuan +
|
counterForm.consumableAmountYuan +
|
||||||
counterForm.coin_consumed_m +
|
counterForm.coin_consumed_m +
|
||||||
@@ -91,57 +205,90 @@ export function calculateCounterTotal(counterForm: {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function hydrateResourceUsageFromOrder(
|
export function getSnapshotHafCoinM(order: Order | null) {
|
||||||
order: Order | null,
|
const snapshot = readSnapshot(order)
|
||||||
resources: SnapshotResource[]
|
return roundQuantity(readNumber(snapshot?.haf_coin_amount) / 1000000)
|
||||||
): Record<string, number> {
|
|
||||||
const usage: Record<string, number> = {}
|
|
||||||
|
|
||||||
if (!order?.checkout_info) {
|
|
||||||
return usage
|
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
export function orderEstimatedEndAt(order: Order | null) {
|
||||||
const info = JSON.parse(order.checkout_info) as Record<string, any>
|
const rentedAt = order?.rented_at
|
||||||
const consumedResources = info.consumed_resources as Record<string, number> | undefined
|
const durationHours = Number(order?.estimated_duration_hours || 0)
|
||||||
|
if (!rentedAt || durationHours <= 0) return undefined
|
||||||
if (consumedResources) {
|
return new Date(new Date(rentedAt).getTime() + durationHours * 60 * 60 * 1000).toISOString()
|
||||||
resources.forEach(res => {
|
|
||||||
if (res.key in consumedResources) {
|
|
||||||
usage[res.key] = consumedResources[res.key] ?? 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// ignore
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return usage
|
export function orderRentAmount(item: Order, userID: number | undefined | null) {
|
||||||
|
if (item.owner_id === userID) return amountYuan(item.owner_rent_amount_cent)
|
||||||
|
if (item.renter_id === userID) return amountYuan(item.rent_amount_cent)
|
||||||
|
return amountYuan(item.display_amount_cent)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function hydrateCounterFormFromOrder(order: Order | null) {
|
export function ownerActualIncome(item: Order, userID: number | undefined | null) {
|
||||||
if (!order?.counter_info) {
|
if (item.owner_id !== userID) return null
|
||||||
return null
|
const value = item.checkout?.owner_income_amount_cent
|
||||||
|
return typeof value === 'number' ? centToYuan(value) : null
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
export function formatHandoffRecordType(type: string) {
|
||||||
const info = JSON.parse(order.counter_info) as Record<string, any>
|
const typeMap: Record<string, string> = {
|
||||||
return {
|
owner_handoff: '卖家交接',
|
||||||
consumableAmountYuan: readNumber(info.consumableAmountYuan),
|
renter_checkout: '买家结账',
|
||||||
coin_consumed_m: readNumber(info.coin_consumed_m),
|
owner_counter_checkout: '卖家反驳结账',
|
||||||
otherAmountYuan: readNumber(info.otherAmountYuan),
|
renter_confirm_checkout: '买家确认结账',
|
||||||
depositDeductAmountYuan: readNumber(info.depositDeductAmountYuan),
|
owner_accept_checkout: '卖家接受结账',
|
||||||
reason: String(info.reason || ''),
|
admin_arbitration: '客服仲裁',
|
||||||
evidenceText: String(info.evidence || ''),
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
return null
|
|
||||||
}
|
}
|
||||||
|
return typeMap[type] || type
|
||||||
}
|
}
|
||||||
|
|
||||||
export function readError(error: unknown, fallback: string): string {
|
export function linesToList(value: string) {
|
||||||
if (error && typeof error === 'object' && 'message' in error) {
|
return value
|
||||||
return String(error.message)
|
.split('\n')
|
||||||
|
.map(item => item.trim())
|
||||||
|
.filter(Boolean)
|
||||||
}
|
}
|
||||||
return fallback
|
|
||||||
|
export function money(value: unknown) {
|
||||||
|
return formatMoney(readNumber(value))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function amountYuan(cent: unknown) {
|
||||||
|
if (cent !== undefined && cent !== null) return centToYuan(readNumber(cent))
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
|
||||||
|
export function quantity(value: unknown) {
|
||||||
|
const rounded = roundQuantity(readNumber(value))
|
||||||
|
return Number.isInteger(rounded) ? `${rounded}` : rounded.toFixed(2)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function readUnitPrice(priceText: string) {
|
||||||
|
const normalized = priceText.replace(/，/g, ',').trim()
|
||||||
|
const fractionMatch = normalized.match(/(\d+(?:\.\d+)?)\s*元\s*\/\s*(\d+(?:\.\d+)?)/)
|
||||||
|
if (fractionMatch) {
|
||||||
|
const amount = Number(fractionMatch[1])
|
||||||
|
const count = Number(fractionMatch[2])
|
||||||
|
return count > 0 ? roundMoney(amount / count) : 0
|
||||||
|
}
|
||||||
|
const singleMatch = normalized.match(/(\d+(?:\.\d+)?)\s*元/)
|
||||||
|
if (singleMatch) return Number(singleMatch[1])
|
||||||
|
const fallback = normalized.match(/(\d+(?:\.\d+)?)/)
|
||||||
|
return fallback ? Number(fallback[1]) : 0
|
||||||
|
}
|
||||||
|
|
||||||
|
export function roundMoney(value: number) {
|
||||||
|
return Math.round(Number(value || 0) * 10) / 10
|
||||||
|
}
|
||||||
|
|
||||||
|
export function roundQuantity(value: number) {
|
||||||
|
return Math.round(value * 100) / 100
|
||||||
|
}
|
||||||
|
|
||||||
|
export function readNumber(value: unknown) {
|
||||||
|
const number = Number(value || 0)
|
||||||
|
return Number.isFinite(number) ? number : 0
|
||||||
|
}
|
||||||
|
|
||||||
|
function isRecord(value: unknown): value is Record<string, unknown> {
|
||||||
|
return typeof value === 'object' && value !== null
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,3 +4,6 @@ export * from './composables/useOrderDetail'
|
|||||||
export * from './composables/useOrderSnapshot'
|
export * from './composables/useOrderSnapshot'
|
||||||
export * from './composables/usePaymentPolling'
|
export * from './composables/usePaymentPolling'
|
||||||
export * from './composables/useSettlement'
|
export * from './composables/useSettlement'
|
||||||
|
export { default as OrderCheckoutSummary } from './components/OrderCheckoutSummary.vue'
|
||||||
|
export { default as OrderHandoffTimeline } from './components/OrderHandoffTimeline.vue'
|
||||||
|
export { default as OrderResourceUsageEditor } from './components/OrderResourceUsageEditor.vue'
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import { showToast, showDialog } from 'vant'
|
|||||||
import { fetchOrderChat } from '@/features/chats/api/chats'
|
import { fetchOrderChat } from '@/features/chats/api/chats'
|
||||||
import { createDispute } from '@/features/disputes/api/disputes'
|
import { createDispute } from '@/features/disputes/api/disputes'
|
||||||
import { uploadFile } from '@/shared/api/files'
|
import { uploadFile } from '@/shared/api/files'
|
||||||
import { centToYuan, formatMoney } from '@/shared/utils/money'
|
import { readError } from '@/shared/utils/error'
|
||||||
import {
|
import {
|
||||||
acceptCheckout,
|
acceptCheckout,
|
||||||
cancelOrder,
|
cancelOrder,
|
||||||
@@ -18,10 +18,25 @@ import {
|
|||||||
startOrderPayment,
|
startOrderPayment,
|
||||||
submitCheckout,
|
submitCheckout,
|
||||||
submitHandoff,
|
submitHandoff,
|
||||||
|
OrderCheckoutSummary,
|
||||||
|
OrderHandoffTimeline,
|
||||||
|
OrderResourceUsageEditor,
|
||||||
type HandoffRecord,
|
type HandoffRecord,
|
||||||
type Order,
|
type Order,
|
||||||
type PaymentOrder,
|
type PaymentOrder,
|
||||||
} from '@/features/orders/api/orders'
|
} from '@/features/orders'
|
||||||
|
import {
|
||||||
|
amountYuan,
|
||||||
|
hydrateCounterFormFromCheckout,
|
||||||
|
linesToList,
|
||||||
|
money,
|
||||||
|
orderEstimatedEndAt as readOrderEstimatedEndAt,
|
||||||
|
orderRentAmount,
|
||||||
|
ownerActualIncome,
|
||||||
|
readAssetSummary as readOrderAssetSummary,
|
||||||
|
readSnapshot as readOrderSnapshot,
|
||||||
|
useOrderCheckoutSnapshot,
|
||||||
|
} from '@/features/orders/composables/useOrderSnapshot'
|
||||||
import { useSessionStore } from '@/stores/session'
|
import { useSessionStore } from '@/stores/session'
|
||||||
import { handoffStatusLabel, orderStatusLabel } from '@/shared/utils/statusLabels'
|
import { handoffStatusLabel, orderStatusLabel } from '@/shared/utils/statusLabels'
|
||||||
import { formatDateTime } from '@/shared/utils/time'
|
import { formatDateTime } from '@/shared/utils/time'
|
||||||
@@ -79,9 +94,11 @@ const showRejectPopup = ref(false)
|
|||||||
const isOwner = computed(() => order.value?.owner_id === session.userId)
|
const isOwner = computed(() => order.value?.owner_id === session.userId)
|
||||||
const isRenter = computed(() => order.value?.renter_id === session.userId)
|
const isRenter = computed(() => order.value?.renter_id === session.userId)
|
||||||
const orderAmountLabel = computed(() => (isOwner.value ? '预计租金' : '支付租金'))
|
const orderAmountLabel = computed(() => (isOwner.value ? '预计租金' : '支付租金'))
|
||||||
const orderRentDisplayAmount = computed(() => (order.value ? orderRentAmount(order.value) : 0))
|
const orderRentDisplayAmount = computed(() =>
|
||||||
|
order.value ? orderRentAmount(order.value, session.userId) : 0
|
||||||
|
)
|
||||||
const ownerIncomeDisplayAmount = computed(() =>
|
const ownerIncomeDisplayAmount = computed(() =>
|
||||||
order.value ? ownerActualIncome(order.value) : null
|
order.value ? ownerActualIncome(order.value, session.userId) : null
|
||||||
)
|
)
|
||||||
const ownerIncomeLabel = computed(() =>
|
const ownerIncomeLabel = computed(() =>
|
||||||
order.value?.status === 'completed' ? '实际到手' : '结账预计到手'
|
order.value?.status === 'completed' ? '实际到手' : '结账预计到手'
|
||||||
@@ -103,28 +120,15 @@ const isCheckoutDisputeStage = computed(() => {
|
|||||||
['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.value.status)
|
['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.value.status)
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
const checkoutResources = computed(() => {
|
const {
|
||||||
const resources = readSnapshotResources()
|
checkoutResources,
|
||||||
return resources.filter(item => item.quantity > 0)
|
resourceChargeAmount,
|
||||||
})
|
snapshotHafCoinM,
|
||||||
const resourceChargeAmount = computed(() => {
|
remainingHafCoinM,
|
||||||
return roundMoney(
|
hydrateResourceUsage,
|
||||||
checkoutResources.value.reduce((sum, item) => {
|
resourceLineAmount,
|
||||||
if (!isChargedResource(item)) return sum
|
checkoutContentWithSummary,
|
||||||
const used = readResourceUsage(item.key)
|
} = useOrderCheckoutSnapshot({ order, checkoutForm, resourceUsage })
|
||||||
return sum + used * item.unitPrice
|
|
||||||
}, 0)
|
|
||||||
)
|
|
||||||
})
|
|
||||||
const snapshotHafCoinM = computed(() => {
|
|
||||||
const snapshot = readSnapshot()
|
|
||||||
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)
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(loadOrder)
|
onMounted(loadOrder)
|
||||||
|
|
||||||
@@ -406,203 +410,25 @@ async function handleCounterEvidenceUpload(event: Event) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function readError(error: unknown, fallback: string) {
|
function orderEstimatedEndAt() {
|
||||||
if (typeof error === 'object' && error && 'response' in error) {
|
return readOrderEstimatedEndAt(order.value)
|
||||||
const response = (error as { response?: { data?: { message?: string } } }).response
|
|
||||||
return response?.data?.message || fallback
|
|
||||||
}
|
|
||||||
return fallback
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function orderRentedAt() {
|
function orderRentedAt() {
|
||||||
return order.value?.rented_at
|
return order.value?.rented_at
|
||||||
}
|
}
|
||||||
|
|
||||||
function orderEstimatedEndAt() {
|
function readSnapshot() {
|
||||||
if (!order.value) return undefined
|
return readOrderSnapshot(order.value) as Record<string, any> | null
|
||||||
const rentedAt = orderRentedAt()
|
|
||||||
const durationHours = Number(order.value.estimated_duration_hours || 0)
|
|
||||||
if (!rentedAt || durationHours <= 0) return undefined
|
|
||||||
return new Date(new Date(rentedAt).getTime() + durationHours * 60 * 60 * 1000).toISOString()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CheckoutResource {
|
function readAssetSummary() {
|
||||||
key: string
|
return readOrderAssetSummary(order.value) as Record<string, any> | null
|
||||||
label: string
|
|
||||||
price: string
|
|
||||||
mode: string
|
|
||||||
quantity: number
|
|
||||||
unitPrice: number
|
|
||||||
}
|
|
||||||
|
|
||||||
function readSnapshot(): any {
|
|
||||||
const snapshot = order.value?.account_snapshot
|
|
||||||
if (isRecord(snapshot)) return snapshot
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
function readAssetSummary(): any {
|
|
||||||
const summary = readSnapshot()?.asset_summary
|
|
||||||
if (isRecord(summary)) return summary
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
function readSnapshotResources(): CheckoutResource[] {
|
|
||||||
const resources = readAssetSummary()?.resources
|
|
||||||
if (!Array.isArray(resources)) return []
|
|
||||||
return resources
|
|
||||||
.filter(isRecord)
|
|
||||||
.map(item => {
|
|
||||||
const key = String(item.key || item.label || '')
|
|
||||||
const label = String(item.label || key || '额外消耗品')
|
|
||||||
const price = String(item.price || '')
|
|
||||||
return {
|
|
||||||
key,
|
|
||||||
label,
|
|
||||||
price,
|
|
||||||
mode: String(item.mode || '收费'),
|
|
||||||
quantity: readNumber(item.quantity),
|
|
||||||
unitPrice: readUnitPrice(price),
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.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
|
|
||||||
)
|
|
||||||
}
|
|
||||||
resourceUsage.value = next
|
|
||||||
}
|
|
||||||
|
|
||||||
function readResourceUsage(key: string) {
|
|
||||||
return Math.max(Number(resourceUsage.value[key] || 0), 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
function isChargedResource(item: CheckoutResource) {
|
|
||||||
return item.mode !== '赠送'
|
|
||||||
}
|
|
||||||
|
|
||||||
function resourceLineAmount(item: CheckoutResource) {
|
|
||||||
return roundMoney(readResourceUsage(item.key) * item.unitPrice)
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkoutContentWithSummary() {
|
|
||||||
const lines = [checkoutForm.value.content.trim()].filter(Boolean)
|
|
||||||
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('；')}`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (Number(checkoutForm.value.coin_consumed_m || 0) > 0) {
|
|
||||||
lines.push(
|
|
||||||
`哈夫币消耗：${quantity(Number(checkoutForm.value.coin_consumed_m))}M，预计剩余${quantity(
|
|
||||||
remainingHafCoinM.value
|
|
||||||
)}M`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (lines.length === 0) {
|
|
||||||
lines.push('租客发起结账。')
|
|
||||||
}
|
|
||||||
return lines.join('\n')
|
|
||||||
}
|
|
||||||
|
|
||||||
function readUnitPrice(priceText: string) {
|
|
||||||
const normalized = priceText.replace(/，/g, ',').trim()
|
|
||||||
const fractionMatch = normalized.match(/(\d+(?:\.\d+)?)\s*元\s*\/\s*(\d+(?:\.\d+)?)/)
|
|
||||||
if (fractionMatch) {
|
|
||||||
const amount = Number(fractionMatch[1])
|
|
||||||
const count = Number(fractionMatch[2])
|
|
||||||
return count > 0 ? roundMoney(amount / count) : 0
|
|
||||||
}
|
|
||||||
const singleMatch = normalized.match(/(\d+(?:\.\d+)?)\s*元/)
|
|
||||||
if (singleMatch) return Number(singleMatch[1])
|
|
||||||
const fallback = normalized.match(/(\d+(?:\.\d+)?)/)
|
|
||||||
return fallback ? Number(fallback[1]) : 0
|
|
||||||
}
|
|
||||||
|
|
||||||
function roundMoney(value: number) {
|
|
||||||
return Math.round(Number(value || 0) * 10) / 10
|
|
||||||
}
|
|
||||||
|
|
||||||
function roundQuantity(value: number) {
|
|
||||||
return Math.round(value * 100) / 100
|
|
||||||
}
|
|
||||||
|
|
||||||
function money(value: unknown) {
|
|
||||||
return formatMoney(readNumber(value))
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatHandoffRecordType(type: string) {
|
|
||||||
const typeMap: Record<string, string> = {
|
|
||||||
owner_handoff: '卖家交接',
|
|
||||||
renter_checkout: '买家结账',
|
|
||||||
owner_counter_checkout: '卖家反驳结账',
|
|
||||||
renter_confirm_checkout: '买家确认结账',
|
|
||||||
owner_accept_checkout: '卖家接受结账',
|
|
||||||
admin_arbitration: '客服仲裁',
|
|
||||||
}
|
|
||||||
return typeMap[type] || type
|
|
||||||
}
|
|
||||||
|
|
||||||
function amountYuan(cent: unknown) {
|
|
||||||
if (cent !== undefined && cent !== null) return centToYuan(readNumber(cent))
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
|
|
||||||
function orderRentAmount(item: Order) {
|
|
||||||
if (item.owner_id === session.userId) return amountYuan(item.owner_rent_amount_cent)
|
|
||||||
if (item.renter_id === session.userId) return amountYuan(item.rent_amount_cent)
|
|
||||||
return amountYuan(item.display_amount_cent)
|
|
||||||
}
|
|
||||||
|
|
||||||
function ownerActualIncome(item: Order) {
|
|
||||||
if (item.owner_id !== session.userId) return null
|
|
||||||
const value = item.checkout?.owner_income_amount_cent
|
|
||||||
if (typeof value === 'number') return centToYuan(value)
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
function quantity(value: unknown) {
|
|
||||||
const rounded = roundQuantity(readNumber(value))
|
|
||||||
return Number.isInteger(rounded) ? `${rounded}` : rounded.toFixed(2)
|
|
||||||
}
|
|
||||||
|
|
||||||
function readNumber(value: unknown) {
|
|
||||||
const number = Number(value || 0)
|
|
||||||
return Number.isFinite(number) ? number : 0
|
|
||||||
}
|
|
||||||
|
|
||||||
function isRecord(value: unknown): value is Record<string, unknown> {
|
|
||||||
return typeof value === 'object' && value !== null
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function hydrateCounterForm() {
|
function hydrateCounterForm() {
|
||||||
if (!order.value?.checkout) return
|
if (!order.value?.checkout) return
|
||||||
const checkout = order.value.checkout
|
counterForm.value = hydrateCounterFormFromCheckout(order.value.checkout)
|
||||||
counterForm.value.consumableAmountYuan = amountYuan(checkout.consumable_amount_cent)
|
|
||||||
counterForm.value.coin_consumed_m = checkout.coin_consumed_m
|
|
||||||
counterForm.value.otherAmountYuan = amountYuan(checkout.other_amount_cent)
|
|
||||||
counterForm.value.depositDeductAmountYuan = amountYuan(checkout.deposit_deduct_amount_cent)
|
|
||||||
}
|
|
||||||
|
|
||||||
function linesToList(value: string) {
|
|
||||||
return value
|
|
||||||
.split('\n')
|
|
||||||
.map(item => item.trim())
|
|
||||||
.filter(Boolean)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function openOrderChat() {
|
async function openOrderChat() {
|
||||||
@@ -803,187 +629,38 @@ async function copyListingCode() {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Handoff Records list -->
|
<!-- Handoff Records list -->
|
||||||
<section class="card-section">
|
<OrderHandoffTimeline
|
||||||
<h3 class="section-title">交接日志 · 商品编号 {{ listingCode }}</h3>
|
variant="mobile"
|
||||||
<van-empty
|
:records="handoffRecords"
|
||||||
v-if="handoffRecords.length === 0"
|
:listing-code="listingCode"
|
||||||
image="search"
|
|
||||||
description="暂无交接日志记录"
|
|
||||||
/>
|
/>
|
||||||
<div v-else class="log-timeline">
|
|
||||||
<div v-for="record in handoffRecords" :key="record.id" class="log-item">
|
|
||||||
<div class="log-dot"></div>
|
|
||||||
<div class="log-content-wrap">
|
|
||||||
<strong class="log-type">{{ formatHandoffRecordType(record.type) }}</strong>
|
|
||||||
<p class="log-desc">{{ record.content }}</p>
|
|
||||||
<span class="log-time">{{ formatDateTime(record.created_at) }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Renter Action: Return Account & Initiate Checkout -->
|
<!-- Renter Action: Return Account & Initiate Checkout -->
|
||||||
<section
|
<OrderResourceUsageEditor
|
||||||
v-if="isRenter && ['renting', 'overdue'].includes(order.status)"
|
v-if="isRenter && ['renting', 'overdue'].includes(order.status)"
|
||||||
class="card-section action-card"
|
v-model:checkout-form="checkoutForm"
|
||||||
>
|
v-model:resource-usage="resourceUsage"
|
||||||
<h3 class="section-title">退号发起结账</h3>
|
variant="mobile"
|
||||||
<p class="action-hint">使用完毕，请输入在此期间消耗的物资与哈夫币进行结账申请。</p>
|
:resources="checkoutResources"
|
||||||
|
:resource-charge-amount="resourceChargeAmount"
|
||||||
<van-field
|
:snapshot-haf-coin-m="snapshotHafCoinM"
|
||||||
v-model="checkoutForm.content"
|
:remaining-haf-coin-m="remainingHafCoinM"
|
||||||
rows="3"
|
:returning="returning"
|
||||||
autosize
|
:resource-line-amount="resourceLineAmount"
|
||||||
label="结账备注"
|
@submit="handleSubmitCheckout"
|
||||||
type="textarea"
|
|
||||||
placeholder="可在此说明物品消耗情况或归还留言"
|
|
||||||
class="action-field"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Checkout resource usage selection -->
|
|
||||||
<div v-if="checkoutResources.length" class="resource-usage-panel">
|
|
||||||
<strong class="resource-panel-title">额外物资消耗登记</strong>
|
|
||||||
<div v-for="item in checkoutResources" :key="item.key" class="resource-row">
|
|
||||||
<div class="resource-meta">
|
|
||||||
<span class="resource-name">{{ item.label }}</span>
|
|
||||||
<span class="resource-price-text"
|
|
||||||
>上限 {{ item.quantity }} · {{ item.mode }} · {{ item.price }}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="stepper-wrap">
|
|
||||||
<van-stepper v-model="resourceUsage[item.key]" integer min="0" :max="item.quantity" />
|
|
||||||
<span class="resource-line-amount">¥{{ money(resourceLineAmount(item)) }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="resource-panel-footer">
|
|
||||||
<span>物资金额合计：</span>
|
|
||||||
<strong>¥{{ money(resourceChargeAmount) }}</strong>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<van-cell-group inset :border="false" class="action-field">
|
|
||||||
<van-field label="消耗哈夫币" label-width="100px">
|
|
||||||
<template #input>
|
|
||||||
<div class="coin-input-wrap">
|
|
||||||
<input
|
|
||||||
v-model.number="checkoutForm.coin_consumed_m"
|
|
||||||
type="number"
|
|
||||||
placeholder="消耗数量"
|
|
||||||
class="custom-inline-input"
|
|
||||||
/>
|
|
||||||
<span class="input-unit">M</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</van-field>
|
|
||||||
<div class="coin-hint">
|
|
||||||
订单快照 {{ quantity(snapshotHafCoinM) }}M，预计剩余 {{ quantity(remainingHafCoinM) }}M
|
|
||||||
</div>
|
|
||||||
<van-field label="其他押金赔付" label-width="100px">
|
|
||||||
<template #input>
|
|
||||||
<div class="coin-input-wrap">
|
|
||||||
<input
|
|
||||||
v-model.number="checkoutForm.otherAmountYuan"
|
|
||||||
type="number"
|
|
||||||
placeholder="不含上方额外物资"
|
|
||||||
class="custom-inline-input"
|
|
||||||
/>
|
|
||||||
<span class="input-unit">元</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</van-field>
|
|
||||||
<div class="deposit-deduct-hint">仅填写封禁、违规、资产损坏等需要从押金赔付的费用。</div>
|
|
||||||
</van-cell-group>
|
|
||||||
<div class="checkout-fee-preview">
|
|
||||||
<div>
|
|
||||||
<span>额外消耗品已用</span>
|
|
||||||
<strong>¥{{ money(resourceChargeAmount) }}</strong>
|
|
||||||
<em>计入实际结算租金</em>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>其他押金赔付</span>
|
|
||||||
<strong>¥{{ money(checkoutForm.otherAmountYuan) }}</strong>
|
|
||||||
<em>从押金赔付扣除</em>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<van-field
|
|
||||||
v-model="checkoutForm.evidenceText"
|
|
||||||
rows="2"
|
|
||||||
autosize
|
|
||||||
label="结账证据"
|
|
||||||
type="textarea"
|
|
||||||
placeholder="结账截图链接（每行一个）"
|
|
||||||
class="action-field"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-button
|
|
||||||
type="primary"
|
|
||||||
block
|
|
||||||
round
|
|
||||||
:loading="returning"
|
|
||||||
loading-text="正在提交结账..."
|
|
||||||
@click="handleSubmitCheckout"
|
|
||||||
>
|
|
||||||
提交结账归还
|
|
||||||
</van-button>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Checkout Details Display -->
|
<!-- Checkout Details Display -->
|
||||||
<section
|
<OrderCheckoutSummary
|
||||||
v-if="
|
v-if="
|
||||||
order.checkout &&
|
order.checkout &&
|
||||||
['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status)
|
['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status)
|
||||||
"
|
"
|
||||||
class="card-section"
|
variant="mobile"
|
||||||
>
|
:order="order"
|
||||||
<h3 class="section-title">结账结算账单</h3>
|
:is-owner="isOwner"
|
||||||
<van-cell-group inset :border="false">
|
:is-renter="isRenter"
|
||||||
<van-cell
|
|
||||||
title="实际结算租金"
|
|
||||||
:value="`¥${money(amountYuan(order.checkout.display_amount_cent))}`"
|
|
||||||
/>
|
/>
|
||||||
<van-cell
|
|
||||||
title="押金总额"
|
|
||||||
:label="
|
|
||||||
amountYuan(order.deposit_waived_amount_cent) > 0
|
|
||||||
? `已免押 ¥${money(amountYuan(order.deposit_waived_amount_cent))}`
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
:value="`¥${money(amountYuan(order.checkout.deposit_amount_cent))}`"
|
|
||||||
/>
|
|
||||||
<van-cell
|
|
||||||
title="额外消耗品已用"
|
|
||||||
:value="`¥${money(amountYuan(order.checkout.consumable_amount_cent))}`"
|
|
||||||
/>
|
|
||||||
<van-cell
|
|
||||||
title="押金赔付扣除"
|
|
||||||
:value="`¥${money(amountYuan(order.checkout.deposit_deduct_amount_cent))}`"
|
|
||||||
value-class="red-text"
|
|
||||||
/>
|
|
||||||
<van-cell
|
|
||||||
v-if="isRenter"
|
|
||||||
title="退还租客"
|
|
||||||
:value="`¥${money(amountYuan(order.checkout.renter_refund_amount_cent))}`"
|
|
||||||
value-class="green-text"
|
|
||||||
/>
|
|
||||||
<van-cell
|
|
||||||
v-if="isOwner"
|
|
||||||
title="号主最终收入"
|
|
||||||
:value="`¥${money(amountYuan(order.checkout.owner_income_amount_cent))}`"
|
|
||||||
value-class="green-text"
|
|
||||||
/>
|
|
||||||
<van-cell
|
|
||||||
v-if="order.checkout.content"
|
|
||||||
title="结账备注"
|
|
||||||
:label="order.checkout.content"
|
|
||||||
/>
|
|
||||||
<van-cell
|
|
||||||
v-if="order.checkout.owner_adjustment_reason"
|
|
||||||
title="号主修正原因"
|
|
||||||
:label="order.checkout.owner_adjustment_reason"
|
|
||||||
/>
|
|
||||||
</van-cell-group>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Owner Action: Confirm Checkout / Make Counter Adjustment Proposal -->
|
<!-- Owner Action: Confirm Checkout / Make Counter Adjustment Proposal -->
|
||||||
<section
|
<section
|
||||||
@@ -1424,186 +1101,6 @@ async function copyListingCode() {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== Log Timeline ========== */
|
|
||||||
.log-timeline {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 16px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-timeline::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 6px;
|
|
||||||
bottom: 6px;
|
|
||||||
left: 4px;
|
|
||||||
width: 1px;
|
|
||||||
background: #e2e8f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-item {
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-item:last-child {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-dot {
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
left: -15px;
|
|
||||||
z-index: 2;
|
|
||||||
width: 7px;
|
|
||||||
height: 7px;
|
|
||||||
background: #1477ff;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-content-wrap {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-type {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #2d3748;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-desc {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #718096;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-time {
|
|
||||||
font-size: 11px;
|
|
||||||
color: #a0aec0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== Resource Panel ========== */
|
|
||||||
.resource-usage-panel {
|
|
||||||
background: #f8fafc;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 12px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource-panel-title {
|
|
||||||
display: block;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #2d3748;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px 0;
|
|
||||||
border-bottom: 1px dashed #e2e8f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource-row:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource-meta {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource-name {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #2d3748;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource-price-text {
|
|
||||||
font-size: 11px;
|
|
||||||
color: #a0aec0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stepper-wrap {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource-line-amount {
|
|
||||||
min-width: 50px;
|
|
||||||
text-align: right;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #ff5f00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource-panel-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: baseline;
|
|
||||||
margin-top: 10px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #4a5568;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource-panel-footer strong {
|
|
||||||
font-size: 15px;
|
|
||||||
color: #ff5f00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.deposit-deduct-hint {
|
|
||||||
padding: 0 16px 10px;
|
|
||||||
color: #8a94a6;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-fee-preview {
|
|
||||||
display: grid;
|
|
||||||
gap: 8px;
|
|
||||||
margin: 0 16px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-fee-preview div {
|
|
||||||
display: grid;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 10px 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #f8fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-fee-preview span {
|
|
||||||
color: #4a5568;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-fee-preview strong {
|
|
||||||
color: #ff5f00;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-fee-preview em {
|
|
||||||
color: #8a94a6;
|
|
||||||
font-size: 11px;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coin-input-wrap {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-inline-input {
|
.custom-inline-input {
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@@ -1612,19 +1109,6 @@ async function copyListingCode() {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-unit {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #718096;
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coin-hint {
|
|
||||||
font-size: 11px;
|
|
||||||
color: #a0aec0;
|
|
||||||
padding: 0 16px 8px 16px;
|
|
||||||
margin-top: -6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-snapshot-hint {
|
.no-snapshot-hint {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@@ -1700,15 +1184,6 @@ async function copyListingCode() {
|
|||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Utilities */
|
|
||||||
.red-text {
|
|
||||||
color: #ef4444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.green-text {
|
|
||||||
color: #10b981;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-wrap {
|
.empty-wrap {
|
||||||
padding: 60px 0;
|
padding: 60px 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,15 +8,26 @@ import QRCode from 'qrcode'
|
|||||||
import { fetchOrderChat } from '@/features/chats/api/chats'
|
import { fetchOrderChat } from '@/features/chats/api/chats'
|
||||||
import { createDispute } from '@/features/disputes'
|
import { createDispute } from '@/features/disputes'
|
||||||
import { uploadFile } from '@/shared/api/files'
|
import { uploadFile } from '@/shared/api/files'
|
||||||
import { centToYuan, formatCent, formatMoney } from '@/shared/utils/money'
|
import { readError } from '@/shared/utils/error'
|
||||||
|
import { formatCent } from '@/shared/utils/money'
|
||||||
import {
|
import {
|
||||||
acceptCheckout,
|
acceptCheckout,
|
||||||
|
amountYuan,
|
||||||
cancelOrder,
|
cancelOrder,
|
||||||
confirmCheckout,
|
confirmCheckout,
|
||||||
confirmReceive,
|
confirmReceive,
|
||||||
counterCheckout,
|
counterCheckout,
|
||||||
fetchHandoffRecords,
|
fetchHandoffRecords,
|
||||||
fetchOrder,
|
fetchOrder,
|
||||||
|
hydrateCounterFormFromCheckout,
|
||||||
|
linesToList,
|
||||||
|
money,
|
||||||
|
OrderCheckoutSummary,
|
||||||
|
OrderHandoffTimeline,
|
||||||
|
OrderResourceUsageEditor,
|
||||||
|
orderEstimatedEndAt as readOrderEstimatedEndAt,
|
||||||
|
orderRentAmount,
|
||||||
|
ownerActualIncome,
|
||||||
queryOrderPayment,
|
queryOrderPayment,
|
||||||
startOrderPayment,
|
startOrderPayment,
|
||||||
submitCheckout,
|
submitCheckout,
|
||||||
@@ -24,6 +35,7 @@ import {
|
|||||||
type HandoffRecord,
|
type HandoffRecord,
|
||||||
type Order,
|
type Order,
|
||||||
type PaymentOrder,
|
type PaymentOrder,
|
||||||
|
useOrderCheckoutSnapshot,
|
||||||
} from '@/features/orders'
|
} from '@/features/orders'
|
||||||
import { useSessionStore } from '@/stores/session'
|
import { useSessionStore } from '@/stores/session'
|
||||||
import { handoffStatusLabel, orderStatusLabel } from '@/shared/utils/statusLabels'
|
import { handoffStatusLabel, orderStatusLabel } from '@/shared/utils/statusLabels'
|
||||||
@@ -84,9 +96,11 @@ let autoPayHandled = false
|
|||||||
const isOwner = computed(() => order.value?.owner_id === session.userId)
|
const isOwner = computed(() => order.value?.owner_id === session.userId)
|
||||||
const isRenter = computed(() => order.value?.renter_id === session.userId)
|
const isRenter = computed(() => order.value?.renter_id === session.userId)
|
||||||
const orderAmountLabel = computed(() => (isOwner.value ? '预计租金' : '支付租金'))
|
const orderAmountLabel = computed(() => (isOwner.value ? '预计租金' : '支付租金'))
|
||||||
const orderRentDisplayAmount = computed(() => (order.value ? orderRentAmount(order.value) : 0))
|
const orderRentDisplayAmount = computed(() =>
|
||||||
|
order.value ? orderRentAmount(order.value, session.userId) : 0
|
||||||
|
)
|
||||||
const ownerIncomeDisplayAmount = computed(() =>
|
const ownerIncomeDisplayAmount = computed(() =>
|
||||||
order.value ? ownerActualIncome(order.value) : null
|
order.value ? ownerActualIncome(order.value, session.userId) : null
|
||||||
)
|
)
|
||||||
const ownerIncomeLabel = computed(() =>
|
const ownerIncomeLabel = computed(() =>
|
||||||
order.value?.status === 'completed' ? '实际到手' : '结账预计到手'
|
order.value?.status === 'completed' ? '实际到手' : '结账预计到手'
|
||||||
@@ -108,28 +122,15 @@ const isCheckoutDisputeStage = computed(() => {
|
|||||||
['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.value.status)
|
['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.value.status)
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
const checkoutResources = computed(() => {
|
const {
|
||||||
const resources = readSnapshotResources()
|
checkoutResources,
|
||||||
return resources.filter(item => item.quantity > 0)
|
resourceChargeAmount,
|
||||||
})
|
snapshotHafCoinM,
|
||||||
const resourceChargeAmount = computed(() => {
|
remainingHafCoinM,
|
||||||
return roundMoney(
|
hydrateResourceUsage,
|
||||||
checkoutResources.value.reduce((sum, item) => {
|
resourceLineAmount,
|
||||||
if (!isChargedResource(item)) return sum
|
checkoutContentWithSummary,
|
||||||
const used = readResourceUsage(item.key)
|
} = useOrderCheckoutSnapshot({ order, checkoutForm, resourceUsage })
|
||||||
return sum + used * item.unitPrice
|
|
||||||
}, 0)
|
|
||||||
)
|
|
||||||
})
|
|
||||||
const snapshotHafCoinM = computed(() => {
|
|
||||||
const snapshot = readSnapshot()
|
|
||||||
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)
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
function getOrderStep(status: string) {
|
function getOrderStep(status: string) {
|
||||||
const stepMap: Record<string, number> = {
|
const stepMap: Record<string, number> = {
|
||||||
@@ -467,191 +468,17 @@ async function openOrderChat() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function readError(error: unknown, fallback: string) {
|
function orderEstimatedEndAt() {
|
||||||
if (typeof error === 'object' && error && 'response' in error) {
|
return readOrderEstimatedEndAt(order.value)
|
||||||
const response = (error as { response?: { data?: { message?: string } } }).response
|
|
||||||
return response?.data?.message || fallback
|
|
||||||
}
|
|
||||||
return fallback
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function orderRentedAt() {
|
function orderRentedAt() {
|
||||||
return order.value?.rented_at
|
return order.value?.rented_at
|
||||||
}
|
}
|
||||||
|
|
||||||
function orderEstimatedEndAt() {
|
|
||||||
if (!order.value) return undefined
|
|
||||||
const rentedAt = orderRentedAt()
|
|
||||||
const durationHours = Number(order.value.estimated_duration_hours || 0)
|
|
||||||
if (!rentedAt || durationHours <= 0) return undefined
|
|
||||||
return new Date(new Date(rentedAt).getTime() + durationHours * 60 * 60 * 1000).toISOString()
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CheckoutResource {
|
|
||||||
key: string
|
|
||||||
label: string
|
|
||||||
price: string
|
|
||||||
mode: string
|
|
||||||
quantity: number
|
|
||||||
unitPrice: number
|
|
||||||
}
|
|
||||||
|
|
||||||
function readSnapshot() {
|
|
||||||
const snapshot = order.value?.account_snapshot
|
|
||||||
if (isRecord(snapshot)) return snapshot
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
function readAssetSummary() {
|
|
||||||
const summary = readSnapshot()?.asset_summary
|
|
||||||
if (isRecord(summary)) return summary
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
function readSnapshotResources(): CheckoutResource[] {
|
|
||||||
const resources = readAssetSummary()?.resources
|
|
||||||
if (!Array.isArray(resources)) return []
|
|
||||||
return resources
|
|
||||||
.filter(isRecord)
|
|
||||||
.map(item => {
|
|
||||||
const key = String(item.key || item.label || '')
|
|
||||||
const label = String(item.label || key || '额外消耗品')
|
|
||||||
const price = String(item.price || '')
|
|
||||||
return {
|
|
||||||
key,
|
|
||||||
label,
|
|
||||||
price,
|
|
||||||
mode: String(item.mode || '收费'),
|
|
||||||
quantity: readNumber(item.quantity),
|
|
||||||
unitPrice: readUnitPrice(price),
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.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
|
|
||||||
)
|
|
||||||
}
|
|
||||||
resourceUsage.value = next
|
|
||||||
}
|
|
||||||
|
|
||||||
function readResourceUsage(key: string) {
|
|
||||||
return Math.max(Number(resourceUsage.value[key] || 0), 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
function isChargedResource(item: CheckoutResource) {
|
|
||||||
return item.mode !== '赠送'
|
|
||||||
}
|
|
||||||
|
|
||||||
function resourceLineAmount(item: CheckoutResource) {
|
|
||||||
return roundMoney(readResourceUsage(item.key) * item.unitPrice)
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkoutContentWithSummary() {
|
|
||||||
const lines = [checkoutForm.value.content.trim()].filter(Boolean)
|
|
||||||
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('；')}`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (Number(checkoutForm.value.coin_consumed_m || 0) > 0) {
|
|
||||||
lines.push(
|
|
||||||
`哈夫币消耗：${quantity(Number(checkoutForm.value.coin_consumed_m))}M，预计剩余${quantity(
|
|
||||||
remainingHafCoinM.value
|
|
||||||
)}M`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (lines.length === 0) {
|
|
||||||
lines.push('租客发起结账。')
|
|
||||||
}
|
|
||||||
return lines.join('\n')
|
|
||||||
}
|
|
||||||
|
|
||||||
function readUnitPrice(priceText: string) {
|
|
||||||
const normalized = priceText.replace(/，/g, ',').trim()
|
|
||||||
const fractionMatch = normalized.match(/(\d+(?:\.\d+)?)\s*元\s*\/\s*(\d+(?:\.\d+)?)/)
|
|
||||||
if (fractionMatch) {
|
|
||||||
const amount = Number(fractionMatch[1])
|
|
||||||
const count = Number(fractionMatch[2])
|
|
||||||
return count > 0 ? roundMoney(amount / count) : 0
|
|
||||||
}
|
|
||||||
const singleMatch = normalized.match(/(\d+(?:\.\d+)?)\s*元/)
|
|
||||||
if (singleMatch) return Number(singleMatch[1])
|
|
||||||
const fallback = normalized.match(/(\d+(?:\.\d+)?)/)
|
|
||||||
return fallback ? Number(fallback[1]) : 0
|
|
||||||
}
|
|
||||||
|
|
||||||
function roundMoney(value: number) {
|
|
||||||
return Math.round(Number(value || 0) * 10) / 10
|
|
||||||
}
|
|
||||||
|
|
||||||
function roundQuantity(value: number) {
|
|
||||||
return Math.round(value * 100) / 100
|
|
||||||
}
|
|
||||||
|
|
||||||
function money(value: unknown) {
|
|
||||||
return formatMoney(readNumber(value))
|
|
||||||
}
|
|
||||||
|
|
||||||
function amountYuan(cent: unknown) {
|
|
||||||
if (cent !== undefined && cent !== null) return centToYuan(readNumber(cent))
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
|
|
||||||
function orderRentAmount(item: Order) {
|
|
||||||
if (item.owner_id === session.userId) return amountYuan(item.owner_rent_amount_cent)
|
|
||||||
if (item.renter_id === session.userId) return amountYuan(item.rent_amount_cent)
|
|
||||||
return amountYuan(item.display_amount_cent)
|
|
||||||
}
|
|
||||||
|
|
||||||
function ownerActualIncome(item: Order) {
|
|
||||||
if (item.owner_id !== session.userId) return null
|
|
||||||
const value = item.checkout?.owner_income_amount_cent
|
|
||||||
if (typeof value === 'number') return centToYuan(value)
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
function quantity(value: unknown) {
|
|
||||||
const rounded = roundQuantity(readNumber(value))
|
|
||||||
return Number.isInteger(rounded) ? `${rounded}` : rounded.toFixed(2)
|
|
||||||
}
|
|
||||||
|
|
||||||
function readNumber(value: unknown) {
|
|
||||||
const number = Number(value || 0)
|
|
||||||
return Number.isFinite(number) ? number : 0
|
|
||||||
}
|
|
||||||
|
|
||||||
function isRecord(value: unknown): value is Record<string, unknown> {
|
|
||||||
return typeof value === 'object' && value !== null
|
|
||||||
}
|
|
||||||
|
|
||||||
function hydrateCounterForm() {
|
function hydrateCounterForm() {
|
||||||
if (!order.value?.checkout) return
|
if (!order.value?.checkout) return
|
||||||
const checkout = order.value.checkout
|
counterForm.value = hydrateCounterFormFromCheckout(order.value.checkout)
|
||||||
counterForm.value.consumableAmountYuan = amountYuan(checkout.consumable_amount_cent)
|
|
||||||
counterForm.value.coin_consumed_m = checkout.coin_consumed_m
|
|
||||||
counterForm.value.otherAmountYuan = amountYuan(checkout.other_amount_cent)
|
|
||||||
counterForm.value.depositDeductAmountYuan = amountYuan(checkout.deposit_deduct_amount_cent)
|
|
||||||
}
|
|
||||||
|
|
||||||
function linesToList(value: string) {
|
|
||||||
return value
|
|
||||||
.split('\n')
|
|
||||||
.map(item => item.trim())
|
|
||||||
.filter(Boolean)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function scrollToDispute() {
|
function scrollToDispute() {
|
||||||
@@ -682,18 +509,6 @@ function scrollToRejectCheckout() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatHandoffRecordType(type: string) {
|
|
||||||
const typeMap: Record<string, string> = {
|
|
||||||
owner_handoff: '卖家交接',
|
|
||||||
renter_checkout: '买家结账',
|
|
||||||
owner_counter_checkout: '卖家反驳结账',
|
|
||||||
renter_confirm_checkout: '买家确认结账',
|
|
||||||
owner_accept_checkout: '卖家接受结账',
|
|
||||||
admin_arbitration: '客服仲裁',
|
|
||||||
}
|
|
||||||
return typeMap[type] || type
|
|
||||||
}
|
|
||||||
|
|
||||||
async function copyListingCode() {
|
async function copyListingCode() {
|
||||||
if (!order.value) return
|
if (!order.value) return
|
||||||
try {
|
try {
|
||||||
@@ -826,189 +641,31 @@ async function copyListingCode() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="order" class="timeline-section">
|
<OrderHandoffTimeline v-if="order" :records="handoffRecords" :listing-code="listingCode" />
|
||||||
<div class="section-header">
|
|
||||||
<h2>交接记录</h2>
|
|
||||||
<span>商品编号 {{ listingCode }}</span>
|
|
||||||
</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
|
<OrderResourceUsageEditor
|
||||||
v-if="order && isRenter && ['renting', 'overdue'].includes(order.status)"
|
v-if="order && isRenter && ['renting', 'overdue'].includes(order.status)"
|
||||||
class="form-section checkout-form-section"
|
v-model:checkout-form="checkoutForm"
|
||||||
>
|
v-model:resource-usage="resourceUsage"
|
||||||
<div class="section-header">
|
:resources="checkoutResources"
|
||||||
<h2>发起结账</h2>
|
:resource-charge-amount="resourceChargeAmount"
|
||||||
</div>
|
:snapshot-haf-coin-m="snapshotHafCoinM"
|
||||||
<div class="form-card">
|
:remaining-haf-coin-m="remainingHafCoinM"
|
||||||
<el-input
|
:returning="returning"
|
||||||
v-model="checkoutForm.content"
|
:resource-line-amount="resourceLineAmount"
|
||||||
type="textarea"
|
@submit="handleSubmitCheckout"
|
||||||
: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.otherAmountYuan"
|
|
||||||
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.otherAmountYuan) }}</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
|
<OrderCheckoutSummary
|
||||||
v-if="
|
v-if="
|
||||||
order &&
|
order &&
|
||||||
order.checkout &&
|
order.checkout &&
|
||||||
['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status)
|
['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status)
|
||||||
"
|
"
|
||||||
class="info-section"
|
:order="order"
|
||||||
>
|
:is-owner="isOwner"
|
||||||
<div class="section-header">
|
:is-renter="isRenter"
|
||||||
<h2>结账明细</h2>
|
/>
|
||||||
</div>
|
|
||||||
<div class="checkout-summary-card">
|
|
||||||
<div class="summary-row">
|
|
||||||
<span>实际结算租金</span>
|
|
||||||
<strong>¥{{ money(amountYuan(order.checkout.display_amount_cent)) }}</strong>
|
|
||||||
</div>
|
|
||||||
<div class="summary-row">
|
|
||||||
<span>预收押金</span>
|
|
||||||
<strong>
|
|
||||||
¥{{ money(amountYuan(order.checkout.deposit_amount_cent)) }}
|
|
||||||
<em v-if="amountYuan(order.deposit_waived_amount_cent) > 0"
|
|
||||||
>已免押 ¥{{ money(amountYuan(order.deposit_waived_amount_cent)) }}</em
|
|
||||||
>
|
|
||||||
</strong>
|
|
||||||
</div>
|
|
||||||
<div class="summary-row">
|
|
||||||
<span>额外消耗品已用</span>
|
|
||||||
<strong class="warning"
|
|
||||||
>¥{{ money(amountYuan(order.checkout.consumable_amount_cent)) }}</strong
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="summary-row">
|
|
||||||
<span>押金赔付扣除</span>
|
|
||||||
<strong class="warning"
|
|
||||||
>¥{{ money(amountYuan(order.checkout.deposit_deduct_amount_cent)) }}</strong
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div v-if="isRenter" class="summary-row highlight">
|
|
||||||
<span>退还租客（未使用租金 + 剩余押金）</span>
|
|
||||||
<strong class="amount"
|
|
||||||
>¥{{ money(amountYuan(order.checkout.renter_refund_amount_cent)) }}</strong
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div v-if="isOwner" class="summary-row highlight">
|
|
||||||
<span>号主最终收入（租金 + 押金赔付）</span>
|
|
||||||
<strong class="amount"
|
|
||||||
>¥{{ money(amountYuan(order.checkout.owner_income_amount_cent)) }}</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
|
<div
|
||||||
v-if="order && isOwner && order.status === 'pending_checkout_confirm'"
|
v-if="order && isOwner && order.status === 'pending_checkout_confirm'"
|
||||||
@@ -1558,35 +1215,6 @@ async function copyListingCode() {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-section {
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-section :deep(.el-timeline) {
|
|
||||||
padding: 24px;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-content {
|
|
||||||
display: grid;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-title {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1f2937;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-body {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #64748b;
|
|
||||||
line-height: 1.6;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-section {
|
.form-section {
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
@@ -1664,69 +1292,6 @@ async function copyListingCode() {
|
|||||||
margin: 0 0 16px 0;
|
margin: 0 0 16px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkout-resource-panel {
|
|
||||||
display: grid;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 16px;
|
|
||||||
background: #f9fafb;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-resource-head {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr auto;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: center;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
border-bottom: 2px solid #e5e7eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-resource-head strong {
|
|
||||||
color: #1f2937;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.amount-highlight {
|
|
||||||
color: #ff6a00;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-resource-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr auto auto;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: center;
|
|
||||||
padding: 12px;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-resource-meta {
|
|
||||||
display: grid;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-resource-meta strong {
|
|
||||||
color: #1f2937;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-resource-meta span {
|
|
||||||
color: #6b7785;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-resource-amount {
|
|
||||||
min-width: 80px;
|
|
||||||
text-align: right;
|
|
||||||
color: #ff6a00;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-grid {
|
.form-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
@@ -1740,126 +1305,6 @@ async function copyListingCode() {
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkout-deduct-preview {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-deduct-preview div {
|
|
||||||
display: grid;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #f9fafb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-deduct-preview span {
|
|
||||||
color: #4b5563;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-deduct-preview strong {
|
|
||||||
color: #ff6a00;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-deduct-preview em {
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 12px;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: 1.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-summary-card {
|
|
||||||
display: grid;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 24px;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 12px 0;
|
|
||||||
border-bottom: 1px solid #f3f4f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-row:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-row.highlight {
|
|
||||||
padding: 16px;
|
|
||||||
background: #f0fdf4;
|
|
||||||
border: 1px solid #bbf7d0;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-row span {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #64748b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-row strong {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #1f2937;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-row strong em {
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #2563eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-row strong.amount {
|
|
||||||
color: #10b981;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-row strong.warning {
|
|
||||||
color: #f59e0b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-note {
|
|
||||||
padding: 16px;
|
|
||||||
background: #f8fafc;
|
|
||||||
border-left: 3px solid #94a3b8;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-note.warning {
|
|
||||||
background: #fef3c7;
|
|
||||||
border-left-color: #f59e0b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-note label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
color: #475569;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-note p {
|
|
||||||
margin: 0;
|
|
||||||
color: #1f2937;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dispute-section .form-card {
|
.dispute-section .form-card {
|
||||||
background: #fef2f2;
|
background: #fef2f2;
|
||||||
border-color: #fecaca;
|
border-color: #fecaca;
|
||||||
@@ -2006,18 +1451,6 @@ async function copyListingCode() {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkout-resource-row {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-resource-amount {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout-deduct-preview {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
.action-buttons {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user