This commit is contained in:
2025-11-28 11:04:10 +08:00
commit 83ee120f09
83 changed files with 6436 additions and 0 deletions

View File

@@ -0,0 +1,263 @@
<template>
<view class="my-registration-page">
<!-- Tab切换 -->
<custom-tabs :tabs="tabs" :current="currentTab" @change="handleTabChange"></custom-tabs>
<!-- 赛事列表 -->
<view class="event-list">
<view
class="event-item"
v-for="(item, index) in filteredList"
:key="index"
@click="goToEventDetail(item)"
>
<view class="status-tag" :class="getStatusClass(item.status)">
<text>{{ getStatusText(item.status) }}</text>
</view>
<view class="event-title">{{ item.title }}</view>
<view class="event-info">
<text class="label">地点</text>
<text class="value">{{ item.location }}</text>
</view>
<view class="event-info">
<text class="label">比赛时间</text>
<text class="value">{{ item.matchTime }}</text>
</view>
<view class="event-info">
<text class="label">报名项目</text>
<text class="value">{{ item.projects }}</text>
</view>
<view class="event-info">
<text class="label">联系人</text>
<text class="value">{{ item.contact }}</text>
</view>
<view class="event-info">
<text class="label">参赛选手</text>
<text class="value participants">{{ item.participants }}</text>
</view>
<view class="event-footer" v-if="item.status === 'ongoing'">
<view class="register-note">
<text>点击后进入赛事详情页面</text>
</view>
<view class="view-cert-btn" @click.stop="handleViewCert(item)">
<text>查看证件</text>
<text class="arrow"></text>
</view>
</view>
</view>
</view>
<!-- 空状态 -->
<view class="empty-state" v-if="filteredList.length === 0">
<text class="empty-text">暂无报名记录</text>
</view>
</view>
</template>
<script>
import CustomTabs from '../../components/custom-tabs/custom-tabs.vue';
export default {
components: {
CustomTabs
},
data() {
return {
tabs: ['全部', '待开始', '进行中', '已结束'],
currentTab: 0,
eventList: [
{
id: 1,
status: 'ongoing',
title: '2025年全国武术散打锦标赛暨第十七届世界武术锦标赛选拔赛',
location: '天津市-天津市体育中心',
matchTime: '2025.02.01-2025.02.10',
projects: '男子组剑术、男子组太极拳',
contact: '18666666666',
participants: '张三、李四四、王二、张三、李四四、张三、李四四、王二、张三、李四四'
},
{
id: 2,
status: 'pending',
title: '2025年全国武术散打锦标赛暨第十七届世界武术锦标赛选拔赛',
location: '天津市-天津市体育中心',
matchTime: '2025.02.01-2025.02.10',
projects: '男子组剑术、男子组太极拳',
contact: '18666666666',
participants: '张三、李四四、王二、张三、李四四、张三、李四四、王二、张三、李四四'
},
{
id: 3,
status: 'finished',
title: '2025年全国武术散打锦标赛暨第十七届世界武术锦标赛选拔赛',
location: '天津市-天津市体育中心',
matchTime: '2025.02.01-2025.02.10',
projects: '男子组剑术、男子组太极拳',
contact: '18666666666',
participants: '张三、李四四、王二、张三、李四四、张三、李四四、王二、张三、李四四'
}
]
};
},
computed: {
filteredList() {
if (this.currentTab === 0) {
return this.eventList;
}
const statusMap = {
1: 'pending',
2: 'ongoing',
3: 'finished'
};
return this.eventList.filter(item => item.status === statusMap[this.currentTab]);
}
},
methods: {
handleTabChange(index) {
this.currentTab = index;
},
getStatusClass(status) {
return {
'status-ongoing': status === 'ongoing',
'status-pending': status === 'pending',
'status-finished': status === 'finished'
};
},
getStatusText(status) {
const statusMap = {
ongoing: '进行中',
pending: '待开始',
finished: '已结束'
};
return statusMap[status] || '';
},
goToEventDetail(item) {
uni.navigateTo({
url: '/pages/event-detail/event-detail?id=' + item.id
});
},
handleViewCert(item) {
uni.showToast({
title: '查看证件',
icon: 'none'
});
}
}
};
</script>
<style lang="scss" scoped>
.my-registration-page {
min-height: 100vh;
background-color: #f5f5f5;
}
.event-list {
padding: 30rpx;
}
.event-item {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 20rpx;
position: relative;
}
.status-tag {
position: absolute;
top: 30rpx;
left: 30rpx;
padding: 8rpx 20rpx;
border-radius: 8rpx;
font-size: 24rpx;
color: #fff;
}
.status-ongoing {
background-color: #4CAF50;
}
.status-pending {
background-color: #FF9800;
}
.status-finished {
background-color: #999999;
}
.event-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin: 50rpx 0 20rpx;
line-height: 1.5;
}
.event-info {
display: flex;
margin-bottom: 10rpx;
}
.label {
font-size: 26rpx;
color: #666666;
flex-shrink: 0;
}
.value {
font-size: 26rpx;
color: #666666;
flex: 1;
}
.participants {
word-break: break-all;
}
.event-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
padding-top: 20rpx;
border-top: 1rpx solid #f5f5f5;
}
.register-note {
font-size: 24rpx;
color: #C93639;
}
.view-cert-btn {
display: flex;
align-items: center;
padding: 10rpx 20rpx;
border: 2rpx solid #C93639;
border-radius: 8rpx;
font-size: 24rpx;
color: #C93639;
}
.arrow {
font-size: 28rpx;
margin-left: 5rpx;
}
.empty-state {
padding: 200rpx 0;
text-align: center;
}
.empty-text {
font-size: 28rpx;
color: #999999;
}
</style>