Browse Source

fix: 统计详情弹窗改为3列网格布局,与列表统一

将详情弹窗从单列垂直布局改为三列网格布局,与列表项的3列2行排版保持一致。

Co-Authored-By: Claude <noreply@anthropic.com>
skyline 1 tháng trước cách đây
mục cha
commit
27d0107946
1 tập tin đã thay đổi với 70 bổ sung63 xóa
  1. 70 63
      admin-h5/src/pages/statistics/index.vue

+ 70 - 63
admin-h5/src/pages/statistics/index.vue

@@ -143,61 +143,63 @@
           </view>
         </view>
         <view class="detail-content" v-if="detailItem">
-          <view class="detail-row">
-            <text class="d-label">{{ activeTab === 0 ? '日期' : '月份' }}</text>
-            <text class="d-value">{{ activeTab === 0 ? detailItem.statDate : detailItem.statMonth }}</text>
-          </view>
-          <view class="detail-row">
-            <text class="d-label">站点名称</text>
-            <text class="d-value">{{ detailItem.stationName || '-' }}</text>
-          </view>
-          <view class="detail-row">
-            <text class="d-label">总收入</text>
-            <text class="d-value amount">¥{{ formatAmount(detailItem.totalIncome) }}</text>
-          </view>
-          <view class="detail-row">
-            <text class="d-label">退款金额</text>
-            <text class="d-value">¥{{ formatAmount(detailItem.totalRefund) }}</text>
-          </view>
-          <view class="detail-row">
-            <text class="d-label">跨店收入</text>
-            <text class="d-value">¥{{ formatAmount(detailItem.crossIncome) }}</text>
-          </view>
-          <view class="detail-row">
-            <text class="d-label">跨店支出</text>
-            <text class="d-value">¥{{ formatAmount(detailItem.crossExpend) }}</text>
-          </view>
-          <view class="detail-row">
-            <text class="d-label">消费金额</text>
-            <text class="d-value">¥{{ formatAmount(detailItem.consumption) }}</text>
-          </view>
-          <view class="detail-row" v-if="activeTab === 1 && detailItem.platformFee !== undefined">
-            <text class="d-label">平台服务费</text>
-            <text class="d-value">¥{{ formatAmount(detailItem.platformFee) }}</text>
-          </view>
-          <view class="detail-row">
-            <text class="d-label">充值笔数</text>
-            <text class="d-value">{{ detailItem.rechargeCount || 0 }}</text>
-          </view>
-          <view class="detail-row">
-            <text class="d-label">退款笔数</text>
-            <text class="d-value">{{ detailItem.refundCount || 0 }}</text>
-          </view>
-          <view class="detail-row">
-            <text class="d-label">注册人数</text>
-            <text class="d-value">{{ detailItem.registrations || 0 }}</text>
-          </view>
-          <view class="detail-row">
-            <text class="d-label">活跃用户数</text>
-            <text class="d-value">{{ detailItem.activeUserCount || 0 }}</text>
-          </view>
-          <view class="detail-row">
-            <text class="d-label">订单数量</text>
-            <text class="d-value">{{ detailItem.ordersCount || 0 }}</text>
-          </view>
-          <view class="detail-row" v-if="detailItem.createTime">
-            <text class="d-label">创建时间</text>
-            <text class="d-value">{{ formatTime(detailItem.createTime) }}</text>
+          <view class="detail-grid">
+            <view class="detail-cell">
+              <text class="d-label">{{ activeTab === 0 ? '日期' : '月份' }}</text>
+              <text class="d-value">{{ activeTab === 0 ? detailItem.statDate : detailItem.statMonth }}</text>
+            </view>
+            <view class="detail-cell">
+              <text class="d-label">站点名称</text>
+              <text class="d-value">{{ detailItem.stationName || '-' }}</text>
+            </view>
+            <view class="detail-cell">
+              <text class="d-label">总收入</text>
+              <text class="d-value amount">¥{{ formatAmount(detailItem.totalIncome) }}</text>
+            </view>
+            <view class="detail-cell">
+              <text class="d-label">退款金额</text>
+              <text class="d-value">¥{{ formatAmount(detailItem.totalRefund) }}</text>
+            </view>
+            <view class="detail-cell">
+              <text class="d-label">跨店收入</text>
+              <text class="d-value">¥{{ formatAmount(detailItem.crossIncome) }}</text>
+            </view>
+            <view class="detail-cell">
+              <text class="d-label">跨店支出</text>
+              <text class="d-value">¥{{ formatAmount(detailItem.crossExpend) }}</text>
+            </view>
+            <view class="detail-cell">
+              <text class="d-label">消费金额</text>
+              <text class="d-value">¥{{ formatAmount(detailItem.consumption) }}</text>
+            </view>
+            <view class="detail-cell" v-if="activeTab === 1 && detailItem.platformFee !== undefined">
+              <text class="d-label">平台服务费</text>
+              <text class="d-value">¥{{ formatAmount(detailItem.platformFee) }}</text>
+            </view>
+            <view class="detail-cell">
+              <text class="d-label">充值笔数</text>
+              <text class="d-value">{{ detailItem.rechargeCount || 0 }}</text>
+            </view>
+            <view class="detail-cell">
+              <text class="d-label">退款笔数</text>
+              <text class="d-value">{{ detailItem.refundCount || 0 }}</text>
+            </view>
+            <view class="detail-cell">
+              <text class="d-label">注册人数</text>
+              <text class="d-value">{{ detailItem.registrations || 0 }}</text>
+            </view>
+            <view class="detail-cell">
+              <text class="d-label">活跃用户数</text>
+              <text class="d-value">{{ detailItem.activeUserCount || 0 }}</text>
+            </view>
+            <view class="detail-cell">
+              <text class="d-label">订单数量</text>
+              <text class="d-value">{{ detailItem.ordersCount || 0 }}</text>
+            </view>
+            <view class="detail-cell" v-if="detailItem.createTime">
+              <text class="d-label">创建时间</text>
+              <text class="d-value">{{ formatTime(detailItem.createTime) }}</text>
+            </view>
           </view>
         </view>
       </view>
@@ -677,22 +679,27 @@ onMounted(async () => {
 .detail-close {
   padding: 10rpx;
 }
-.detail-row {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 16rpx 0;
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16rpx 12rpx;
+}
+.detail-cell {
+  text-align: center;
+  padding: 12rpx 0;
   border-bottom: 1rpx solid #F5F5F5;
-  gap: 4rpx;
 }
 .d-label {
   font-size: 24rpx;
   color: #999999;
+  display: block;
+  margin-bottom: 4rpx;
 }
 .d-value {
-  font-size: 28rpx;
+  font-size: 26rpx;
   color: #1A1A1A;
-  font-weight: 600;
+  font-weight: 500;
+  display: block;
 }
 .d-value.amount {
   color: #C6171E;