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,13 @@
{
"permissions": {
"allow": [
"Bash(mkdir:*)",
"Bash(node check-pages.js:*)",
"Bash(cat:*)",
"Bash(del nul)",
"Bash(rm:*)"
],
"deny": [],
"ask": []
}
}

37
App.vue Normal file
View File

@@ -0,0 +1,37 @@
<script>
export default {
onLaunch: function() {
console.log('App Launch');
},
onShow: function() {
console.log('App Show');
},
onHide: function() {
console.log('App Hide');
}
};
</script>
<style lang="scss">
/* 全局样式 */
@import './uni.scss';
page {
background-color: #f5f5f5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}
/* 重置样式 */
view, text, input, button {
box-sizing: border-box;
}
button {
border: none;
outline: none;
}
button::after {
border: none;
}
</style>

251
README.md Normal file
View File

@@ -0,0 +1,251 @@
# 武术赛事报名系统
基于uniapp框架开发的武术赛事报名系统支持H5和微信小程序。
## 项目概述
本项目是一个完整的武术赛事报名管理系统,实现了从赛事浏览、报名到信息管理的完整流程。
### 技术栈
- **框架**: uniapp
- **平台**: H5、微信小程序
- **样式**: SCSS、rpx响应式单位
- **版本**: 2.0
## 项目结构
```
martial-mini/
├── pages/ # 页面目录
│ ├── home/ # 首页(武术赛事通)
│ ├── profile/ # 个人中心
│ ├── common-info/ # 常用信息
│ ├── add-player/ # 新增选手
│ ├── edit-player/ # 编辑选手
│ ├── add-contact/ # 新增联系人
│ ├── my-registration/ # 我的报名
│ ├── event-list/ # 全部赛事列表
│ ├── event-detail/ # 赛事详情
│ ├── register-type/ # 选择报名类型
│ ├── select-event/ # 选择报名项目
│ └── event-register/ # 赛事报名流程
├── components/ # 公共组件目录
│ ├── custom-navbar/ # 自定义导航栏
│ ├── custom-tabs/ # Tab切换组件
│ └── confirm-modal/ # 确认弹窗组件
├── static/ # 静态资源目录
│ └── images/ # 图片资源
├── image/ # 设计稿图片
├── App.vue # 应用主组件
├── main.js # 应用入口文件
├── pages.json # 页面配置
├── manifest.json # 应用配置
├── uni.scss # 全局样式变量
├── index.html # H5入口页面
├── package.json # 项目依赖配置
├── check-pages.js # 页面完成度检查工具
└── README.md # 项目说明文档
```
## 功能模块
### 1. 首页(武术赛事通)
- 轮播图展示
- 精品赛事列表
- 赛事状态显示(报名中/已结束)
- 快速报名入口
### 2. 个人中心
- 用户信息展示
- 我的报名入口
- 常用信息管理
- 修改密码
- 联系我们
- 退出登录
### 3. 常用信息管理
- 选手信息管理(新增/编辑/删除)
- 集体信息管理
- 联系人信息管理
- Tab切换界面
### 4. 选手管理
- 证件类型选择(身份证)
- 姓名输入
- 证件号码输入18位身份证号验证
- 队伍名称输入
- 表单验证提示
### 5. 联系人管理
- 证件信息
- 手机号码(格式验证)
- 邮箱地址
- 联系地址
- 设置默认联系人开关
### 6. 我的报名
- 全部/待开始/进行中/已结束 Tab切换
- 赛事状态标签
- 赛事详细信息展示
- 参赛选手列表
- 查看证件功能
### 7. 赛事列表
- 搜索功能
- 日期筛选
- 地区筛选
- 赛事卡片展示
- 报名状态显示
### 8. 赛事详情
- 赛事基本信息
- 功能网格入口:
- 信息发布
- 赛事规程
- 活动日程
- 参赛选手
- 比赛实况
- 出场顺序
- 成绩
- 奖牌榜
- 图片直播
- 报名按钮
### 9. 报名流程
- **选择报名类型**:单人赛/集体赛
- **选择报名项目**:多选项目,显示价格
- **报名三步骤**
1. 选择选手信息(可新增/编辑/删除选手)
2. 订单支付(显示赛事信息、联系人、参赛选手、总价)
3. 报名成功(显示选手编号信息)
## 设计特点
### 配色方案
- 主题色:#C93639(中国红)
- 文字色:#333333(深灰)、#666666(中灰)、#999999(浅灰)
- 背景色:#f5f5f5(浅灰背景)、#ffffff(白色)
### 样式规范
- 使用rpx响应式单位自适应不同屏幕
- 圆角统一16rpx常规、24rpx大圆角
- 间距统一30rpx页面内边距
- 字体大小:
- 标题36-38rpx
- 正文28-32rpx
- 辅助文字24-26rpx
### UI组件
- 自定义导航栏(支持返回按钮、标题、右侧操作区)
- Tab切换组件带下划线指示器
- 确认弹窗组件(取消/确定)
- 表单输入组件
- 按钮组件(主按钮/禁用按钮)
## 开发说明
### 环境要求
- Node.js 12+
- HBuilderX推荐或 VSCode + uni-app插件
### 安装依赖
```bash
npm install
```
### 运行项目
#### H5开发
```bash
npm run dev:h5
```
#### 微信小程序开发
```bash
npm run dev:mp-weixin
```
### 构建项目
#### 构建H5
```bash
npm run build:h5
```
#### 构建微信小程序
```bash
npm run build:mp-weixin
```
### 检查页面完成度
```bash
node check-pages.js
```
## 页面列表
1. **首页** - `/pages/home/home`
2. **个人中心** - `/pages/profile/profile`
3. **常用信息** - `/pages/common-info/common-info`
4. **新增选手** - `/pages/add-player/add-player`
5. **编辑选手** - `/pages/edit-player/edit-player`
6. **新增联系人** - `/pages/add-contact/add-contact`
7. **我的报名** - `/pages/my-registration/my-registration`
8. **全部赛事列表** - `/pages/event-list/event-list`
9. **赛事详情** - `/pages/event-detail/event-detail`
10. **选择报名类型** - `/pages/register-type/register-type`
11. **选择报名项目** - `/pages/select-event/select-event`
12. **赛事报名流程** - `/pages/event-register/event-register`
## 注意事项
1. 所有静态页面已完成,数据为模拟数据
2. 实际开发时需要对接后端API接口
3. 图片资源需要替换为实际的设计图
4. 部分功能如支付需要集成第三方SDK
5. 微信小程序需要配置appid和相关权限
## 后续开发建议
1. **接口对接**
- 用户登录/注册
- 赛事列表获取
- 报名信息提交
- 支付接口对接
2. **功能完善**
- 图片上传功能
- 消息通知
- 数据缓存优化
- 错误处理机制
3. **性能优化**
- 图片懒加载
- 列表虚拟滚动
- 页面预加载
4. **用户体验**
- 加载动画
- 骨架屏
- 下拉刷新
- 上拉加载更多
## 检查报告
运行 `node check-pages.js` 可查看详细的页面完成度报告。
当前完成度:**100%** ✓
- 配置文件7/7 完成
- 公共组件3/3 完成
- 页面文件12/12 完成
## 版本信息
- 版本号V 2.0
- 开发时间2025年1月
## 许可证
MIT License

204
check-pages.js Normal file
View File

@@ -0,0 +1,204 @@
const fs = require('fs');
const path = require('path');
// 定义需要检查的页面列表
const pages = [
{
name: '首页(武术赛事通)',
path: 'pages/home/home.vue',
description: '包含轮播图、精品赛事列表'
},
{
name: '个人中心',
path: 'pages/profile/profile.vue',
description: '用户信息、我的报名、常用信息等功能入口'
},
{
name: '常用信息',
path: 'pages/common-info/common-info.vue',
description: '选手/集体/联系人信息管理含Tab切换'
},
{
name: '新增选手',
path: 'pages/add-player/add-player.vue',
description: '表单页面,包含证件类型、姓名、证件号码、队伍'
},
{
name: '编辑选手',
path: 'pages/edit-player/edit-player.vue',
description: '编辑选手信息'
},
{
name: '新增联系人',
path: 'pages/add-contact/add-contact.vue',
description: '包含手机号码、邮箱、地址、设置为默认联系人'
},
{
name: '我的报名',
path: 'pages/my-registration/my-registration.vue',
description: '全部/待开始/进行中/已结束四个Tab显示报名的赛事'
},
{
name: '全部赛事列表',
path: 'pages/event-list/event-list.vue',
description: '搜索框、日期和地区筛选'
},
{
name: '赛事详情',
path: 'pages/event-detail/event-detail.vue',
description: '赛事信息、信息发布、赛事规程等功能入口'
},
{
name: '选择报名类型',
path: 'pages/register-type/register-type.vue',
description: '单人赛/集体赛选择'
},
{
name: '选择报名项目',
path: 'pages/select-event/select-event.vue',
description: '列表形式选择报名项目'
},
{
name: '赛事报名流程',
path: 'pages/event-register/event-register.vue',
description: '三步骤:选择选手信息、订单支付、报名成功'
}
];
// 定义需要检查的组件列表
const components = [
{
name: '自定义导航栏',
path: 'components/custom-navbar/custom-navbar.vue'
},
{
name: 'Tab切换组件',
path: 'components/custom-tabs/custom-tabs.vue'
},
{
name: '确认弹窗组件',
path: 'components/confirm-modal/confirm-modal.vue'
}
];
// 定义需要检查的配置文件
const configs = [
{
name: 'pages.json',
path: 'pages.json'
},
{
name: 'manifest.json',
path: 'manifest.json'
},
{
name: 'App.vue',
path: 'App.vue'
},
{
name: 'main.js',
path: 'main.js'
},
{
name: 'uni.scss',
path: 'uni.scss'
},
{
name: 'index.html',
path: 'index.html'
},
{
name: 'package.json',
path: 'package.json'
}
];
function checkFile(filePath) {
const fullPath = path.join(__dirname, filePath);
return fs.existsSync(fullPath);
}
function generateReport() {
console.log('========================================');
console.log(' 武术赛事报名系统 - 页面完成度检查报告');
console.log('========================================\n');
let totalItems = 0;
let completedItems = 0;
// 检查配置文件
console.log('【配置文件检查】');
configs.forEach(config => {
totalItems++;
const exists = checkFile(config.path);
if (exists) {
completedItems++;
console.log(`${config.name}`);
} else {
console.log(`${config.name} [缺失]`);
}
});
console.log('\n【公共组件检查】');
components.forEach(component => {
totalItems++;
const exists = checkFile(component.path);
if (exists) {
completedItems++;
console.log(`${component.name}`);
} else {
console.log(`${component.name} [缺失]`);
}
});
console.log('\n【页面检查】');
pages.forEach((page, index) => {
totalItems++;
const exists = checkFile(page.path);
if (exists) {
completedItems++;
console.log(`${index + 1}. ${page.name}`);
console.log(` 描述: ${page.description}`);
console.log(` 路径: ${page.path}\n`);
} else {
console.log(`${index + 1}. ${page.name} [缺失]`);
console.log(` 描述: ${page.description}`);
console.log(` 路径: ${page.path}\n`);
}
});
const completionRate = ((completedItems / totalItems) * 100).toFixed(2);
console.log('========================================');
console.log('【统计信息】');
console.log(`总计项目: ${totalItems}`);
console.log(`已完成: ${completedItems}`);
console.log(`未完成: ${totalItems - completedItems}`);
console.log(`完成度: ${completionRate}%`);
console.log('========================================\n');
if (completedItems === totalItems) {
console.log('🎉 恭喜!所有页面和组件都已完成!');
console.log('\n【后续步骤】');
console.log('1. 运行 npm install 安装依赖');
console.log('2. 运行 npm run dev:h5 启动H5开发环境');
console.log('3. 运行 npm run dev:mp-weixin 启动微信小程序开发环境');
} else {
console.log('⚠️ 还有未完成的项目,请继续完善。');
}
console.log('\n【项目特点】');
console.log('✓ 支持H5和微信小程序');
console.log('✓ 基于uniapp框架开发');
console.log('✓ 完整的赛事报名流程');
console.log('✓ 选手和联系人信息管理');
console.log('✓ 响应式设计,一比一还原设计稿');
console.log('✓ 使用rpx单位自适应不同屏幕尺寸');
}
// 执行检查
try {
generateReport();
} catch (error) {
console.error('检查过程中出现错误:', error);
}

View File

@@ -0,0 +1,119 @@
<template>
<view class="modal-mask" v-if="show" @click="handleMaskClick">
<view class="modal-container" @click.stop>
<view class="modal-title">{{ title }}</view>
<view class="modal-content">{{ content }}</view>
<view class="modal-footer">
<view class="modal-btn cancel-btn" @click="handleCancel">{{ cancelText }}</view>
<view class="modal-btn confirm-btn" @click="handleConfirm">{{ confirmText }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'ConfirmModal',
props: {
show: {
type: Boolean,
default: false
},
title: {
type: String,
default: '提示'
},
content: {
type: String,
default: ''
},
cancelText: {
type: String,
default: '取消'
},
confirmText: {
type: String,
default: '确定'
},
maskClose: {
type: Boolean,
default: false
}
},
methods: {
handleMaskClick() {
if (this.maskClose) {
this.$emit('cancel');
}
},
handleCancel() {
this.$emit('cancel');
},
handleConfirm() {
this.$emit('confirm');
}
}
};
</script>
<style lang="scss" scoped>
.modal-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.modal-container {
width: 600rpx;
background-color: #fff;
border-radius: 24rpx;
overflow: hidden;
}
.modal-title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
text-align: center;
padding: 50rpx 30rpx 30rpx;
}
.modal-content {
font-size: 28rpx;
color: #666666;
text-align: center;
padding: 0 30rpx 50rpx;
line-height: 1.6;
}
.modal-footer {
display: flex;
border-top: 1rpx solid #eeeeee;
}
.modal-btn {
flex: 1;
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
}
.cancel-btn {
color: #666666;
border-right: 1rpx solid #eeeeee;
}
.confirm-btn {
color: #C93639;
font-weight: bold;
}
</style>

