group_lawyer_app/pages/indexOrder/components/order.vue

<template>
  <scroll-view class="order-list" scroll-y>
    <view 
      v-for="(order, index) in orders" 
      :key="order.id || index"
      class="order-card"
    >
      <view class="order-header">
        <view class="user-info">
          <image 
            class="avatar" 
            :src="order.avatar || '/static/images/profile.jpg'" 
            mode="aspectFill"
          ></image>
          <view class="user-details">
            <text class="user-name">{{ order.customerName }}</text>
            <text class="valid-date">有效期至: {{ order.validDate }}</text>
          </view>
        </view>
        <view 
          class="status-tag" 
          :class="`status-tag--${order.status}`"
        >
          {{ getStatusText(order.status) }}
        </view>
      </view>
      
      <view class="order-content">
        <view 
          v-for="(item, idx) in orderInfoFields" 
          :key="idx"
          class="order-row"
        >
          <text class="order-label">{{ item.label }}</text>
          <text class="order-value">{{ order[item.key] || '-' }}</text>
        </view>
      </view>

      <view class="order-footer">
        <text class="revenue">
          <text class="revenue-syText">收益:</text>
          <text>¥{{ order.revenue }}</text>
        </text>
        <view class="action-buttons">
          <view 
            v-for="(action, idx) in getOrderActions(order.status)" 
            :key="idx"
            class="action-btn" 
            :class="`action-btn--${action.type}`"
            @click="handleAction(action.type, order)"
          >
            <uni-icons :type="action.icon" size="16" :color="action.color"></uni-icons>
            <text class="btn-text">{{ action.text }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view v-if="orders.length === 0" class="empty-state">
      <text class="empty-text">暂无订单数据</text>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: 'OrderList',
  props: {
    // 订单列表
    orders: {
      type: Array,
      default: () => []
    },
    // 订单信息字段配置
    orderInfoFields: {
      type: Array,
      default: () => [
        { key: 'orderNo', label: '订单编号' },
        { key: 'phone', label: '联系电话' },
        { key: 'serviceFee', label: '服务费用' },
        { key: 'orderTime', label: '下单时间' },
        { key: 'payTime', label: '支付时间' },
        { key: 'commissionRate', label: '佣金比例' }
      ]
    }
  },
  methods: {
    /**
     * 获取状态文本
     */
    getStatusText(status) {
      const statusMap = {
        progress: '进行中',
        completed: '已完成'
      }
      return statusMap[status] || '未知'
    },
    
    /**
     * 获取订单操作按钮
     */
    getOrderActions(status) {
      if (status === 'progress') {
        return [
          { type: 'message', icon: 'chat', color: '#1976D2', text: '发消息' },
          { type: 'call', icon: 'phone', color: '#4CAF50', text: '联系客户' }
        ]
      } else if (status === 'completed') {
        return [
          { type: 'delete', icon: 'trash', color: '#F44336', text: '删除' },
          { type: 'message', icon: 'chat', color: '#1976D2', text: '查看消息' }
        ]
      }
      return []
    },
    
    /**
     * 处理操作按钮点击
     */
    handleAction(actionType, order) {
      switch (actionType) {
        case 'message':
          this.handleMessage(order)
          break
        case 'call':
          this.handleCall(order)
          break
        case 'delete':
          this.handleDelete(order)
          break
        default:
          console.warn('未知操作类型:', actionType)
      }
    },
    
    /**
     * 处理发消息
     */
    handleMessage(order) {
      this.$emit('message', order)
      uni.navigateTo({
      	url:'/pages/indexOrder/message'
      })
    },
    
    /**
     * 处理打电话
     */
    handleCall(order) {
      uni.makePhoneCall({
        phoneNumber: order.phone,
        fail: (err) => {
          console.error('拨打电话失败:', err)
          uni.showToast({
            title: '拨打电话失败',
            icon: 'none'
          })
        }
      })
    },
    
    /**
     * 处理删除
     */
    handleDelete(order) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该订单吗？',
        success: (res) => {
          if (res.confirm) {
            this.$emit('delete', order)
          }
        }
      })
    }
  }
}
</script>

<style scoped>
/* 订单列表 */
.order-list {
  height: 77vh;
  padding: 24rpx 30rpx;
  box-sizing: border-box;
}

/* 订单卡片 */
.order-card {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32rpx;
  padding-bottom: 24rpx;
  border-bottom: 1px solid #EEEEEE;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 24rpx;
  flex: 1;
}

.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background-color: #F5F5F5;
  flex-shrink: 0;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.user-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #323232;
}

.valid-date {
  font-size: 24rpx;
  color: #999999;
}

.status-tag {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  white-space: nowrap;
}

.status-tag--progress {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.status-tag--completed {
  background-color: #FFF3E0;
  color: #FF9800;
}

/* 订单内容 */
.order-content {
  margin-bottom: 32rpx;
}

.order-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.order-row:last-child {
  margin-bottom: 0;
}

.order-label {
  font-weight: 500;
  font-size: 27rpx;
  color: #666666;
}

.order-value {
  font-weight: 500;
  font-size: 27rpx;
  color: #323232;
}

/* 订单底部 */
.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24rpx;
  border-top: 1px solid #EEEEEE;
}

.revenue {
  font-size: 34rpx;
  color: #FF9800;
  font-weight: 600;
}

.revenue-syText {
  font-weight: 500;
  font-size: 27rpx;
  color: #666666;
}

.action-buttons {
  display: flex;
  gap: 16rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  font-size: 27rpx;
  cursor: pointer;
  height: 69rpx;
  border-radius: 191rpx 191rpx 191rpx 191rpx;
}

.action-btn--message {
  background: rgba(52,117,231,0.1);
  border-radius: 191rpx 191rpx 191rpx 191rpx;
}

.action-btn--call {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.action-btn--delete {
  background-color: #FFEBEE;
  color: #F44336;
}

.btn-text {
  font-size: 24rpx;
  margin-left: 4rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}
</style>