fix bugs

pages/event-players/event-players.vue

@@ -2,8 +2,13 @@
   <view class="event-players-page">
     <!-- 搜索框 -->
     <view class="search-bar">
-      <input class="search-input" placeholder="搜索选手姓名或编号" v-model="searchKey" />
-      <view class="search-icon">🔍</view>
+      <input
+        class="search-input"
+        placeholder="搜索选手姓名或编号"
+        v-model="searchKey"
+        @confirm="handleSearch"
+      />
+      <view class="search-icon" @click="handleSearch">🔍</view>
     </view>
 
     <!-- 分类筛选 -->
@@ -12,83 +17,211 @@
         class="category-tab"
         v-for="(category, index) in categories"
         :key="index"
-        :class="{ active: currentCategory === index }"
-        @click="currentCategory = index"
+        :class="{ active: currentCategory === category.value }"
+        @click="handleCategoryChange(category.value)"
       >
-        {{ category }}
+        {{ category.label }}
       </view>
     </view>
 
+    <!-- 统计信息 -->
+    <view class="stats-bar" v-if="totalCount > 0">
+      <text class="stats-text">共 {{ totalCount }} 名选手</text>
+      <text class="stats-text">已确认 {{ confirmedCount }} 人</text>
+    </view>
+
     <!-- 选手列表 -->
-    <view class="players-list">
-      <view class="player-item" v-for="(player, index) in playersList" :key="index">
-        <view class="player-number">{{ player.number }}</view>
+    <view class="players-list" v-if="playersList.length > 0">
+      <view
+        class="player-item"
+        v-for="(player, index) in playersList"
+        :key="player.id"
+        @click="handlePlayerClick(player)"
+      >
+        <view class="player-number">{{ player.playerNo || (index + 1).toString().padStart(3, '0') }}</view>
         <view class="player-info">
-          <view class="player-name">{{ player.name }}</view>
+          <view class="player-name">
+            {{ player.playerName }}
+            <text class="gender-tag" v-if="player.gender">{{ player.gender === 1 ? '男' : '女' }}</text>
+          </view>
           <view class="player-detail">
-            <text class="detail-text">{{ player.team }}</text>
-            <text class="detail-divider">|</text>
-            <text class="detail-text">{{ player.category }}</text>
+            <text class="detail-text" v-if="player.organization">{{ player.organization }}</text>
+            <text class="detail-divider" v-if="player.organization && player.projectName">|</text>
+            <text class="detail-text" v-if="player.projectName">{{ player.projectName }}</text>
+          </view>
+          <view class="player-extra" v-if="player.category">
+            <text class="extra-text">{{ player.category }}</text>
           </view>
         </view>
-        <view class="player-status" :class="player.status">
-          {{ player.statusText }}
+        <view class="player-status" :class="getStatusClass(player.registrationStatus)">
+          {{ getStatusText(player.registrationStatus) }}
         </view>
       </view>
     </view>
+
+    <!-- 空状态 -->
+    <view class="empty-state" v-else-if="!loading">
+      <text class="empty-icon">👤</text>
+      <text class="empty-text">暂无参赛选手</text>
+    </view>
+
+    <!-- 加载状态 -->
+    <view class="loading-state" v-if="loading">
+      <text class="loading-text">加载中...</text>
+    </view>
+
+    <!-- 加载更多 -->
+    <view class="load-more" v-if="hasMore && !loading" @click="loadMore">
+      <text class="load-more-text">加载更多</text>
+    </view>
   </view>
 </template>
 
 <script>