View File

@@ -0,0 +1,101 @@
<template>
<view class="custom-navbar" :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }">
<view class="navbar-content" :style="{ height: contentHeight + 'px' }">
<view class="navbar-left" @click="handleBack" v-if="showBack">
<text class="back-icon">&#xe601;</text>
</view>
<view class="navbar-title">{{ title }}</view>
<view class="navbar-right">
<slot name="right"></slot>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'CustomNavbar',
props: {
title: {
type: String,
default: ''
},
showBack: {
type: Boolean,
default: true
},
backgroundColor: {
type: String,
default: '#C93639'
}
},
data() {
return {
statusBarHeight: 0,
contentHeight: 44,
navHeight: 0
};
},
mounted() {
// 获取状态栏高度
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight;
this.navHeight = this.statusBarHeight + this.contentHeight;
},
methods: {
handleBack() {
uni.navigateBack({
delta: 1
});
}
}
};
</script>
<style lang="scss" scoped>
.custom-navbar {
width: 100%;
background-color: #C93639;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.navbar-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
position: relative;
}
.navbar-left {
width: 60rpx;
height: 100%;
display: flex;
align-items: center;
}
.back-icon {
font-size: 44rpx;
color: #fff;
}
.navbar-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 36rpx;
font-weight: bold;
color: #fff;
}
.navbar-right {
width: 60rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
</style>

View File

@@ -0,0 +1,89 @@
<template>
<view class="tabs-container">
<view class="tabs-wrapper">
<view
v-for="(tab, index) in tabs"
:key="index"
class="tab-item"
:class="{ active: currentIndex === index }"
@click="handleTabClick(index)"
>
<text class="tab-text">{{ tab }}</text>
<view class="tab-line" v-if="currentIndex === index"></view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'CustomTabs',
props: {
tabs: {
type: Array,
default: () => []
},
current: {
type: Number,
default: 0
}
},
data() {
return {
currentIndex: this.current
};
},
watch: {
current(val) {
this.currentIndex = val;
}
},
methods: {
handleTabClick(index) {
this.currentIndex = index;
this.$emit('change', index);
}
}
};
</script>
<style lang="scss" scoped>
.tabs-container {
background-color: #fff;
}
.tabs-wrapper {
display: flex;
align-items: center;
padding: 0 30rpx;
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 30rpx 0;
position: relative;
}
.tab-text {
font-size: 32rpx;
color: #666666;
transition: all 0.3s;
}
.tab-item.active .tab-text {
color: #333333;
font-weight: bold;
}
.tab-line {
width: 60rpx;
height: 6rpx;
background-color: #C93639;
border-radius: 3rpx;
position: absolute;
bottom: 0;
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

21
main.js Normal file
View File

@@ -0,0 +1,21 @@
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif

60
manifest.json Normal file
View File

@@ -0,0 +1,60 @@
{
"name": "martial-mini",
"appid": "",
"description": "武术赛事报名系统",
"versionName": "2.0",
"versionCode": "200",
"transformPx": false,
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"modules": {},
"distribute": {
"android": {
"permissions": []
},
"ios": {},
"sdkConfigs": {}
}
},
"quickapp": {},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false,
"es6": true,
"postcss": true,
"minified": true
},
"usingComponents": true
},
"mp-alipay": {
"usingComponents": true
},
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao": {
"usingComponents": true
},
"h5": {
"title": "武术赛事报名系统",
"template": "index.html",
"router": {
"mode": "hash",
"base": "./"
},
"optimization": {
"treeShaking": {
"enable": true
}
}
}
}

13
package-lock.json generated Normal file
View File

@@ -0,0 +1,13 @@
{
"name": "martial-mini",
"version": "2.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "martial-mini",
"version": "2.0.0",
"license": "MIT"
}
}
}

44
package.json Normal file
View File

@@ -0,0 +1,44 @@
{
"name": "martial-mini",
"version": "2.0.0",
"description": "武术赛事报名系统",
"main": "main.js",
"scripts": {
"dev:h5": "uni",
"build:h5": "uni build",
"dev:mp-weixin": "uni -p mp-weixin",
"build:mp-weixin": "uni build -p mp-weixin"
},
"dependencies": {
"vue": "^2.6.14"
},
"devDependencies": {
"@dcloudio/uni-cli-shared": "latest",
"@dcloudio/uni-template-compiler": "latest",
"@dcloudio/vue-cli-plugin-hbuilderx": "latest",
"@dcloudio/vue-cli-plugin-uni": "latest",
"@dcloudio/vue-cli-plugin-uni-optimize": "latest",
"@dcloudio/webpack-uni-mp-loader": "latest",
"@dcloudio/webpack-uni-pages-loader": "latest",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-plugin-import": "^1.13.3",
"mini-types": "*",
"miniprogram-api-typings": "*",
"postcss-comment": "^2.0.0",
"sass": "^1.49.0",
"sass-loader": "^10.1.1",
"vue-template-compiler": "^2.6.14"
},
"browserslist": [
"Android >= 4.4",
"ios >= 9"
],
"keywords": [
"uniapp",
"martial-arts",
"registration"
],
"author": "",
"license": "MIT"
}

170
pages.json Normal file
View File

