UI优化和bug修复: 1.调整小程序消息列表图标样式 2.优化web端比赛晋级页面布局 3.修复小程序消息列表日期显示问题

lrj

2 天以前 2d410989d32380d31ae3fe6d42aa3b3ba9e09d00

 web/src/views/activity-list.vue

@@ -81,11 +81,13 @@
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { reactive, ref, onMounted, onActivated, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { getActivities } from '@/api/activity'
import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue'

console.log('=== activity-list.vue 组件开始加载 ===');

const loading = ref(false)
const router = useRouter()
@@ -104,6 +106,12 @@

// 表格数据
const tableData = ref([])

// 添加调试：监听tableData变化
watch(tableData, (newVal) => {
  console.log('=== tableData 发生变化 ===', newVal)
  console.log('tableData.value.length:', newVal.length)
}, { deep: true })

// 获取状态标签类型
const getStatusType = (status: string) => {
@@ -171,9 +179,18 @@
  loading.value = true
  try {
    const data = await getActivities(pagination.page - 1, pagination.size, searchForm.name || '')
    tableData.value = (data && data.content) ? data.content : []
    pagination.total = (data && data.totalElements) ? data.totalElements : 0
    
    // 数据映射：将API返回的字段映射到表格期望的字段
    const mappedData = (data?.content || []).map(item => ({
      ...item,
      playerCount: item.playerCount || 0,
      stateName: item.stateName || ''
    }));
    
    tableData.value = mappedData
    pagination.total = data?.totalElements || 0
  } catch (e) {
    console.error('加载数据失败:', e);
    ElMessage.error((e && e.message) ? e.message : '加载比赛列表失败')
  } finally {
    loading.value = false
@@ -183,6 +200,11 @@
onMounted(() => {
  loadData()
})

// 页面激活时重新加载数据（解决从新增/编辑页面返回时列表不刷新的问题）
onActivated(() => {
  loadData()
})
</script>

<style scoped>