# 应结账款页面重构方案

## 需求概述

1. 将商户卡片中的"批量消账"按钮改为"消账"
2. 移除每个订单的"申请消账"按钮
3. 点击"消账"按钮后，进入选择模式，可以选择该商户下的多个订单
4. 选择订单后，按钮文本变为"进行消账(X)"，X为选择的订单数量
5. 添加全选/取消全选功能
6. 显示已选订单的汇总金额
7. 限制只能选择未结和逾期状态的订单
8. 点击"进行消账"后，执行批量消账逻辑

## 数据结构设计

### 新增状态变量

```typescript
// 选择模式状态
const selectionMode = ref<Record<string, boolean>>({}) // 记录每个商户是否处于选择模式
const selectedOrders = ref<Record<string, string[]>>({}) // 记录每个商户选中的订单ID列表
```

### 计算属性

```typescript
// 计算每个商户选中的订单数量
const selectedCount = computed(() => {
  return (merchantId: string) => selectedOrders.value[merchantId]?.length || 0
})

// 计算每个商户选中的订单总金额
const selectedAmount = computed(() => {
  return (merchantId: string) => {
    const group = groupedByMerchant.value.find(g => g.merchantId === merchantId)
    if (!group) return 0
    
    const selectedIds = selectedOrders.value[merchantId] || []
    return group.settlements
      .filter(item => selectedIds.includes(item.id))
      .reduce((sum, item) => sum + item.amount, 0)
  }
})

// 计算每个商户是否全选
const isAllSelected = computed(() => {
  return (merchantId: string) => {
    const group = groupedByMerchant.value.find(g => g.merchantId === merchantId)
    if (!group) return false
    
    const selectableOrders = group.settlements.filter(
      item => item.status === SettlementStatus.UNSETTLED || item.status === SettlementStatus.OVERDUE
    )
    const selectedIds = selectedOrders.value[merchantId] || []
    
    return selectableOrders.length > 0 && selectableOrders.every(item => selectedIds.includes(item.id))
  }
})
```

## UI 设计

### 1. 商户头部修改

```vue
<!-- 商户头部 -->
<view class="merchant-header">
  <!-- 原有商户信息保持不变 -->
  
  <!-- 头部操作区域 -->
  <view v-if="currentTab === 0" class="header-action">
    <!-- 非选择模式 -->
    <view v-if="!selectionMode[group.merchantId]" class="batch-btn-small" @click.stop="enterSelectionMode(group.merchantId)">
      <text class="i-carbon-checkmark-outline" />
      <text>消账</text>
    </view>
    
    <!-- 选择模式 -->
    <template v-else>
      <view class="selection-controls">
        <view class="select-all-btn" @click.stop="toggleSelectAll(group.merchantId)">
          <text class="i-carbon-checkmark-filled" v-if="isAllSelected(group.merchantId)" />
          <text class="i-carbon-checkmark-outline" v-else />
          <text>全选</text>
        </view>
        <view class="selected-info">
          <text>已选 {{ selectedCount(group.merchantId) }} 单</text>
          <text class="amount">¥{{ selectedAmount(group.merchantId).toFixed(2) }}</text>
        </view>
        <view 
          v-if="selectedCount(group.merchantId) > 0" 
          class="batch-btn-small active" 
          @click.stop="handleBatchWriteOff(group.merchantId)"
        >
          <text class="i-carbon-checkmark-outline" />
          <text>进行消账({{ selectedCount(group.merchantId) }})</text>
        </view>
        <view v-else class="cancel-btn" @click.stop="exitSelectionMode(group.merchantId)">
          <text>取消</text>
        </view>
      </view>
    </template>
  </view>
</view>
```

### 2. 订单列表修改

```vue
<!-- 订单列表 -->
<view class="order-list">
  <view 
    v-for="item in group.settlements" 
    :key="item.id" 
    class="order-item"
    :class="{ 
      'selection-mode': selectionMode[group.merchantId],
      'selected': selectedOrders[group.merchantId]?.includes(item.id),
      'disabled': item.status !== SettlementStatus.UNSETTLED && item.status !== SettlementStatus.OVERDUE
    }"
    @click="handleOrderClick(group.merchantId, item.id, item.status)"
  >
    <!-- 选择框 -->
    <view v-if="selectionMode[group.merchantId]" class="checkbox">
      <text class="i-carbon-checkmark-filled" v-if="selectedOrders[group.merchantId]?.includes(item.id)" />
      <text class="i-carbon-checkmark-outline" v-else />
    </view>
    
    <!-- 订单内容 -->
    <view class="order-content">
      <!-- 原有订单头部和内容保持不变 -->
      <!-- 移除订单操作区域 -->
    </view>
  </view>
</view>
```