@@ -0,0 +1,170 @@
{
"pages": [
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "武术赛事通",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/profile/profile",
"style": {
"navigationBarTitleText": "个人中心",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/common-info/common-info",
"style": {
"navigationBarTitleText": "常用信息",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/add-player/add-player",
"style": {
"navigationBarTitleText": "新增选手",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/edit-player/edit-player",
"style": {
"navigationBarTitleText": "编辑选手",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/add-contact/add-contact",
"style": {
"navigationBarTitleText": "新增联系人",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/my-registration/my-registration",
"style": {
"navigationBarTitleText": "我的报名",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/event-list/event-list",
"style": {
"navigationBarTitleText": "全部赛事列表",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/event-detail/event-detail",
"style": {
"navigationBarTitleText": "赛事详情",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/select-event/select-event",
"style": {
"navigationBarTitleText": "选择报名项目",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/event-register/event-register",
"style": {
"navigationBarTitleText": "赛事报名",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/register-type/register-type",
"style": {
"navigationBarTitleText": "选择报名",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/event-info/event-info",
"style": {
"navigationBarTitleText": "信息发布",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/event-rules/event-rules",
"style": {
"navigationBarTitleText": "赛事规程",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/event-schedule/event-schedule",
"style": {
"navigationBarTitleText": "活动日程",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/event-players/event-players",
"style": {
"navigationBarTitleText": "参赛选手",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/event-live/event-live",
"style": {
"navigationBarTitleText": "比赛实况",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/event-lineup/event-lineup",
"style": {
"navigationBarTitleText": "出场顺序",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/event-score/event-score",
"style": {
"navigationBarTitleText": "成绩",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/event-medals/event-medals",
"style": {
"navigationBarTitleText": "奖牌榜",
"navigationBarBackgroundColor": "#C93639",
"navigationBarTextStyle": "white"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "武术赛事",
"navigationBarBackgroundColor": "#C93639",
"backgroundColor": "#F8F8F8"
}
}

View File

@@ -0,0 +1,332 @@
<template>
<view class="add-contact-page">
<!-- 表单 -->
<view class="form-container">
<view class="form-item" @click="showIdTypePicker = true">
<view class="form-label">证件类型</view>
<view class="form-value">
<text>{{ formData.idType }}</text>
<text class="arrow"></text>
</view>
</view>
<view class="form-item">
<view class="form-label">姓名</view>
<view class="form-value">
<input
class="form-input"
v-model="formData.name"
placeholder="请输入姓名"
placeholder-class="placeholder"
/>
</view>
</view>
<view class="form-item">
<view class="form-label">证件号码</view>
<view class="form-value">
<input
class="form-input"
v-model="formData.idCard"
placeholder="请输入身份证号码"
placeholder-class="placeholder"
/>
</view>
</view>
<view class="form-item">
<view class="form-label">手机号码</view>
<view class="form-value">
<input
class="form-input"
v-model="formData.phone"
placeholder="请输入手机号码"
placeholder-class="placeholder"
type="number"
/>
</view>
</view>
<view class="form-item">
<view class="form-label">邮箱</view>
<view class="form-value">
<input
class="form-input"
v-model="formData.email"
placeholder="请输入邮箱"
placeholder-class="placeholder"
/>
</view>
</view>
<view class="form-item">
<view class="form-label">地址</view>
<view class="form-value">
<input
class="form-input"
v-model="formData.address"
placeholder="请输入地址"
placeholder-class="placeholder"
/>
</view>
</view>
<view class="form-item switch-item">
<view class="form-label">设置为默认联系人</view>
<view class="form-value">
<switch
:checked="formData.isDefault"
@change="handleSwitchChange"
color="#C93639"
/>
</view>
</view>
</view>
<!-- 提示信息 -->
<view class="hint-message" v-if="showHint">
<text class="hint-icon"></text>
<text class="hint-text">{{ hintText }}</text>
</view>
<!-- Toast提示 -->
<view class="toast-message" v-if="showToast">
<text class="toast-text">{{ toastMessage }}</text>
</view>
<!-- 提示文字 -->
<view class="info-text">
<text class="info-hint">默认关闭可切换开关</text>
</view>
<view class="warning-text">
<text>联系人用于接收比赛信息成绩和证书</text>
</view>
<!-- 按钮 -->
<view class="btn-wrapper">
<view class="btn save-btn disabled" v-if="!isFormValid">保存</view>
<view class="btn save-btn" v-else @click="handleSave">保存</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
formData: {
idType: '身份证',
name: '',
idCard: '',
phone: '',
email: '',
address: '',
isDefault: false
},
showHint: false,
hintText: '',
showToast: false,
toastMessage: '',
showIdTypePicker: false
};
},
computed: {
isFormValid() {
return (
this.formData.name &&
this.formData.idCard &&
this.formData.phone &&
this.validateIdCard(this.formData.idCard) &&
this.validatePhone(this.formData.phone)
);
}
},
methods: {
validateIdCard(idCard) {
return /^\d{18}$/.test(idCard);
},
validatePhone(phone) {
return /^1\d{10}$/.test(phone);
},
handleSwitchChange(e) {
this.formData.isDefault = e.detail.value;
},
handleSave() {
if (!this.isFormValid) {
if (this.formData.phone && !this.validatePhone(this.formData.phone)) {
this.toastMessage = '手机号码格式不正确';
this.showToast = true;
setTimeout(() => {
this.showToast = false;
}, 2000);
} else if (this.formData.idCard && !this.validateIdCard(this.formData.idCard)) {
this.toastMessage = '身份证号码格式不正确';
this.showToast = true;
setTimeout(() => {
this.showToast = false;
}, 2000);
} else {
this.hintText = '请完善信息';
this.showHint = true;
setTimeout(() => {
this.showHint = false;
}, 2000);
}
return;
}
// 实际保存逻辑
uni.showToast({
title: '保存成功',
icon: 'success'
});
setTimeout(() => {
uni.navigateBack();
}, 1500);
}
}
};
</script>
<style lang="scss" scoped>
.add-contact-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 200rpx;
}
.form-container {
background-color: #fff;
margin: 30rpx;
border-radius: 16rpx;
overflow: hidden;
}
.form-item {
display: flex;
align-items: center;
padding: 35rpx 30rpx;
border-bottom: 1rpx solid #f5f5f5;
}
.form-item:last-child {
border-bottom: none;
}
.switch-item {
padding: 30rpx;
}
.form-label {
width: 180rpx;
font-size: 30rpx;
color: #333333;
}
.form-value {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.form-input {
flex: 1;
font-size: 30rpx;
color: #333333;
}
.placeholder {
color: #cccccc;
}
.arrow {
font-size: 40rpx;
color: #cccccc;
margin-left: 10rpx;
}
.hint-message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 30rpx 50rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
gap: 15rpx;
z-index: 9999;
}
.hint-icon {
font-size: 40rpx;
}
.hint-text {
font-size: 28rpx;
}
.toast-message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 30rpx 50rpx;
border-radius: 16rpx;
z-index: 9999;
}
.toast-text {
font-size: 28rpx;
}
.info-text {
margin: 20rpx 30rpx;
text-align: center;
}
.info-hint {
font-size: 24rpx;
color: #C93639;
}
.warning-text {
margin: 20rpx 30rpx;
text-align: center;
font-size: 24rpx;
color: #C93639;
}
.btn-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx;
background-color: #f5f5f5;
}
.btn {
width: 100%;
text-align: center;
padding: 30rpx;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: bold;
}
.save-btn {
background-color: #C93639;
color: #fff;
}
.save-btn.disabled {
background-color: rgba(201, 54, 57, 0.5);
}
</style>

View File

@@ -0,0 +1,339 @@
<template>
<view class="add-player-page">
<!-- 表单 -->
<view class="form-container">
<view class="form-item" @click="showIdTypePicker = true">
<view class="form-label">证件类型</view>
<view class="form-value">
<text :class="{ placeholder: !formData.idType }">{{ formData.idType || '身份证' }}</text>
<text class="arrow"></text>
</view>
</view>
<view class="form-item">
<view class="form-label">姓名</view>
<view class="form-value">
<input
class="form-input"
v-model="formData.name"
placeholder="请输入姓名"
placeholder-class="placeholder"
/>
</view>
</view>
<view class="form-item">
<view class="form-label">证件号码</view>
<view class="form-value">
<input
class="form-input"
v-model="formData.idCard"
placeholder="请输入身份证号码"
placeholder-class="placeholder"
/>
</view>
</view>
<view class="form-item">
<view class="form-label">队伍</view>
<view class="form-value">
<input
class="form-input"
v-model="formData.team"
placeholder="请输入队伍名称"
placeholder-class="placeholder"
/>
</view>
</view>
</view>
<!-- 错误提示 -->
<view class="error-hints" v-if="errors.length > 0">
<view class="error-item" v-for="(error, index) in errors" :key="index">
<text class="error-label">{{ error.label }}</text>
<text class="error-msg">{{ error.message }}</text>
</view>
</view>
<!-- 提示信息 -->
<view class="hint-message" v-if="showHint">
<text class="hint-icon"></text>
<text class="hint-text">请完善信息</text>
</view>
<!-- Toast提示 -->
<view class="toast-message" v-if="showToast">
<text class="toast-text">{{ toastMessage }}</text>
</view>
<!-- 按钮 -->
<view class="btn-wrapper">
<view class="btn save-btn disabled" v-if="!isFormValid">保存</view>
<view class="btn save-btn" v-else @click="handleSave">保存</view>
</view>
<!-- 证件类型选择器 -->
<picker-view
class="picker-view"
v-if="showIdTypePicker"
:value="[0]"
@change="handleIdTypeChange"
@cancel="showIdTypePicker = false"
>
<picker-view-column>
<view class="picker-item">身份证</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
data() {
return {
formData: {
idType: '身份证',
name: '',
idCard: '',
team: ''
},
errors: [],
showHint: false,
showToast: false,
toastMessage: '',
showIdTypePicker: false
};
},
computed: {
isFormValid() {
return (
this.formData.name &&
this.formData.idCard &&
this.formData.team &&
this.validateIdCard(this.formData.idCard)
);
}
},
watch: {
'formData.name'(val) {
this.validateForm();
},
'formData.idCard'(val) {
this.validateForm();
},
'formData.team'(val) {
this.validateForm();
}
},
methods: {
validateIdCard(idCard) {
// 简单的身份证号验证
return /^\d{18}$/.test(idCard);
},
validateForm() {
this.errors = [];
this.showHint = false;
if (!this.formData.name || !this.formData.idCard || !this.formData.team) {
this.showHint = true;
if (!this.formData.name || !this.formData.idCard || !this.formData.team) {
this.errors.push({
label: '有空文本时弹出:',
message: '按钮置灰'
});
}
}
if (this.formData.idCard && !this.validateIdCard(this.formData.idCard)) {
this.errors.push({
label: '身份证不足18位',
message: '按钮置灰'
});
this.errors.push({
label: '输入不合法:',
message: '按钮置灰'
});
}
},
handleIdTypeChange(e) {
this.formData.idType = '身份证';
this.showIdTypePicker = false;
},
handleSave() {
if (!this.isFormValid) {
return;
}
// 显示身份证号码格式错误提示(模拟)
this.toastMessage = '身份证号码格式不正确';
this.showToast = true;
setTimeout(() => {
this.showToast = false;
}, 2000);
// 实际保存逻辑
// uni.navigateBack();
}
}
};
</script>
<style lang="scss" scoped>
.add-player-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 200rpx;
}
.form-container {
background-color: #fff;
margin: 30rpx;
border-radius: 16rpx;
overflow: hidden;
}
.form-item {
display: flex;
align-items: center;
padding: 35rpx 30rpx;
border-bottom: 1rpx solid #f5f5f5;
}
.form-item:last-child {
border-bottom: none;
}
.form-label {
width: 180rpx;
font-size: 30rpx;
color: #333333;
}
.form-value {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.form-input {
flex: 1;
font-size: 30rpx;
color: #333333;
}
.placeholder {
color: #cccccc;
}
.arrow {
font-size: 40rpx;
color: #cccccc;
margin-left: 10rpx;
}
.error-hints {
margin: 30rpx;
padding: 30rpx;
background-color: #fff;
border-radius: 16rpx;
}
.error-item {
margin-bottom: 15rpx;
}
.error-label {
font-size: 26rpx;
color: #C93639;
margin-right: 10rpx;
}
.error-msg {
font-size: 26rpx;
color: #C93639;
}
.hint-message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 30rpx 50rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
gap: 15rpx;
z-index: 9999;
}
.hint-icon {
font-size: 40rpx;
}
.hint-text {
font-size: 28rpx;
}
.toast-message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 30rpx 50rpx;
border-radius: 16rpx;
z-index: 9999;
}
.toast-text {
font-size: 28rpx;
}
.btn-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx;
background-color: #f5f5f5;
}
.btn {
width: 100%;
text-align: center;
padding: 30rpx;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: bold;
}
.save-btn {
background-color: #C93639;
color: #fff;
}
.save-btn.disabled {
background-color: rgba(201, 54, 57, 0.5);
}
.picker-view {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 500rpx;
background-color: #fff;
z-index: 9999;
}
.picker-item {
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 30rpx;
}
</style>

View File

@@ -0,0 +1,260 @@
<template>
<view class="common-info-page">
<!-- Tab切换 -->
<custom-tabs :tabs="tabs" :current="currentTab" @change="handleTabChange"></custom-tabs>
<!-- 新增按钮 -->
<view class="add-btn-wrapper" @click="handleAdd">
<text class="add-icon"></text>
<text class="add-text">{{ currentTab === 0 ? '新增选手' : '新增联系人' }}</text>
</view>
<!-- 选手列表 -->
<view class="player-list" v-if="currentTab === 0 && playerList.length > 0">
<view class="player-item" v-for="(item, index) in playerList" :key="index">
<view class="player-info">
<view class="player-name">{{ item.name }}</view>
<view class="player-id">身份证{{ item.idCard }}</view>
</view>
<view class="player-actions">
<view class="action-btn edit-btn" @click.stop="handleEdit(item)">
<text class="icon"></text>
<text>编辑</text>
</view>
<view class="action-btn delete-btn" @click.stop="handleDelete(item)">
<text class="icon">🗑</text>
<text>删除</text>
</view>
</view>
</view>
</view>
<!-- 空状态 -->
<view class="empty-state" v-if="currentTab === 0 && playerList.length === 0">
<text class="empty-text">暂无选手信息</text>
</view>
<!-- 联系人Tab内容 -->
<view class="empty-state" v-if="currentTab === 1">
<text class="empty-text">暂无联系人信息</text>
</view>
<!-- 删除确认弹窗 -->
<confirm-modal
:show="showDeleteModal"
title="删除选手"
content="确定要删除该选手吗?"
@cancel="showDeleteModal = false"
@confirm="confirmDelete"
></confirm-modal>
<!-- 删除成功提示 -->
<view class="delete-success-toast" v-if="showSuccessToast">
<text class="toast-icon"></text>
<text class="toast-text">删除成功</text>
</view>
</view>
</template>
<script>
import CustomTabs from '../../components/custom-tabs/custom-tabs.vue';
import ConfirmModal from '../../components/confirm-modal/confirm-modal.vue';
export default {
components: {
CustomTabs,
ConfirmModal
},
data() {
return {
tabs: ['选手', '联系人'],
currentTab: 0,
playerList: [
{
id: 1,
name: '张三',
idCard: '123456789000000000'
},
{
id: 2,
name: '张三',
idCard: '123456789000000000'
},
{
id: 3,
name: '张三',
idCard: '123456789000000000'
},
{
id: 4,
name: '张三',
idCard: '123456789000000000'
},
{
id: 5,
name: '张三',
idCard: '123456789000000000'
}
],
showDeleteModal: false,
showSuccessToast: false,
currentItem: null
};
},
methods: {
handleTabChange(index) {
this.currentTab = index;
},
handleAdd() {
if (this.currentTab === 0) {
uni.navigateTo({
url: '/pages/add-player/add-player'
});
} else if (this.currentTab === 1) {
uni.navigateTo({
url: '/pages/add-contact/add-contact'
});
}
},
handleEdit(item) {
uni.navigateTo({
url: '/pages/edit-player/edit-player?id=' + item.id
});
},
handleDelete(item) {
this.currentItem = item;
this.showDeleteModal = true;
},
confirmDelete() {
this.showDeleteModal = false;
// 执行删除操作
const index = this.playerList.findIndex(item => item.id === this.currentItem.id);
if (index > -1) {
this.playerList.splice(index, 1);
}
// 显示成功提示
this.showSuccessToast = true;
setTimeout(() => {
this.showSuccessToast = false;
}, 2000);
}
}
};
</script>
<style lang="scss" scoped>
.common-info-page {
min-height: 100vh;
background-color: #f5f5f5;
}
.add-btn-wrapper {
background-color: #fff;
padding: 30rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 10rpx;
border-bottom: 1rpx solid #f5f5f5;
}
.add-icon {
font-size: 36rpx;
color: #C93639;
}
.add-text {
font-size: 30rpx;
color: #C93639;
}
.player-list {
padding: 30rpx;
}
.player-item {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 20rpx;
}
.player-info {
margin-bottom: 20rpx;
}
.player-name {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 10rpx;
}
.player-id {
font-size: 26rpx;
color: #666666;
}
.player-actions {
display: flex;
justify-content: flex-end;
gap: 20rpx;
}
.action-btn {
display: flex;
align-items: center;
gap: 5rpx;
padding: 12rpx 30rpx;
border-radius: 8rpx;
font-size: 26rpx;
border: 2rpx solid;
}
.edit-btn {
color: #C93639;
border-color: #C93639;
}
.delete-btn {
color: #C93639;
border-color: #C93639;
}
.icon {
font-size: 28rpx;
}
.empty-state {
padding: 200rpx 0;
text-align: center;
}
.empty-text {
font-size: 28rpx;
color: #999999;
}
.delete-success-toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 30rpx 50rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
gap: 15rpx;
z-index: 10000;
}
.toast-icon {
font-size: 40rpx;
}
.toast-text {
font-size: 28rpx;
}
</style>

View File

@@ -0,0 +1,300 @@
<template>
<view class="edit-player-page">
<!-- 表单 -->
<view class="form-container">
<view class="form-item" @click="showIdTypePicker = true">
<view class="form-label">证件类型</view>
<view class="form-value">
<text>{{ formData.idType }}</text>
<text class="arrow"></text>
</view>
</view>
<view class="form-item">
<view class="form-label">姓名</view>
<view class="form-value">
<input
class="form-input"
v-model="formData.name"
placeholder="请输入姓名"
/>
</view>
</view>
<view class="form-item">
<view class="form-label">证件号码</view>
<view class="form-value">
<input
class="form-input"
v-model="formData.idCard"
placeholder="请输入身份证号码"
/>
</view>
</view>
<view class="form-item">
<view class="form-label">队伍</view>
<view class="form-value">
<input
class="form-input"
v-model="formData.team"
placeholder="请输入队伍名称"
/>
</view>
</view>
</view>
<!-- 错误提示 -->
<view class="error-hints" v-if="errors.length > 0">
<view class="error-item" v-for="(error, index) in errors" :key="index">
<text class="error-label">{{ error.label }}</text>
<text class="error-msg">{{ error.message }}</text>
</view>
</view>
<!-- 提示信息 -->
<view class="hint-message" v-if="showHint">
<text class="hint-icon"></text>
<text class="hint-text">请完善信息</text>
</view>
<!-- Toast提示 -->
<view class="toast-message" v-if="showToast">
<text class="toast-text">{{ toastMessage }}</text>
</view>
<!-- 按钮 -->
<view class="btn-wrapper">
<view class="btn save-btn disabled" v-if="!isFormValid">保存</view>
<view class="btn save-btn" v-else @click="handleSave">保存</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
formData: {
idType: '身份证',
name: '张三',
idCard: '123456789000000000',
team: '少林寺武术学院'
},
errors: [],
showHint: false,
showToast: false,
toastMessage: '',
showIdTypePicker: false
};
},
computed: {
isFormValid() {
return (
this.formData.name &&
this.formData.idCard &&
this.formData.team &&
this.validateIdCard(this.formData.idCard)
);
}
},
watch: {
'formData.name'(val) {
this.validateForm();
},
'formData.idCard'(val) {
this.validateForm();
},
'formData.team'(val) {
this.validateForm();
}
},
onLoad(options) {
if (options.id) {
// 加载选手数据
this.loadPlayerData(options.id);
}
},
methods: {
loadPlayerData(id) {
// 模拟加载数据
// 实际应该从后端获取
},
validateIdCard(idCard) {
return /^\d{18}$/.test(idCard);
},
validateForm() {
this.errors = [];
this.showHint = false;
if (!this.formData.name || !this.formData.idCard || !this.formData.team) {
this.showHint = true;
this.errors.push({
label: '有空文本时弹出:',
message: '按钮置灰'
});
}
if (this.formData.idCard && !this.validateIdCard(this.formData.idCard)) {
this.errors.push({
label: '身份证不足18位',
message: '按钮置灰'
});
}
},
handleSave() {
if (!this.isFormValid) {
return;
}
this.toastMessage = '身份证号码格式不正确';
this.showToast = true;
setTimeout(() => {
this.showToast = false;
}, 2000);
// 实际保存逻辑
// uni.navigateBack();
}
}
};
</script>
<style lang="scss" scoped>
.edit-player-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 200rpx;
}
.form-container {
background-color: #fff;
margin: 30rpx;
border-radius: 16rpx;
overflow: hidden;
}
.form-item {
display: flex;
align-items: center;
padding: 35rpx 30rpx;
border-bottom: 1rpx solid #f5f5f5;
}
.form-item:last-child {
border-bottom: none;
}
.form-label {
width: 180rpx;
font-size: 30rpx;
color: #333333;
}
.form-value {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.form-input {
flex: 1;
font-size: 30rpx;
color: #333333;
}
.arrow {
font-size: 40rpx;
color: #cccccc;
margin-left: 10rpx;
}
.error-hints {
margin: 30rpx;
padding: 30rpx;
background-color: #fff;
border-radius: 16rpx;
}
.error-item {
margin-bottom: 15rpx;
}
.error-label {
font-size: 26rpx;
color: #C93639;
margin-right: 10rpx;
}
.error-msg {
font-size: 26rpx;
color: #C93639;
}
.hint-message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 30rpx 50rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
gap: 15rpx;
z-index: 9999;
}
.hint-icon {
font-size: 40rpx;
}
.hint-text {
font-size: 28rpx;
}
.toast-message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 30rpx 50rpx;
border-radius: 16rpx;
z-index: 9999;
}
.toast-text {
font-size: 28rpx;
}
.btn-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx;
background-color: #f5f5f5;
}
.btn {
width: 100%;
text-align: center;
padding: 30rpx;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: bold;
}
.save-btn {
background-color: #C93639;
color: #fff;
}
.save-btn.disabled {
background-color: rgba(201, 54, 57, 0.5);
}
</style>

View File

@@ -0,0 +1,251 @@
<template>
<view class="event-detail-page">
<!-- 赛事标题和信息 -->
<view class="event-header">
<view class="event-title">{{ eventInfo.title }}</view>
<view class="divider"></view>
<view class="event-info">
<text class="label">地点</text>
<text class="value">{{ eventInfo.location }}</text>
</view>
<view class="event-info">
<text class="label">报名时间</text>
<text class="value">{{ eventInfo.registerTime }}</text>
</view>
<view class="event-info">
<text class="label">比赛时间</text>
<text class="value">{{ eventInfo.matchTime }}</text>
</view>
<view class="event-info">
<text class="label">报名人数</text>
<text class="value">{{ eventInfo.registerCount }}</text>
</view>
<view class="divider"></view>
</view>
<!-- 功能网格 -->
<view class="function-grid">
<view class="function-item" @click="handleFunction('info')">
<view class="function-icon" style="background-color: #C93639;">
<text>📄</text>
</view>
<text class="function-text">信息发布</text>
</view>
<view class="function-item" @click="handleFunction('rules')">
<view class="function-icon" style="background-color: #C93639;">
<text>📋</text>
</view>
<text class="function-text">赛事规程</text>
</view>
<view class="function-item" @click="handleFunction('schedule')">
<view class="function-icon" style="background-color: #C93639;">
<text>📅</text>
</view>
<text class="function-text">活动日程</text>
</view>
<view class="function-item" @click="handleFunction('players')">
<view class="function-icon" style="background-color: #C93639;">
<text>👥</text>
</view>
<text class="function-text">参赛选手</text>
</view>
<view class="function-item" @click="handleFunction('match')">
<view class="function-icon" style="background-color: #C93639;">
<text>📹</text>
</view>
<text class="function-text">比赛实况</text>
</view>
<view class="function-item" @click="handleFunction('lineup')">
<view class="function-icon" style="background-color: #C93639;">
<text>📝</text>
</view>
<text class="function-text">出场顺序</text>
</view>
<view class="function-item" @click="handleFunction('score')">
<view class="function-icon" style="background-color: #C93639;">
<text>📊</text>
</view>
<text class="function-text">成绩</text>
</view>
<view class="function-item" @click="handleFunction('awards')">
<view class="function-icon" style="background-color: #C93639;">
<text>🏆</text>
</view>
<text class="function-text">奖牌榜</text>
</view>
<view class="function-item" @click="handleFunction('photos')">
<view class="function-icon" style="background-color: #C93639;">
<text>🖼</text>
</view>
<text class="function-text">图片直播</text>
</view>
</view>
<!-- 报名按钮 -->
<view class="register-btn-wrapper" v-if="eventInfo.status === 'open'">
<view class="register-btn" @click="goToRegister">去报名</view>
</view>
<!-- 报名已结束状态 -->
<view class="register-btn-wrapper" v-if="eventInfo.status === 'finished'">
<view class="register-btn disabled">报名已结束</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
eventInfo: {
id: 1,
title: '2025年全国武术散打锦标赛暨第十七届世界武术锦标赛选拔赛',
location: '天津市-天津市体育中心',
registerTime: '2025.02.01-2025.02.10',
matchTime: '2025.02.01-2025.02.10',
registerCount: '25212',
status: 'open' // open, finished
}
};
},
onLoad(options) {
if (options.id) {
this.loadEventDetail(options.id);
}
},
methods: {
loadEventDetail(id) {
// 加载赛事详情
// 实际应该从后端获取
},
handleFunction(type) {
const routeMap = {
'info': '/pages/event-info/event-info',
'rules': '/pages/event-rules/event-rules',
'schedule': '/pages/event-schedule/event-schedule',
'players': '/pages/event-players/event-players',
'match': '/pages/event-live/event-live',
'lineup': '/pages/event-lineup/event-lineup',
'score': '/pages/event-score/event-score',
'awards': '/pages/event-medals/event-medals',
'photos': '' // 图片直播暂未实现
};
const url = routeMap[type];
if (url) {
uni.navigateTo({ url });
} else {
uni.showToast({
title: '功能开发中',
icon: 'none'
});
}
},
goToRegister() {
uni.navigateTo({
url: '/pages/register-type/register-type?id=' + this.eventInfo.id
});
}
}
};
</script>
<style lang="scss" scoped>
.event-detail-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 180rpx;
}
.event-header {
background-color: #fff;
padding: 30rpx;
margin-bottom: 20rpx;
}
.event-title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
line-height: 1.5;
margin-bottom: 20rpx;
}
.divider {
height: 6rpx;
background-color: #C93639;
width: 120rpx;
margin: 30rpx 0;
}
.event-info {
display: flex;
margin-bottom: 15rpx;
}
.label {
font-size: 28rpx;
color: #666666;
flex-shrink: 0;
}
.value {
font-size: 28rpx;
color: #666666;
}
.function-grid {
background-color: #fff;
padding: 30rpx;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40rpx 30rpx;
}
.function-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 15rpx;
}
.function-icon {
width: 120rpx;
height: 120rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 60rpx;
}
.function-text {
font-size: 26rpx;
color: #333333;
text-align: center;
}
.register-btn-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx;
background-color: #fff;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.register-btn {
background-color: #C93639;
color: #fff;
text-align: center;
padding: 30rpx;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: bold;
}
.register-btn.disabled {
background-color: #999999;
}
</style>

