YGChatCS/pages/order/components/OrderList/test.vue

<template>
  <view class="test-page">
    <view class="test-header">
      <text class="test-title">OrderList 组件测试</text>
      <button @click="toggleData" class="test-btn">{{ hasData ? '清空数据' : '加载数据' }}</button>
    </view>
    
    <view class="test-content">
      <OrderList
        :orderList="testOrderList"
        :hasMore="hasMore"
        :isLoading="isLoading"
        :currentTab="currentTab"
        :emptyText="'暂无测试数据'"
        :useVirtualList="true"
        :virtualListHeight="'400px'"
        :cellHeightMode="'auto'"
        :fixedHeight="120"
        @refresh="handleRefresh"
        @loadMore="handleLoadMore"
        @orderClick="handleOrderClick"
        @orderCall="handleOrderCall"
        @orderComplete="handleOrderComplete"
      />
    </view>
    
    <view class="test-info">
      <text class="info-text">当前数据量: {{ testOrderList.length }}</text>
      <text class="info-text">是否有更多: {{ hasMore ? '是' : '否' }}</text>
      <text class="info-text">是否加载中: {{ isLoading ? '是' : '否' }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import OrderList from './index.vue'

// 测试数据
const testOrderList = ref([])
const hasMore = ref(true)
const isLoading = ref(false)
const currentTab = ref('all')
const hasData = ref(false)

// 模拟订单数据
const mockData = [
  {
    id: '001',
    title: '空调维修服务',
    createTime: '2024-01-15 14:30',
    contactName: '张先生',
    contactPhone: '138****8888',
    status: 'pending',
    type: 'service'
  },
  {
    id: '002',
    title: '水管漏水维修',
    createTime: '2024-01-15 10:20',
    contactName: '李女士',
    contactPhone: '139****9999',
    status: 'processing',
    type: 'service'
  },
  {
    id: '003',
    title: '电灯安装服务',
    createTime: '2024-01-14 16:45',
    contactName: '王先生',
    contactPhone: '137****7777',
    status: 'completed',
    type: 'service'
  }
]

// 切换数据
const toggleData = () => {
  if (hasData.value) {
    testOrderList.value = []
    hasData.value = false
  } else {
    testOrderList.value = [...mockData]
    hasData.value = true
  }
}

// 处理刷新
const handleRefresh = () => {
  console.log('测试: 刷新事件触发')
  isLoading.value = true
  setTimeout(() => {
    testOrderList.value = [...mockData]
    isLoading.value = false
  }, 1000)
}

// 处理加载更多
const handleLoadMore = () => {
  console.log('测试: 加载更多事件触发')
  isLoading.value = true
  setTimeout(() => {
    const newData = mockData.map((item, index) => ({
      ...item,
      id: item.id + '_' + Date.now(),
      title: item.title + ' (新增)'
    }))
    testOrderList.value.push(...newData)
    isLoading.value = false
    hasMore.value = testOrderList.value.length < 20
  }, 1000)
}

// 处理订单点击
const handleOrderClick = (orderData) => {
  console.log('测试: 订单点击', orderData)
  uni.showToast({
    title: `点击了订单: ${orderData.title}`,
    icon: 'none'
  })
}

// 处理订单呼叫
const handleOrderCall = (orderData) => {
  console.log('测试: 订单呼叫', orderData)
  uni.showToast({
    title: `呼叫: ${orderData.contactName}`,
    icon: 'none'
  })
}

// 处理订单完成
const handleOrderComplete = (orderData) => {
  console.log('测试: 订单完成', orderData)
  uni.showToast({
    title: `完成订单: ${orderData.title}`,
    icon: 'success'
  })
}
</script>

<style scoped lang="scss">
.test-page {
  padding: 20rpx;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.test-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.test-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.test-btn {
  padding: 10rpx 20rpx;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 6rpx;
  font-size: 28rpx;
}

.test-content {
  flex: 1;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  overflow: hidden;
}

.test-info {
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background: #f9f9f9;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.info-text {
  font-size: 24rpx;
  color: #666;
}
</style>