dachui/hfb_sys
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化订单交接和结账界面

Browse Source
This commit is contained in:
yml
2026-06-19 07:01:40 +08:00
parent ae28858318
commit 438a4259f9
5 changed files with 752 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/orders/components/OrderHandoffTimeline.vue
+58 -23
View File
@@ -34,65 +34,100 @@ const props = withDefaults(
<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 class="timeline-card">
<div v-if="props.records.length === 0" class="empty-log">暂无交接记录</div>
<div v-else class="compact-timeline">
<div v-for="record in props.records" :key="record.id" class="timeline-row">
<span class="timeline-dot"></span>
<span class="timeline-time">{{ formatDateTime(record.created_at) }}</span>
<strong class="timeline-title">{{ formatHandoffRecordType(record.type) }}</strong>
<p class="timeline-body">{{ record.content }}</p>
</div>
</el-timeline-item>
</el-timeline>
</div>
</div>
</div>
</template>
<style scoped>
.timeline-section {
margin-bottom: 32px;
margin-bottom: 20px;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
margin-bottom: 10px;
}
.section-header h2 {
font-size: 20px;
font-size: 18px;
font-weight: 700;
color: #1f2937;
margin: 0;
}
.timeline-section :deep(.el-timeline) {
padding: 24px;
.timeline-card {
padding: 12px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
border-radius: 8px;
}
.timeline-content {
.empty-log {
padding: 14px;
color: #8a94a6;
font-size: 13px;
text-align: center;
}
.compact-timeline {
display: grid;
gap: 8px;
}
.timeline-row {
position: relative;
display: grid;
grid-template-columns: 150px 92px minmax(0, 1fr);
gap: 10px;
align-items: start;
padding: 10px 12px 10px 22px;
border: 1px solid #eef1f5;
border-radius: 6px;
background: #fbfcfe;
}
.timeline-dot {
position: absolute;
left: 10px;
top: 15px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #ff6a00;
}
.timeline-time {
color: #8a94a6;
font-size: 12px;
line-height: 1.5;
}
.timeline-title {
font-size: 15px;
font-size: 13px;
font-weight: 600;
color: #1f2937;
line-height: 1.5;
}
.timeline-body {
font-size: 14px;
margin: 0;
font-size: 13px;
color: #64748b;
line-height: 1.6;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
}
.card-section {
frontend/src/features/orders/components/OrderResourceUsageEditor.vue
+197 -60
View File
@@ -161,14 +161,15 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event:
</section>
<div v-else class="form-section checkout-form-section">
<div class="section-header">
<h2>发起结账</h2>
<div class="section-header compact">
<h2>当前待办：发起结账</h2>
<span>使用完毕后填写租后状态和消耗明细</span>
</div>
<div class="form-card">
<div class="form-card checkout-task-card">
<el-input
:model-value="props.checkoutForm.content"
type="textarea"
:rows="4"
:rows="3"
placeholder="填写结账说明、租后资产状态或注意事项"
@update:model-value="updateCheckoutForm({ content: String($event) })"
/>
@@ -177,7 +178,9 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event:
<strong>额外消耗品</strong>
<span class="amount-highlight">已用金额：¥{{ money(props.resourceChargeAmount) }}</span>
</div>
<el-empty v-if="props.resources.length === 0" description="订单快照中暂无额外消耗品" />
<div v-if="props.resources.length === 0" class="checkout-resource-empty">
订单快照中暂无额外消耗品
</div>
<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>
@@ -194,36 +197,52 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', 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-number-grid">
<div class="checkout-number-card coin">
<div class="checkout-number-copy">
<div class="checkout-number-title">
<strong>哈夫币消耗</strong>
<span>默认全部使用完成</span>
</div>
<p>
快照 {{ quantity(props.snapshotHafCoinM) }}M，预计剩余
{{ quantity(props.remainingHafCoinM) }}M
</p>
</div>
<div class="checkout-number-control">
<el-input-number
:model-value="props.checkoutForm.coin_consumed_m"
class="checkout-number-input"
:min="0"
:max="props.snapshotHafCoinM"
:precision="2"
controls-position="right"
@update:model-value="updateCheckoutForm({ coin_consumed_m: Number($event) || 0 })"
/>
<span>M</span>
</div>
</div>
<div class="checkout-number-card deposit">
<div class="checkout-number-copy">
<div class="checkout-number-title">
<strong>其他押金赔付</strong>
<span>仅押金扣除项</span>
</div>
<p>封禁、违规、资产损坏等需要从押金赔付的费用，不含额外消耗品。</p>
</div>
<div class="checkout-number-control">
<el-input-number
:model-value="props.checkoutForm.otherAmountYuan"
class="checkout-number-input"
:min="0"
:precision="0"
controls-position="right"
@update:model-value="updateCheckoutForm({ otherAmountYuan: Number($event) || 0 })"
/>
<span>元</span>
</div>
</div>
</div>
<div class="checkout-deduct-preview">
<div>
<span>额外消耗品已用</span>
@@ -239,12 +258,12 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event:
<el-input
:model-value="props.checkoutForm.evidenceText"
type="textarea"
:rows="3"
:rows="2"
placeholder="结账证据链接，一行一个。可填写截图地址或备注链接"
@update:model-value="updateCheckoutForm({ evidenceText: String($event) })"
/>
<el-button type="primary" size="large" :loading="props.returning" @click="emit('submit')">
发起结账
提交结账
</el-button>
</div>
</div>
@@ -252,18 +271,23 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event:
<style scoped>
.form-section {
margin-bottom: 32px;
margin-bottom: 20px;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
margin-bottom: 10px;
}
.section-header.compact span {
color: #64748b;
font-size: 12px;
}
.section-header h2 {
font-size: 20px;
font-size: 18px;
font-weight: 700;
color: #1f2937;
margin: 0;
@@ -271,17 +295,22 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event:
.form-card {
display: grid;
gap: 16px;
padding: 24px;
gap: 12px;
padding: 16px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
border-radius: 8px;
}
.checkout-task-card {
border-color: #bfdbfe;
background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
}
.checkout-resource-panel {
display: grid;
gap: 12px;
padding: 16px;
gap: 10px;
padding: 12px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
@@ -290,10 +319,10 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event:
.checkout-resource-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
gap: 10px;
align-items: center;
padding-bottom: 12px;
border-bottom: 2px solid #e5e7eb;
padding-bottom: 10px;
border-bottom: 1px solid #e5e7eb;
}
.checkout-resource-head strong {
@@ -304,15 +333,25 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event:
.amount-highlight {
color: #ff6a00;
font-weight: 700;
font-size: 14px;
font-size: 13px;
}
.checkout-resource-empty {
padding: 12px;
border: 1px dashed #d8dee8;
border-radius: 6px;
background: #ffffff;
color: #8a94a6;
font-size: 13px;
text-align: center;
}
.checkout-resource-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
gap: 10px;
align-items: center;
padding: 12px;
padding: 10px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 6px;
@@ -334,17 +373,102 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event:
}
.checkout-resource-amount {
min-width: 80px;
min-width: 72px;
text-align: right;
color: #ff6a00;
font-weight: 700;
font-size: 16px;
font-size: 15px;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px;
}
.checkout-number-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.checkout-number-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
min-height: 106px;
padding: 14px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #ffffff;
}
.checkout-number-card.coin {
border-color: #bfdbfe;
background: #f8fbff;
}
.checkout-number-card.deposit {
border-color: #fed7aa;
background: #fffaf3;
}
.checkout-number-copy {
display: grid;
gap: 8px;
min-width: 0;
}
.checkout-number-title {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.checkout-number-title strong {
color: #1f2937;
font-size: 14px;
font-weight: 800;
}
.checkout-number-title span {
padding: 2px 8px;
color: #2563eb;
font-size: 12px;
font-weight: 700;
background: #dbeafe;
border-radius: 999px;
}
.checkout-number-card.deposit .checkout-number-title span {
color: #c2410c;
background: #ffedd5;
}
.checkout-number-copy p {
margin: 0;
color: #64748b;
font-size: 12px;
line-height: 1.5;
}
.checkout-number-control {
display: grid;
grid-template-columns: 170px 24px;
gap: 8px;
align-items: center;
}
.checkout-number-input {
width: 170px;
}
.checkout-number-control span {
color: #475569;
font-size: 13px;
font-weight: 700;
}
.field-hint {
@@ -357,7 +481,7 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event:
.checkout-deduct-preview,
.checkout-fee-preview {
display: grid;
gap: 12px;
gap: 10px;
}
.checkout-deduct-preview {
@@ -367,8 +491,8 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event:
.checkout-deduct-preview div,
.checkout-fee-preview div {
display: grid;
gap: 6px;
padding: 12px;
gap: 4px;
padding: 10px 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #f9fafb;
@@ -377,14 +501,14 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event:
.checkout-deduct-preview span,
.checkout-fee-preview span {
color: #4b5563;
font-size: 13px;
font-size: 12px;
font-weight: 700;
}
.checkout-deduct-preview strong,
.checkout-fee-preview strong {
color: #ff6a00;
font-size: 18px;
font-size: 16px;
font-weight: 800;
}
@@ -543,5 +667,18 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event:
.checkout-deduct-preview {
grid-template-columns: 1fr;
}
.checkout-number-grid,
.checkout-number-card {
grid-template-columns: 1fr;
}
.checkout-number-control {
grid-template-columns: minmax(0, 1fr) 24px;
}
.checkout-number-input {
width: 100%;
}
}
</style>