fix bugs
This commit is contained in:
332
pages/add-contact/add-contact.vue
Normal file
332
pages/add-contact/add-contact.vue
Normal 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>
|
||||
339
pages/add-player/add-player.vue
Normal file
339
pages/add-player/add-player.vue
Normal 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>
|
||||
260
pages/common-info/common-info.vue
Normal file
260
pages/common-info/common-info.vue
Normal 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>
|
||||
300
pages/edit-player/edit-player.vue
Normal file
300
pages/edit-player/edit-player.vue
Normal 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>
|
||||
251
pages/event-detail/event-detail.vue
Normal file
251
pages/event-detail/event-detail.vue
Normal 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>
|
||||
143
pages/event-info/event-info.vue
Normal file
143
pages/event-info/event-info.vue
Normal 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>
|
||||
244
pages/event-lineup/event-lineup.vue
Normal file
244
pages/event-lineup/event-lineup.vue
Normal 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>
|
||||
351
pages/event-list/event-list.vue
Normal file
351
pages/event-list/event-list.vue
Normal 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>
|
||||
167
pages/event-live/event-live.vue
Normal file
167
pages/event-live/event-live.vue
Normal 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>
|
||||
216
pages/event-medals/event-medals.vue
Normal file
216
pages/event-medals/event-medals.vue
Normal 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>
|
||||
207
pages/event-players/event-players.vue
Normal file
207
pages/event-players/event-players.vue
Normal 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>
|
||||
698
pages/event-register/event-register.vue
Normal file
698
pages/event-register/event-register.vue
Normal 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>
|
||||
154
pages/event-rules/event-rules.vue
Normal file
154
pages/event-rules/event-rules.vue
Normal 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>
|
||||
178
pages/event-schedule/event-schedule.vue
Normal file
178
pages/event-schedule/event-schedule.vue
Normal 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>
|
||||
191
pages/event-score/event-score.vue
Normal file
191
pages/event-score/event-score.vue
Normal 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
277
pages/home/home.vue
Normal 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>
|
||||
263
pages/my-registration/my-registration.vue
Normal file
263
pages/my-registration/my-registration.vue
Normal 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
214
pages/profile/profile.vue
Normal 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>
|
||||
73
pages/register-type/register-type.vue
Normal file
73
pages/register-type/register-type.vue
Normal 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>
|
||||
168
pages/select-event/select-event.vue
Normal file
168
pages/select-event/select-event.vue
Normal 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>
|
||||
Reference in New Issue
Block a user