+import athleteAPI from '@/api/athlete.js'
+
 export default {
   data() {
     return {
+      eventId: '',
       searchKey: '',
-      currentCategory: 0,
-      categories: ['全部', '男子组', '女子组'],
-      playersList: [
-        {
-          number: '001',
-          name: '张三',
-          team: '北京队',
-          category: '男子散打',
-          status: 'confirmed',
-          statusText: '已确认'
-        },
-        {
-          number: '002',
-          name: '李四',
-          team: '上海队',
-          category: '男子散打',
-          status: 'confirmed',
-          statusText: '已确认'
-        },
-        {
-          number: '003',
-          name: '王五',
-          team: '广东队',
-          category: '男子套路',
-          status: 'pending',
-          statusText: '待确认'
-        },
-        {
-          number: '004',
-          name: '赵六',
-          team: '天津队',
-          category: '男子散打',
-          status: 'confirmed',
-          statusText: '已确认'
-        },
-        {
-          number: '005',
-          name: '刘七',
-          team: '江苏队',
-          category: '男子套路',
-          status: 'confirmed',
-          statusText: '已确认'
-        }
-      ]
+      currentCategory: '',
+      categories: [
+        { label: '全部', value: '' },
+        { label: '男子组', value: '1' },
+        { label: '女子组', value: '2' }
+      ],
+      playersList: [],
+      totalCount: 0,
+      confirmedCount: 0,
+      loading: false,
+      page: 1,
+      pageSize: 20,
+      hasMore: true
     };
+  },
+  onLoad(options) {
+    if (options.eventId) {
+      this.eventId = options.eventId
+      this.loadPlayersList()
+    }
+  },
+  methods: {
+    /**
+     * 加载选手列表
+     */
+    async loadPlayersList(isLoadMore = false) {
+      if (this.loading) return
+
+      this.loading = true
+
+      try {
+        const params = {
+          competitionId: this.eventId,
+          current: isLoadMore ? this.page : 1,
+          size: this.pageSize
+        }
+
+        // 添加搜索条件
+        if (this.searchKey) {
+          params.playerName = this.searchKey
+        }
+
+        // 添加性别筛选
+        if (this.currentCategory) {
+          params.gender = this.currentCategory
+        }
+
+        const res = await athleteAPI.getAthleteList(params)
+
+        if (res.code === 200 && res.data) {
+          const records = res.data.records || []
+
+          if (isLoadMore) {
+            this.playersList = [...this.playersList, ...records]
+          } else {
+            this.playersList = records
+            this.page = 1
+          }
+
+          this.totalCount = res.data.total || 0
+          this.hasMore = this.playersList.length < this.totalCount
+
+          // 统计已确认人数
+          this.confirmedCount = this.playersList.filter(p => p.registrationStatus === 1).length
+        }
+      } catch (error) {
+        console.error('加载选手列表失败:', error)
+        uni.showToast({
+          title: '加载失败，请重试',
+          icon: 'none'
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+
+    /**
+     * 搜索
+     */
+    handleSearch() {
+      this.page = 1
+      this.loadPlayersList()
+    },
+
+    /**
+     * 切换分类
+     */
+    handleCategoryChange(value) {
+      this.currentCategory = value
+      this.page = 1
+      this.loadPlayersList()
+    },
+
+    /**
+     * 加载更多
+     */
+    loadMore() {
+      if (this.hasMore && !this.loading) {
+        this.page++
+        this.loadPlayersList(true)
+      }
+    },
+
+    /**
+     * 点击选手
+     */
+    handlePlayerClick(player) {
+      // 可以跳转到选手详情页
+      uni.showToast({
+        title: `选手：${player.playerName}`,
+        icon: 'none'
+      })
+    },
+
+    /**
+     * 获取状态样式类
+     */
+    getStatusClass(status) {
+      const statusMap = {
+        0: 'pending',    // 待确认
+        1: 'confirmed',  // 已确认
+        2: 'cancelled'   // 已取消
+      }
+      return statusMap[status] || 'pending'
+    },
+
+    /**
+     * 获取状态文本
+     */
+    getStatusText(status) {
+      const statusMap = {
+        0: '待确认',
+        1: '已确认',
+        2: '已取消'
+      }
+      return statusMap[status] || '未知'
+    }
   }
 };
 </script>
@@ -97,6 +230,7 @@ export default {
 .event-players-page {
   min-height: 100vh;
   background-color: #f5f5f5;
+  padding-bottom: 20rpx;
 }
 
 .search-bar {
@@ -117,6 +251,7 @@ export default {
 
 .search-icon {
   font-size: 32rpx;
+  cursor: pointer;
 }
 
 .category-tabs {
@@ -133,6 +268,7 @@ export default {
   font-size: 26rpx;
   color: #666666;
   background-color: #f5f5f5;
+  transition: all 0.3s;
 }
 
 .category-tab.active {
@@ -140,8 +276,21 @@ export default {
   color: #fff;
 }
 
+.stats-bar {
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+}
+
+.stats-text {
+  font-size: 26rpx;
+  color: #666666;
+}
+
 .players-list {
-  padding: 0 30rpx 20rpx;
+  padding: 0 30rpx;
 }
 
 .player-item {
@@ -152,6 +301,12 @@ export default {
   display: flex;
   align-items: center;
   gap: 20rpx;
+  transition: all 0.3s;
+
+  &:active {
+    background-color: #f8f8f8;
+    transform: scale(0.98);
+  }
 }
 
 .player-number {
@@ -170,6 +325,7 @@ export default {
 
 .player-info {
   flex: 1;
+  min-width: 0;
 }
 
 .player-name {
@@ -177,17 +333,38 @@ export default {
   font-weight: bold;
   color: #333333;
   margin-bottom: 8rpx;
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+}
+
+.gender-tag {
+  font-size: 20rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 4rpx;
+  background-color: #E3F2FD;
+  color: #2196F3;
+  font-weight: normal;
 }
 
 .player-detail {
   font-size: 24rpx;
   color: #666666;
+  margin-bottom: 6rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .detail-divider {
   margin: 0 10rpx;
 }
 
+.player-extra {
+  font-size: 22rpx;
+  color: #999999;
+}
+
 .player-status {
   padding: 8rpx 20rpx;
   border-radius: 8rpx;
@@ -204,4 +381,50 @@ export default {
   background-color: #FFF3E0;
   color: #FF9800;
 }
+
+.player-status.cancelled {
+  background-color: #FFEBEE;
+  color: #F44336;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 0;
+  gap: 20rpx;
+}
+
+.empty-icon {
+  font-size: 120rpx;
+  opacity: 0.3;
+}
+
+.empty-text {
+  font-size: 28rpx;
+  color: #999999;
+}
+
+.loading-state {
+  display: flex;
+  justify-content: center;
+  padding: 40rpx 0;
+}
+
+.loading-text {
+  font-size: 28rpx;
+  color: #999999;
+}
+
+.load-more {
+  display: flex;
+  justify-content: center;
+  padding: 30rpx 0;
+}
+
+.load-more-text {
+  font-size: 28rpx;
+  color: #C93639;
+}
 </style>