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

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

@@ -168,7 +168,7 @@
<!-- 表格区域 --> <!-- 表格区域 -->
<template #table> <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 v-if="isMobile" class="mobile-order-list" v-loading="loading">
<div class="profit-summary-bar mobile-profit-summary"> <div class="profit-summary-bar mobile-profit-summary">
@@ -179,20 +179,27 @@
v-for="row in list" v-for="row in list"
:key="row.id" :key="row.id"
class="mobile-order-card" class="mobile-order-card"
:class="{ 'is-expanded': mobileExpandedOrderId === row.id }"
> >
<!-- 卡片头部 --> <!-- 卡片头部：点击左侧展开/收起详情 -->
<div class="card-header"> <div class="card-header">
<div class="header-left"> <div class="header-left header-left--tappable" @click="toggleMobileOrderExpand(row)">
<div class="order-id">{{ row.remark || row.orderId }}</div> <i
<el-tag class="mobile-card-chevron el-icon-arrow-right"
v-if="row.orderStatus != null" :class="{ 'is-open': mobileExpandedOrderId === row.id }"
:type="getOrderStatusType(row.orderStatus)" aria-hidden="true"
size="mini" />
style="margin-left: 8px;"> <div class="header-title-block">
{{ getOrderStatusText(row.orderStatus) }} <div class="order-id">{{ row.remark || row.orderId }}</div>
</el-tag> <el-tag
v-if="row.orderStatus != null"
:type="getOrderStatusType(row.orderStatus)"
size="mini">
{{ getOrderStatusText(row.orderStatus) }}
</el-tag>
</div>
</div> </div>
<div class="header-right"> <div class="header-right" @click.stop>
<el-dropdown <el-dropdown
trigger="click" trigger="click"
placement="left" placement="left"
@@ -203,7 +210,8 @@
size="mini" size="mini"
icon="el-icon-more" icon="el-icon-more"
circle circle
class="mobile-action-btn"> class="mobile-action-btn"
@click.stop>
</el-button> </el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item <el-dropdown-item
@@ -274,9 +282,17 @@
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<!-- 卡片内容 --> <div
<div class="card-content"> 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"> <div class="field-row">
<span class="field-label">订单号</span> <span class="field-label">订单号</span>
<span class="field-value">{{ row.orderId }}</span> <span class="field-value">{{ row.orderId }}</span>
@@ -305,27 +321,31 @@
<span class="field-label">后返金额</span> <span class="field-label">后返金额</span>
<span class="field-value amount">{{ toYuan(row.rebateAmount) }}</span> <span class="field-value amount">{{ toYuan(row.rebateAmount) }}</span>
</div> </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-label">售价渠道</span>
<span class="field-value"> <span class="field-value field-value--pricing-control">
<el-select v-model="row.sellingPriceType" placeholder="渠道" size="mini" clearable style="width: 120px;" @change="onOrderSellingPriceTypeChange(row)"> <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="direct" />
<el-option label="闲鱼" value="xianyu" /> <el-option label="闲鱼" value="xianyu" />
</el-select> </el-select>
</span> </span>
</div> </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-label">售价</span>
<span class="field-value"> <span class="field-value field-value--pricing-control">
<el-input-number v-model="row.sellingPrice" :min="0" :step="1" :precision="2" size="mini" controls-position="right" style="width: 152px;" @change="onOrderSellingPriceChange(row)" /> <div class="mobile-pricing-num-wrap">
<el-tag v-if="row.sellingPriceManual === 1" type="info" size="mini" style="margin-left: 6px;">手填</el-tag> <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> </span>
</div> </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-label">利润</span>
<span class="field-value"> <span class="field-value field-value--pricing-control">
<el-input-number v-model="row.profit" :step="0.01" :precision="2" size="mini" controls-position="right" style="width: 120px;" @change="onOrderProfitChange(row)" /> <div class="mobile-pricing-num-wrap">
<el-tag v-if="row.profitManual === 1" type="warning" size="mini" style="margin-left: 6px;">手填</el-tag> <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> </span>
</div> </div>
<div class="field-row" v-else-if="row.profit != null && row.profit !== ''"> <div class="field-row" v-else-if="row.profit != null && row.profit !== ''">
@@ -417,6 +437,7 @@
<span class="field-value">{{ row.status }}</span> <span class="field-value">{{ row.status }}</span>
</div> </div>
</div> </div>
</el-collapse-transition>
</div> </div>
<el-empty v-if="!loading && list.length === 0" description="暂无数据" :image-size="100" /> <el-empty v-if="!loading && list.length === 0" description="暂无数据" :image-size="100" />
@@ -1153,7 +1174,9 @@ export default {
// 选中的行数据 // 选中的行数据
selectedRows: [], selectedRows: [],
// 列表加载后自动同步利润（防快速翻页乱序） // 列表加载后自动同步利润（防快速翻页乱序）
syncAutoProfitSeq: 0 syncAutoProfitSeq: 0,
/** 移动端卡片：当前展开的订单 id（null 表示全部收起，同时只展开一条） */
mobileExpandedOrderId: null
} }
}, },
computed: { computed: {
@@ -1320,6 +1343,13 @@ export default {
const list = (res.rows || res.data || []) const list = (res.rows || res.data || [])
this.list = list.map(item => this.normalizeOrderListItem(item)) this.list = list.map(item => this.normalizeOrderListItem(item))
this.total = res.total || 0 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() { runSyncAutoProfitAfterListLoad() {
@@ -3391,6 +3421,22 @@ export default {
flex-shrink: 0; 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 { .mobile-order-list {
padding: 12px; padding: 12px;
@@ -3423,19 +3469,42 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 12px; margin-bottom: 0;
padding-bottom: 12px; padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
} }
.mobile-order-card .header-left { .mobile-order-card .header-left.header-left--tappable {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; 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; flex-wrap: wrap;
gap: 8px; 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 { .mobile-order-card .order-id {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
@@ -3447,12 +3516,35 @@ export default {
margin-left: 12px; 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 { .mobile-order-card .card-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; 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 { .mobile-order-card .field-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -3485,6 +3577,62 @@ export default {
color: #e6a23c; 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 { .mobile-order-card .refund-status .field-value {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;