## 功能实现

### 1. 进入选择模式

```typescript
function enterSelectionMode(merchantId: string) {
  selectionMode.value[merchantId] = true
  selectedOrders.value[merchantId] = []
}
```

### 2. 退出选择模式

```typescript
function exitSelectionMode(merchantId: string) {
  selectionMode.value[merchantId] = false
  selectedOrders.value[merchantId] = []
}
```

### 3. 处理订单点击

```typescript
function handleOrderClick(merchantId: string, orderId: string, status: SettlementStatus) {
  // 只有在选择模式下且订单状态为未结或逾期时才能选择
  if (!selectionMode.value[merchantId]) return
  if (status !== SettlementStatus.UNSETTLED && status !== SettlementStatus.OVERDUE) return
  
  const selected = selectedOrders.value[merchantId] || []
  const index = selected.indexOf(orderId)
  
  if (index > -1) {
    // 取消选择
    selected.splice(index, 1)
  } else {
    // 添加选择
    selected.push(orderId)
  }
  
  selectedOrders.value[merchantId] = selected
}
```

### 4. 全选/取消全选

```typescript
function toggleSelectAll(merchantId: string) {
  const group = groupedByMerchant.value.find(g => g.merchantId === merchantId)
  if (!group) return
  
  const selectableOrders = group.settlements.filter(
    item => item.status === SettlementStatus.UNSETTLED || item.status === SettlementStatus.OVERDUE
  )
  
  if (isAllSelected.value(merchantId)) {
    // 取消全选
    selectedOrders.value[merchantId] = []
  } else {
    // 全选
    selectedOrders.value[merchantId] = selectableOrders.map(item => item.id)
  }
}
```

### 5. 批量消账

```typescript
function handleBatchWriteOff(merchantId: string) {
  const selectedIds = selectedOrders.value[merchantId] || []
  if (selectedIds.length === 0) return
  
  const group = groupedByMerchant.value.find(g => g.merchantId === merchantId)
  if (!group) return
  
  // 获取选中的订单
  const selectedSettlements = group.settlements.filter(item => selectedIds.includes(item.id))
  
  currentSettlement.value = null
  currentMerchantSettlements.value = selectedSettlements
  isBatchMode.value = true
  writeOffVisible.value = true
  
  // 退出选择模式
  exitSelectionMode(merchantId)
}
```

## 样式设计

### 1. 选择模式样式

```scss
.order-item {
  &.selection-mode {
    display: flex;
    align-items: flex-start;
    gap: 20rpx;
    padding: 24rpx;
    
    .checkbox {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      border: 2rpx solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10rpx;
      flex-shrink: 0;
      
      .i-carbon-checkmark-outline {
        font-size: 24rpx;
        color: #999;
      }
      
      .i-carbon-checkmark-filled {
        font-size: 24rpx;
        color: $primary;
      }
    }
    
    &.selected .checkbox {
      background: rgba($primary, 0.1);
      border-color: $primary;
    }
    
    &.disabled {
      opacity: 0.5;
      pointer-events: none;
    }
    
    .order-content {
      flex: 1;
    }
  }
}
```

### 2. 选择控制区域样式

```scss
.selection-controls {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  align-items: flex-end;
  
  .select-all-btn {
    display: flex;
    align-items: center;
    gap: 6rpx;
    padding: 8rpx 16rpx;
    background: rgba($primary, 0.05);
    border-radius: 20rpx;
    color: $primary;
    font-size: 22rpx;
    
    .i-carbon-checkmark-outline,
    .i-carbon-checkmark-filled {
      font-size: 24rpx;
    }
  }
  
  .selected-info {
    text-align: right;
    font-size: 22rpx;
    
    .amount {
      display: block;
      font-size: 26rpx;
      font-weight: 600;
      color: $danger;
    }
  }
  
  .cancel-btn {
    padding: 8rpx 20rpx;
    background: rgba($text-2, 0.1);
    border-radius: 20rpx;
    color: $text-2;
    font-size: 24rpx;
  }
  
  .batch-btn-small.active {
    background: $primary;
    color: white;
  }
}
```

## 交互流程

1. 用户点击商户头部的"消账"按钮
2. 进入选择模式，显示选择框和全选按钮
3. 用户可以选择/取消选择符合条件的订单
4. 选择订单后，显示已选数量和汇总金额
5. 点击"进行消账"按钮，打开消账弹窗
6. 消账完成后退出选择模式，刷新列表

## 注意事项

1. 只有未结和逾期状态的订单才能被选择
2. 选择模式下，其他商户的卡片保持正常状态
3. 消账弹窗需要支持批量处理多个订单
4. 需要处理选择状态的响应式更新