View File

@@ -0,0 +1,143 @@
<template>
<view class="event-info-page">
<!-- 信息列表 -->
<view class="info-list">
<view class="info-item" v-for="(item, index) in infoList" :key="index" @click="handleItemClick(item)">
<view class="info-header">
<view class="info-tag" :class="item.type">{{ item.typeText }}</view>
<view class="info-time">{{ item.time }}</view>
</view>
<view class="info-title">{{ item.title }}</view>
<view class="info-desc">{{ item.desc }}</view>
</view>
</view>
<!-- 空状态 -->
<view class="empty-state" v-if="infoList.length === 0">
<text class="empty-text">暂无信息发布</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
infoList: [
{
id: 1,
type: 'notice',
typeText: '通知',
title: '关于赛事报名截止时间的通知',
desc: '本次赛事报名将于2025年2月10日24:00截止请各位选手抓紧时间报名...',
time: '2025-01-20 10:30'
},
{
id: 2,
type: 'announcement',
typeText: '公告',
title: '比赛场地变更公告',
desc: '因场馆维护比赛场地由原定的A馆变更为B馆请各位参赛选手注意...',
time: '2025-01-18 14:20'
},
{
id: 3,
type: 'important',
typeText: '重要',
title: '疫情防控须知',
desc: '所有参赛人员需提供48小时内核酸检测阴性证明并配合现场测温...',
time: '2025-01-15 09:00'
}
]
};
},
methods: {
handleItemClick(item) {
uni.showToast({
title: '查看详情',
icon: 'none'
});
}
}
};
</script>
<style lang="scss" scoped>
.event-info-page {
min-height: 100vh;
background-color: #f5f5f5;
padding: 20rpx 30rpx;
}
.info-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.info-item {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
}
.info-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15rpx;
}
.info-tag {
font-size: 24rpx;
padding: 8rpx 20rpx;
border-radius: 8rpx;
color: #fff;
}
.info-tag.notice {
background-color: #C93639;
}
.info-tag.announcement {
background-color: #FF8C00;
}
.info-tag.important {
background-color: #DC143C;
}
.info-time {
font-size: 24rpx;
color: #999999;
}
.info-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 10rpx;
line-height: 1.4;
}
.info-desc {
font-size: 26rpx;
color: #666666;
line-height: 1.6;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.empty-state {
padding: 200rpx 0;
text-align: center;
}
.empty-text {
font-size: 28rpx;
color: #999999;
}
</style>

View File

@@ -0,0 +1,244 @@
<template>
<view class="event-lineup-page">
<!-- 组别选择 -->
<view class="group-tabs">
<view
class="group-tab"
v-for="(group, index) in groups"
:key="index"
:class="{ active: currentGroup === index }"
@click="currentGroup = index"
>
{{ group }}
</view>
</view>
<!-- 出场顺序列表 -->
<view class="lineup-list">
<view class="lineup-item" v-for="(item, index) in currentLineup" :key="index">
<view class="lineup-order">
<view class="order-number">{{ item.order }}</view>
<text class="order-text"></text>
</view>
<view class="lineup-info">
<view class="lineup-name">{{ item.name }}</view>
<view class="lineup-detail">
<text class="detail-item">{{ item.team }}</text>
<text class="divider">|</text>
<text class="detail-item">{{ item.time }}</text>
</view>
</view>
<view class="lineup-status" :class="item.status">
{{ item.statusText }}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentGroup: 0,
groups: ['男子A组', '男子B组', '女子A组'],
lineups: {
0: [
{
order: 1,
name: '张三',
team: '北京队',
time: '09:00',
status: 'finished',
statusText: '已完成'
},
{
order: 2,
name: '李四',
team: '上海队',
time: '09:15',
status: 'finished',
statusText: '已完成'
},
{
order: 3,
name: '王五',
team: '广东队',
time: '09:30',
status: 'ongoing',
statusText: '进行中'
},
{
order: 4,
name: '赵六',
team: '天津队',
time: '09:45',
status: 'waiting',
statusText: '待出场'
},
{
order: 5,
name: '刘七',
team: '江苏队',
time: '10:00',
status: 'waiting',
statusText: '待出场'
}
],
1: [
{
order: 1,
name: '孙八',
team: '浙江队',
time: '10:30',
status: 'waiting',
statusText: '待出场'
},
{
order: 2,
name: '周九',
team: '湖北队',
time: '10:45',
status: 'waiting',
statusText: '待出场'
}
],
2: [
{
order: 1,
name: '小红',
team: '四川队',
time: '14:00',
status: 'waiting',
statusText: '待出场'
},
{
order: 2,
name: '小芳',
team: '河南队',
time: '14:15',
status: 'waiting',
statusText: '待出场'
}
]
}
};
},
computed: {
currentLineup() {
return this.lineups[this.currentGroup] || [];
}
}
};
</script>
<style lang="scss" scoped>
.event-lineup-page {
min-height: 100vh;
background-color: #f5f5f5;
}
.group-tabs {
background-color: #fff;
display: flex;
padding: 20rpx 30rpx;
gap: 15rpx;
overflow-x: auto;
margin-bottom: 20rpx;
}
.group-tab {
padding: 15rpx 30rpx;
border-radius: 50rpx;
font-size: 26rpx;
color: #666666;
background-color: #f5f5f5;
white-space: nowrap;
flex-shrink: 0;
}
.group-tab.active {
background-color: #C93639;
color: #fff;
}
.lineup-list {
padding: 0 30rpx 20rpx;
}
.lineup-item {
background-color: #fff;
border-radius: 16rpx;
padding: 25rpx 30rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
gap: 25rpx;
}
.lineup-order {
width: 80rpx;
height: 80rpx;
background: linear-gradient(135deg, #C93639 0%, #A02629 100%);
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.order-number {
font-size: 36rpx;
font-weight: bold;
color: #fff;
line-height: 1;
}
.order-text {
font-size: 20rpx;
color: rgba(255, 255, 255, 0.9);
}
.lineup-info {
flex: 1;
}
.lineup-name {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 8rpx;
}
.lineup-detail {
font-size: 24rpx;
color: #666666;
}
.divider {
margin: 0 10rpx;
}
.lineup-status {
padding: 8rpx 20rpx;
border-radius: 8rpx;
font-size: 24rpx;
flex-shrink: 0;
}
.lineup-status.finished {
background-color: #E8F5E9;
color: #4CAF50;
}
.lineup-status.ongoing {
background-color: #FFF3E0;
color: #FF9800;
}
.lineup-status.waiting {
background-color: #F5F5F5;
color: #999999;
}
</style>

View File

@@ -0,0 +1,351 @@
<template>
<view class="event-list-page">
<!-- 搜索栏 -->
<view class="search-bar">
<view class="search-input-wrapper">
<text class="search-icon">🔍</text>
<input
class="search-input"
v-model="searchText"
placeholder="请输入赛事关键字"
placeholder-class="placeholder"
/>
</view>
</view>
<!-- 筛选栏 -->
<view class="filter-bar">
<view class="filter-item" @click="showDatePicker = true">
<text>{{ selectedDate || '日期' }}</text>
<text class="dropdown-icon"></text>
</view>
<view class="filter-item" @click="showAreaPicker = true">
<text>{{ selectedArea || '地区' }}</text>
<text class="dropdown-icon"></text>
</view>
</view>
<!-- 赛事列表 -->
<view class="event-list" v-if="filteredEventList.length > 0">
<view
class="event-item"
v-for="(item, index) in filteredEventList"
:key="index"
@click="goToEventDetail(item)"
>
<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.registerTime }}</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.registerCount }}</text>
</view>
<view class="event-footer">
<view class="register-btn" @click.stop="goToRegister(item)">
{{ item.status === 'finished' ? '报名已结束' : '立即报名' }}
</view>
</view>
</view>
</view>
<!-- 空状态 -->
<view class="empty-state" v-else>
<text class="empty-text">没有相关结果</text>
</view>
<!-- 日期选择器 -->
<view class="picker-mask" v-if="showDatePicker" @click="showDatePicker = false">
<view class="picker-content" @click.stop>
<view class="picker-header">
<text @click="showDatePicker = false">取消</text>
<text @click="confirmDatePicker">确定</text>
</view>
<picker-view :value="datePickerValue" @change="handleDateChange" class="picker-view">
<picker-view-column>
<view class="picker-item" v-for="(item, index) in dateOptions" :key="index">
{{ item }}
</view>
</picker-view-column>
</picker-view>
</view>
</view>
<!-- 地区选择器 -->
<view class="picker-mask" v-if="showAreaPicker" @click="showAreaPicker = false">
<view class="picker-content" @click.stop>
<view class="picker-header">
<text @click="showAreaPicker = false">取消</text>
<text @click="confirmAreaPicker">确定</text>
</view>
<picker-view :value="areaPickerValue" @change="handleAreaChange" class="picker-view">
<picker-view-column>
<view class="picker-item" v-for="(item, index) in areaOptions" :key="index">
{{ item }}
</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
searchText: '',
selectedDate: '',
selectedArea: '',
showDatePicker: false,
showAreaPicker: false,
datePickerValue: [0],
areaPickerValue: [0],
dateOptions: ['2025-04-09', '2025-04-10', '2025-04-11'],
areaOptions: ['乌鲁木齐', '天津市', '北京市'],
eventList: [
{
id: 1,
title: '2025年全国武术散打锦标赛暨第十七届世界武术锦标赛选拔赛',
location: '天津市-天津市体育中心',
registerTime: '2025.02.01-2025.02.10',
matchTime: '2025.02.01-2025.02.10',
registerCount: '25212',
status: 'open'
},
{
id: 2,
title: '2025年全国武术套路锦标赛',
location: '天津市-天津市体育中心',
registerTime: '2025.02.01-2025.02.10',
matchTime: '2025.02.01-2025.02.10',
registerCount: '25212',
status: 'finished'
},
{
id: 3,
title: '2025年全国武术散打锦标赛暨第十七届世界武术锦标赛选拔赛',
location: '天津市-天津市体育中心',
registerTime: '2025.02.01-2025.02.10',
matchTime: '2025.02.01-2025.02.10',
registerCount: '25212',
status: 'open'
},
{
id: 4,
title: '2025年全国武术散打锦标赛暨第十七届世界武术锦标赛选拔赛',
location: '天津市-天津市体育中心',
registerTime: '2025.02.01-2025.02.10',
matchTime: '2025.02.01-2025.02.10',
registerCount: '25212',
status: 'open'
}
]
};
},
computed: {
filteredEventList() {
return this.eventList.filter(item => {
if (this.searchText && !item.title.includes(this.searchText)) {
return false;
}
// 可以添加更多筛选条件
return true;
});
}
},
methods: {
handleDateChange(e) {
this.datePickerValue = e.detail.value;
},
handleAreaChange(e) {
this.areaPickerValue = e.detail.value;
},
confirmDatePicker() {
this.selectedDate = this.dateOptions[this.datePickerValue[0]];
this.showDatePicker = false;
},
confirmAreaPicker() {
this.selectedArea = this.areaOptions[this.areaPickerValue[0]];
this.showAreaPicker = false;
},
goToEventDetail(item) {
uni.navigateTo({
url: '/pages/event-detail/event-detail?id=' + item.id
});
},
goToRegister(item) {
if (item.status === 'open') {
uni.navigateTo({
url: '/pages/register-type/register-type?id=' + item.id
});
}
}
}
};
</script>
<style lang="scss" scoped>
.event-list-page {
min-height: 100vh;
background-color: #f5f5f5;
}
.search-bar {
background-color: #fff;
padding: 20rpx 30rpx;
}
.search-input-wrapper {
display: flex;
align-items: center;
background-color: #f5f5f5;
border-radius: 50rpx;
padding: 20rpx 30rpx;
}
.search-icon {
font-size: 32rpx;
margin-right: 15rpx;
color: #999999;
}
.search-input {
flex: 1;
font-size: 28rpx;
}
.placeholder {
color: #cccccc;
}
.filter-bar {
display: flex;
gap: 20rpx;
padding: 20rpx 30rpx;
background-color: #fff;
margin-bottom: 20rpx;
}
.filter-item {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
font-size: 28rpx;
color: #333333;
}
.dropdown-icon {
font-size: 24rpx;
color: #999999;
}
.event-list {
padding: 0 30rpx 30rpx;
}
.event-item {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 20rpx;
}
.event-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 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;
}
.event-footer {
display: flex;
justify-content: flex-end;
margin-top: 20rpx;
}
.register-btn {
background-color: #C93639;
color: #fff;
padding: 16rpx 50rpx;
border-radius: 50rpx;
font-size: 28rpx;
}
.empty-state {
padding: 200rpx 0;
text-align: center;
}
.empty-text {
font-size: 28rpx;
color: #999999;
}
.picker-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
align-items: flex-end;
}
.picker-content {
width: 100%;
background-color: #fff;
border-radius: 24rpx 24rpx 0 0;
}
.picker-header {
display: flex;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1rpx solid #f5f5f5;
font-size: 30rpx;
}
.picker-view {
height: 400rpx;
}
.picker-item {
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 30rpx;
}
</style>

