CC/ruoyi-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
van
2026-04-07 17:40:44 +08:00
parent 8addb6080c
commit 4c627e7f26
1 changed files with 179 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
src/views/system/jdorder/orderList.vue
View File

@@ -168,7 +168,7 @@
<!-- 表格区域 -->
<template #table>
<div class="jd-order-table-page">
<div class="jd-order-table-page" :class="{ 'jd-order-table-page--mobile': isMobile }">
<!-- 移动端卡片列表 -->
<div v-if="isMobile" class="mobile-order-list" v-loading="loading">
<div class="profit-summary-bar mobile-profit-summary">
@@ -179,20 +179,27 @@
v-for="row in list"
:key="row.id"
class="mobile-order-card"
:class="{ 'is-expanded': mobileExpandedOrderId === row.id }"
>
<!-- 卡片头部 -->
<!-- 卡片头部：点击左侧展开/收起详情 -->
<div class="card-header">
<div class="header-left">
<div class="order-id">{{ row.remark || row.orderId }}</div>
<el-tag
v-if="row.orderStatus != null"
:type="getOrderStatusType(row.orderStatus)"
size="mini"
style="margin-left: 8px;">
{{ getOrderStatusText(row.orderStatus) }}
</el-tag>
<div class="header-left header-left--tappable" @click="toggleMobileOrderExpand(row)">
<i
class="mobile-card-chevron el-icon-arrow-right"
:class="{ 'is-open': mobileExpandedOrderId === row.id }"
aria-hidden="true"
/>
<div class="header-title-block">
<div class="order-id">{{ row.remark || row.orderId }}</div>
<el-tag
v-if="row.orderStatus != null"
:type="getOrderStatusType(row.orderStatus)"
size="mini">
{{ getOrderStatusText(row.orderStatus) }}
</el-tag>
</div>
</div>
<div class="header-right">
<div class="header-right" @click.stop>
<el-dropdown
trigger="click"
placement="left"
@@ -203,7 +210,8 @@
size="mini"
icon="el-icon-more"
circle
class="mobile-action-btn">
class="mobile-action-btn"
@click.stop>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
@@ -275,8 +283,16 @@
</div>
</div>
<!-- 卡片内容 -->
<div class="card-content">
<div
v-show="mobileExpandedOrderId !== row.id"
class="card-summary-compact"
@click="toggleMobileOrderExpand(row)"
>
<span class="card-summary-line">{{ row.modelNumber || '—' }} · 付{{ toYuan(row.paymentAmount) }} · 返{{ toYuan(row.rebateAmount) }}<template v-if="row.distributionMark"> · {{ row.distributionMark }}</template></span>
</div>
<el-collapse-transition>
<div v-show="mobileExpandedOrderId === row.id" class="card-content">
<div class="field-row">
<span class="field-label">订单号</span>
<span class="field-value">{{ row.orderId }}</span>
@@ -305,27 +321,31 @@
<span class="field-label">后返金额</span>
<span class="field-value amount">{{ toYuan(row.rebateAmount) }}</span>
</div>
<div class="field-row" v-if="row.distributionMark === 'F'">
<div class="field-row field-row--pricing" v-if="row.distributionMark === 'F'">
<span class="field-label">售价渠道</span>
<span class="field-value">
<el-select v-model="row.sellingPriceType" placeholder="渠道" size="mini" clearable style="width: 120px;" @change="onOrderSellingPriceTypeChange(row)">
<span class="field-value field-value--pricing-control">
<el-select v-model="row.sellingPriceType" placeholder="渠道" size="small" clearable class="mobile-pricing-select" @change="onOrderSellingPriceTypeChange(row)">
<el-option label="直款" value="direct" />
<el-option label="闲鱼" value="xianyu" />
</el-select>
</span>
</div>
<div class="field-row" v-if="row.distributionMark === 'F'">
<div class="field-row field-row--pricing" v-if="row.distributionMark === 'F'">
<span class="field-label">售价</span>
<span class="field-value">
<el-input-number v-model="row.sellingPrice" :min="0" :step="1" :precision="2" size="mini" controls-position="right" style="width: 152px;" @change="onOrderSellingPriceChange(row)" />
<el-tag v-if="row.sellingPriceManual === 1" type="info" size="mini" style="margin-left: 6px;">手填</el-tag>
<span class="field-value field-value--pricing-control">
<div class="mobile-pricing-num-wrap">
<el-input-number v-model="row.sellingPrice" :min="0" :step="1" :precision="2" size="small" controls-position="right" class="mobile-pricing-input" @change="onOrderSellingPriceChange(row)" />
<el-tag v-if="row.sellingPriceManual === 1" type="info" size="mini" class="mobile-pricing-tag">手填</el-tag>
</div>
</span>
</div>
<div class="field-row" v-if="row.distributionMark === 'F' || row.distributionMark === 'H-TF'">
<div class="field-row field-row--pricing" v-if="row.distributionMark === 'F' || row.distributionMark === 'H-TF'">
<span class="field-label">利润</span>
<span class="field-value">
<el-input-number v-model="row.profit" :step="0.01" :precision="2" size="mini" controls-position="right" style="width: 120px;" @change="onOrderProfitChange(row)" />
<el-tag v-if="row.profitManual === 1" type="warning" size="mini" style="margin-left: 6px;">手填</el-tag>
<span class="field-value field-value--pricing-control">
<div class="mobile-pricing-num-wrap">
<el-input-number v-model="row.profit" :step="0.01" :precision="2" size="small" controls-position="right" class="mobile-pricing-input" @change="onOrderProfitChange(row)" />
<el-tag v-if="row.profitManual === 1" type="warning" size="mini" class="mobile-pricing-tag">手填</el-tag>
</div>
</span>
</div>
<div class="field-row" v-else-if="row.profit != null && row.profit !== ''">
@@ -417,6 +437,7 @@
<span class="field-value">{{ row.status }}</span>
</div>
</div>
</el-collapse-transition>
</div>
<el-empty v-if="!loading && list.length === 0" description="暂无数据" :image-size="100" />
@@ -1153,7 +1174,9 @@ export default {
// 选中的行数据
selectedRows: [],
// 列表加载后自动同步利润（防快速翻页乱序）
syncAutoProfitSeq: 0
syncAutoProfitSeq: 0,
/** 移动端卡片：当前展开的订单 id（null 表示全部收起，同时只展开一条） */
mobileExpandedOrderId: null
}
},
computed: {
@@ -1320,6 +1343,13 @@ export default {
const list = (res.rows || res.data || [])
this.list = list.map(item => this.normalizeOrderListItem(item))
this.total = res.total || 0
if (this.isMobile) {
this.mobileExpandedOrderId = null
}
},
toggleMobileOrderExpand(row) {
if (!row || row.id == null) return
this.mobileExpandedOrderId = this.mobileExpandedOrderId === row.id ? null : row.id
},
/** 本页数据与库中规则对齐：仅未锁定利润的订单可能写库；有更新则静默拉一次列表（不再递归同步） */
runSyncAutoProfitAfterListLoad() {
@@ -3391,6 +3421,22 @@ export default {
flex-shrink: 0;
}
/* 移动端：表格区占满中间高度，列表在内部滚动，避免只能看到极少卡片 */
.jd-order-table-page--mobile {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.jd-order-table-page--mobile .mobile-order-list {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* 移动端卡片列表样式 */
.mobile-order-list {
padding: 12px;
@@ -3423,19 +3469,42 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 12px;
margin-bottom: 0;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}
.mobile-order-card .header-left {
.mobile-order-card .header-left.header-left--tappable {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.mobile-order-card .header-title-block {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.mobile-order-card .mobile-card-chevron {
flex-shrink: 0;
font-size: 15px;
color: #909399;
transition: transform 0.2s ease;
}
.mobile-order-card .mobile-card-chevron.is-open {
transform: rotate(90deg);
}
.mobile-order-card .order-id {
font-size: 16px;
font-weight: 600;
@@ -3447,12 +3516,35 @@ export default {
margin-left: 12px;
}
.mobile-order-card .card-summary-compact {
padding: 10px 0 2px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.mobile-order-card .card-summary-line {
display: block;
font-size: 12px;
color: #64748b;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-order-card .card-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-order-card.is-expanded .card-content {
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
}
.mobile-order-card .field-row {
display: flex;
justify-content: space-between;
@@ -3485,6 +3577,62 @@ export default {
color: #e6a23c;
}
/* 移动端卡片：售价渠道 / 售价 / 利润 纵向全宽，便于点选 */
.mobile-order-card .field-row--pricing {
flex-direction: column;
align-items: stretch;
gap: 8px;
min-height: 0;
padding: 4px 0 12px;
}
.mobile-order-card .field-row--pricing .field-label {
margin-right: 0;
min-width: 0;
text-align: left;
font-weight: 500;
color: #606266;
}
.mobile-order-card .field-row--pricing .field-value--pricing-control {
text-align: left;
flex: none;
width: 100%;
}
.mobile-order-card .mobile-pricing-select {
width: 100%;
}
.mobile-order-card .mobile-pricing-select ::v-deep .el-input__inner {
height: 38px;
line-height: 38px;
font-size: 15px;
}
.mobile-order-card .mobile-pricing-num-wrap {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.mobile-order-card .mobile-pricing-num-wrap ::v-deep .mobile-pricing-input.el-input-number {
flex: 1;
min-width: 0;
width: auto !important;
}
.mobile-order-card .mobile-pricing-num-wrap ::v-deep .mobile-pricing-input .el-input__inner {
height: 38px;
line-height: 38px;
font-size: 15px;
}
.mobile-order-card .mobile-pricing-tag {
flex-shrink: 0;
}
.mobile-order-card .refund-status .field-value {
display: flex;
flex-wrap: wrap;