jurong_circle_frontdesk/src/views/MyMatching.vue

<template>
  <div class="container">
    <div class="spacer"></div>
    
    <div class="main-content">
      <!-- 资金匹配部分 -->
      <div class="matching-section">
        <div class="section-title">
        <h3>货款匹配</h3>
        <div class="toggle-switch">
            <span class="toggle-label">开启大额匹配</span>
            <label class="switch">
            <input type="checkbox" v-model="matchingType" true-value="large" false-value="small">
            <span class="slider round"></span>
            </label>
        </div>
        </div>

        <!-- 小额匹配信息 -->
        <div v-if="matchingType === 'small'" class="matching-info">
          <div class="info-item">
            <span class="label">匹配总额:</span>
            <span class="value">¥5,000.00</span>
          </div>
          <div class="info-item">
            <span class="label">分配笔数:</span>
            <span class="value">3笔</span>
          </div>
          <div class="info-item">
            <span class="label">单笔范围:</span>
            <span class="value">¥1,000 - ¥5,000</span>
          </div>
          
          <button 
            @click="createOrder" 
            :disabled="creating"
            class="create-btn"
          >
            {{ creating ? '匹配中...' : '开始匹配' }}
          </button>
          
          <div class="tips">
            <p>• 系统将为您匹配3笔转账，总金额5000元</p>
            <p>• 优先匹配已完成进货的用户</p>
            <p>• 每笔金额随机分配，确保资金循环</p>
          </div>
        </div>

        <!-- 大额匹配信息 -->
        <div v-if="matchingType === 'large'" class="matching-info">
          <div class="info-item">
            <span class="label">自定义金额:</span>
            <div class="custom-amount-input">
              <el-input 
                v-model="customAmount" 
                type="number"
                :min="5000"
                :max="50000"
                step="100"
                placeholder="5000-50000"
              >
                <template #prepend>¥</template>
              </el-input>
            </div>
          </div>
          <div class="info-item">
            <span class="label">分配规则:</span>
            <span class="value">{{ getLargeMatchingRule() }}</span>
          </div>
          <div class="info-item">
            <span class="label">预计笔数:</span>
            <span class="value">{{ getLargeMatchingCount() }}笔</span>
          </div>
          
          <button 
            @click="createOrder" 
            :disabled="creating || !isValidCustomAmount"
            class="create-btn"
          >
            {{ creating ? '匹配中...' : '开始匹配' }}
          </button>
          
          <div class="tips">
            <p>• 金额范围：5000-50000元</p>
            <p>• 15000元以下：分成多笔随机金额</p>
            <p>• 15000元以上：随机分拆，每笔1000-8000元</p>
            <p>• 优先匹配已完成进货的用户</p>
          </div>
        </div>
      </div>

      <!-- 待处理分配 -->
    <div class="pending-section" v-if="pendingAllocations.length > 0">
      <h3>待处理分配</h3>
      <div class="allocation-list">
        <div 
          v-for="allocation in pendingAllocations" 
          :key="allocation.id"
          class="allocation-card"
        >
          <div class="allocation-info">
            <div class="allocation-header">
              <span class="order-id">订单 #{{ allocation.matching_order_id }}</span>
              <span class="cycle">第{{ allocation.cycle_number }}轮</span>
            </div>
            <div class="allocation-details">
              <p>转账给: <strong>{{ allocation.to_user_real_name }}</strong></p>
              <p>金额: <strong class="amount">¥{{ allocation.amount }}</strong></p>
              <p>总金额: ¥{{ allocation.total_amount }}</p>
              <p class="deadline-info">
                转账时效: 
                <span :class="['time-left', allocation.time_status]">
                  {{ allocation.time_left }}
                </span>
                <span class="deadline-time">({{ formatDeadline(allocation.deadline) }}前)</span>
              </p>
              <div v-if="!allocation.can_transfer" class="timeout-warning">
                <i class="el-icon-warning"></i>
                <span class="warning-text">{{ allocation.timeout_reason }}</span>
              </div>
            </div>
          </div>
          <div class="allocation-actions">
            <button 
              @click="confirmAllocation(allocation.id, allocation.amount)" 
              class="confirm-btn"
              :disabled="processing || !allocation.can_transfer"
              :title="!allocation.can_transfer ? allocation.timeout_reason : ''"
            >
              {{ allocation.can_transfer ? '确认转账' : '无法转账' }}
            </button>
          </div>
        </div>
      </div>
    </div>


      <!-- 我的匹配订单 -->
      <div class="orders-section">
        <div class="section-title">
        <h3>匹配订单</h3>
        <router-link to="/transfers">
            <span class="view-all">查看全部 ></span>
        </router-link>
        </div>
        
        <div class="orders-list">
          <div 
            v-for="order in matchingOrders" 
            :key="order.id"
            class="order-card"
            @click="viewOrderDetail(order.id)"
          >
            <div class="order-header">
              <span class="order-id">#{{ order.id }}</span>
              <span v-if="order.is_system_reverse" class="system-reverse-tag">系统反向匹配</span>
              <span :class="['status', order.status]">{{ getStatusText(order.status) }}</span>
            </div>
            <div class="order-info">
              <p>金额: ¥{{ order.amount }}</p>
              <p>发起人: {{ order.initiator_name }}</p>
              <p v-if="!order.is_system_reverse">轮次: {{ order.cycle_count + 1 }}/{{ order.max_cycles }}</p>
              <p v-if="order.is_system_reverse" class="system-note">系统自动发起，向负余额用户补充资金</p>
              <p>创建时间: {{ formatDate(order.created_at) }}</p>
            </div>
          </div>
        </div>
        
        <div v-if="matchingOrders.length === 0" class="empty-state">
          <p>暂无匹配订单</p>
        </div>
      </div>
    </div>

    <!-- 订单详情弹窗 -->
    <div v-if="showOrderDetail" class="modal-overlay" @click="closeOrderDetail">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>订单详情 #{{ selectedOrder?.order?.id }}</h3>
          <button @click="closeOrderDetail" class="close-btn">×</button>
        </div>
        <div class="modal-body" v-if="selectedOrder">
          <div class="order-summary">
            <p><strong>状态:</strong> {{ getStatusText(selectedOrder.order.status) }}</p>
            <p><strong>金额:</strong> ¥{{ selectedOrder.order.amount }}</p>
            <p><strong>发起人:</strong> {{ selectedOrder.order.initiator_name }}</p>
            <p><strong>轮次:</strong> {{ selectedOrder.order.cycle_count + 1 }}/{{ selectedOrder.order.max_cycles }}</p>
          </div>
          
          <div class="allocations-section">
            <h4>分配详情</h4>
            <div class="allocation-timeline">
              <div 
                v-for="allocation in selectedOrder.allocations" 
                :key="allocation.id"
                class="timeline-item"
              >
                <div class="timeline-content">
                  <div class="timeline-header">
                    <span class="cycle">第{{ allocation.cycle_number }}轮</span>
                    <span :class="['status', allocation.status]">{{ getStatusText(allocation.status) }}</span>
                  </div>
                  <p>{{ allocation.from_user_name }} → {{ allocation.to_user_name }}</p>
                  <p class="amount">¥{{ allocation.amount }}</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="records-section">
            <h4>操作记录</h4>
            <div class="records-list">
              <div 
                v-for="record in selectedOrder.records" 
                :key="record.id"
                class="record-item"
              >
                <div class="record-info">
                  <span class="action">{{ getActionText(record.action) }}</span>
                  <span class="user">{{ record.username }}</span>
                  <span class="time">{{ formatDate(record.created_at) }}</span>
                </div>
                <div v-if="record.amount" class="record-amount">¥{{ record.amount }}</div>
                <div v-if="record.note" class="record-note">{{ record.note }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '../utils/api'
import { uploadURL, getImageUrl, getUploadConfig } from '@/config'

export default {
  name: 'Matching',
  data() {
    return {
      stats: {
        userStats: null
      },
      autoStartProcessed: false,
      pendingAllocations: [],
      creating: false,
      processing: false,
      matchingOrders: [],
      showOrderDetail: false,
      selectedOrder: null,
      matchingType: 'small', // 匹配类型：small(小额) 或 large(大额)
      customAmount: '' // 大额匹配自定义金额
    }
  },
  created() {
  if (this.$route.query.autoStart) {
    // 执行匹配逻辑
    this.matchingType = this.$route.query.type || 'small';
    if (this.matchingType === 'large' && this.$route.query.amount) {
      this.customAmount = this.$route.query.amount;
    }
    this.createOrder();
    
    // 清除query参数，防止刷新后再次触发
    this.$router.replace({ ...this.$route, query: {} });
  }
},
  async mounted() {
    await this.loadData()

    this.handleAutoStartFromHome()
  
    // 监听自动开始匹配事件
    const handleAutoStartMatching = async (event) => {
      const { type, amount } = event.detail
      
      // 如果有指定匹配类型则切换
      if (type === 'large' && amount) {
        this.matchingType = 'large'
        this.customAmount = amount
      } else {
        this.matchingType = 'small'
      }
      
      // 触发匹配
      await this.createOrder()
    }
    
    window.addEventListener('autoStartMatching', handleAutoStartMatching)
  },
  methods: {
     /**
     * 确认分配并创建转账记录
     * @param {number} allocationId - 分配ID
     * @param {number} expectedAmount - 预期转账金额
     */
    async confirmAllocation(allocationId, expectedAmount) {
      try {
        // 获取分配详情和收款用户信息
        const allocationResponse = await api.get(`/matching/allocation/${allocationId}`)
        const allocation = allocationResponse.data.data
        
        // 获取收款用户的收款码信息
        const userResponse = await api.get(`/users/payment-info/${allocation.to_user_id}`)
        const userPaymentInfo = userResponse.data.data
        
        // 设置转账弹窗数据
        this.transferDialog = {
          visible: true,
          allocationId: allocationId,
          toUser: {
            id: allocation.to_user_id,
            name: allocation.to_user_name,
            wechatQr: userPaymentInfo.wechat_qr,
            alipayQr: userPaymentInfo.alipay_qr,
            unionpayQr: userPaymentInfo.unionpay_qr,
            bankCard: userPaymentInfo.bank_card
          },
          amount: expectedAmount,
          actualAmount: expectedAmount
        }
      } catch (error) {
        console.error('获取转账信息失败:', error)
        this.$message.error('获取转账信息失败')
      }
    },
    formatDeadline(deadlineString) {
    // 根据需要的格式进行处理，示例：
    return new Date(deadlineString).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  },
    handleAutoStartFromHome() {
      // 获取路由查询参数
      const { autoStart, type, amount } = this.$route.query
      
      // 如果参数存在且未处理过
      if (autoStart === 'true' && !this.autoStartProcessed) {
        this.autoStartProcessed = true // 防止重复触发
        
        // 根据参数设置匹配类型
        if (type === 'large' && amount) {
          this.matchingType = 'large'
          this.customAmount = amount
        } else {
          this.matchingType = 'small'
        }
        
        // 延迟触发匹配，确保页面已渲染完成
        setTimeout(() => {
          this.createOrder()
        }, 500)
      }
    },
    async loadPendingAllocations() {
      try {
        const response = await api.get('/matching/pending-allocations')
        this.pendingAllocations = response.data.data || []
      } catch (error) {
        console.error('加载待处理分配失败:', error)
      }
    },
    async loadData() {
      try {
        await this.loadMatchingOrders()
        await Promise.all([
          this.loadPendingAllocations(),
        ])
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$message.error('加载数据失败')
      }
    },
    
    /**
     * 创建匹配订单
     */
    async createOrder() {
      this.creating = true
      try {
        // 构建请求参数
        const requestData = {
          matchingType: this.matchingType
        }
        
        // 如果是大额匹配，添加自定义金额
        if (this.matchingType === 'large') {
          if (!this.isValidCustomAmount) {
            this.$message.error('请输入有效的匹配金额（5000-50000元）')
            return
          }
          requestData.customAmount = parseFloat(this.customAmount)
        }
        
        await api.post('/matching/create', requestData)
        
        const successMessage = this.matchingType === 'small' 
          ? '小额匹配成功！已为您生成3笔转账分配'
          : `大额匹配成功！已为您生成${this.getLargeMatchingCount()}笔转账分配`
        
        this.$message.success(successMessage)
        await this.loadData()
      } catch (error) {
        console.error('创建匹配订单失败:', error)
        
        const errorMessage = error.response?.data?.message || '匹配失败，请稍后重试'
        
        // 检查是否是审核相关的错误
        if (errorMessage.includes('审核') || errorMessage.includes('上传') || errorMessage.includes('完善')) {
          this.$confirm(errorMessage + '，是否前往个人中心完善资料？', '提示', {
            confirmButtonText: '前往完善',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.push('/editdetailspage')
          }).catch(() => {})
        } else {
          this.$message.error(errorMessage)
        }
      } finally {
        this.creating = false
      }
    },
    
    async viewOrderDetail(orderId) {
      try {
        const response = await api.get(`/matching/order/${orderId}`)
        this.selectedOrder = response.data.data
        this.showOrderDetail = true
      } catch (error) {
        console.error('获取订单详情失败:', error)
        this.$message.error('获取订单详情失败')
      }
    },
    
    closeOrderDetail() {
      this.showOrderDetail = false
      this.selectedOrder = null
    },
    
    async loadMatchingOrders() {
      try {
        const response = await api.get('/matching/my-orders')
        this.matchingOrders = response.data.data || []
      } catch (error) {
        console.error('加载匹配订单失败:', error)
      }
    },
    
    getStatusText(status) {
      const statusMap = {
        pending: '待处理',
        matching: '匹配中',
        completed: '已完成',
        cancelled: '已取消',
        confirmed: '已确认',
        rejected: '已拒绝',
        failed: '匹配失败'
      }
      return statusMap[status] || status
    },
    
    getActionText(action) {
      const actionMap = {
        join: '加入',
        confirm: '确认',
        reject: '拒绝',
        complete: '完成'
      }
      return actionMap[action] || action
    },
    
    formatDate(dateString) {
      return new Date(dateString).toLocaleString('zh-CN')
    },
    
    /**
     * 格式化金额显示，确保数字安全
     * @param {number|string|null|undefined} amount - 金额值
     * @returns {string} 格式化后的金额字符串
     */
    formatAmount(amount) {
      const num = parseFloat(amount)
      return isNaN(num) ? '0.00' : num.toFixed(2)
    },

    /**
     * 获取大额匹配的分配规则描述
     * @returns {string} 规则描述
     */
    getLargeMatchingRule() {
      const amount = parseFloat(this.customAmount) || 0
      if (amount <= 0) {
        return '请输入金额'
      } else if (amount < 5000) {
        return '金额不能少于5000元'
      } else if (amount > 50000) {
        return '金额不能超过50000元'
      } else if (amount <= 15000) {
        return '分成多笔随机金额'
      } else {
        return '随机分拆，每笔1000-8000元'
      }
    },

    /**
     * 获取大额匹配的预计笔数
     * @returns {string} 预计笔数描述
     */
    getLargeMatchingCount() {
      const amount = parseFloat(this.customAmount) || 0
      if (amount <= 0 || amount < 5000 || amount > 50000) {
        return '0'
      } else if (amount <= 15000) {
        return '3'
      } else {
        // 15000以上随机分拆，估算笔数范围
        const minCount = Math.ceil(amount / 8000) // 按最大单笔8000计算最少笔数
        const maxCount = Math.floor(amount / 1000) // 按最小单笔1000计算最多笔数
        return `${minCount}-${Math.min(maxCount, 10)}` // 限制最大显示笔数为10
      }
    },

    /**
     * 获取图片URL
     * @param {string} imagePath - 图片路径
     * @returns {string} 完整的图片URL
     */
    getImageUrl(imagePath) {
      return getImageUrl(imagePath)
    }
  },

  computed: {
    /**
     * 验证自定义金额是否有效
     * @returns {boolean} 金额是否有效
     */
    isValidCustomAmount() {
      const amount = parseFloat(this.customAmount)
      return !isNaN(amount) && amount >= 5000 && amount <= 50000
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
:root {
  --primary-color: #4361ee;
  --secondary-color: #3f37c9;
  --accent-color: #4895ef;
  --light-color: #f8f9fa;
  --dark-color: #212529;
  --success-color: #4cc9f0;
  --warning-color: #f8961e;
  --danger-color: #f72585;
  --border-radius: 12px;
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

/* 容器布局 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, #72c9ffae, #f3f3f3);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  max-width: 375px;
  margin: 0 auto;
  width: 100%;
}

.spacer {
  height: 40px;
}

/* 通用部分样式 */
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 0;
}

.section-title h3 {
  font-size: 16px;
  color: #333;
  margin: 0;
  width: auto;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0;
}

.view-all {
  font-size: 13px;
  color: #999;
  cursor: pointer;
}

/* 资金匹配区域 */
.matching-section {
  background-color: white;
  border-radius: var(--border-radius);
  padding: 16px;
  box-shadow: var(--box-shadow);
}

.matching-info, .orders-list {
  padding-left: 0;
}

/* 切换开关样式 */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toggle-label {
  font-size: 12px;
  color: #666;
  width: 77px;
  height: 15px;
  display: flex;
  align-items: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 16px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #a0c4ff;
}

input:focus + .slider {
  box-shadow: 0 0 1px #4CAF50;
}

input:checked + .slider:before {
  transform: translateX(18px);
}

/* 匹配信息样式 */
.matching-info {
  margin-top: 16px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.info-item .label {
  color: #666;
  font-size: 14px;
  text-align: left;
  width: 80px;
  display: inline-block;
}

.info-item .value {
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.custom-amount-input {
  flex: 1;
  margin-left: 10px;
}

/* 修复输入框字体大小（新增） */
.custom-amount-input .el-input__inner {
  font-size: 14px !important;
  height: 32px;
  line-height: 32px;
}

.custom-amount-input .el-input-group__prepend {
  font-size: 14px !important;
}

.custom-amount-input .el-input__inner::placeholder {
  font-size: 14px !important;
}

.custom-amount-input .el-input__wrapper {
  border-radius: 12px !important;
  overflow: hidden;
}

/* 开始匹配按钮 */
.create-btn {
  width: 128px;
  height: 44px;
  padding: 12px;
  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  border-radius: 12px !important;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  margin: 16px auto;
  box-shadow: var(--box-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.create-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--box-shadow);
}

/* 提示信息 */
.tips {
  margin-top: 16px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: var(--border-radius);
  font-size: 12px;
  color: #666;
}

.tips p {
  margin: 6px 0;
  line-height: 1.4;
}

.matching-section, 
.orders-section, 
.order-card, 
.modal-content,
.tips {
  border-radius: 12px !important;
  overflow: hidden;
}

/* 订单列表样式 */
.orders-section {
  background-color: white;
  border-radius: var(--border-radius);
  padding: 16px;
  box-shadow: var(--box-shadow);
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-card {
  padding: 12px;
  border: 1px solid #eee;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
}

.order-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--box-shadow);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.order-id {
  font-weight: 500;
  color: var(--primary-color);
}

.system-reverse-tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
}

.status {
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  color: white;
}

.status.pending {
  background-color: var(--warning-color);
}

.status.matching {
  background-color: var(--accent-color);
}

.status.completed {
  background-color: var(--success-color);
}

.status.cancelled, .status.failed {
  background-color: var(--danger-color);
}

.order-info p {
  margin: 4px 0;
  font-size: 12px;
  color: #666;
}

.system-note {
  color: var(--accent-color);
  font-style: italic;
  font-size: 11px;
}

.empty-state {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 14px;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: var(--border-radius);
  max-width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  width: 375px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
}

.modal-body {
  padding: 16px;
}

.order-summary p {
  margin: 8px 0;
  font-size: 14px;
  color: #333;
}

.allocations-section, .records-section {
  margin-top: 16px;
}

.allocations-section h4, .records-section h4 {
  font-size: 15px;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.timeline-item {
  border-left: 2px solid var(--accent-color);
  padding-left: 12px;
  margin-bottom: 12px;
}

.timeline-content {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 6px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.cycle {
  font-size: 12px;
  color: #666;
}

.amount {
  font-weight: 500;
  color: var(--success-color);
}

.record-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.record-info {
  display: flex;
  gap: 10px;
  font-size: 13px;
}

.action {
  font-weight: 500;
  color: var(--primary-color);
}

.user {
  color: #666;
}

.time {
  color: #999;
}

.record-amount {
  font-weight: 500;
  color: var(--success-color);
}

.record-note {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* 移动端适配 */
@media (max-width: 375px) {
  .main-content {
    padding: 12px;
  }
  
  .matching-section, .orders-section {
    padding: 12px;
  }
  
  .modal-content {
    width: 95%;
  }
  
  /* 确保输入框在移动端也保持14px */
  .custom-amount-input .el-input__inner,
  .custom-amount-input .el-input-group__prepend,
  .custom-amount-input .el-input__inner::placeholder {
    font-size: 14px !important;
  }
}

.pending-section,
.orders-section {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.pending-section h3,
.orders-section h3 {
  margin-bottom: 15px;
  color: #2c3e50;
}

.allocation-list,
.orders-list {
  display: grid;
  gap: 15px;
}

.allocation-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  background: #f8f9fa;
}

.allocation-header {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.order-id,
.cycle {
  background: #3498db;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.allocation-details p {
  margin: 5px 0;
  font-size: 14px;
}

.deadline-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.time-left {
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.time-left.normal {
  background: #d4edda;
  color: #155724;
}

.time-left.urgent {
  background: #fff3cd;
  color: #856404;
}

.time-left.expired {
  background: #f8d7da;
  color: #721c24;
  animation: blink 1s infinite;
}

.deadline-time {
  color: #6c757d;
  font-size: 12px;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.5; }
}

.allocation-actions {
  display: flex;
  gap: 10px;
}

.confirm-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.confirm-btn {
  background: #27ae60;
  color: white;
}

.confirm-btn:hover {
  background: #229954;
}

</style>