View File

@@ -0,0 +1,167 @@
<template>
<view class="event-live-page">
<!-- 实况列表 -->
<view class="live-list">
<view class="live-item" v-for="(item, index) in liveList" :key="index">
<view class="live-time">{{ item.time }}</view>
<view class="live-content">
<view class="live-type" :class="item.type">{{ item.typeText }}</view>
<view class="live-text">{{ item.content }}</view>
<view class="live-images" v-if="item.images && item.images.length > 0">
<image
class="live-image"
v-for="(img, idx) in item.images"
:key="idx"
:src="img"
mode="aspectFill"
></image>
</view>
</view>
</view>
</view>
<!-- 刷新提示 -->
<view class="refresh-tip">
<text class="tip-icon">🔄</text>
<text class="tip-text">下拉刷新获取最新实况</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
liveList: [
{
time: '16:45',
type: 'highlight',
typeText: '精彩瞬间',
content: '张三选手以一记精彩的侧踢得分,现场观众掌声雷动!',
images: []
},
{
time: '16:30',
type: 'score',
typeText: '比分',
content: '男子散打决赛:张三 3:2 李四,比赛进入白热化阶段',
images: []
},
{
time: '16:15',
type: 'news',
typeText: '赛况',
content: '男子散打决赛正式开始,双方选手入场,裁判宣读比赛规则',
images: []
},
{
time: '16:00',
type: 'news',
typeText: '赛况',
content: '上一场比赛结束,场地准备中...',
images: []
},
{
time: '15:45',
type: 'highlight',
typeText: '精彩瞬间',
content: '半决赛第二场,王五选手表现出色,成功晋级决赛',
images: []
}
]
};
}
};
</script>
<style lang="scss" scoped>
.event-live-page {
min-height: 100vh;
background-color: #f5f5f5;
padding: 20rpx 30rpx;
}
.live-list {
display: flex;
flex-direction: column;
gap: 30rpx;
}
.live-item {
display: flex;
gap: 20rpx;
}
.live-time {
font-size: 24rpx;
color: #999999;
flex-shrink: 0;
padding-top: 5rpx;
}
.live-content {
flex: 1;
background-color: #fff;
border-radius: 12rpx;
padding: 25rpx;
}
.live-type {
display: inline-block;
font-size: 22rpx;
padding: 6rpx 16rpx;
border-radius: 6rpx;
margin-bottom: 12rpx;
color: #fff;
}
.live-type.highlight {
background-color: #C93639;
}
.live-type.score {
background-color: #FF8C00;
}
.live-type.news {
background-color: #4CAF50;
}
.live-text {
font-size: 28rpx;
color: #333333;
line-height: 1.6;
}
.live-images {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10rpx;
margin-top: 15rpx;
}
.live-image {
width: 100%;
height: 180rpx;
border-radius: 8rpx;
}
.refresh-tip {
text-align: center;
padding: 40rpx 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10rpx;
}
.tip-icon {
font-size: 28rpx;
color: #999999;
}
.tip-text {
font-size: 24rpx;
color: #999999;
}
</style>

View File

@@ -0,0 +1,216 @@
<template>
<view class="event-medals-page">
<!-- 顶部统计 -->
<view class="top-stats">
<view class="stat-item">
<view class="stat-number">{{ totalTeams }}</view>
<view class="stat-label">参赛队伍</view>
</view>
<view class="stat-item">
<view class="stat-number">{{ totalMedals }}</view>
<view class="stat-label">奖牌总数</view>
</view>
</view>
<!-- 奖牌榜列表 -->
<view class="medals-list">
<view class="medals-header">
<view class="header-rank">排名</view>
<view class="header-team">代表队</view>
<view class="header-medals">
<text class="medal-icon gold">🥇</text>
<text class="medal-icon silver">🥈</text>
<text class="medal-icon bronze">🥉</text>
<text class="medal-total">总计</text>
</view>
</view>
<view class="medal-item" v-for="(item, index) in medalsList" :key="index">
<view class="item-rank" :class="'rank-' + item.rank">{{ item.rank }}</view>
<view class="item-team">
<view class="team-name">{{ item.team }}</view>
</view>
<view class="item-medals">
<text class="medal-count gold">{{ item.gold }}</text>
<text class="medal-count silver">{{ item.silver }}</text>
<text class="medal-count bronze">{{ item.bronze }}</text>
<text class="medal-count total">{{ item.total }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
medalsList: [
{ rank: 1, team: '北京队', gold: 8, silver: 5, bronze: 3, total: 16 },
{ rank: 2, team: '上海队', gold: 6, silver: 7, bronze: 5, total: 18 },
{ rank: 3, team: '广东队', gold: 5, silver: 4, bronze: 6, total: 15 },
{ rank: 4, team: '天津队', gold: 4, silver: 5, bronze: 4, total: 13 },
{ rank: 5, team: '江苏队', gold: 3, silver: 3, bronze: 5, total: 11 },
{ rank: 6, team: '浙江队', gold: 2, silver: 4, bronze: 3, total: 9 },
{ rank: 7, team: '湖北队', gold: 2, silver: 2, bronze: 4, total: 8 },
{ rank: 8, team: '河北队', gold: 1, silver: 3, bronze: 2, total: 6 }
]
};
},
computed: {
totalTeams() {
return this.medalsList.length;
},
totalMedals() {
return this.medalsList.reduce((sum, item) => sum + item.total, 0);
}
}
};
</script>
<style lang="scss" scoped>
.event-medals-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 20rpx;
}
.top-stats {
background: linear-gradient(135deg, #C93639 0%, #A02629 100%);
padding: 40rpx 30rpx;
display: flex;
justify-content: space-around;
margin-bottom: 20rpx;
}
.stat-item {
text-align: center;
color: #fff;
}
.stat-number {
font-size: 48rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.stat-label {
font-size: 24rpx;
opacity: 0.9;
}
.medals-list {
margin: 0 30rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
}
.medals-header {
display: flex;
align-items: center;
padding: 25rpx 30rpx;
background-color: #F8F8F8;
font-size: 24rpx;
font-weight: bold;
color: #666666;
}
.header-rank {
width: 80rpx;
text-align: center;
}
.header-team {
flex: 1;
}
.header-medals {
display: flex;
gap: 30rpx;
align-items: center;
}
.medal-icon {
font-size: 28rpx;
}
.medal-total {
width: 60rpx;
text-align: center;
}
.medal-item {
display: flex;
align-items: center;
padding: 25rpx 30rpx;
border-bottom: 1rpx solid #F5F5F5;
}
.medal-item:last-child {
border-bottom: none;
}
.item-rank {
width: 80rpx;
text-align: center;
font-size: 32rpx;
font-weight: bold;
}
.item-rank.rank-1 {
color: #FFD700;
}
.item-rank.rank-2 {
color: #C0C0C0;
}
.item-rank.rank-3 {
color: #CD7F32;
}
.item-rank:not(.rank-1):not(.rank-2):not(.rank-3) {
color: #999999;
}
.item-team {
flex: 1;
}
.team-name {
font-size: 30rpx;
font-weight: bold;
color: #333333;
}
.item-medals {
display: flex;
gap: 30rpx;
align-items: center;
}
.medal-count {
width: 40rpx;
text-align: center;
font-size: 28rpx;
font-weight: bold;
}
.medal-count.gold {
color: #FFD700;
}
.medal-count.silver {
color: #C0C0C0;
}
.medal-count.bronze {
color: #CD7F32;
}
.medal-count.total {
width: 60rpx;
color: #C93639;
}
</style>

View File

@@ -0,0 +1,207 @@
<template>
<view class="event-players-page">
<!-- 搜索框 -->
<view class="search-bar">
<input class="search-input" placeholder="搜索选手姓名或编号" v-model="searchKey" />
<view class="search-icon">🔍</view>
</view>
<!-- 分类筛选 -->
<view class="category-tabs">
<view
class="category-tab"
v-for="(category, index) in categories"
:key="index"
:class="{ active: currentCategory === index }"
@click="currentCategory = index"
>
{{ category }}
</view>
</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="player-info">
<view class="player-name">{{ player.name }}</view>
<view class="player-detail">
<text class="detail-text">{{ player.team }}</text>
<text class="detail-divider">|</text>
<text class="detail-text">{{ player.category }}</text>
</view>
</view>
<view class="player-status" :class="player.status">
{{ player.statusText }}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
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: '已确认'
}
]
};
}
};
</script>
<style lang="scss" scoped>
.event-players-page {
min-height: 100vh;
background-color: #f5f5f5;
}
.search-bar {
background-color: #fff;
padding: 20rpx 30rpx;
display: flex;
align-items: center;
gap: 15rpx;
}
.search-input {
flex: 1;
background-color: #f5f5f5;
border-radius: 50rpx;
padding: 20rpx 30rpx;
font-size: 28rpx;
}
.search-icon {
font-size: 32rpx;
}
.category-tabs {
background-color: #fff;
display: flex;
padding: 20rpx 30rpx;
gap: 20rpx;
margin-bottom: 20rpx;
}
.category-tab {
padding: 12rpx 30rpx;
border-radius: 50rpx;
font-size: 26rpx;
color: #666666;
background-color: #f5f5f5;
}
.category-tab.active {
background-color: #C93639;
color: #fff;
}
.players-list {
padding: 0 30rpx 20rpx;
}
.player-item {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
gap: 20rpx;
}
.player-number {
width: 80rpx;
height: 80rpx;
background-color: #C93639;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-weight: bold;
flex-shrink: 0;
}
.player-info {
flex: 1;
}
.player-name {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 8rpx;
}
.player-detail {
font-size: 24rpx;
color: #666666;
}
.detail-divider {
margin: 0 10rpx;
}
.player-status {
padding: 8rpx 20rpx;
border-radius: 8rpx;
font-size: 24rpx;
flex-shrink: 0;
}
.player-status.confirmed {
background-color: #E8F5E9;
color: #4CAF50;
}
.player-status.pending {
background-color: #FFF3E0;
color: #FF9800;
}
</style>

