From b01f86dddbefbd03da6b6fa478ddecc02aabd203 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期五, 03 四月 2026 13:49:44 +0800
Subject: [PATCH] refactor: 优化销售账户页面的明细展示和交互逻辑
---
src/pages/sales/salesAccount/out.vue | 102 +++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 95 insertions(+), 7 deletions(-)
diff --git a/src/pages/sales/salesAccount/out.vue b/src/pages/sales/salesAccount/out.vue
index fe7a8ba..74affb7 100644
--- a/src/pages/sales/salesAccount/out.vue
+++ b/src/pages/sales/salesAccount/out.vue
@@ -22,20 +22,45 @@
<view class="detail-list"
v-if="tableData.length > 0">
<view v-for="(item, index) in tableData"
- :key="index"
+ :key="rowKey(item, index)"
class="detail-item">
- <view class="item-header">
+ <view class="item-header"
+ @click="toggleRow(item, index)">
<view class="item-left">
<view class="record-icon">
<up-icon name="file-text"
size="16"
color="#ffffff"></up-icon>
</view>
- <text class="item-index">{{ item.productCategory }}</text>
+ <view class="item-title-wrap">
+ <text class="item-index">{{ item.productCategory || "浜у搧" }}</text>
+ </view>
+ </view>
+ <view class="item-header-right">
+ <text class="toggle-text">{{ rowExpanded(item, index) ? "鏀惰捣" : "灞曞紑" }}</text>
+ <up-icon :name="rowExpanded(item, index) ? 'arrow-up' : 'arrow-down'"
+ size="16"
+ color="#999999"></up-icon>
</view>
</view>
<up-divider></up-divider>
- <view class="item-details">
+ <view v-if="!rowExpanded(item, index)"
+ class="item-preview">
+ <view class="detail-row">
+ <text class="detail-label">妤煎眰缂栧彿</text>
+ <text class="detail-value">{{ dv(item.floorCode) }}</text>
+ </view>
+ <view class="detail-row">
+ <text class="detail-label">瑙勬牸鍨嬪彿</text>
+ <text class="detail-value">{{ dv(item.specificationModel) }}</text>
+ </view>
+ <view class="detail-row">
+ <text class="detail-label">鏁伴噺</text>
+ <text class="detail-value">{{ dv(item.quantity) }}</text>
+ </view>
+ </view>
+ <view v-else
+ class="item-details">
<view class="detail-row">
<text class="detail-label">妤煎眰缂栧彿</text>
<text class="detail-value">{{ dv(item.floorCode) }}</text>
@@ -148,8 +173,27 @@
// 琛ㄦ牸鏁版嵁
const tableData = ref([]);
- const dv = v =>
- v === null || v === undefined || v === "" ? "-" : v;
+ /** 姣忔潯鏄庣粏鎶樺彔鐘舵�侊細浠呬竴鏉℃椂榛樿灞曞紑锛屽鏉℃椂榛樿鏀惰捣 */
+ const expandedRows = ref({});
+
+ const rowKey = (item, index) =>
+ item?.id != null && item?.id !== "" ? `id-${item.id}` : `idx-${index}`;
+
+ const rowExpanded = (item, index) => !!expandedRows.value[rowKey(item, index)];
+
+ const toggleRow = (item, index) => {
+ const k = rowKey(item, index);
+ expandedRows.value = {
+ ...expandedRows.value,
+ [k]: !expandedRows.value[k],
+ };
+ };
+
+ const dv = v => {
+ if (v === null || v === undefined || v === "") return "-";
+ if (typeof v === "boolean") return v ? "鏄�" : "鍚�";
+ return v;
+ };
// 杩斿洖涓婁竴椤�
const goBack = () => {
@@ -173,7 +217,14 @@
type: 1,
})
.then(res => {
- tableData.value = res.data;
+ const list = res.data || res.records || [];
+ tableData.value = list;
+ if (list.length === 1) {
+ const k = rowKey(list[0], 0);
+ expandedRows.value = { [k]: true };
+ } else {
+ expandedRows.value = {};
+ }
closeToast();
})
.catch(() => {
@@ -276,12 +327,49 @@
display: flex;
align-items: center;
justify-content: space-between;
+ gap: 12px;
+ }
+
+ .item-title-wrap {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-width: 0;
+ }
+
+ .item-header-right {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ flex-shrink: 0;
+ }
+
+ .toggle-text {
+ font-size: 12px;
+ color: #2979ff;
}
.item-left {
display: flex;
align-items: center;
gap: 8px;
+ min-width: 0;
+ flex: 1;
+ }
+
+ .item-preview {
+ padding: 12px 0 16px;
+ }
+
+ .preview-tip {
+ margin-top: 8px;
+ margin-bottom: 0 !important;
+ justify-content: center;
+ }
+
+ .preview-tip-text {
+ font-size: 11px;
+ color: #bbb;
}
.record-icon {
--
Gitblit v1.9.3