View File

@@ -0,0 +1,698 @@
<template>
<view class="event-register-page">
<!-- 步骤指示器 -->
<view class="steps-indicator">
<view class="step-item" :class="{ active: currentStep >= 1 }">
<view class="step-icon">
<text class="icon">👤</text>
</view>
<text class="step-text">选择选手信息</text>
</view>
<view class="step-line" :class="{ active: currentStep >= 2 }"></view>
<view class="step-item" :class="{ active: currentStep >= 2 }">
<view class="step-icon">
<text class="icon">💳</text>
</view>
<text class="step-text">订单支付</text>
</view>
<view class="step-line" :class="{ active: currentStep >= 3 }"></view>
<view class="step-item" :class="{ active: currentStep >= 3 }">
<view class="step-icon">
<text class="icon"></text>
</view>
<text class="step-text">提交报名成功</text>
</view>
</view>
<!-- 步骤1选择选手信息 -->
<view class="step-content" v-if="currentStep === 1">
<view class="selected-count">已选<text class="count">26</text> </view>
<view class="add-player-btn" @click="goToAddPlayer">
<text class="add-icon"></text>
<text>新增选手</text>
</view>
<view class="player-list">
<view class="player-item" v-for="(item, index) in playerList" :key="index">
<view class="player-checkbox" @click="togglePlayer(item)">
<text v-if="item.selected" class="checked"></text>
<text v-else class="unchecked"></text>
</view>
<view class="player-info">
<view class="player-name">{{ item.name }}</view>
<view class="player-id">身份证{{ item.idCard }}</view>
</view>
<view class="player-actions">
<view class="action-btn edit-btn" @click.stop="handleEdit(item)">
<text class="icon"></text>
<text>编辑</text>
</view>
<view class="action-btn delete-btn" @click.stop="handleDelete(item)">
<text class="icon">🗑</text>
<text>删除</text>
</view>
</view>
</view>
</view>
<view class="next-btn-wrapper">
<view class="next-btn" @click="goToStep2">下一步</view>
</view>
</view>
<!-- 步骤2订单支付 -->
<view class="step-content" v-if="currentStep === 2">
<view class="order-title">订单支付</view>
<view class="event-info-card">
<view class="event-title">{{ eventInfo.title }}</view>
<view class="divider"></view>
<view class="info-item">
<text class="label">地点</text>
<text class="value">{{ eventInfo.location }}</text>
</view>
<view class="info-item">
<text class="label">比赛时间</text>
<text class="value">{{ eventInfo.matchTime }}</text>
</view>
<view class="info-item">
<text class="label">报名项目</text>
<text class="value">{{ eventInfo.projects }}</text>
</view>
<view class="info-item">
<text class="label">联系人</text>
<text class="value">{{ eventInfo.contact }}</text>
<text class="edit-icon">📋</text>
</view>
<view class="info-hint">(注意是否用此号码接收信息)</view>
<view class="info-item participants-item">
<text class="label">参赛选手</text>
<text class="value participants">{{ eventInfo.participants }}</text>
<view class="view-cert-btn" @click="showPlayers">
<text>查看证件</text>
<text class="arrow"></text>
</view>
</view>
</view>
<view class="payment-info">
<view class="payment-row">
<text class="label">人数</text>
<text class="value">26</text>
</view>
<view class="payment-row total">
<text class="label">合计</text>
<text class="value price">¥ 29999</text>
</view>
</view>
<view class="next-btn-wrapper">
<view class="next-btn" @click="goToStep3">去支付</view>
</view>
</view>
<!-- 步骤3报名成功 -->
<view class="step-content" v-if="currentStep === 3">
<view class="success-title">报名成功</view>
<view class="event-info-card">
<view class="event-title">{{ eventInfo.title }}</view>
<view class="divider"></view>
<view class="info-item">
<text class="label">地点</text>
<text class="value">{{ eventInfo.location }}</text>
</view>
<view class="info-item">
<text class="label">比赛时间</text>
<text class="value">{{ eventInfo.matchTime }}</text>
</view>
<view class="info-item">
<text class="label">报名项目</text>
<text class="value">{{ eventInfo.projects }}</text>
</view>
<view class="info-item">
<text class="label">联系人</text>
<text class="value">{{ eventInfo.contact }}</text>
</view>
<view class="participants-title">参赛选手26</view>
<view class="participants-detail">
<view class="participant-item" v-for="(item, index) in selectedPlayers" :key="index">
<view class="participant-name">{{ item.name }}</view>
<view class="participant-id">身份证{{ item.idCard }}</view>
<view class="participant-number">编号{{ item.number }}</view>
</view>
</view>
</view>
<view class="close-btn-wrapper">
<view class="close-btn" @click="handleClose"></view>
</view>
</view>
<!-- 参赛选手弹窗 -->
<view class="player-modal" v-if="showPlayerModal" @click="showPlayerModal = false">
<view class="modal-content" @click.stop>
<view class="modal-header">
<text class="modal-title">参赛选手</text>
<text class="close-icon" @click="showPlayerModal = false"></text>
</view>
<scroll-view class="modal-body" scroll-y>
<view class="modal-player-item" v-for="(item, index) in selectedPlayers" :key="index">
<view class="player-name">{{ item.name }}</view>
<view class="player-id">身份证{{ item.idCard }}</view>
<view class="player-number" v-if="item.number">编号{{ item.number }}</view>
<view class="player-hint" v-if="index === 0">报名成功后生成唯一编号</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentStep: 1,
eventId: '',
eventInfo: {
title: '2025年全国武术散打锦标赛暨第十七届世界武术锦标赛选拔赛',
location: '天津市-天津市体育中心',
matchTime: '2025.02.01-2025.02.10',
projects: '男子组剑术、男子组太极拳、男子组套路、男子组其他项目',
contact: '18666666666',
participants: '张三、李四、王二、张三、张三、李四、王二、张三、李四'
},
playerList: [
{
id: 1,
name: '张三',
idCard: '123456789000000000',
selected: false
},
{
id: 2,
name: '张三',
idCard: '123456789000000000',
selected: true
},
{
id: 3,
name: '张三',
idCard: '123456789000000000',
selected: true
}
],
selectedPlayers: [
{
name: '张三',
idCard: '123456789000000000',
number: '123-4567898275'
},
{
name: '李四',
idCard: '123456789000000000',
number: '123-4567898276'
}
],
showPlayerModal: false
};
},
onLoad(options) {
if (options.eventId) {
this.eventId = options.eventId;
}
},
methods: {
togglePlayer(item) {
item.selected = !item.selected;
this.$forceUpdate();
},
goToAddPlayer() {
uni.navigateTo({
url: '/pages/add-player/add-player'
});
},
handleEdit(item) {
uni.navigateTo({
url: '/pages/edit-player/edit-player?id=' + item.id
});
},
handleDelete(item) {
uni.showModal({
title: '删除选手',
content: '确定要删除该选手吗?',
success: (res) => {
if (res.confirm) {
const index = this.playerList.findIndex(p => p.id === item.id);
if (index > -1) {
this.playerList.splice(index, 1);
}
}
}
});
},
goToStep2() {
this.currentStep = 2;
},
goToStep3() {
this.currentStep = 3;
},
showPlayers() {
this.showPlayerModal = true;
},
handleClose() {
uni.navigateBack({
delta: 3
});
}
}
};
</script>
<style lang="scss" scoped>
.event-register-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 180rpx;
}
.steps-indicator {
background-color: #fff;
padding: 40rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
}
.step-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10rpx;
opacity: 0.4;
}
.step-item.active {
opacity: 1;
}
.step-icon {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
}
.step-item.active .step-icon {
background-color: #C93639;
}
.icon {
font-size: 36rpx;
}
.step-item.active .icon {
color: #fff;
}
.step-text {
font-size: 22rpx;
color: #666666;
white-space: nowrap;
}
.step-item.active .step-text {
color: #C93639;
font-weight: bold;
}
.step-line {
flex: 1;
height: 2rpx;
background-color: #eeeeee;
margin: 0 10rpx;
}
.step-line.active {
background-color: #C93639;
}
.step-content {
padding: 30rpx;
}
.selected-count {
font-size: 28rpx;
color: #666666;
margin-bottom: 20rpx;
}
.count {
color: #C93639;
font-weight: bold;
font-size: 32rpx;
}
.add-player-btn {
background-color: #fff;
padding: 30rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 10rpx;
margin-bottom: 20rpx;
color: #C93639;
font-size: 30rpx;
}
.add-icon {
font-size: 36rpx;
}
.player-list {
margin-bottom: 20rpx;
}
.player-item {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
gap: 20rpx;
}
.player-checkbox {
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
.checked {
font-size: 36rpx;
color: #C93639;
}
.unchecked {
font-size: 36rpx;
color: #cccccc;
}
.player-info {
flex: 1;
}
.player-name {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 10rpx;
}
.player-id {
font-size: 26rpx;
color: #666666;
}
.player-actions {
display: flex;
gap: 15rpx;
}
.action-btn {
display: flex;
align-items: center;
gap: 5rpx;
padding: 10rpx 20rpx;
border-radius: 8rpx;
font-size: 24rpx;
border: 2rpx solid;
}
.edit-btn {
color: #C93639;
border-color: #C93639;
}
.delete-btn {
color: #C93639;
border-color: #C93639;
}
.next-btn-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx;
background-color: #fff;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.next-btn {
background-color: #C93639;
color: #fff;
text-align: center;
padding: 30rpx;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: bold;
}
.order-title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
margin-bottom: 30rpx;
}
.event-info-card {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 20rpx;
}
.event-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 1.5;
margin-bottom: 20rpx;
}
.divider {
height: 6rpx;
background-color: #C93639;
width: 120rpx;
margin: 20rpx 0;
}
.info-item {
display: flex;
align-items: flex-start;
margin-bottom: 15rpx;
}
.label {
font-size: 26rpx;
color: #666666;
flex-shrink: 0;
}
.value {
font-size: 26rpx;
color: #666666;
flex: 1;
}
.edit-icon {
margin-left: 10rpx;
font-size: 28rpx;
}
.info-hint {
font-size: 22rpx;
color: #C93639;
margin: 10rpx 0;
}
.participants-item {
align-items: center;
}
.participants {
word-break: break-all;
}
.view-cert-btn {
display: flex;
align-items: center;
padding: 8rpx 20rpx;
border: 2rpx solid #C93639;
border-radius: 8rpx;
font-size: 24rpx;
color: #C93639;
margin-left: 20rpx;
white-space: nowrap;
}
.arrow {
font-size: 24rpx;
margin-left: 5rpx;
}
.payment-info {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
}
.payment-row {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
font-size: 28rpx;
}
.payment-row.total {
font-size: 32rpx;
font-weight: bold;
}
.price {
color: #C93639;
font-size: 36rpx;
}
.success-title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
margin-bottom: 30rpx;
}
.participants-title {
font-size: 28rpx;
font-weight: bold;
color: #333333;
margin: 20rpx 0;
}
.participants-detail {
margin-top: 20rpx;
}
.participant-item {
padding: 20rpx;
background-color: #f9f9f9;
border-radius: 12rpx;
margin-bottom: 15rpx;
}
.participant-name {
font-size: 28rpx;
font-weight: bold;
color: #333333;
margin-bottom: 10rpx;
}
.participant-id {
font-size: 24rpx;
color: #666666;
margin-bottom: 5rpx;
}
.participant-number {
font-size: 24rpx;
color: #666666;
}
.close-btn-wrapper {
position: fixed;
top: 100rpx;
left: 30rpx;
z-index: 999;
}
.close-btn {
width: 80rpx;
height: 80rpx;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
color: #fff;
}
.player-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
width: 600rpx;
max-height: 80vh;
background-color: #fff;
border-radius: 24rpx;
overflow: hidden;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #eeeeee;
}
.modal-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
.close-icon {
font-size: 40rpx;
color: #999999;
}
.modal-body {
max-height: 60vh;
padding: 30rpx;
}
.modal-player-item {
padding: 20rpx;
background-color: #f9f9f9;
border-radius: 12rpx;
margin-bottom: 15rpx;
}
.player-hint {
font-size: 22rpx;
color: #C93639;
margin-top: 10rpx;
}
</style>

View File

@@ -0,0 +1,154 @@
<template>
<view class="event-rules-page">
<!-- 章节列表 -->
<view class="rules-list">
<view class="rules-item" v-for="(item, index) in rulesList" :key="index" @click="toggleSection(index)">
<view class="rules-header">
<view class="chapter-number">{{ item.chapter }}</view>
<view class="chapter-title">{{ item.title }}</view>
<view class="arrow" :class="{ expanded: item.expanded }"></view>
</view>
<view class="rules-content" v-if="item.expanded">
<view class="content-item" v-for="(content, idx) in item.contents" :key="idx">
<text class="content-text">{{ content }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
rulesList: [
{
chapter: '第一章',
title: '总则',
expanded: false,
contents: [
'1.1 本次比赛遵循国际武术联合会竞赛规则。',
'1.2 所有参赛选手必须持有效证件参赛。',
'1.3 参赛选手须服从裁判判决,不得有违规行为。'
]
},
{
chapter: '第二章',
title: '参赛资格',
expanded: false,
contents: [
'2.1 参赛选手年龄须在18-45周岁之间。',
'2.2 参赛选手须持有武术等级证书或相关证明。',
'2.3 参赛选手须通过健康检查,身体状况良好。'
]
},
{
chapter: '第三章',
title: '比赛规则',
expanded: false,
contents: [
'3.1 比赛采用单败淘汰制。',
'3.2 每场比赛时间为3分钟分3局进行。',
'3.3 得分规则按照国际标准执行。'
]
},
{
chapter: '第四章',
title: '奖项设置',
expanded: false,
contents: [
'4.1 各组别设金、银、铜牌各一枚。',
'4.2 设最佳表现奖、体育道德风尚奖等特别奖项。',
'4.3 所有参赛选手均可获得参赛证书。'
]
}
]
};
},
methods: {
toggleSection(index) {
this.rulesList[index].expanded = !this.rulesList[index].expanded;
}
}
};
</script>
<style lang="scss" scoped>
.event-rules-page {
min-height: 100vh;
background-color: #f5f5f5;
padding: 20rpx 30rpx;
}
.rules-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.rules-item {
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
}
.rules-header {
display: flex;
align-items: center;
padding: 30rpx;
gap: 15rpx;
}
.chapter-number {
font-size: 28rpx;
font-weight: bold;
color: #C93639;
flex-shrink: 0;
}
.chapter-title {
flex: 1;
font-size: 30rpx;
font-weight: bold;
color: #333333;
}
.arrow {
font-size: 40rpx;
color: #999999;
transition: transform 0.3s;
}
.arrow.expanded {
transform: rotate(90deg);
}
.rules-content {
padding: 0 30rpx 30rpx;
border-top: 1rpx solid #f5f5f5;
}
.content-item {
margin-bottom: 15rpx;
padding-left: 20rpx;
position: relative;
}
.content-item::before {
content: '';
position: absolute;
left: 0;
top: 12rpx;
width: 8rpx;
height: 8rpx;
background-color: #C93639;
border-radius: 50%;
}
.content-text {
font-size: 26rpx;
color: #666666;
line-height: 1.8;
}
</style>

View File

@@ -0,0 +1,178 @@
<template>
<view class="event-schedule-page">
<!-- 日期选择器 -->
<view class="date-tabs">
<view
class="date-tab"
v-for="(date, index) in dates"
:key="index"
:class="{ active: currentDate === index }"
@click="currentDate = index"
>
<view class="date-day">{{ date.day }}</view>
<view class="date-text">{{ date.text }}</view>
</view>
</view>
<!-- 日程时间线 -->
<view class="schedule-timeline">
<view class="timeline-item" v-for="(item, index) in currentSchedule" :key="index">
<view class="time-dot"></view>
<view class="time-line" v-if="index < currentSchedule.length - 1"></view>
<view class="schedule-card">
<view class="schedule-time">{{ item.time }}</view>
<view class="schedule-title">{{ item.title }}</view>
<view class="schedule-location" v-if="item.location">
<text class="location-icon">📍</text>
<text>{{ item.location }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentDate: 0,
dates: [
{ day: '2月1日', text: '周六' },
{ day: '2月2日', text: '周日' },
{ day: '2月3日', text: '周一' }
],
schedules: {
0: [
{ time: '08:00', title: '签到开始', location: '主会场大厅' },
{ time: '09:00', title: '开幕式', location: '主赛场' },
{ time: '10:00', title: '预赛第一轮', location: 'A赛场' },
{ time: '14:00', title: '预赛第二轮', location: 'A赛场' },
{ time: '18:00', title: '当日比赛结束', location: '' }
],
1: [
{ time: '08:30', title: '选手签到', location: '主会场大厅' },
{ time: '09:30', title: '半决赛', location: 'A赛场' },
{ time: '14:00', title: '表演赛', location: 'B赛场' },
{ time: '16:00', title: '决赛', location: '主赛场' },
{ time: '18:30', title: '当日比赛结束', location: '' }
],
2: [
{ time: '09:00', title: '颁奖典礼', location: '主赛场' },
{ time: '11:00', title: '闭幕式', location: '主赛场' },
{ time: '12:00', title: '赛事圆满结束', location: '' }
]
}
};
},
computed: {
currentSchedule() {
return this.schedules[this.currentDate] || [];
}
}
};
</script>
<style lang="scss" scoped>
.event-schedule-page {
min-height: 100vh;
background-color: #f5f5f5;
}
.date-tabs {
background-color: #fff;
display: flex;
padding: 20rpx 30rpx;
gap: 20rpx;
margin-bottom: 20rpx;
}
.date-tab {
flex: 1;
text-align: center;
padding: 20rpx;
border-radius: 12rpx;
background-color: #f5f5f5;
}
.date-tab.active {
background-color: #C93639;
color: #fff;
}
.date-day {
font-size: 28rpx;
font-weight: bold;
margin-bottom: 5rpx;
}
.date-text {
font-size: 24rpx;
opacity: 0.8;
}
.schedule-timeline {
padding: 20rpx 30rpx;
}
.timeline-item {
display: flex;
gap: 20rpx;
position: relative;
margin-bottom: 40rpx;
}
.time-dot {
width: 24rpx;
height: 24rpx;
background-color: #C93639;
border-radius: 50%;
flex-shrink: 0;
margin-top: 10rpx;
position: relative;
z-index: 2;
}
.time-line {
position: absolute;
left: 11rpx;
top: 34rpx;
bottom: -40rpx;
width: 2rpx;
background-color: #E0E0E0;
z-index: 1;
}
.schedule-card {
flex: 1;
background-color: #fff;
border-radius: 12rpx;
padding: 25rpx;
}
.schedule-time {
font-size: 26rpx;
color: #C93639;
font-weight: bold;
margin-bottom: 10rpx;
}
.schedule-title {
font-size: 30rpx;
font-weight: bold;
color: #333333;
margin-bottom: 10rpx;
}
.schedule-location {
font-size: 24rpx;
color: #666666;
display: flex;
align-items: center;
gap: 5rpx;
}
.location-icon {
font-size: 22rpx;
}
</style>

View File

@@ -0,0 +1,191 @@
<template>
<view class="event-score-page">
<!-- 项目分类 -->
<view class="category-tabs">
<view
class="category-tab"
v-for="(category, index) in categories"
:key="index"
:class="{ active: currentCategory === index }"
@click="currentCategory = index"
>
{{ category }}
</view>
</view>
<!-- 成绩列表 -->
<view class="score-list">
<view class="score-item" v-for="(item, index) in currentScores" :key="index">
<view class="rank-badge" :class="'rank-' + item.rank">
<text class="rank-number">{{ item.rank }}</text>
</view>
<view class="player-info">
<view class="player-name">{{ item.name }}</view>
<view class="player-team">{{ item.team }}</view>
</view>
<view class="score-info">
<view class="score-value">{{ item.score }}</view>
<view class="score-label"></view>
</view>
</view>
</view>
<!-- 空状态 -->
<view class="empty-state" v-if="currentScores.length === 0">
<text class="empty-text">暂无成绩数据</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentCategory: 0,
categories: ['男子散打', '男子套路', '女子散打', '女子套路'],
scores: {
0: [
{ rank: 1, name: '张三', team: '北京队', score: '9.85' },
{ rank: 2, name: '李四', team: '上海队', score: '9.72' },
{ rank: 3, name: '王五', team: '广东队', score: '9.68' },
{ rank: 4, name: '赵六', team: '天津队', score: '9.55' },
{ rank: 5, name: '刘七', team: '江苏队', score: '9.48' }
],
1: [
{ rank: 1, name: '孙八', team: '浙江队', score: '9.90' },
{ rank: 2, name: '周九', team: '湖北队', score: '9.75' },
{ rank: 3, name: '吴十', team: '河北队', score: '9.60' }
],
2: [],
3: []
}
};
},
computed: {
currentScores() {
return this.scores[this.currentCategory] || [];
}
}
};
</script>
<style lang="scss" scoped>
.event-score-page {
min-height: 100vh;
background-color: #f5f5f5;
}
.category-tabs {
background-color: #fff;
display: flex;
padding: 20rpx 30rpx;
gap: 15rpx;
overflow-x: auto;
margin-bottom: 20rpx;
}
.category-tab {
padding: 15rpx 30rpx;
border-radius: 50rpx;
font-size: 26rpx;
color: #666666;
background-color: #f5f5f5;
white-space: nowrap;
flex-shrink: 0;
}
.category-tab.active {
background-color: #C93639;
color: #fff;
}
.score-list {
padding: 0 30rpx 20rpx;
}
.score-item {
background-color: #fff;
border-radius: 16rpx;
padding: 25rpx 30rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
gap: 25rpx;
}
.rank-badge {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rank-badge.rank-1 {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}
.rank-badge.rank-2 {
background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
}
.rank-badge.rank-3 {
background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
}
.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
background-color: #E0E0E0;
}
.rank-number {
font-size: 32rpx;
font-weight: bold;
color: #fff;
}
.player-info {
flex: 1;
}
.player-name {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 8rpx;
}
.player-team {
font-size: 24rpx;
color: #666666;
}
.score-info {
display: flex;
align-items: baseline;
gap: 5rpx;
flex-shrink: 0;
}
.score-value {
font-size: 40rpx;
font-weight: bold;
color: #C93639;
}
.score-label {
font-size: 24rpx;
color: #999999;
}
.empty-state {
padding: 200rpx 0;
text-align: center;
}
.empty-text {
font-size: 28rpx;
color: #999999;
}
</style>

277
pages/home/home.vue Normal file
View File

@@ -0,0 +1,277 @@
<template>
<view class="home-page">
<!-- 轮播图 -->
<view class="banner-section">
<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" circular>
<swiper-item v-for="(banner, index) in banners" :key="index">
<image class="banner-image" :src="banner" mode="aspectFill"></image>
</swiper-item>
</swiper>
</view>
<!-- 精品赛事 -->
<view class="section">
<view class="section-header">
<view class="section-title">
<text class="bookmark-icon">📋</text>
<text class="title-text">精品赛事</text>
</view>
<view class="more-btn" @click="goToEventList">
<text>更多</text>
<text class="arrow"></text>
</view>
</view>
<!-- 赛事列表 -->
<view class="event-list">
<view class="event-item" v-for="(item, index) in eventList" :key="index" @click="goToEventDetail(item)">
<view class="event-title">{{ item.title }}</view>
<view class="event-info">
<text class="info-text">地点{{ item.location }}</text>
</view>
<view class="event-info">
<text class="info-text">报名时间{{ item.registerTime }}</text>
</view>
<view class="event-info">
<text class="info-text">比赛时间{{ item.matchTime }}</text>
</view>
<view class="event-info">
<text class="info-text">报名人数{{ item.registerCount }}</text>
</view>
<view class="event-footer">
<button class="register-btn" @click.stop="goToRegister(item)">
{{ item.status === 'finished' ? '报名已结束' : '立即报名' }}
</button>
</view>
<view class="registered-overlay" v-if="item.status === 'finished'">
<text class="status-text">报名已结束</text>
</view>
</view>
</view>
</view>
<!-- 快速导航按钮 -->
<view class="quick-nav">
<button class="quick-btn" @click="goToProfile">个人中心</button>
<button class="quick-btn" @click="goToMyRegistration">我的报名</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
banners: [
'/static/images/bananer1.png',
'/static/images/bananer2.png'
],
eventList: [
{
id: 1,
title: '2025年全国武术散打锦标赛暨第十七届世界武术锦标赛选拔赛',
location: '天津市-天津市体育中心',
registerTime: '2025.02.01-2025.02.10',
matchTime: '2025.02.01-2025.02.10',
registerCount: '25212',
status: 'open'
},
{
id: 2,
title: '2025年全国武术套路锦标赛',
location: '天津市-天津市体育中心',
registerTime: '2025.02.01-2025.02.10',
matchTime: '2025.02.01-2025.02.10',
registerCount: '25212',
status: 'finished'
},
{
id: 3,
title: '2025年全国武术散打锦标赛暨第十七届世界武术锦标赛选拔赛',
location: '天津市-天津市体育中心',
registerTime: '2025.02.01-2025.02.10',
matchTime: '2025.02.01-2025.02.10',
registerCount: '25212',
status: 'open'
}
]
};
},
methods: {
goToEventList() {
uni.navigateTo({
url: '/pages/event-list/event-list'
});
},
goToEventDetail(item) {
uni.navigateTo({
url: '/pages/event-detail/event-detail?id=' + item.id
});
},
goToRegister(item) {
if (item.status === 'open') {
uni.navigateTo({
url: '/pages/register-type/register-type?id=' + item.id
});
}
},
goToProfile() {
uni.navigateTo({
url: '/pages/profile/profile'
});
},
goToMyRegistration() {
uni.navigateTo({
url: '/pages/my-registration/my-registration'
});
}
}
};
</script>
<style lang="scss" scoped>
.home-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 100rpx;
}
.banner-section {
background: linear-gradient(180deg, #C93639 0%, #f5f5f5 100%);
padding: 30rpx 30rpx 50rpx;
}
.banner-swiper {
width: 100%;
height: 340rpx;
border-radius: 24rpx;
overflow: hidden;
}
.banner-image {
width: 100%;
height: 100%;
}
.section {
padding: 30rpx;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
}
.section-title {
display: flex;
align-items: center;
gap: 10rpx;
}
.bookmark-icon {
font-size: 36rpx;
}
.title-text {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.more-btn {
display: flex;
align-items: center;
font-size: 28rpx;
color: #666666;
}
.arrow {
font-size: 36rpx;
margin-left: 5rpx;
}
.event-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.event-item {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
position: relative;
overflow: hidden;
}
.event-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 20rpx;
line-height: 1.5;
}
.event-info {
margin-bottom: 10rpx;
}
.info-text {
font-size: 26rpx;
color: #666666;
}
.event-footer {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 20rpx;
}
.register-btn {
background-color: #C93639;
color: #fff;
padding: 16rpx 50rpx;
border-radius: 50rpx;
font-size: 28rpx;
border: none;
}
.registered-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
}
.status-text {
font-size: 36rpx;
color: #999999;
}
.quick-nav {
position: fixed;
bottom: 20rpx;
left: 30rpx;
right: 30rpx;
display: flex;
gap: 15rpx;
}
.quick-btn {
flex: 1;
background-color: #C93639;
color: white;
border: none;
padding: 15rpx 20rpx;
border-radius: 12rpx;
font-size: 26rpx;
}
</style>

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>

214
pages/profile/profile.vue Normal file
View File

@@ -0,0 +1,214 @@
<template>
<view class="profile-page">
<!-- 用户信息区域 -->
<view class="user-section">
<view class="user-info">
<view class="avatar">
<view class="avatar-circle"></view>
</view>
<view class="user-detail">
<view class="user-name">用户名字</view>
<view class="user-id">ID: 1234565</view>
</view>
</view>
</view>
<!-- 我的报名卡片 -->
<view class="my-registration-card" @click="goToMyRegistration">
<view class="card-icon">📋</view>
<view class="card-text">我的报名</view>
</view>
<!-- 菜单列表 -->
<view class="menu-list">
<view class="menu-item" @click="goToCommonInfo">
<text class="menu-text">常用信息</text>
<text class="arrow"></text>
</view>
<view class="menu-item" @click="handleChangePassword">
<text class="menu-text">修改密码</text>
<text class="arrow"></text>
</view>
<view class="menu-item" @click="handleContactUs">
<text class="menu-text">联系我们</text>
<text class="arrow"></text>
</view>
<view class="menu-item" @click="handleLogout">
<text class="menu-text">退出登录</text>
<text class="arrow"></text>
</view>
</view>
<!-- 版本号 -->
<view class="version">版本号: V 2.0</view>
<!-- 占位避免tabbar遮挡 -->
<view style="height: 100rpx;"></view>
</view>
</template>
<script>
export default {
data() {
return {
userInfo: {
name: '用户名字',
id: '1234565'
}
};
},
methods: {
goToMyRegistration() {
uni.navigateTo({
url: '/pages/my-registration/my-registration'
});
},
goToCommonInfo() {
uni.navigateTo({
url: '/pages/common-info/common-info'
});
},
handleChangePassword() {
uni.showToast({
title: '修改密码功能',
icon: 'none'
});
},
handleContactUs() {
uni.showToast({
title: '联系我们',
icon: 'none'
});
},
handleLogout() {
uni.showModal({
title: '提示',
content: '确定要退出登录吗?',
success: (res) => {
if (res.confirm) {
uni.showToast({
title: '退出成功',
icon: 'success'
});
}
}
});
}
}
};
</script>
<style lang="scss" scoped>
.profile-page {
min-height: 100vh;
background-color: #f5f5f5;
}
.user-section {
background-color: #C93639;
padding: 50rpx 30rpx 80rpx;
}
.user-info {
display: flex;
align-items: center;
gap: 30rpx;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.avatar-circle {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: #fff;
}
.user-detail {
flex: 1;
}
.user-name {
font-size: 36rpx;
font-weight: bold;
color: #fff;
margin-bottom: 10rpx;
}
.user-id {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.9);
}
.my-registration-card {
background: linear-gradient(135deg, #FFE8E8 0%, #FFD4D4 100%);
margin: -50rpx 30rpx 30rpx;
border-radius: 24rpx;
padding: 40rpx;
display: flex;
align-items: center;
gap: 20rpx;
box-shadow: 0 8rpx 20rpx rgba(201, 54, 57, 0.15);
}
.card-icon {
width: 80rpx;
height: 80rpx;
background-color: #C93639;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
}
.card-text {
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
.menu-list {
background-color: #fff;
margin: 0 30rpx;
border-radius: 16rpx;
overflow: hidden;
}
.menu-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 35rpx 30rpx;
border-bottom: 1rpx solid #f5f5f5;
}
.menu-item:last-child {
border-bottom: none;
}
.menu-text {
font-size: 30rpx;
color: #333333;
}
.arrow {
font-size: 40rpx;
color: #cccccc;
}
.version {
text-align: center;
font-size: 24rpx;
color: #999999;
margin-top: 50rpx;
}
</style>

View File

@@ -0,0 +1,73 @@
<template>
<view class="register-type-page">
<view class="type-list">
<view class="type-item" @click="goToRegister('single')">
<view class="type-label">单人赛</view>
<view class="type-btn">去报名</view>
</view>
<view class="type-item" @click="goToRegister('team')">
<view class="type-label">集体赛</view>
<view class="type-btn">去报名</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
eventId: ''
};
},
onLoad(options) {
if (options.id) {
this.eventId = options.id;
}
},
methods: {
goToRegister(type) {
uni.navigateTo({
url: `/pages/select-event/select-event?eventId=${this.eventId}&type=${type}`
});
}
}
};
</script>
<style lang="scss" scoped>
.register-type-page {
min-height: 100vh;
background-color: #f5f5f5;
padding: 30rpx;
}
.type-list {
display: flex;
flex-direction: column;
gap: 30rpx;
}
.type-item {
background-color: #fff;
border-radius: 16rpx;
padding: 50rpx 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.type-label {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.type-btn {
background-color: #C93639;
color: #fff;
padding: 20rpx 60rpx;
border-radius: 50rpx;
font-size: 28rpx;
}
</style>

View File

@@ -0,0 +1,168 @@
<template>
<view class="select-event-page">
<view class="project-list">
<view
class="project-item"
v-for="(item, index) in projectList"
:key="index"
@click="toggleProject(item)"
>
<view class="project-info">
<view class="project-name">{{ item.name }}</view>
<view class="project-price">¥ {{ item.price }}</view>
</view>
<view class="checkbox">
<text v-if="item.selected" class="checked"></text>
<text v-else class="unchecked"></text>
</view>
</view>
</view>
<!-- 立即报名按钮 -->
<view class="register-btn-wrapper">
<view class="register-btn" @click="handleRegister">立即报名</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
eventId: '',
type: '',
projectList: [
{
id: 1,
name: '男子组剑术',
price: 199,
selected: true
},
{
id: 2,
name: '女子组太极拳',
price: 99,
selected: false
},
{
id: 3,
name: '女子组单鞭',
price: 1299,
selected: false
},
{
id: 4,
name: '男子组太极拳',
price: 299,
selected: true
}
]
};
},
onLoad(options) {
if (options.eventId) {
this.eventId = options.eventId;
}
if (options.type) {
this.type = options.type;
}
},
methods: {
toggleProject(item) {
item.selected = !item.selected;
this.$forceUpdate();
},
handleRegister() {
const selectedProjects = this.projectList.filter(item => item.selected);
if (selectedProjects.length === 0) {
uni.showToast({
title: '请选择报名项目',
icon: 'none'
});
return;
}
uni.navigateTo({
url: `/pages/event-register/event-register?eventId=${this.eventId}&projects=${JSON.stringify(selectedProjects)}`
});
}
}
};
</script>
<style lang="scss" scoped>
.select-event-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 180rpx;
}
.project-list {
padding: 30rpx;
}
.project-item {
background-color: #fff;
border-radius: 16rpx;
padding: 40rpx 30rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.project-info {
flex: 1;
}
.project-name {
font-size: 32rpx;
color: #333333;
margin-bottom: 10rpx;
}
.project-price {
font-size: 28rpx;
color: #C93639;
font-weight: bold;
}
.checkbox {
width: 50rpx;
height: 50rpx;
display: flex;
align-items: center;
justify-content: center;
margin-left: 30rpx;
}
.checked {
font-size: 40rpx;
color: #C93639;
}
.unchecked {
font-size: 40rpx;
color: #cccccc;
}
.register-btn-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx;
background-color: #fff;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.register-btn {
background-color: #C93639;
color: #fff;
text-align: center;
padding: 30rpx;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: bold;
}
</style>

BIN
static/images/bananer1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 654 KiB

BIN
static/images/bananer2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 460 KiB

BIN
static/images/logo@3x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/images/删除@3x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 681 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
static/images/奖牌榜.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/images/成绩@3x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
static/images/新增@3x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/images/编辑@3x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 670 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 462 KiB

BIN
static/images/选中@3x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

80
uni.scss Normal file
View File

@@ -0,0 +1,80 @@
/* 全局颜色变量 */
$primary-color: #C93639;
$primary-red: #C93639;
$text-color: #333333;
$text-gray: #666666;
$text-light: #999999;
$border-color: #eeeeee;
$bg-gray: #f5f5f5;
$white: #ffffff;
/* 常用尺寸 */
$page-padding: 30rpx;
$border-radius: 16rpx;
$border-radius-lg: 24rpx;
/* 公共样式 */
.container {
min-height: 100vh;
background-color: $bg-gray;
}
.page-padding {
padding: $page-padding;
}
.card {
background-color: $white;
border-radius: $border-radius;
padding: 30rpx;
margin-bottom: 20rpx;
}
.flex {
display: flex;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-column {
display: flex;
flex-direction: column;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.primary-btn {
background-color: $primary-color;
color: $white;
border-radius: 12rpx;
font-size: 32rpx;
padding: 28rpx;
text-align: center;
font-weight: bold;
}
.disabled-btn {
background-color: rgba(201, 54, 57, 0.5);
color: $white;
border-radius: 12rpx;
font-size: 32rpx;
padding: 28rpx;
text-align: center;
font-weight: bold;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

208
赛事功能页面说明.md Normal file
View File

@@ -0,0 +1,208 @@
# 赛事详情功能页面说明
## 📄 新增页面概览
为赛事详情页面的9个功能模块设计并实现了8个页面图片直播暂未实现
### 1. 信息发布 (`pages/event-info/event-info.vue`)
**功能:** 展示赛事相关的通知、公告和重要信息
**设计特点:**
- 卡片式列表布局
- 不同信息类型有不同的标签颜色(通知、公告、重要)
- 显示发布时间
- 内容简要预览,可点击查看详情
**数据示例:**
- 通知:报名截止时间通知
- 公告:场地变更公告
- 重要:疫情防控须知
---
### 2. 赛事规程 (`pages/event-rules/event-rules.vue`)
**功能:** 展示比赛规则和章程
**设计特点:**
- 可折叠的章节列表
- 清晰的章节标题
- 点击展开/收起查看详细内容
- 红点装饰增强视觉效果
**章节示例:**
- 第一章:总则
- 第二章:参赛资格
- 第三章:比赛规则
- 第四章:奖项设置
---
### 3. 活动日程 (`pages/event-schedule/event-schedule.vue`)
**功能:** 展示赛事活动时间表
**设计特点:**
- 日期选项卡切换不同日期
- 时间线布局展示日程
- 显示时间、活动名称、地点
- 红色圆点和连线构成时间轴
**日程示例:**
- 2月1日签到、开幕式、预赛
- 2月2日半决赛、决赛
- 2月3日颁奖典礼、闭幕式
---
### 4. 参赛选手 (`pages/event-players/event-players.vue`)
**功能:** 展示所有参赛选手信息
**设计特点:**
- 搜索框支持查找选手
- 分类标签(全部、男子组、女子组)
- 选手编号圆形徽章
- 显示队伍、项目、状态
**状态标识:**
- 已确认:绿色背景
- 待确认:橙色背景
---
### 5. 比赛实况 (`pages/event-live/event-live.vue`)
**功能:** 实时直播比赛动态
**设计特点:**
- 时间轴式信息流
- 不同类型实况有不同标签颜色
- 支持图片展示3列网格
- 下拉刷新提示
**实况类型:**
- 精彩瞬间(红色)
- 比分(橙色)
- 赛况(绿色)
---
### 6. 出场顺序 (`pages/event-lineup/event-lineup.vue`)
**功能:** 展示选手出场顺序表
**设计特点:**
- 组别选项卡切换
- 渐变色序号卡片
- 显示出场时间和队伍
- 状态标识(已完成、进行中、待出场)
**状态颜色:**
- 已完成:绿色
- 进行中:橙色
- 待出场:灰色
---
### 7. 成绩 (`pages/event-score/event-score.vue`)
**功能:** 展示各项目比赛成绩
**设计特点:**
- 项目分类选项卡
- 前三名渐变色徽章(金、银、铜)
- 大号红色分数突出显示
- 排名徽章视觉效果强
**排名标识:**
- 第1名金色渐变
- 第2名银色渐变
- 第3名铜色渐变
- 其他:灰色
---
### 8. 奖牌榜 (`pages/event-medals/event-medals.vue`)
**功能:** 展示各队伍奖牌统计
**设计特点:**
- 顶部统计卡片(参赛队伍数、奖牌总数)
- 表格式展示金银铜牌数量
- 金银铜牌用不同颜色区分
- 总计突出显示
**排名标识:**
- 第1名金色数字
- 第2名银色数字
- 第3名铜色数字
---
## 🎨 统一设计风格
所有页面遵循统一的设计规范:
### 颜色方案
- **主题色:** #C93639(中国红)
- **背景色:** #f5f5f5(浅灰)
- **卡片背景:** #fff(白色)
- **文字颜色:** #333333(深灰)/ #666666(中灰)/ #999999(浅灰)
### 视觉元素
- 圆角12rpx - 16rpx
- 内边距20rpx - 30rpx
- 卡片间距15rpx - 20rpx
- 字号24rpx - 36rpx
### 交互设计
- 选项卡切换(活动状态红色背景)
- 卡片点击效果
- 状态标识色彩区分
- 空状态提示
---
## 🔗 页面路由配置
已在 `pages.json` 中添加所有页面配置:
```json
{
"path": "pages/event-info/event-info",
"style": { "navigationBarTitleText": "信息发布" }
}
// ... 其他7个页面配置
```
## 📱 使用方式
在赛事详情页面点击对应功能图标即可跳转:
- 📄 信息发布 → event-info
- 📋 赛事规程 → event-rules
- 📅 活动日程 → event-schedule
- 👥 参赛选手 → event-players
- 📹 比赛实况 → event-live
- 📝 出场顺序 → event-lineup
- 📊 成绩 → event-score
- 🏆 奖牌榜 → event-medals
- 🖼 图片直播 → 暂未实现
---
## 💡 后续扩展建议
1. **数据接口对接**
- 所有页面目前使用静态数据
- 需要对接后端API获取真实数据
2. **图片直播功能**
- 可参考比赛实况页面
- 重点展示图片瀑布流
3. **实时更新**
- 比赛实况、成绩等页面添加自动刷新
- WebSocket推送实时数据
4. **详情页**
- 信息发布点击查看详情
- 选手信息点击查看详细资料
5. **筛选和搜索**
- 参赛选手搜索功能实现
- 成绩按时间/项目筛选