fix bugs
This commit is contained in:
332
src/pages/add-contact/add-contact.vue
Normal file
332
src/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>
|
||||
449
src/pages/add-player/add-player.vue
Normal file
449
src/pages/add-player/add-player.vue
Normal file
@@ -0,0 +1,449 @@
|
||||
<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 class="form-item">
|
||||
<view class="form-label">所属单位</view>
|
||||
<view class="form-value">
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="formData.organization"
|
||||
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"
|
||||
type="number"
|
||||
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>
|
||||
import athleteAPI from '@/api/athlete.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
idType: '身份证',
|
||||
name: '',
|
||||
idCard: '',
|
||||
team: '',
|
||||
organization: '',
|
||||
phone: ''
|
||||
},
|
||||
errors: [],
|
||||
showHint: false,
|
||||
showToast: false,
|
||||
toastMessage: '',
|
||||
showIdTypePicker: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isFormValid() {
|
||||
return (
|
||||
this.formData.name &&
|
||||
this.formData.idCard &&
|
||||
this.formData.team &&
|
||||
this.formData.organization &&
|
||||
this.formData.phone &&
|
||||
this.validateIdCard(this.formData.idCard) &&
|
||||
this.validatePhone(this.formData.phone)
|
||||
);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'formData.name'(val) {
|
||||
this.validateForm();
|
||||
},
|
||||
'formData.idCard'(val) {
|
||||
this.validateForm();
|
||||
},
|
||||
'formData.team'(val) {
|
||||
this.validateForm();
|
||||
},
|
||||
'formData.organization'(val) {
|
||||
this.validateForm();
|
||||
},
|
||||
'formData.phone'(val) {
|
||||
this.validateForm();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validateIdCard(idCard) {
|
||||
// 身份证号验证：18位，最后一位可以是数字或字母X
|
||||
return /^\d{17}[\dXx]$/.test(idCard);
|
||||
},
|
||||
validatePhone(phone) {
|
||||
// 手机号验证：11位数字
|
||||
return /^1[3-9]\d{9}$/.test(phone);
|
||||
},
|
||||
validateForm() {
|
||||
this.errors = [];
|
||||
this.showHint = false;
|
||||
|
||||
if (!this.formData.name || !this.formData.idCard || !this.formData.team || !this.formData.organization || !this.formData.phone) {
|
||||
this.showHint = true;
|
||||
if (!this.formData.name || !this.formData.idCard || !this.formData.team || !this.formData.organization || !this.formData.phone) {
|
||||
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: '按钮置灰'
|
||||
});
|
||||
}
|
||||
|
||||
if (this.formData.phone && !this.validatePhone(this.formData.phone)) {
|
||||
this.errors.push({
|
||||
label: '手机号格式不正确：',
|
||||
message: '按钮置灰'
|
||||
});
|
||||
}
|
||||
},
|
||||
handleIdTypeChange(e) {
|
||||
this.formData.idType = '身份证';
|
||||
this.showIdTypePicker = false;
|
||||
},
|
||||
/**
|
||||
* 从身份证号中提取信息
|
||||
*/
|
||||
extractInfoFromIdCard(idCard) {
|
||||
if (!idCard || idCard.length !== 18) {
|
||||
return {
|
||||
gender: null,
|
||||
age: null,
|
||||
birthDate: null
|
||||
}
|
||||
}
|
||||
|
||||
// 提取出生日期
|
||||
const year = idCard.substring(6, 10)
|
||||
const month = idCard.substring(10, 12)
|
||||
const day = idCard.substring(12, 14)
|
||||
const birthDate = `${year}-${month}-${day}`
|
||||
|
||||
// 计算年龄
|
||||
const birthYear = parseInt(year)
|
||||
const currentYear = new Date().getFullYear()
|
||||
const age = currentYear - birthYear
|
||||
|
||||
// 提取性别（倒数第二位，奇数为男，偶数为女）
|
||||
const genderCode = parseInt(idCard.substring(16, 17))
|
||||
const gender = genderCode % 2 === 1 ? 1 : 2
|
||||
|
||||
return {
|
||||
gender,
|
||||
age,
|
||||
birthDate
|
||||
}
|
||||
},
|
||||
|
||||
async handleSave() {
|
||||
if (!this.isFormValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 从身份证号中提取信息
|
||||
const info = this.extractInfoFromIdCard(this.formData.idCard)
|
||||
|
||||
// 调用API保存选手信息（使用后端实体类的字段名）
|
||||
await athleteAPI.submitAthlete({
|
||||
playerName: this.formData.name,
|
||||
idCard: this.formData.idCard,
|
||||
teamName: this.formData.team,
|
||||
organization: this.formData.organization,
|
||||
contactPhone: this.formData.phone,
|
||||
idCardType: 1, // 身份证类型固定为1
|
||||
gender: info.gender,
|
||||
age: info.age,
|
||||
birthDate: info.birthDate
|
||||
})
|
||||
|
||||
// 保存成功
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 延迟返回上一页
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
} catch (err) {
|
||||
console.error('保存选手失败:', err)
|
||||
// 显示错误提示
|
||||
this.toastMessage = '保存失败，请重试'
|
||||
this.showToast = true
|
||||
setTimeout(() => {
|
||||
this.showToast = false
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
||||
250
src/pages/change-password/change-password.vue
Normal file
250
src/pages/change-password/change-password.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<view class="change-password-page">
|
||||
<view class="form-container">
|
||||
<view class="form-item">
|
||||
<view class="label">旧密码</view>
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
v-model="formData.oldPassword"
|
||||
placeholder="请输入旧密码"
|
||||
maxlength="20"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label">新密码</view>
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
v-model="formData.newPassword"
|
||||
placeholder="请输入新密码（6-20位）"
|
||||
maxlength="20"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label">确认密码</view>
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
v-model="formData.confirmPassword"
|
||||
placeholder="请再次输入新密码"
|
||||
maxlength="20"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="tips">
|
||||
<text class="tip-item">• 密码长度为6-20位</text>
|
||||
<text class="tip-item">• 建议包含字母、数字、符号</text>
|
||||
</view>
|
||||
|
||||
<view class="btn-wrapper">
|
||||
<view class="submit-btn" @click="handleSubmit">确认修改</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userAPI from '@/api/user.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 表单验证
|
||||
*/
|
||||
validateForm() {
|
||||
const { oldPassword, newPassword, confirmPassword } = this.formData
|
||||
|
||||
if (!oldPassword) {
|
||||
uni.showToast({
|
||||
title: '请输入旧密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!newPassword) {
|
||||
uni.showToast({
|
||||
title: '请输入新密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (newPassword.length < 6 || newPassword.length > 20) {
|
||||
uni.showToast({
|
||||
title: '密码长度为6-20位',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!confirmPassword) {
|
||||
uni.showToast({
|
||||
title: '请确认新密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
uni.showToast({
|
||||
title: '两次密码输入不一致',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (oldPassword === newPassword) {
|
||||
uni.showToast({
|
||||
title: '新密码不能与旧密码相同',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交修改
|
||||
*/
|
||||
async handleSubmit() {
|
||||
if (!this.validateForm()) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '提交中...'
|
||||
})
|
||||
|
||||
await userAPI.updatePassword({
|
||||
oldPassword: this.formData.oldPassword,
|
||||
newPassword: this.formData.newPassword,
|
||||
newPassword1: this.formData.confirmPassword
|
||||
})
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
uni.showToast({
|
||||
title: '密码修改成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
|
||||
// 延迟返回上一页
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 2000)
|
||||
} catch (err) {
|
||||
uni.hideLoading()
|
||||
console.error('修改密码失败:', err)
|
||||
|
||||
// 根据错误类型显示不同提示
|
||||
let errorMsg = '修改失败，请重试'
|
||||
if (err && err.msg) {
|
||||
errorMsg = err.msg
|
||||
} else if (err && err.message) {
|
||||
if (err.message.includes('旧密码') || err.message.includes('原密码')) {
|
||||
errorMsg = '旧密码错误'
|
||||
} else {
|
||||
errorMsg = err.message
|
||||
}
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: errorMsg,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.change-password-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 30rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #fff9e6;
|
||||
border-radius: 8rpx;
|
||||
border-left: 4rpx solid #faad14;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background-color: #C93639;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
291
src/pages/common-info/common-info.vue
Normal file
291
src/pages/common-info/common-info.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<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)">
|
||||
<image class="action-icon" src="/static/images/编辑@3x.png" mode="aspectFit"></image>
|
||||
<text>编辑</text>
|
||||
</view>
|
||||
<view class="action-btn delete-btn" @click.stop="handleDelete(item)">
|
||||
<image class="action-icon" src="/static/images/删除@3x.png" mode="aspectFit"></image>
|
||||
<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';
|
||||
import athleteAPI from '@/api/athlete.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomTabs,
|
||||
ConfirmModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: ['选手', '联系人'],
|
||||
currentTab: 0,
|
||||
playerList: [],
|
||||
showDeleteModal: false,
|
||||
showSuccessToast: false,
|
||||
currentItem: null
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.loadPlayerList()
|
||||
},
|
||||
onShow() {
|
||||
// 从新增/编辑页面返回时重新加载列表
|
||||
this.loadPlayerList()
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载选手列表
|
||||
*/
|
||||
async loadPlayerList() {
|
||||
try {
|
||||
const res = await athleteAPI.getAthleteList({
|
||||
current: 1,
|
||||
size: 100
|
||||
})
|
||||
|
||||
let list = []
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
}
|
||||
|
||||
// 数据映射
|
||||
this.playerList = list.map(item => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
idCard: item.idCard || item.idCardNumber,
|
||||
gender: item.gender,
|
||||
team: item.team,
|
||||
phone: item.phone
|
||||
}))
|
||||
} catch (err) {
|
||||
console.error('加载选手列表失败:', err)
|
||||
}
|
||||
},
|
||||
|
||||
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;
|
||||
},
|
||||
async confirmDelete() {
|
||||
this.showDeleteModal = false;
|
||||
|
||||
try {
|
||||
// 调用删除API
|
||||
await athleteAPI.removeAthlete(this.currentItem.id)
|
||||
|
||||
// 从列表中移除
|
||||
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);
|
||||
} catch (err) {
|
||||
console.error('删除选手失败:', err)
|
||||
uni.showToast({
|
||||
title: '删除失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</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;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 28rpx;
|
||||
height: 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>
|
||||
433
src/pages/edit-player/edit-player.vue
Normal file
433
src/pages/edit-player/edit-player.vue
Normal file
@@ -0,0 +1,433 @@
|
||||
<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 class="form-item">
|
||||
<view class="form-label">所属单位</view>
|
||||
<view class="form-value">
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="formData.organization"
|
||||
placeholder="请输入所属单位"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="form-label">联系电话</view>
|
||||
<view class="form-value">
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="formData.phone"
|
||||
type="number"
|
||||
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>
|
||||
import athleteAPI from '@/api/athlete.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playerId: '',
|
||||
formData: {
|
||||
idType: '身份证',
|
||||
name: '',
|
||||
idCard: '',
|
||||
team: '',
|
||||
organization: '',
|
||||
phone: ''
|
||||
},
|
||||
errors: [],
|
||||
showHint: false,
|
||||
showToast: false,
|
||||
toastMessage: '',
|
||||
showIdTypePicker: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isFormValid() {
|
||||
return (
|
||||
this.formData.name &&
|
||||
this.formData.idCard &&
|
||||
this.formData.team &&
|
||||
this.formData.organization &&
|
||||
this.formData.phone &&
|
||||
this.validateIdCard(this.formData.idCard) &&
|
||||
this.validatePhone(this.formData.phone)
|
||||
);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'formData.name'(val) {
|
||||
this.validateForm();
|
||||
},
|
||||
'formData.idCard'(val) {
|
||||
this.validateForm();
|
||||
},
|
||||
'formData.team'(val) {
|
||||
this.validateForm();
|
||||
},
|
||||
'formData.organization'(val) {
|
||||
this.validateForm();
|
||||
},
|
||||
'formData.phone'(val) {
|
||||
this.validateForm();
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.id) {
|
||||
this.playerId = options.id
|
||||
this.loadPlayerData(options.id);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载选手数据
|
||||
*/
|
||||
async loadPlayerData(id) {
|
||||
try {
|
||||
const res = await athleteAPI.getAthleteDetail(id)
|
||||
|
||||
// 回显数据（使用后端实体类的字段名）
|
||||
this.formData = {
|
||||
idType: res.idCardType === 1 ? '身份证' : '其他',
|
||||
name: res.playerName || '',
|
||||
idCard: res.idCard || '',
|
||||
team: res.teamName || '',
|
||||
organization: res.organization || '',
|
||||
phone: res.contactPhone || ''
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载选手数据失败:', err)
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
validateIdCard(idCard) {
|
||||
// 身份证号验证：18位，最后一位可以是数字或字母X
|
||||
return /^\d{17}[\dXx]$/.test(idCard);
|
||||
},
|
||||
validatePhone(phone) {
|
||||
// 手机号验证：11位数字
|
||||
return /^1[3-9]\d{9}$/.test(phone);
|
||||
},
|
||||
validateForm() {
|
||||
this.errors = [];
|
||||
this.showHint = false;
|
||||
|
||||
if (!this.formData.name || !this.formData.idCard || !this.formData.team || !this.formData.organization || !this.formData.phone) {
|
||||
this.showHint = true;
|
||||
this.errors.push({
|
||||
label: '有空文本时弹出：',
|
||||
message: '按钮置灰'
|
||||
});
|
||||
}
|
||||
|
||||
if (this.formData.idCard && !this.validateIdCard(this.formData.idCard)) {
|
||||
this.errors.push({
|
||||
label: '身份证不足18位：',
|
||||
message: '按钮置灰'
|
||||
});
|
||||
}
|
||||
|
||||
if (this.formData.phone && !this.validatePhone(this.formData.phone)) {
|
||||
this.errors.push({
|
||||
label: '手机号格式不正确：',
|
||||
message: '按钮置灰'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 从身份证号中提取信息
|
||||
*/
|
||||
extractInfoFromIdCard(idCard) {
|
||||
if (!idCard || idCard.length !== 18) {
|
||||
return {
|
||||
gender: null,
|
||||
age: null,
|
||||
birthDate: null
|
||||
}
|
||||
}
|
||||
|
||||
// 提取出生日期
|
||||
const year = idCard.substring(6, 10)
|
||||
const month = idCard.substring(10, 12)
|
||||
const day = idCard.substring(12, 14)
|
||||
const birthDate = `${year}-${month}-${day}`
|
||||
|
||||
// 计算年龄
|
||||
const birthYear = parseInt(year)
|
||||
const currentYear = new Date().getFullYear()
|
||||
const age = currentYear - birthYear
|
||||
|
||||
// 提取性别（倒数第二位，奇数为男，偶数为女）
|
||||
const genderCode = parseInt(idCard.substring(16, 17))
|
||||
const gender = genderCode % 2 === 1 ? 1 : 2
|
||||
|
||||
return {
|
||||
gender,
|
||||
age,
|
||||
birthDate
|
||||
}
|
||||
},
|
||||
|
||||
async handleSave() {
|
||||
if (!this.isFormValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 从身份证号中提取信息
|
||||
const info = this.extractInfoFromIdCard(this.formData.idCard)
|
||||
|
||||
// 调用API更新选手信息（使用后端实体类的字段名）
|
||||
await athleteAPI.submitAthlete({
|
||||
id: this.playerId,
|
||||
playerName: this.formData.name,
|
||||
idCard: this.formData.idCard,
|
||||
teamName: this.formData.team,
|
||||
organization: this.formData.organization,
|
||||
contactPhone: this.formData.phone,
|
||||
idCardType: 1, // 身份证类型固定为1
|
||||
gender: info.gender,
|
||||
age: info.age,
|
||||
birthDate: info.birthDate
|
||||
})
|
||||
|
||||
// 保存成功
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 延迟返回上一页
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
} catch (err) {
|
||||
console.error('保存选手失败:', err)
|
||||
// 显示错误提示
|
||||
this.toastMessage = '保存失败，请重试'
|
||||
this.showToast = true
|
||||
setTimeout(() => {
|
||||
this.showToast = false
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
||||
309
src/pages/event-detail/event-detail.vue
Normal file
309
src/pages/event-detail/event-detail.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<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')">
|
||||
<image class="function-icon-img" src="/static/images/信息发布@3x.png" mode="aspectFit"></image>
|
||||
<text class="function-text">信息发布</text>
|
||||
</view>
|
||||
<view class="function-item" @click="handleFunction('rules')">
|
||||
<image class="function-icon-img" src="/static/images/赛事规程@3x.png" mode="aspectFit"></image>
|
||||
<text class="function-text">赛事规程</text>
|
||||
</view>
|
||||
<view class="function-item" @click="handleFunction('schedule')">
|
||||
<image class="function-icon-img" src="/static/images/活动日程@3x.png" mode="aspectFit"></image>
|
||||
<text class="function-text">活动日程</text>
|
||||
</view>
|
||||
<view class="function-item" @click="handleFunction('players')">
|
||||
<image class="function-icon-img" src="/static/images/参赛选手@3x.png" mode="aspectFit"></image>
|
||||
<text class="function-text">参赛选手</text>
|
||||
</view>
|
||||
<view class="function-item" @click="handleFunction('match')">
|
||||
<image class="function-icon-img" src="/static/images/比赛实况@3x.png" mode="aspectFit"></image>
|
||||
<text class="function-text">比赛实况</text>
|
||||
</view>
|
||||
<view class="function-item" @click="handleFunction('lineup')">
|
||||
<image class="function-icon-img" src="/static/images/出场顺序@3x.png" mode="aspectFit"></image>
|
||||
<text class="function-text">出场顺序</text>
|
||||
</view>
|
||||
<view class="function-item" @click="handleFunction('score')">
|
||||
<image class="function-icon-img" src="/static/images/成绩@3x.png" mode="aspectFit"></image>
|
||||
<text class="function-text">成绩</text>
|
||||
</view>
|
||||
<view class="function-item" @click="handleFunction('awards')">
|
||||
<image class="function-icon-img" src="/static/images/奖牌榜.png" mode="aspectFit"></image>
|
||||
<text class="function-text">奖牌榜</text>
|
||||
</view>
|
||||
<view class="function-item" @click="handleFunction('photos')">
|
||||
<image class="function-icon-img" src="/static/images/图片直播@3x.png" mode="aspectFit"></image>
|
||||
<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>
|
||||
import competitionAPI from '@/api/competition.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
eventId: '',
|
||||
eventInfo: {
|
||||
id: '',
|
||||
title: '',
|
||||
location: '',
|
||||
registerTime: '',
|
||||
matchTime: '',
|
||||
registerCount: '0',
|
||||
status: 'open'
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.id) {
|
||||
this.eventId = options.id
|
||||
this.loadEventDetail(options.id)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载赛事详情
|
||||
* @param {String|Number} id 赛事ID
|
||||
*/
|
||||
async loadEventDetail(id) {
|
||||
try {
|
||||
const res = await competitionAPI.getCompetitionDetail(id)
|
||||
|
||||
console.log('赛事详情API返回:', res)
|
||||
|
||||
// 尝试多个可能的时间字段
|
||||
const regStartTime = res.registrationStartTime || res.registerStartTime || res.signUpStartTime
|
||||
const regEndTime = res.registrationEndTime || res.registerEndTime || res.signUpEndTime
|
||||
const startTime = res.startTime || res.competitionStartTime || res.beginTime || res.startDate
|
||||
const endTime = res.endTime || res.competitionEndTime || res.finishTime || res.endDate
|
||||
|
||||
// 数据映射
|
||||
this.eventInfo = {
|
||||
id: res.id,
|
||||
title: res.name || res.title || res.competitionName || '未命名赛事',
|
||||
location: res.location || res.address || res.venue || '待定',
|
||||
registerTime: this.formatTimeRange(regStartTime, regEndTime) ||
|
||||
res.registerTime || res.registrationPeriod || '待定',
|
||||
matchTime: this.formatTimeRange(startTime, endTime) ||
|
||||
res.matchTime || res.competitionTime || '待定',
|
||||
registerCount: res.registrationCount || res.registerCount || res.signUpCount || '0',
|
||||
status: this.getStatus(res.status)
|
||||
}
|
||||
|
||||
console.log('格式化后的赛事信息:', this.eventInfo)
|
||||
} catch (err) {
|
||||
console.error('加载赛事详情失败:', err)
|
||||
uni.showToast({
|
||||
title: '加载失败，请重试',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化时间范围
|
||||
*/
|
||||
formatTimeRange(startTime, endTime) {
|
||||
if (!startTime || !endTime) return ''
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}.${month}.${day}`
|
||||
}
|
||||
|
||||
return `${formatDate(startTime)}-${formatDate(endTime)}`
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取赛事状态
|
||||
*/
|
||||
getStatus(status) {
|
||||
// 1: 报名中, 2: 进行中, 3: 已结束
|
||||
if (status === 3 || status === '3' || status === 'finished') {
|
||||
return 'finished'
|
||||
}
|
||||
return 'open'
|
||||
},
|
||||
|
||||
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) {
|
||||
// 跳转时传递赛事ID
|
||||
uni.navigateTo({
|
||||
url: `${url}?eventId=${this.eventId}`
|
||||
})
|
||||
} 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-icon-img {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.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: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.register-btn.disabled {
|
||||
background-color: #999999;
|
||||
}
|
||||
</style>
|
||||
233
src/pages/event-info-detail/event-info-detail.vue
Normal file
233
src/pages/event-info-detail/event-info-detail.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<view class="info-detail-page">
|
||||
<!-- 信息标题 -->
|
||||
<view class="detail-header">
|
||||
<view class="info-tag" :class="infoDetail.type">{{ infoDetail.typeText }}</view>
|
||||
<view class="info-title">{{ infoDetail.title }}</view>
|
||||
<view class="info-time">
|
||||
<text class="time-icon">🕐</text>
|
||||
<text>{{ infoDetail.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 信息内容 -->
|
||||
<view class="detail-content">
|
||||
<text class="content-text">{{ infoDetail.content }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 附件区域（如果有） -->
|
||||
<view class="attachments" v-if="infoDetail.attachments && infoDetail.attachments.length > 0">
|
||||
<view class="attachment-title">附件</view>
|
||||
<view class="attachment-item" v-for="(item, index) in infoDetail.attachments" :key="index">
|
||||
<text class="attachment-icon">📎</text>
|
||||
<text class="attachment-name">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="bottom-bar">
|
||||
<view class="bar-item" @click="handleShare">
|
||||
<text class="bar-icon">📤</text>
|
||||
<text class="bar-text">分享</text>
|
||||
</view>
|
||||
<view class="bar-item" @click="handleCollect">
|
||||
<text class="bar-icon">⭐</text>
|
||||
<text class="bar-text">收藏</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
infoId: '',
|
||||
infoDetail: {
|
||||
id: '',
|
||||
type: 'notice',
|
||||
typeText: '通知',
|
||||
title: '',
|
||||
content: '',
|
||||
time: '',
|
||||
attachments: []
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log('详情页接收参数:', options)
|
||||
|
||||
if (options.id) {
|
||||
this.infoId = options.id
|
||||
}
|
||||
|
||||
// 接收从列表页传递的数据
|
||||
if (options.type) {
|
||||
this.infoDetail.type = options.type
|
||||
}
|
||||
if (options.typeText) {
|
||||
this.infoDetail.typeText = decodeURIComponent(options.typeText)
|
||||
}
|
||||
if (options.title) {
|
||||
this.infoDetail.title = decodeURIComponent(options.title)
|
||||
}
|
||||
if (options.content) {
|
||||
this.infoDetail.content = decodeURIComponent(options.content)
|
||||
}
|
||||
if (options.time) {
|
||||
this.infoDetail.time = decodeURIComponent(options.time)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleShare() {
|
||||
uni.showToast({
|
||||
title: '分享功能开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
handleCollect() {
|
||||
uni.showToast({
|
||||
title: '收藏成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.info-detail-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
background-color: #fff;
|
||||
padding: 40rpx 30rpx;
|
||||
}
|
||||
|
||||
.info-tag {
|
||||
display: inline-block;
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.info-tag.notice {
|
||||
background-color: #C93639;
|
||||
}
|
||||
|
||||
.info-tag.announcement {
|
||||
background-color: #FF8C00;
|
||||
}
|
||||
|
||||
.info-tag.important {
|
||||
background-color: #DC143C;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.info-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.time-icon {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
background-color: #fff;
|
||||
padding: 40rpx 30rpx;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
line-height: 1.8;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.attachment-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.attachment-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.attachment-name {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
padding: 20rpx 30rpx;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.bar-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.bar-icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.bar-text {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
</style>
|
||||
280
src/pages/event-info/event-info.vue
Normal file
280
src/pages/event-info/event-info.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<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>
|
||||
import infoAPI from '@/api/info.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
eventId: '',
|
||||
infoList: []
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.eventId) {
|
||||
this.eventId = options.eventId
|
||||
this.loadInfoList(options.eventId)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载信息发布列表
|
||||
*/
|
||||
async loadInfoList(eventId) {
|
||||
try {
|
||||
const res = await infoAPI.getInfoPublishList({ competitionId: eventId })
|
||||
|
||||
let list = []
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
}
|
||||
|
||||
// 如果后端没有数据，使用模拟数据
|
||||
if (list.length === 0) {
|
||||
list = this.getMockData()
|
||||
}
|
||||
|
||||
// 数据映射
|
||||
this.infoList = list.map(item => ({
|
||||
id: item.id,
|
||||
type: this.getInfoType(item.infoType || item.info_type || item.type),
|
||||
typeText: this.getInfoTypeText(item.infoType || item.info_type || item.type),
|
||||
title: item.title || item.infoTitle,
|
||||
desc: item.content || item.description || item.infoContent || '',
|
||||
time: this.formatTime(item.publishTime || item.publish_time || item.createTime)
|
||||
}))
|
||||
} catch (err) {
|
||||
console.error('加载信息列表失败:', err)
|
||||
// 加载失败时使用模拟数据
|
||||
const list = this.getMockData()
|
||||
this.infoList = list.map(item => ({
|
||||
id: item.id,
|
||||
type: this.getInfoType(item.info_type || item.type),
|
||||
typeText: this.getInfoTypeText(item.info_type || item.type),
|
||||
title: item.title,
|
||||
desc: item.content,
|
||||
time: this.formatTime(item.publishTime)
|
||||
}))
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取模拟数据
|
||||
*/
|
||||
getMockData() {
|
||||
return [
|
||||
{
|
||||
id: 1,
|
||||
info_type: 3,
|
||||
title: '重要通知：赛事报名截止时间变更',
|
||||
content: '由于场馆调整，本次赛事报名截止时间延长至2025年12月20日，请各位选手抓紧时间报名。如有疑问，请联系赛事组委会。',
|
||||
publishTime: '2025-01-10 09:00:00'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
info_type: 1,
|
||||
title: '参赛选手须知',
|
||||
content: '请各位参赛选手提前1小时到达比赛场地进行检录，携带身份证原件及复印件。比赛期间请遵守赛场纪律，服从裁判判决。',
|
||||
publishTime: '2025-01-09 14:30:00'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
info_type: 2,
|
||||
title: '比赛场地及交通指引',
|
||||
content: '本次赛事在市体育中心举行，地址：XX市XX区XX路100号。可乘坐地铁2号线至体育中心站下车，或乘坐公交车88路、99路至体育中心站。场馆提供免费停车位。',
|
||||
publishTime: '2025-01-08 16:00:00'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
info_type: 1,
|
||||
title: '赛前训练安排通知',
|
||||
content: '为方便各位选手熟悉场地，组委会安排在比赛前一天（12月24日）下午14:00-17:00开放场地供选手训练。请需要训练的选手提前联系组委会预约。',
|
||||
publishTime: '2025-01-07 10:20:00'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
info_type: 2,
|
||||
title: '比赛流程及注意事项',
|
||||
content: '比赛采用淘汰赛制，分为预赛、半决赛和决赛三个阶段。每场比赛时长为5分钟，选手需提前做好热身准备。比赛过程中严禁使用违禁器材。',
|
||||
publishTime: '2025-01-06 11:45:00'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
info_type: 1,
|
||||
title: '医疗保障及安全提示',
|
||||
content: '赛事现场配备专业医疗团队和救护车，设有医疗服务点。建议选手自备常用药品，如有特殊疾病请提前告知组委会。比赛前请充分热身，避免受伤。',
|
||||
publishTime: '2025-01-05 15:10:00'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
info_type: 3,
|
||||
title: '关于赛事直播安排的通知',
|
||||
content: '本次赛事将进行全程网络直播，届时可通过官方网站和APP观看。精彩瞬间将在赛后剪辑发布，敬请期待！',
|
||||
publishTime: '2025-01-04 13:00:00'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
info_type: 2,
|
||||
title: '志愿者招募公告',
|
||||
content: '赛事组委会现招募志愿者50名，负责现场引导、秩序维护、后勤保障等工作。有意者请扫描海报二维码报名，报名截止时间为12月15日。',
|
||||
publishTime: '2025-01-03 09:30:00'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取信息类型样式类名
|
||||
*/
|
||||
getInfoType(type) {
|
||||
const typeMap = {
|
||||
1: 'notice',
|
||||
2: 'announcement',
|
||||
3: 'important',
|
||||
'notice': 'notice',
|
||||
'announcement': 'announcement',
|
||||
'important': 'important'
|
||||
}
|
||||
return typeMap[type] || 'notice'
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取信息类型文本
|
||||
*/
|
||||
getInfoTypeText(type) {
|
||||
const typeMap = {
|
||||
1: '通知',
|
||||
2: '公告',
|
||||
3: '重要',
|
||||
'notice': '通知',
|
||||
'announcement': '公告',
|
||||
'important': '重要'
|
||||
}
|
||||
return typeMap[type] || '通知'
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化时间
|
||||
*/
|
||||
formatTime(timeStr) {
|
||||
if (!timeStr) return ''
|
||||
|
||||
const date = new Date(timeStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||||
},
|
||||
|
||||
handleItemClick(item) {
|
||||
// 跳转到信息详情页
|
||||
uni.navigateTo({
|
||||
url: `/pages/event-info-detail/event-info-detail?id=${item.id}&type=${item.type}&typeText=${encodeURIComponent(item.typeText)}&title=${encodeURIComponent(item.title)}&content=${encodeURIComponent(item.desc)}&time=${encodeURIComponent(item.time)}`
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</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
src/pages/event-lineup/event-lineup.vue
Normal file
244
src/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>
|
||||
471
src/pages/event-list/event-list.vue
Normal file
471
src/pages/event-list/event-list.vue
Normal file
@@ -0,0 +1,471 @@
|
||||
<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>
|
||||
import competitionAPI from '@/api/competition.js'
|
||||
|
||||
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: [],
|
||||
// 分页参数
|
||||
pageParams: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
hasMore: true
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.loadEventList()
|
||||
},
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.pageParams.current = 1
|
||||
this.loadEventList(true)
|
||||
},
|
||||
// 上拉加载更多
|
||||
onReachBottom() {
|
||||
if (this.hasMore) {
|
||||
this.pageParams.current++
|
||||
this.loadEventList(false, true)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredEventList() {
|
||||
// 前端筛选（作为后备方案）
|
||||
let list = this.eventList
|
||||
|
||||
// 如果有搜索关键字，进行前端筛选
|
||||
if (this.searchText) {
|
||||
list = list.filter(item => item.title && item.title.includes(this.searchText))
|
||||
}
|
||||
|
||||
return list
|
||||
}
|
||||
},
|
||||
// 监听搜索关键字变化
|
||||
watch: {
|
||||
searchText(newVal, oldVal) {
|
||||
// 防抖处理
|
||||
clearTimeout(this.searchTimer)
|
||||
this.searchTimer = setTimeout(() => {
|
||||
this.pageParams.current = 1
|
||||
this.loadEventList(true)
|
||||
}, 500)
|
||||
},
|
||||
selectedDate() {
|
||||
this.pageParams.current = 1
|
||||
this.loadEventList(true)
|
||||
},
|
||||
selectedArea() {
|
||||
this.pageParams.current = 1
|
||||
this.loadEventList(true)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载赛事列表
|
||||
* @param {Boolean} refresh 是否刷新（重置列表）
|
||||
* @param {Boolean} loadMore 是否加载更多（追加列表）
|
||||
*/
|
||||
async loadEventList(refresh = false, loadMore = false) {
|
||||
try {
|
||||
// 构建查询参数
|
||||
const params = {
|
||||
current: this.pageParams.current,
|
||||
size: this.pageParams.size
|
||||
}
|
||||
|
||||
// 添加搜索关键字
|
||||
// 注意：后端接口参数名待确认，可能是 name/keyword/search
|
||||
if (this.searchText) {
|
||||
params.name = this.searchText
|
||||
}
|
||||
|
||||
// 添加地区筛选
|
||||
if (this.selectedArea) {
|
||||
params.location = this.selectedArea
|
||||
}
|
||||
|
||||
// 调用API
|
||||
const res = await competitionAPI.getCompetitionList(params)
|
||||
|
||||
console.log('赛事列表API返回:', res)
|
||||
|
||||
let list = []
|
||||
let total = 0
|
||||
|
||||
// 处理分页数据
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
total = res.total || 0
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
total = res.length
|
||||
}
|
||||
|
||||
// 数据映射
|
||||
const mappedList = list.map(item => {
|
||||
// 尝试多个可能的时间字段
|
||||
const regStartTime = item.registrationStartTime || item.registerStartTime || item.signUpStartTime
|
||||
const regEndTime = item.registrationEndTime || item.registerEndTime || item.signUpEndTime
|
||||
const startTime = item.startTime || item.competitionStartTime || item.beginTime
|
||||
const endTime = item.endTime || item.competitionEndTime || item.finishTime
|
||||
|
||||
return {
|
||||
id: item.id,
|
||||
title: item.name || item.title || item.competitionName || '未命名赛事',
|
||||
location: item.location || item.address || item.venue || '待定',
|
||||
registerTime: this.formatTimeRange(regStartTime, regEndTime) ||
|
||||
item.registerTime || item.registrationPeriod || '待定',
|
||||
matchTime: this.formatTimeRange(startTime, endTime) ||
|
||||
item.matchTime || item.competitionTime || '待定',
|
||||
registerCount: item.registrationCount || item.registerCount || item.signUpCount || '0',
|
||||
status: this.getStatus(item.status)
|
||||
}
|
||||
})
|
||||
|
||||
console.log('格式化后的赛事列表:', mappedList)
|
||||
|
||||
// 刷新或加载更多
|
||||
if (refresh || !loadMore) {
|
||||
this.eventList = mappedList
|
||||
} else {
|
||||
this.eventList = [...this.eventList, ...mappedList]
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
this.hasMore = this.eventList.length < total
|
||||
|
||||
// 停止下拉刷新
|
||||
if (refresh) {
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载赛事列表失败:', err)
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化时间范围
|
||||
*/
|
||||
formatTimeRange(startTime, endTime) {
|
||||
if (!startTime || !endTime) return ''
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}.${month}.${day}`
|
||||
}
|
||||
|
||||
return `${formatDate(startTime)}-${formatDate(endTime)}`
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取赛事状态
|
||||
*/
|
||||
getStatus(status) {
|
||||
// 1: 报名中, 2: 进行中, 3: 已结束
|
||||
if (status === 3 || status === '3' || status === 'finished') {
|
||||
return 'finished'
|
||||
}
|
||||
return 'open'
|
||||
},
|
||||
|
||||
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>
|
||||
228
src/pages/event-live/event-live.vue
Normal file
228
src/pages/event-live/event-live.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<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>
|
||||
import infoAPI from '@/api/info.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
eventId: '',
|
||||
liveList: []
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.eventId) {
|
||||
this.eventId = options.eventId
|
||||
this.loadLiveList(options.eventId)
|
||||
}
|
||||
},
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.loadLiveList(this.eventId, true)
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载比赛实况列表
|
||||
*/
|
||||
async loadLiveList(eventId, refresh = false) {
|
||||
try {
|
||||
const res = await infoAPI.getLiveUpdateList({ competitionId: eventId })
|
||||
|
||||
let list = []
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
}
|
||||
|
||||
// 数据映射
|
||||
this.liveList = list.map(item => ({
|
||||
time: this.formatTime(item.updateTime || item.time || item.createTime),
|
||||
type: this.getLiveType(item.type || item.updateType),
|
||||
typeText: this.getLiveTypeText(item.type || item.updateType),
|
||||
content: item.content || item.updateContent || '',
|
||||
images: item.images || item.imageList || []
|
||||
}))
|
||||
|
||||
// 停止下拉刷新
|
||||
if (refresh) {
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载实况列表失败:', err)
|
||||
if (refresh) {
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取实况类型样式类名
|
||||
*/
|
||||
getLiveType(type) {
|
||||
const typeMap = {
|
||||
1: 'highlight',
|
||||
2: 'score',
|
||||
3: 'news',
|
||||
'highlight': 'highlight',
|
||||
'score': 'score',
|
||||
'news': 'news'
|
||||
}
|
||||
return typeMap[type] || 'news'
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取实况类型文本
|
||||
*/
|
||||
getLiveTypeText(type) {
|
||||
const typeMap = {
|
||||
1: '精彩瞬间',
|
||||
2: '比分',
|
||||
3: '赛况',
|
||||
'highlight': '精彩瞬间',
|
||||
'score': '比分',
|
||||
'news': '赛况'
|
||||
}
|
||||
return typeMap[type] || '赛况'
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化时间（只取时分）
|
||||
*/
|
||||
formatTime(timeStr) {
|
||||
if (!timeStr) return ''
|
||||
|
||||
// 如果已经是 HH:MM 格式
|
||||
if (/^\d{2}:\d{2}$/.test(timeStr)) {
|
||||
return timeStr
|
||||
}
|
||||
|
||||
const date = new Date(timeStr)
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
|
||||
return `${hours}:${minutes}`
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
||||
245
src/pages/event-medals/event-medals.vue
Normal file
245
src/pages/event-medals/event-medals.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<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>
|
||||
import resultAPI from '@/api/result.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
eventId: '',
|
||||
medalsList: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
totalTeams() {
|
||||
return this.medalsList.length;
|
||||
},
|
||||
totalMedals() {
|
||||
return this.medalsList.reduce((sum, item) => sum + item.total, 0);
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.eventId) {
|
||||
this.eventId = options.eventId
|
||||
this.loadMedalsList(options.eventId)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载奖牌榜
|
||||
*/
|
||||
async loadMedalsList(eventId) {
|
||||
try {
|
||||
const res = await resultAPI.getMedalsList(eventId)
|
||||
|
||||
let list = []
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
}
|
||||
|
||||
// 数据映射
|
||||
this.medalsList = list.map((item, index) => ({
|
||||
rank: item.rank || item.ranking || (index + 1),
|
||||
team: item.teamName || item.team,
|
||||
gold: item.goldMedals || item.gold || 0,
|
||||
silver: item.silverMedals || item.silver || 0,
|
||||
bronze: item.bronzeMedals || item.bronze || 0,
|
||||
total: item.totalMedals || item.total || 0
|
||||
}))
|
||||
} catch (err) {
|
||||
console.error('加载奖牌榜失败:', err)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
||||
430
src/pages/event-players/event-players.vue
Normal file
430
src/pages/event-players/event-players.vue
Normal file
@@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<view class="event-players-page">
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-bar">
|
||||
<input
|
||||
class="search-input"
|
||||
placeholder="搜索选手姓名或编号"
|
||||
v-model="searchKey"
|
||||
@confirm="handleSearch"
|
||||
/>
|
||||
<view class="search-icon" @click="handleSearch">🔍</view>
|
||||
</view>
|
||||
|
||||
<!-- 分类筛选 -->
|
||||
<view class="category-tabs">
|
||||
<view
|
||||
class="category-tab"
|
||||
v-for="(category, index) in categories"
|
||||
:key="index"
|
||||
:class="{ active: currentCategory === category.value }"
|
||||
@click="handleCategoryChange(category.value)"
|
||||
>
|
||||
{{ category.label }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<view class="stats-bar" v-if="totalCount > 0">
|
||||
<text class="stats-text">共 {{ totalCount }} 名选手</text>
|
||||
<text class="stats-text">已确认 {{ confirmedCount }} 人</text>
|
||||
</view>
|
||||
|
||||
<!-- 选手列表 -->
|
||||
<view class="players-list" v-if="playersList.length > 0">
|
||||
<view
|
||||
class="player-item"
|
||||
v-for="(player, index) in playersList"
|
||||
:key="player.id"
|
||||
@click="handlePlayerClick(player)"
|
||||
>
|
||||
<view class="player-number">{{ player.playerNo || (index + 1).toString().padStart(3, '0') }}</view>
|
||||
<view class="player-info">
|
||||
<view class="player-name">
|
||||
{{ player.playerName }}
|
||||
<text class="gender-tag" v-if="player.gender">{{ player.gender === 1 ? '男' : '女' }}</text>
|
||||
</view>
|
||||
<view class="player-detail">
|
||||
<text class="detail-text" v-if="player.organization">{{ player.organization }}</text>
|
||||
<text class="detail-divider" v-if="player.organization && player.projectName">|</text>
|
||||
<text class="detail-text" v-if="player.projectName">{{ player.projectName }}</text>
|
||||
</view>
|
||||
<view class="player-extra" v-if="player.category">
|
||||
<text class="extra-text">{{ player.category }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="player-status" :class="getStatusClass(player.registrationStatus)">
|
||||
{{ getStatusText(player.registrationStatus) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-else-if="!loading">
|
||||
<text class="empty-icon">👤</text>
|
||||
<text class="empty-text">暂无参赛选手</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-state" v-if="loading">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<view class="load-more" v-if="hasMore && !loading" @click="loadMore">
|
||||
<text class="load-more-text">加载更多</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import athleteAPI from '@/api/athlete.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
eventId: '',
|
||||
searchKey: '',
|
||||
currentCategory: '',
|
||||
categories: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '男子组', value: '1' },
|
||||
{ label: '女子组', value: '2' }
|
||||
],
|
||||
playersList: [],
|
||||
totalCount: 0,
|
||||
confirmedCount: 0,
|
||||
loading: false,
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
hasMore: true
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.eventId) {
|
||||
this.eventId = options.eventId
|
||||
this.loadPlayersList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载选手列表
|
||||
*/
|
||||
async loadPlayersList(isLoadMore = false) {
|
||||
if (this.loading) return
|
||||
|
||||
this.loading = true
|
||||
|
||||
try {
|
||||
const params = {
|
||||
competitionId: this.eventId,
|
||||
current: isLoadMore ? this.page : 1,
|
||||
size: this.pageSize
|
||||
}
|
||||
|
||||
// 添加搜索条件
|
||||
if (this.searchKey) {
|
||||
params.playerName = this.searchKey
|
||||
}
|
||||
|
||||
// 添加性别筛选
|
||||
if (this.currentCategory) {
|
||||
params.gender = this.currentCategory
|
||||
}
|
||||
|
||||
const res = await athleteAPI.getAthleteList(params)
|
||||
|
||||
if (res.code === 200 && res.data) {
|
||||
const records = res.data.records || []
|
||||
|
||||
if (isLoadMore) {
|
||||
this.playersList = [...this.playersList, ...records]
|
||||
} else {
|
||||
this.playersList = records
|
||||
this.page = 1
|
||||
}
|
||||
|
||||
this.totalCount = res.data.total || 0
|
||||
this.hasMore = this.playersList.length < this.totalCount
|
||||
|
||||
// 统计已确认人数
|
||||
this.confirmedCount = this.playersList.filter(p => p.registrationStatus === 1).length
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载选手列表失败:', error)
|
||||
uni.showToast({
|
||||
title: '加载失败，请重试',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
handleSearch() {
|
||||
this.page = 1
|
||||
this.loadPlayersList()
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换分类
|
||||
*/
|
||||
handleCategoryChange(value) {
|
||||
this.currentCategory = value
|
||||
this.page = 1
|
||||
this.loadPlayersList()
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载更多
|
||||
*/
|
||||
loadMore() {
|
||||
if (this.hasMore && !this.loading) {
|
||||
this.page++
|
||||
this.loadPlayersList(true)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击选手
|
||||
*/
|
||||
handlePlayerClick(player) {
|
||||
// 可以跳转到选手详情页
|
||||
uni.showToast({
|
||||
title: `选手：${player.playerName}`,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取状态样式类
|
||||
*/
|
||||
getStatusClass(status) {
|
||||
const statusMap = {
|
||||
0: 'pending', // 待确认
|
||||
1: 'confirmed', // 已确认
|
||||
2: 'cancelled' // 已取消
|
||||
}
|
||||
return statusMap[status] || 'pending'
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取状态文本
|
||||
*/
|
||||
getStatusText(status) {
|
||||
const statusMap = {
|
||||
0: '待确认',
|
||||
1: '已确认',
|
||||
2: '已取消'
|
||||
}
|
||||
return statusMap[status] || '未知'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.event-players-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.category-tab.active {
|
||||
background-color: #C93639;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stats-bar {
|
||||
background-color: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.stats-text {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.players-list {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.player-item {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
background-color: #f8f8f8;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.gender-tag {
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 4rpx;
|
||||
background-color: #E3F2FD;
|
||||
color: #2196F3;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.player-detail {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 6rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-divider {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.player-extra {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.player-status {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.player-status.confirmed {
|
||||
background-color: #E8F5E9;
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.player-status.pending {
|
||||
background-color: #FFF3E0;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.player-status.cancelled {
|
||||
background-color: #FFEBEE;
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.load-more-text {
|
||||
font-size: 28rpx;
|
||||
color: #C93639;
|
||||
}
|
||||
</style>
|
||||
986
src/pages/event-register/event-register.vue
Normal file
986
src/pages/event-register/event-register.vue
Normal file
@@ -0,0 +1,986 @@
|
||||
<template>
|
||||
<view class="event-register-page">
|
||||
<!-- 步骤指示器 -->
|
||||
<view class="steps-indicator">
|
||||
<view class="step-item" :class="{ active: currentStep >= 1 }">
|
||||
<image class="step-icon-img" :src="currentStep >= 1 ? '/static/images/选择选手信息@3x.png' : '/static/images/选择选手信息@3x.png'" mode="aspectFit"></image>
|
||||
<text class="step-text">选择选手信息</text>
|
||||
</view>
|
||||
<view class="step-line" :class="{ active: currentStep >= 2 }"></view>
|
||||
<view class="step-item" :class="{ active: currentStep >= 2 }">
|
||||
<image class="step-icon-img" :src="currentStep >= 2 ? '/static/images/订单支付亮@3x.png' : '/static/images/订单支付灰@3x.png'" mode="aspectFit"></image>
|
||||
<text class="step-text">订单支付</text>
|
||||
</view>
|
||||
<view class="step-line" :class="{ active: currentStep >= 3 }"></view>
|
||||
<view class="step-item" :class="{ active: currentStep >= 3 }">
|
||||
<image class="step-icon-img" :src="currentStep >= 3 ? '/static/images/提交报名成功亮@3x.png' : '/static/images/提交报名成功灰@3x.png'" mode="aspectFit"></image>
|
||||
<text class="step-text">提交报名成功</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 步骤1：选择选手信息 -->
|
||||
<view class="step-content" v-if="currentStep === 1">
|
||||
<view class="selected-count">已选：<text class="count">{{ selectedCount }}</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)">
|
||||
<image v-if="item.selected" class="checkbox-img" src="/static/images/选中@3x.png" mode="aspectFit"></image>
|
||||
<image v-else class="checkbox-img" src="/static/images/未选中@3x.png" mode="aspectFit"></image>
|
||||
</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)">
|
||||
<image class="action-icon" src="/static/images/编辑@3x.png" mode="aspectFit"></image>
|
||||
<text>编辑</text>
|
||||
</view>
|
||||
<view class="action-btn delete-btn" @click.stop="handleDelete(item)">
|
||||
<image class="action-icon" src="/static/images/删除@3x.png" mode="aspectFit"></image>
|
||||
<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" style="color: #C93639; font-weight: bold;">
|
||||
{{ 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">{{ selectedCount }}</text>
|
||||
</view>
|
||||
<view class="payment-row total">
|
||||
<text class="label">合计：</text>
|
||||
<text class="value price">¥ {{ totalPrice }}</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">参赛选手：{{ selectedPlayers.length }}人</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>
|
||||
import competitionAPI from '@/api/competition.js'
|
||||
import athleteAPI from '@/api/athlete.js'
|
||||
import registrationAPI from '@/api/registration.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentStep: 1,
|
||||
eventId: '',
|
||||
selectedProjects: [],
|
||||
eventInfo: {
|
||||
title: '',
|
||||
location: '',
|
||||
matchTime: '',
|
||||
projects: '',
|
||||
contact: '',
|
||||
participants: ''
|
||||
},
|
||||
playerList: [],
|
||||
selectedPlayers: [],
|
||||
showPlayerModal: false,
|
||||
totalPrice: 0,
|
||||
registrationId: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectedCount() {
|
||||
return this.playerList.filter(item => item.selected).length
|
||||
},
|
||||
participantsText() {
|
||||
return this.playerList
|
||||
.filter(item => item.selected)
|
||||
.map(item => item.name)
|
||||
.join('、')
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.eventId) {
|
||||
this.eventId = options.eventId
|
||||
this.loadEventDetail(options.eventId)
|
||||
}
|
||||
|
||||
if (options.projects) {
|
||||
try {
|
||||
// 尝试解码（可能被双重编码）
|
||||
let projectsStr = decodeURIComponent(options.projects)
|
||||
|
||||
// 如果还包含 %，说明被双重编码了，再解码一次
|
||||
if (projectsStr.includes('%')) {
|
||||
projectsStr = decodeURIComponent(projectsStr)
|
||||
}
|
||||
|
||||
this.selectedProjects = JSON.parse(projectsStr)
|
||||
} catch (err) {
|
||||
console.error('解析项目数据失败:', err)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载选手列表
|
||||
this.loadPlayerList()
|
||||
},
|
||||
onShow() {
|
||||
// 从新增/编辑页面返回时重新加载列表
|
||||
if (this.currentStep === 1) {
|
||||
this.loadPlayerList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载赛事详情
|
||||
*/
|
||||
async loadEventDetail(id) {
|
||||
try {
|
||||
const res = await competitionAPI.getCompetitionDetail(id)
|
||||
|
||||
// 尝试多个可能的时间字段名
|
||||
const startTime = res.startTime || res.competitionStartTime || res.beginTime || res.startDate
|
||||
const endTime = res.endTime || res.competitionEndTime || res.finishTime || res.endDate
|
||||
|
||||
// 如果没有时间字段，尝试使用其他字段
|
||||
let matchTime = this.formatTimeRange(startTime, endTime)
|
||||
if (!matchTime && res.matchTime) {
|
||||
matchTime = res.matchTime
|
||||
} else if (!matchTime && res.competitionTime) {
|
||||
matchTime = res.competitionTime
|
||||
} else if (!matchTime) {
|
||||
matchTime = '待定'
|
||||
}
|
||||
|
||||
this.eventInfo = {
|
||||
title: res.name || res.title || res.competitionName || '未命名赛事',
|
||||
location: res.location || res.address || res.venue || '待定',
|
||||
matchTime: matchTime,
|
||||
projects: this.selectedProjects && this.selectedProjects.length > 0
|
||||
? this.selectedProjects.map(p => p.name).join('、')
|
||||
: '',
|
||||
contact: res.contactPhone || res.contact || res.phone || '',
|
||||
participants: ''
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载赛事详情失败:', err)
|
||||
// 设置默认值，防止页面显示空白
|
||||
this.eventInfo = {
|
||||
title: '未命名赛事',
|
||||
location: '待定',
|
||||
matchTime: '待定',
|
||||
projects: '',
|
||||
contact: '',
|
||||
participants: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载选手列表
|
||||
*/
|
||||
async loadPlayerList() {
|
||||
try {
|
||||
const res = await athleteAPI.getAthleteList({
|
||||
current: 1,
|
||||
size: 100
|
||||
})
|
||||
|
||||
let list = []
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
}
|
||||
|
||||
// 数据映射 - 尝试多个可能的字段名
|
||||
this.playerList = list.map(item => ({
|
||||
id: item.id,
|
||||
// 尝试多个可能的姓名字段
|
||||
name: item.name || item.athleteName || item.playerName || item.realName || item.userName || '未命名',
|
||||
// 尝试多个可能的身份证字段
|
||||
idCard: item.idCard || item.idCardNumber || item.idCardNo || item.identityCard || '',
|
||||
selected: false
|
||||
}))
|
||||
} catch (err) {
|
||||
console.error('加载选手列表失败:', err)
|
||||
uni.showToast({
|
||||
title: '加载选手列表失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化时间范围
|
||||
*/
|
||||
formatTimeRange(startTime, endTime) {
|
||||
if (!startTime || !endTime) return ''
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}.${month}.${day}`
|
||||
}
|
||||
|
||||
return `${formatDate(startTime)}-${formatDate(endTime)}`
|
||||
},
|
||||
|
||||
/**
|
||||
* 计算总价
|
||||
*/
|
||||
calculateTotalPrice() {
|
||||
const count = this.selectedCount
|
||||
|
||||
if (!this.selectedProjects || this.selectedProjects.length === 0) {
|
||||
return 0
|
||||
}
|
||||
|
||||
// 计算所有项目的总价（将字符串转换为数字）
|
||||
const pricePerProject = this.selectedProjects.reduce((sum, p) => {
|
||||
const price = parseFloat(p.price || 0)
|
||||
return sum + price
|
||||
}, 0)
|
||||
|
||||
const total = count * pricePerProject
|
||||
|
||||
return total.toFixed(2)
|
||||
},
|
||||
|
||||
togglePlayer(item) {
|
||||
const index = this.playerList.findIndex(p => p.id === item.id)
|
||||
if (index !== -1) {
|
||||
const newValue = !this.playerList[index].selected
|
||||
this.$set(this.playerList[index], 'selected', newValue)
|
||||
}
|
||||
},
|
||||
goToAddPlayer() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/add-player/add-player'
|
||||
});
|
||||
},
|
||||
handleEdit(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/edit-player/edit-player?id=' + item.id
|
||||
});
|
||||
},
|
||||
async handleDelete(item) {
|
||||
try {
|
||||
const confirmRes = await new Promise((resolve) => {
|
||||
uni.showModal({
|
||||
title: '删除选手',
|
||||
content: '确定要删除该选手吗？',
|
||||
success: (res) => resolve(res)
|
||||
})
|
||||
})
|
||||
|
||||
if (confirmRes.confirm) {
|
||||
await athleteAPI.removeAthlete(item.id)
|
||||
|
||||
const index = this.playerList.findIndex(p => p.id === item.id);
|
||||
if (index > -1) {
|
||||
this.playerList.splice(index, 1);
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('删除选手失败:', err)
|
||||
uni.showToast({
|
||||
title: '删除失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
goToStep2() {
|
||||
const selected = this.playerList.filter(item => item.selected)
|
||||
|
||||
if (selected.length === 0) {
|
||||
uni.showToast({
|
||||
title: '请至少选择一名选手',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 更新参赛选手信息
|
||||
const participantsText = selected.map(p => p.name).join('、')
|
||||
|
||||
// 使用 $set 确保响应式更新
|
||||
this.$set(this.eventInfo, 'participants', participantsText)
|
||||
this.totalPrice = this.calculateTotalPrice()
|
||||
|
||||
// 延迟切换步骤，确保数据更新完成
|
||||
this.$nextTick(() => {
|
||||
this.currentStep = 2
|
||||
})
|
||||
},
|
||||
async goToStep3() {
|
||||
try {
|
||||
// 获取选中的选手
|
||||
const selected = this.playerList.filter(item => item.selected)
|
||||
|
||||
// 检查必填字段
|
||||
if (!this.eventId) {
|
||||
uni.showToast({
|
||||
title: '赛事ID缺失',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.selectedProjects || this.selectedProjects.length === 0) {
|
||||
uni.showToast({
|
||||
title: '请选择报名项目',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (selected.length === 0) {
|
||||
uni.showToast({
|
||||
title: '请选择参赛选手',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 生成订单号：格式 BMyyyyMMddHHmmss + 随机4位数
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(now.getDate()).padStart(2, '0')
|
||||
const hours = String(now.getHours()).padStart(2, '0')
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(now.getSeconds()).padStart(2, '0')
|
||||
const random = String(Math.floor(Math.random() * 10000)).padStart(4, '0')
|
||||
const orderNo = `BM${year}${month}${day}${hours}${minutes}${seconds}${random}`
|
||||
|
||||
// 构建提交数据 - 确保ID都是数字类型
|
||||
const submitData = {
|
||||
orderNo: orderNo,
|
||||
competitionId: parseInt(this.eventId),
|
||||
projectIds: this.selectedProjects.map(p => parseInt(p.id)),
|
||||
athleteIds: selected.map(p => parseInt(p.id)),
|
||||
contactPhone: this.eventInfo.contact || '',
|
||||
totalAmount: parseFloat(this.totalPrice) || 0
|
||||
}
|
||||
|
||||
console.log('=== 提交报名数据 ===')
|
||||
console.log('订单号:', submitData.orderNo)
|
||||
console.log('完整提交数据:', submitData)
|
||||
console.log('赛事ID:', submitData.competitionId, typeof submitData.competitionId)
|
||||
console.log('项目IDs:', submitData.projectIds)
|
||||
console.log('选手IDs:', submitData.athleteIds)
|
||||
console.log('联系电话:', submitData.contactPhone)
|
||||
console.log('总金额:', submitData.totalAmount, typeof submitData.totalAmount)
|
||||
|
||||
// 提交报名订单
|
||||
const res = await registrationAPI.submitRegistration(submitData)
|
||||
|
||||
console.log('=== 报名响应数据 ===')
|
||||
console.log('完整响应:', res)
|
||||
console.log('响应数据:', res.data)
|
||||
|
||||
// 保存报名ID - 尝试多个可能的字段
|
||||
this.registrationId = res.id || res.registrationId || res.data?.id || res.data?.registrationId || orderNo
|
||||
|
||||
console.log('报名ID:', this.registrationId)
|
||||
|
||||
// 更新选中的选手列表（包含编号）
|
||||
this.selectedPlayers = selected.map((item, index) => {
|
||||
// 生成编号：使用报名ID或订单号 + 选手索引
|
||||
const playerNumber = item.playerNo || item.number || `${this.registrationId}-${String(index + 1).padStart(6, '0')}`
|
||||
|
||||
return {
|
||||
name: item.name,
|
||||
idCard: item.idCard,
|
||||
number: playerNumber
|
||||
}
|
||||
})
|
||||
|
||||
this.currentStep = 3;
|
||||
|
||||
uni.showToast({
|
||||
title: '报名成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('提交报名失败:', err)
|
||||
uni.showToast({
|
||||
title: '报名失败，请重试',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
showPlayers() {
|
||||
// 更新选中的选手列表
|
||||
this.selectedPlayers = this.playerList
|
||||
.filter(item => item.selected)
|
||||
.map(item => ({
|
||||
name: item.name,
|
||||
idCard: item.idCard,
|
||||
number: ''
|
||||
}))
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.step-icon-img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.checkbox-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.checked {
|
||||
font-size: 36rpx;
|
||||
color: #C93639;
|
||||
}
|
||||
|
||||
.unchecked {
|
||||
font-size: 36rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.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>
|
||||
556
src/pages/event-rules/event-rules.vue
Normal file
556
src/pages/event-rules/event-rules.vue
Normal file
@@ -0,0 +1,556 @@
|
||||
<template>
|
||||
<view class="event-rules-page">
|
||||
<!-- 附件下载区 -->
|
||||
<view class="attachments-section" v-if="attachments.length > 0">
|
||||
<view class="section-title">
|
||||
<text class="title-icon">📎</text>
|
||||
<text class="title-text">规程附件</text>
|
||||
</view>
|
||||
<view class="attachments-list">
|
||||
<view class="attachment-item" v-for="(file, index) in attachments" :key="index" @click="downloadFile(file)">
|
||||
<view class="file-info">
|
||||
<text class="file-icon">{{ getFileIcon(file.fileType) }}</text>
|
||||
<view class="file-details">
|
||||
<text class="file-name">{{ file.fileName }}</text>
|
||||
<text class="file-size">{{ file.fileSize }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="download-btn">
|
||||
<text class="download-icon">⬇</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 规程内容区 -->
|
||||
<view class="content-section" v-if="rulesList.length > 0">
|
||||
<view class="section-title">
|
||||
<text class="title-icon">📄</text>
|
||||
<text class="title-text">规程内容</text>
|
||||
</view>
|
||||
<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>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-if="attachments.length === 0 && rulesList.length === 0">
|
||||
<text class="empty-icon">📋</text>
|
||||
<text class="empty-text">暂无规程信息</text>
|
||||
</view>
|
||||
|
||||
<!-- 快捷入口 -->
|
||||
<view class="quick-actions" v-if="eventId">
|
||||
<view class="quick-action-item" @click="goToPlayers">
|
||||
<view class="action-icon">👥</view>
|
||||
<view class="action-text">查看参赛选手</view>
|
||||
</view>
|
||||
<view class="quick-action-item" @click="goToRegister">
|
||||
<view class="action-icon">📝</view>
|
||||
<view class="action-text">我要报名</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import competitionAPI from '@/api/competition.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
eventId: '',
|
||||
// 附件列表
|
||||
attachments: [],
|
||||
// 规程章节列表
|
||||
rulesList: []
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.eventId) {
|
||||
this.eventId = options.eventId
|
||||
this.loadRulesData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载规程数据
|
||||
*/
|
||||
async loadRulesData() {
|
||||
try {
|
||||
// 调用API获取规程数据
|
||||
const res = await competitionAPI.getCompetitionRules(this.eventId)
|
||||
|
||||
// 处理附件数据
|
||||
if (res.attachments && res.attachments.length > 0) {
|
||||
this.attachments = res.attachments.map(file => ({
|
||||
id: file.id,
|
||||
fileName: file.name || file.fileName,
|
||||
fileUrl: file.url || file.fileUrl,
|
||||
fileSize: this.formatFileSize(file.size || file.fileSize),
|
||||
fileType: this.getFileType(file.name || file.fileName)
|
||||
}))
|
||||
}
|
||||
|
||||
// 处理规程内容数据
|
||||
if (res.chapters && res.chapters.length > 0) {
|
||||
this.rulesList = res.chapters.map(chapter => ({
|
||||
chapter: chapter.chapterNumber || chapter.number,
|
||||
title: chapter.title || chapter.name,
|
||||
expanded: false,
|
||||
contents: chapter.contents || chapter.items || []
|
||||
}))
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载规程数据失败:', err)
|
||||
// 如果API失败，使用模拟数据
|
||||
this.loadMockData()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载模拟数据（用于开发测试）
|
||||
*/
|
||||
loadMockData() {
|
||||
this.attachments = [
|
||||
{
|
||||
id: '1',
|
||||
fileName: '2025年郑州武术大赛规程.pdf',
|
||||
fileUrl: 'https://example.com/rules.pdf',
|
||||
fileSize: '2.5 MB',
|
||||
fileType: 'pdf'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
fileName: '参赛报名表.docx',
|
||||
fileUrl: 'https://example.com/form.docx',
|
||||
fileSize: '156 KB',
|
||||
fileType: 'docx'
|
||||
}
|
||||
]
|
||||
|
||||
this.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 所有参赛选手均可获得参赛证书。'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换章节展开/收起
|
||||
*/
|
||||
toggleSection(index) {
|
||||
this.rulesList[index].expanded = !this.rulesList[index].expanded
|
||||
},
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
*/
|
||||
downloadFile(file) {
|
||||
uni.showLoading({
|
||||
title: '准备下载'
|
||||
})
|
||||
|
||||
// 下载文件
|
||||
uni.downloadFile({
|
||||
url: file.fileUrl,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
// 保存文件到本地
|
||||
const filePath = res.tempFilePath
|
||||
|
||||
// 打开文档
|
||||
uni.openDocument({
|
||||
filePath: filePath,
|
||||
fileType: file.fileType,
|
||||
success: () => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '打开成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading()
|
||||
console.error('打开文件失败:', err)
|
||||
uni.showToast({
|
||||
title: '打开失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading()
|
||||
console.error('下载失败:', err)
|
||||
uni.showToast({
|
||||
title: '下载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取文件类型
|
||||
*/
|
||||
getFileType(fileName) {
|
||||
const ext = fileName.split('.').pop().toLowerCase()
|
||||
return ext
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取文件图标
|
||||
*/
|
||||
getFileIcon(fileType) {
|
||||
const iconMap = {
|
||||
'pdf': '📕',
|
||||
'doc': '📘',
|
||||
'docx': '📘',
|
||||
'xls': '📗',
|
||||
'xlsx': '📗',
|
||||
'ppt': '📙',
|
||||
'pptx': '📙',
|
||||
'txt': '📄',
|
||||
'zip': '📦',
|
||||
'rar': '📦'
|
||||
}
|
||||
return iconMap[fileType] || '📄'
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化文件大小
|
||||
*/
|
||||
formatFileSize(bytes) {
|
||||
if (!bytes || bytes === 0) return '0 B'
|
||||
if (typeof bytes === 'string') return bytes
|
||||
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到参赛选手页面
|
||||
*/
|
||||
goToPlayers() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/event-players/event-players?eventId=${this.eventId}`
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到报名页面
|
||||
*/
|
||||
goToRegister() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/event-register/event-register?eventId=${this.eventId}`
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.event-rules-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
// 区块标题
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
// 附件下载区
|
||||
.attachments-section {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.attachments-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 25rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
background-color: #f8f8f8;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 48rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: #C93639;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.download-icon {
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// 规程内容区
|
||||
.content-section {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.rules-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.rules-item {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.rules-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
gap: 15rpx;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:active {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
// 空状态
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
// 快捷入口
|
||||
.quick-actions {
|
||||
margin-top: 30rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.quick-action-item {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:active {
|
||||
background-color: #f8f8f8;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
597
src/pages/event-schedule/event-schedule.vue
Normal file
597
src/pages/event-schedule/event-schedule.vue
Normal file
@@ -0,0 +1,597 @@
|
||||
<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>
|
||||
import infoAPI from '@/api/info.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
eventId: '',
|
||||
currentDate: 0,
|
||||
dates: [],
|
||||
schedules: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentSchedule() {
|
||||
return this.schedules[this.currentDate] || [];
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.eventId) {
|
||||
this.eventId = options.eventId
|
||||
this.loadScheduleDates(options.eventId)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentDate(newVal) {
|
||||
if (this.dates[newVal] && this.dates[newVal].date) {
|
||||
this.loadScheduleByDate(this.eventId, this.dates[newVal].date)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载日程日期列表
|
||||
*/
|
||||
async loadScheduleDates(eventId) {
|
||||
try {
|
||||
const res = await infoAPI.getActivityScheduleList({ competitionId: eventId })
|
||||
|
||||
let list = []
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
}
|
||||
|
||||
// 如果后端没有数据，使用模拟数据
|
||||
if (list.length === 0) {
|
||||
list = this.getMockScheduleData()
|
||||
}
|
||||
|
||||
// 提取唯一日期
|
||||
const dateSet = new Set()
|
||||
list.forEach(item => {
|
||||
const date = item.scheduleDate || item.schedule_date || item.date
|
||||
if (date) {
|
||||
dateSet.add(date)
|
||||
}
|
||||
})
|
||||
|
||||
// 格式化日期选项卡并排序
|
||||
this.dates = Array.from(dateSet)
|
||||
.sort((a, b) => new Date(a) - new Date(b)) // 按日期升序排序
|
||||
.map(date => {
|
||||
const d = new Date(date)
|
||||
const month = d.getMonth() + 1
|
||||
const day = d.getDate()
|
||||
const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.getDay()]
|
||||
|
||||
return {
|
||||
date: date,
|
||||
day: `${month}月${day}日`,
|
||||
text: weekDay
|
||||
}
|
||||
})
|
||||
|
||||
// 按日期分组日程
|
||||
list.forEach(item => {
|
||||
const date = item.scheduleDate || item.schedule_date || item.date
|
||||
const dateIndex = this.dates.findIndex(d => d.date === date)
|
||||
|
||||
if (dateIndex >= 0) {
|
||||
if (!this.schedules[dateIndex]) {
|
||||
this.schedules[dateIndex] = []
|
||||
}
|
||||
|
||||
this.schedules[dateIndex].push({
|
||||
time: this.formatTime(item.scheduleTime || item.schedule_time || item.time),
|
||||
timeRaw: item.scheduleTime || item.schedule_time || item.time, // 保存原始时间用于排序
|
||||
title: item.eventName || item.event_name || item.title || item.activityName || item.scheduleName,
|
||||
location: item.venue || item.location || ''
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 对每个日期内的日程按时间排序
|
||||
Object.keys(this.schedules).forEach(dateIndex => {
|
||||
this.schedules[dateIndex].sort((a, b) => {
|
||||
const timeA = a.timeRaw || a.time
|
||||
const timeB = b.timeRaw || b.time
|
||||
return timeA.localeCompare(timeB)
|
||||
})
|
||||
})
|
||||
|
||||
// 加载第一天的日程
|
||||
if (this.dates.length > 0 && this.dates[0].date) {
|
||||
this.loadScheduleByDate(eventId, this.dates[0].date)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载日程日期失败:', err)
|
||||
// 加载失败时使用模拟数据
|
||||
const list = this.getMockScheduleData()
|
||||
|
||||
// 提取唯一日期
|
||||
const dateSet = new Set()
|
||||
list.forEach(item => {
|
||||
if (item.scheduleDate) {
|
||||
dateSet.add(item.scheduleDate)
|
||||
}
|
||||
})
|
||||
|
||||
// 格式化日期选项卡并排序
|
||||
this.dates = Array.from(dateSet)
|
||||
.sort((a, b) => new Date(a) - new Date(b)) // 按日期升序排序
|
||||
.map(date => {
|
||||
const d = new Date(date)
|
||||
const month = d.getMonth() + 1
|
||||
const day = d.getDate()
|
||||
const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.getDay()]
|
||||
|
||||
return {
|
||||
date: date,
|
||||
day: `${month}月${day}日`,
|
||||
text: weekDay
|
||||
}
|
||||
})
|
||||
|
||||
// 按日期分组日程
|
||||
list.forEach(item => {
|
||||
const dateIndex = this.dates.findIndex(d => d.date === item.scheduleDate)
|
||||
|
||||
if (dateIndex >= 0) {
|
||||
if (!this.schedules[dateIndex]) {
|
||||
this.schedules[dateIndex] = []
|
||||
}
|
||||
|
||||
this.schedules[dateIndex].push({
|
||||
time: this.formatTime(item.scheduleTime),
|
||||
timeRaw: item.scheduleTime, // 保存原始时间用于排序
|
||||
title: item.eventName,
|
||||
location: item.venue || ''
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 对每个日期内的日程按时间排序
|
||||
Object.keys(this.schedules).forEach(dateIndex => {
|
||||
this.schedules[dateIndex].sort((a, b) => {
|
||||
const timeA = a.timeRaw || a.time
|
||||
const timeB = b.timeRaw || b.time
|
||||
return timeA.localeCompare(timeB)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载指定日期的日程
|
||||
*/
|
||||
async loadScheduleByDate(eventId, date) {
|
||||
try {
|
||||
const res = await infoAPI.getScheduleList({ competitionId: eventId, date: date })
|
||||
|
||||
let list = []
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
}
|
||||
|
||||
const dateIndex = this.dates.findIndex(d => d.date === date)
|
||||
if (dateIndex >= 0) {
|
||||
this.schedules[dateIndex] = list
|
||||
.map(item => ({
|
||||
time: this.formatTime(item.scheduleTime || item.schedule_time || item.time),
|
||||
timeRaw: item.scheduleTime || item.schedule_time || item.time,
|
||||
title: item.eventName || item.event_name || item.title || item.activityName || item.scheduleName,
|
||||
location: item.venue || item.location || ''
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
const timeA = a.timeRaw || a.time
|
||||
const timeB = b.timeRaw || b.time
|
||||
return timeA.localeCompare(timeB)
|
||||
})
|
||||
|
||||
// 触发视图更新
|
||||
this.$forceUpdate()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载日程详情失败:', err)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化时间（只取时分）
|
||||
*/
|
||||
formatTime(timeStr) {
|
||||
if (!timeStr) return ''
|
||||
|
||||
// 如果已经是 HH:MM 格式
|
||||
if (/^\d{2}:\d{2}$/.test(timeStr)) {
|
||||
return timeStr
|
||||
}
|
||||
|
||||
// 如果是 HH:MM:SS 格式，直接截取前5位
|
||||
if (/^\d{2}:\d{2}:\d{2}$/.test(timeStr)) {
|
||||
return timeStr.substring(0, 5)
|
||||
}
|
||||
|
||||
// 尝试解析完整的日期时间字符串
|
||||
const date = new Date(timeStr)
|
||||
if (!isNaN(date.getTime())) {
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
return `${hours}:${minutes}`
|
||||
}
|
||||
|
||||
// 如果无法解析，返回原字符串
|
||||
return timeStr
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取模拟日程数据
|
||||
*/
|
||||
getMockScheduleData() {
|
||||
return [
|
||||
// 第一天：2025-12-25 (报到日)
|
||||
{
|
||||
id: 2001,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-25',
|
||||
scheduleTime: '08:00',
|
||||
eventName: '运动员报到',
|
||||
venue: '赛事组委会接待处',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2002,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-25',
|
||||
scheduleTime: '09:00',
|
||||
eventName: '领取参赛证件及装备',
|
||||
venue: '赛事组委会接待处',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2003,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-25',
|
||||
scheduleTime: '10:00',
|
||||
eventName: '赛前技术会议',
|
||||
venue: '会议室A',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2004,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-25',
|
||||
scheduleTime: '14:00',
|
||||
eventName: '场地开放训练',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2005,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-25',
|
||||
scheduleTime: '16:00',
|
||||
eventName: '裁判员培训会',
|
||||
venue: '会议室B',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2006,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-25',
|
||||
scheduleTime: '18:00',
|
||||
eventName: '开幕式彩排',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
// 第二天：2025-12-26 (正式比赛第一天)
|
||||
{
|
||||
id: 2007,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-26',
|
||||
scheduleTime: '07:30',
|
||||
eventName: '运动员检录',
|
||||
venue: '检录处',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2008,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-26',
|
||||
scheduleTime: '08:30',
|
||||
eventName: '开幕式',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2009,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-26',
|
||||
scheduleTime: '09:00',
|
||||
eventName: '男子长拳预赛',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2010,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-26',
|
||||
scheduleTime: '10:30',
|
||||
eventName: '女子长拳预赛',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2011,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-26',
|
||||
scheduleTime: '12:00',
|
||||
eventName: '午休',
|
||||
venue: '',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2012,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-26',
|
||||
scheduleTime: '14:00',
|
||||
eventName: '男子太极拳预赛',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2013,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-26',
|
||||
scheduleTime: '15:30',
|
||||
eventName: '女子太极拳预赛',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2014,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-26',
|
||||
scheduleTime: '17:00',
|
||||
eventName: '当日赛事总结会',
|
||||
venue: '会议室A',
|
||||
status: 1
|
||||
},
|
||||
// 第三天：2025-12-27 (正式比赛第二天 - 决赛日)
|
||||
{
|
||||
id: 2015,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-27',
|
||||
scheduleTime: '07:30',
|
||||
eventName: '运动员检录',
|
||||
venue: '检录处',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2016,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-27',
|
||||
scheduleTime: '08:30',
|
||||
eventName: '男子长拳半决赛',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2017,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-27',
|
||||
scheduleTime: '10:00',
|
||||
eventName: '女子长拳半决赛',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2018,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-27',
|
||||
scheduleTime: '12:00',
|
||||
eventName: '午休',
|
||||
venue: '',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2019,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-27',
|
||||
scheduleTime: '14:00',
|
||||
eventName: '男子长拳决赛',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2020,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-27',
|
||||
scheduleTime: '15:00',
|
||||
eventName: '女子长拳决赛',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2021,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-27',
|
||||
scheduleTime: '16:00',
|
||||
eventName: '男子太极拳决赛',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2022,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-27',
|
||||
scheduleTime: '17:00',
|
||||
eventName: '女子太极拳决赛',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2023,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-27',
|
||||
scheduleTime: '18:00',
|
||||
eventName: '颁奖典礼',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
id: 2024,
|
||||
competitionId: 200,
|
||||
scheduleDate: '2025-12-27',
|
||||
scheduleTime: '19:00',
|
||||
eventName: '闭幕式',
|
||||
venue: '主赛场',
|
||||
status: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
||||
252
src/pages/event-score/event-score.vue
Normal file
252
src/pages/event-score/event-score.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<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.name }}
|
||||
</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>
|
||||
import resultAPI from '@/api/result.js'
|
||||
import competitionAPI from '@/api/competition.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
eventId: '',
|
||||
currentCategory: 0,
|
||||
categories: [],
|
||||
scores: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentScores() {
|
||||
return this.scores[this.currentCategory] || [];
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.eventId) {
|
||||
this.eventId = options.eventId
|
||||
this.loadCategories(options.eventId)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentCategory(newVal) {
|
||||
if (this.categories[newVal] && this.categories[newVal].id) {
|
||||
this.loadScoresByCategory(this.eventId, this.categories[newVal].id)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载项目分类
|
||||
*/
|
||||
async loadCategories(eventId) {
|
||||
try {
|
||||
const res = await competitionAPI.getProjectList({ competitionId: eventId })
|
||||
|
||||
let list = []
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
}
|
||||
|
||||
// 提取项目分类
|
||||
this.categories = list.map(item => ({
|
||||
id: item.id,
|
||||
name: item.name || item.projectName
|
||||
}))
|
||||
|
||||
// 加载第一个分类的成绩
|
||||
if (this.categories.length > 0) {
|
||||
this.loadScoresByCategory(eventId, this.categories[0].id)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载项目分类失败:', err)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载指定分类的成绩
|
||||
*/
|
||||
async loadScoresByCategory(eventId, projectId) {
|
||||
try {
|
||||
const res = await resultAPI.getResultList(eventId, { projectId })
|
||||
|
||||
let list = []
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
}
|
||||
|
||||
const categoryIndex = this.currentCategory
|
||||
this.scores[categoryIndex] = list.map((item, index) => ({
|
||||
rank: item.rank || item.ranking || (index + 1),
|
||||
name: item.athleteName || item.name,
|
||||
team: item.teamName || item.team,
|
||||
score: item.score || item.finalScore || '0.00'
|
||||
}))
|
||||
|
||||
// 触发视图更新
|
||||
this.$forceUpdate()
|
||||
} catch (err) {
|
||||
console.error('加载成绩失败:', err)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
||||
343
src/pages/home/home.vue
Normal file
343
src/pages/home/home.vue
Normal file
@@ -0,0 +1,343 @@
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import competitionAPI from '@/api/competition.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
banners: [],
|
||||
eventList: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.loadBanners()
|
||||
this.loadEvents()
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载轮播图
|
||||
*/
|
||||
async loadBanners() {
|
||||
try {
|
||||
const res = await competitionAPI.getBannerList({
|
||||
current: 1,
|
||||
size: 5
|
||||
})
|
||||
|
||||
// 如果后端返回的是分页数据
|
||||
if (res.records) {
|
||||
this.banners = res.records.map(item => item.imageUrl || item.image || item.url)
|
||||
} else if (Array.isArray(res)) {
|
||||
this.banners = res.map(item => item.imageUrl || item.image || item.url)
|
||||
}
|
||||
|
||||
// 如果没有数据，使用默认轮播图
|
||||
if (this.banners.length === 0) {
|
||||
this.banners = [
|
||||
'/static/images/bananer1.png',
|
||||
'/static/images/bananer2.png'
|
||||
]
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载轮播图失败:', err)
|
||||
// 使用默认轮播图
|
||||
this.banners = [
|
||||
'/static/images/bananer1.png',
|
||||
'/static/images/bananer2.png'
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载精品赛事
|
||||
*/
|
||||
async loadEvents() {
|
||||
try {
|
||||
const res = await competitionAPI.getCompetitionList({
|
||||
current: 1,
|
||||
size: 10
|
||||
})
|
||||
|
||||
console.log('赛事列表API返回:', res)
|
||||
|
||||
// 如果后端返回的是分页数据
|
||||
let list = []
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
}
|
||||
|
||||
// 数据映射：将后端字段转换为前端需要的字段
|
||||
this.eventList = list.map(item => {
|
||||
// 尝试多个可能的时间字段
|
||||
const regStartTime = item.registrationStartTime || item.registerStartTime || item.signUpStartTime
|
||||
const regEndTime = item.registrationEndTime || item.registerEndTime || item.signUpEndTime
|
||||
const startTime = item.startTime || item.competitionStartTime || item.beginTime
|
||||
const endTime = item.endTime || item.competitionEndTime || item.finishTime
|
||||
|
||||
return {
|
||||
id: item.id,
|
||||
title: item.name || item.title || item.competitionName || '未命名赛事',
|
||||
location: item.location || item.address || item.venue || '待定',
|
||||
registerTime: this.formatTimeRange(regStartTime, regEndTime) ||
|
||||
item.registerTime || item.registrationPeriod || '待定',
|
||||
matchTime: this.formatTimeRange(startTime, endTime) ||
|
||||
item.matchTime || item.competitionTime || '待定',
|
||||
registerCount: item.registrationCount || item.registerCount || item.signUpCount || '0',
|
||||
status: this.getStatus(item.status)
|
||||
}
|
||||
})
|
||||
|
||||
console.log('格式化后的赛事列表:', this.eventList)
|
||||
} catch (err) {
|
||||
console.error('加载赛事列表失败:', err)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化时间范围
|
||||
* @param {String} startTime 开始时间
|
||||
* @param {String} endTime 结束时间
|
||||
* @returns {String}
|
||||
*/
|
||||
formatTimeRange(startTime, endTime) {
|
||||
if (!startTime || !endTime) return ''
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}.${month}.${day}`
|
||||
}
|
||||
|
||||
return `${formatDate(startTime)}-${formatDate(endTime)}`
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取赛事状态
|
||||
* @param {Number|String} status 状态码
|
||||
* @returns {String}
|
||||
*/
|
||||
getStatus(status) {
|
||||
// 根据后端状态码映射为前端需要的状态
|
||||
// 1: 报名中, 2: 进行中, 3: 已结束
|
||||
if (status === 3 || status === '3' || status === 'finished') {
|
||||
return 'finished'
|
||||
}
|
||||
return 'open'
|
||||
},
|
||||
|
||||
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: 10rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 24rpx;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
501
src/pages/login/login.vue
Normal file
501
src/pages/login/login.vue
Normal file
@@ -0,0 +1,501 @@
|
||||
<template>
|
||||
<view class="login-page">
|
||||
<!-- 背景装饰 -->
|
||||
<view class="bg-decoration">
|
||||
<view class="circle circle-1"></view>
|
||||
<view class="circle circle-2"></view>
|
||||
<view class="circle circle-3"></view>
|
||||
</view>
|
||||
|
||||
<!-- 顶部Logo区域 -->
|
||||
<view class="login-header">
|
||||
<view class="logo-container">
|
||||
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="title">武术赛事管理系统</text>
|
||||
<text class="subtitle">MARTIAL ARTS COMPETITION</text>
|
||||
</view>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<view class="login-form">
|
||||
<view class="form-title">账号登录</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">📱</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.username"
|
||||
placeholder="请输入手机号或用户名"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">🔒</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.password"
|
||||
:password="!showPassword"
|
||||
placeholder="请输入密码"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
<view class="eye-icon" @click="showPassword = !showPassword">
|
||||
<text>{{ showPassword ? '👁️' : '👁️🗨️' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-options">
|
||||
<label class="checkbox-label" @click="rememberPassword = !rememberPassword">
|
||||
<view :class="['checkbox', rememberPassword ? 'checked' : '']">
|
||||
<text v-if="rememberPassword" class="check-icon">✓</text>
|
||||
</view>
|
||||
<text class="checkbox-text">记住密码</text>
|
||||
</label>
|
||||
<text class="forgot-password" @click="handleForgotPassword">忘记密码？</text>
|
||||
</view>
|
||||
|
||||
<button class="login-btn" @click="handleLogin" :loading="loading" :disabled="loading">
|
||||
<text class="btn-text">{{ loading ? '登录中...' : '立即登录' }}</text>
|
||||
</button>
|
||||
|
||||
<view class="register-link">
|
||||
还没有账号？<text class="link-text" @click="goToRegister">立即注册</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部装饰 -->
|
||||
<view class="footer-decoration">
|
||||
<view class="wave"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userAPI from '@/api/user.js'
|
||||
import { setToken, setRefreshToken, setUserInfo } from '@/utils/auth.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
showPassword: false,
|
||||
rememberPassword: false,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 读取记住的密码
|
||||
const savedUsername = uni.getStorageSync('saved_username')
|
||||
const savedPassword = uni.getStorageSync('saved_password')
|
||||
if (savedUsername && savedPassword) {
|
||||
this.form.username = savedUsername
|
||||
this.form.password = savedPassword
|
||||
this.rememberPassword = true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handleLogin() {
|
||||
// 表单验证
|
||||
if (!this.form.username) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号或用户名',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.form.password) {
|
||||
uni.showToast({
|
||||
title: '请输入密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
|
||||
try {
|
||||
// 调用登录接口
|
||||
const res = await userAPI.login(this.form)
|
||||
|
||||
// 保存Token
|
||||
setToken(res.access_token)
|
||||
setRefreshToken(res.refresh_token)
|
||||
|
||||
// 保存用户信息
|
||||
const userInfo = {
|
||||
userId: res.user_id,
|
||||
account: res.account,
|
||||
userName: res.user_name,
|
||||
avatar: res.avatar,
|
||||
tenantId: res.tenant_id
|
||||
}
|
||||
setUserInfo(userInfo)
|
||||
|
||||
// 记住密码
|
||||
if (this.rememberPassword) {
|
||||
uni.setStorageSync('saved_username', this.form.username)
|
||||
uni.setStorageSync('saved_password', this.form.password)
|
||||
} else {
|
||||
uni.removeStorageSync('saved_username')
|
||||
uni.removeStorageSync('saved_password')
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 跳转到首页
|
||||
setTimeout(() => {
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home'
|
||||
})
|
||||
}, 1500)
|
||||
} catch (error) {
|
||||
console.error('登录失败:', error)
|
||||
uni.showToast({
|
||||
title: error.message || '登录失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
handleForgotPassword() {
|
||||
uni.showToast({
|
||||
title: '请联系管理员重置密码',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
goToRegister() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/register/register'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #C93639 0%, #A82E31 50%, #8B1F22 100%);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景装饰圆圈 */
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
top: -100rpx;
|
||||
right: -50rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
bottom: 100rpx;
|
||||
left: -50rpx;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
top: 40%;
|
||||
right: 50rpx;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-30rpx) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 顶部Logo区域 */
|
||||
.login-header {
|
||||
text-align: center;
|
||||
padding: 120rpx 60rpx 80rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
margin: 0 auto 40rpx;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(10rpx);
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 16rpx;
|
||||
letter-spacing: 4rpx;
|
||||
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
letter-spacing: 2rpx;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* 登录表单 */
|
||||
.login-form {
|
||||
background: #fff;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
padding: 60rpx 50rpx 80rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||||
min-height: calc(100vh - 480rpx);
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #F7F8FA;
|
||||
border-radius: 16rpx;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.input-wrapper:focus-within {
|
||||
background: #fff;
|
||||
border-color: #C93639;
|
||||
box-shadow: 0 4rpx 16rpx rgba(201, 54, 57, 0.1);
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
width: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 96rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.eye-icon {
|
||||
width: 80rpx;
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36rpx;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.eye-icon:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* 表单选项 */
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 40rpx 0 50rpx;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border: 2rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.checkbox.checked {
|
||||
background: #C93639;
|
||||
border-color: #C93639;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.checkbox-text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
font-size: 26rpx;
|
||||
color: #C93639;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.forgot-password:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background: linear-gradient(135deg, #C93639 0%, #A82E31 100%);
|
||||
border-radius: 16rpx;
|
||||
border: none;
|
||||
box-shadow: 0 8rpx 24rpx rgba(201, 54, 57, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.login-btn:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 16rpx rgba(201, 54, 57, 0.2);
|
||||
}
|
||||
|
||||
.login-btn:active::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
/* 注册链接 */
|
||||
.register-link {
|
||||
text-align: center;
|
||||
margin-top: 50rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
color: #C93639;
|
||||
font-weight: bold;
|
||||
margin-left: 8rpx;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.link-text:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 底部装饰 */
|
||||
.footer-decoration {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%);
|
||||
}
|
||||
</style>
|
||||
429
src/pages/my-registration/my-registration.vue
Normal file
429
src/pages/my-registration/my-registration.vue
Normal file
@@ -0,0 +1,429 @@
|
||||
<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';
|
||||
import registrationAPI from '@/api/registration.js'
|
||||
import competitionAPI from '@/api/competition.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomTabs
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: ['全部', '待开始', '进行中', '已结束'],
|
||||
currentTab: 0,
|
||||
eventList: [],
|
||||
// 分页参数
|
||||
pageParams: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
hasMore: true
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.loadRegistrationList()
|
||||
},
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.pageParams.current = 1
|
||||
this.loadRegistrationList(true)
|
||||
},
|
||||
// 上拉加载更多
|
||||
onReachBottom() {
|
||||
if (this.hasMore) {
|
||||
this.pageParams.current++
|
||||
this.loadRegistrationList(false, true)
|
||||
}
|
||||
},
|
||||
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: {
|
||||
/**
|
||||
* 加载我的报名列表
|
||||
* @param {Boolean} refresh 是否刷新（重置列表）
|
||||
* @param {Boolean} loadMore 是否加载更多（追加列表）
|
||||
*/
|
||||
async loadRegistrationList(refresh = false, loadMore = false) {
|
||||
try {
|
||||
const params = {
|
||||
current: this.pageParams.current,
|
||||
size: this.pageParams.size
|
||||
}
|
||||
|
||||
// 添加状态筛选
|
||||
if (this.currentTab > 0) {
|
||||
params.status = this.currentTab
|
||||
}
|
||||
|
||||
const res = await registrationAPI.getRegistrationList(params)
|
||||
|
||||
console.log('=== 我的报名列表 - 后端返回的原始数据 ===')
|
||||
console.log('完整响应:', res)
|
||||
|
||||
let list = []
|
||||
let total = 0
|
||||
|
||||
// 处理分页数据
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
total = res.total || 0
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
total = res.length
|
||||
}
|
||||
|
||||
// 为每条报名记录获取详情（包含关联数据）
|
||||
const detailPromises = list.map(item => this.getRegistrationDetailData(item))
|
||||
const mappedList = await Promise.all(detailPromises)
|
||||
|
||||
// 过滤掉获取失败的记录
|
||||
const validList = mappedList.filter(item => item !== null)
|
||||
|
||||
// 刷新或加载更多
|
||||
if (refresh || !loadMore) {
|
||||
this.eventList = validList
|
||||
} else {
|
||||
this.eventList = [...this.eventList, ...validList]
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
this.hasMore = this.eventList.length < total
|
||||
|
||||
// 停止下拉刷新
|
||||
if (refresh) {
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载报名列表失败:', err)
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取单条报名记录的详细信息
|
||||
* @param {Object} orderItem 订单基本信息
|
||||
* @returns {Promise<Object>} 包含完整信息的记录
|
||||
*/
|
||||
async getRegistrationDetailData(orderItem) {
|
||||
try {
|
||||
console.log('=== 获取报名详情 ===', orderItem.id)
|
||||
|
||||
// 获取报名详情
|
||||
const detail = await registrationAPI.getRegistrationDetail(orderItem.id)
|
||||
console.log('报名详情:', detail)
|
||||
|
||||
// 获取赛事详情
|
||||
let competitionInfo = null
|
||||
if (orderItem.competitionId || detail.competitionId) {
|
||||
const competitionId = orderItem.competitionId || detail.competitionId
|
||||
competitionInfo = await competitionAPI.getCompetitionDetail(competitionId)
|
||||
console.log('赛事详情:', competitionInfo)
|
||||
}
|
||||
|
||||
// 构建映射数据
|
||||
const mapped = {
|
||||
id: orderItem.id,
|
||||
status: this.getStatus(orderItem.status),
|
||||
title: competitionInfo?.name || detail.competitionName || '未知赛事',
|
||||
location: competitionInfo?.location || competitionInfo?.address || detail.location || '',
|
||||
matchTime: this.formatTimeRange(
|
||||
competitionInfo?.startTime || detail.startTime,
|
||||
competitionInfo?.endTime || detail.endTime
|
||||
) || '',
|
||||
projects: detail.projectNames || this.formatProjects(detail.projects || detail.projectList) || '',
|
||||
contact: orderItem.contactPhone || detail.contactPhone || '',
|
||||
participants: detail.athleteNames || this.formatParticipants(detail.athletes || detail.athleteList) || ''
|
||||
}
|
||||
|
||||
console.log('映射后的数据:', mapped)
|
||||
return mapped
|
||||
} catch (err) {
|
||||
console.error('获取报名详情失败:', err, orderItem.id)
|
||||
// 返回基本信息，避免整个记录丢失
|
||||
return {
|
||||
id: orderItem.id,
|
||||
status: this.getStatus(orderItem.status),
|
||||
title: '获取详情失败',
|
||||
location: '',
|
||||
matchTime: '',
|
||||
projects: '',
|
||||
contact: orderItem.contactPhone || '',
|
||||
participants: `${orderItem.totalParticipants || 0}人`
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化时间范围
|
||||
*/
|
||||
formatTimeRange(startTime, endTime) {
|
||||
if (!startTime || !endTime) return ''
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}.${month}.${day}`
|
||||
}
|
||||
|
||||
return `${formatDate(startTime)}-${formatDate(endTime)}`
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取报名状态
|
||||
*/
|
||||
getStatus(status) {
|
||||
// 1: 待开始, 2: 进行中, 3: 已结束
|
||||
const statusMap = {
|
||||
1: 'pending',
|
||||
2: 'ongoing',
|
||||
3: 'finished',
|
||||
'pending': 'pending',
|
||||
'ongoing': 'ongoing',
|
||||
'finished': 'finished'
|
||||
}
|
||||
return statusMap[status] || 'pending'
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化报名项目
|
||||
*/
|
||||
formatProjects(projects) {
|
||||
if (!projects) return ''
|
||||
if (Array.isArray(projects)) {
|
||||
return projects.map(p => p.name || p.projectName).join('、')
|
||||
}
|
||||
return projects
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化参赛选手
|
||||
*/
|
||||
formatParticipants(athletes) {
|
||||
if (!athletes) return ''
|
||||
if (Array.isArray(athletes)) {
|
||||
return athletes.map(a => a.name || a.athleteName).join('、')
|
||||
}
|
||||
return athletes
|
||||
},
|
||||
|
||||
handleTabChange(index) {
|
||||
this.currentTab = index;
|
||||
// 切换tab时重新加载
|
||||
this.pageParams.current = 1
|
||||
this.loadRegistrationList(true)
|
||||
},
|
||||
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>
|
||||
302
src/pages/profile/profile.vue
Normal file
302
src/pages/profile/profile.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<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">{{ userInfo.name || '用户' }}</view>
|
||||
<view class="user-id">ID: {{ userInfo.id }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 我的报名卡片 -->
|
||||
<view class="my-registration-card" @click="goToMyRegistration">
|
||||
<image class="card-icon-img" src="/static/images/我的报名@3x.png" mode="aspectFit"></image>
|
||||
<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>
|
||||
import userAPI from '@/api/user.js'
|
||||
import { getUserInfo as getStoredUserInfo, isLogin, clearAuth } from '@/utils/auth.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: {
|
||||
name: '',
|
||||
id: '',
|
||||
phone: '',
|
||||
username: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.checkLoginAndLoadInfo()
|
||||
},
|
||||
onShow() {
|
||||
// 每次显示时刷新用户信息
|
||||
this.checkLoginAndLoadInfo()
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 检查登录状态并加载用户信息
|
||||
*/
|
||||
checkLoginAndLoadInfo() {
|
||||
if (!isLogin()) {
|
||||
// 未登录，跳转到登录页
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 先从本地存储加载用户信息
|
||||
const storedInfo = getStoredUserInfo()
|
||||
if (storedInfo) {
|
||||
this.userInfo = {
|
||||
name: storedInfo.userName || storedInfo.account || '用户',
|
||||
id: storedInfo.userId || '',
|
||||
phone: storedInfo.phone || '',
|
||||
username: storedInfo.account || ''
|
||||
}
|
||||
}
|
||||
|
||||
// 然后从服务器刷新用户信息
|
||||
this.loadUserInfo()
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载用户信息
|
||||
*/
|
||||
async loadUserInfo() {
|
||||
try {
|
||||
const res = await userAPI.getUserInfo()
|
||||
|
||||
this.userInfo = {
|
||||
name: res.name || res.username || res.realName || '用户',
|
||||
id: res.id || res.userId || '',
|
||||
phone: res.phone || res.mobile || '',
|
||||
username: res.username || res.account || ''
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载用户信息失败:', err)
|
||||
// 如果是401错误，说明token过期，跳转到登录页
|
||||
if (err.statusCode === 401) {
|
||||
clearAuth()
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
goToMyRegistration() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my-registration/my-registration'
|
||||
});
|
||||
},
|
||||
goToCommonInfo() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/common-info/common-info'
|
||||
});
|
||||
},
|
||||
handleChangePassword() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/change-password/change-password'
|
||||
});
|
||||
},
|
||||
handleContactUs() {
|
||||
uni.showToast({
|
||||
title: '联系我们',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
async handleLogout() {
|
||||
const confirmRes = await new Promise((resolve) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => resolve(res)
|
||||
})
|
||||
})
|
||||
|
||||
if (confirmRes.confirm) {
|
||||
try {
|
||||
// 调用退出登录接口
|
||||
await userAPI.logout()
|
||||
} catch (err) {
|
||||
console.error('退出登录接口调用失败:', err)
|
||||
// 即使接口失败也继续清除本地数据
|
||||
}
|
||||
|
||||
// 清除本地认证信息
|
||||
clearAuth()
|
||||
|
||||
uni.showToast({
|
||||
title: '退出成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 延迟跳转到登录页
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}, 1500)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</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-icon-img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.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
src/pages/register-type/register-type.vue
Normal file
73
src/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>
|
||||
817
src/pages/register/register.vue
Normal file
817
src/pages/register/register.vue
Normal file
@@ -0,0 +1,817 @@
|
||||
<template>
|
||||
<view class="register-page">
|
||||
<!-- 背景装饰 -->
|
||||
<view class="bg-decoration">
|
||||
<view class="circle circle-1"></view>
|
||||
<view class="circle circle-2"></view>
|
||||
<view class="circle circle-3"></view>
|
||||
</view>
|
||||
|
||||
<!-- 顶部Logo区域 -->
|
||||
<view class="register-header">
|
||||
<view class="logo-container">
|
||||
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="title">用户注册</text>
|
||||
<text class="subtitle">CREATE YOUR ACCOUNT</text>
|
||||
</view>
|
||||
|
||||
<!-- 注册表单 -->
|
||||
<view class="register-form">
|
||||
<view class="form-title">创建账号</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">👤</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.account"
|
||||
placeholder="请输入账号（4-20位字母或数字）"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">📱</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.phone"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="code-input-wrapper">
|
||||
<view class="input-wrapper code-input">
|
||||
<view class="input-icon">🔢</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.code"
|
||||
type="number"
|
||||
maxlength="6"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="get-code-btn"
|
||||
:class="{ disabled: countdown > 0 }"
|
||||
@click="handleGetCode"
|
||||
>
|
||||
{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="test-tip">💡 测试提示：可使用万能验证码 888888</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">✏️</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.realName"
|
||||
placeholder="请输入真实姓名"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="gender-label">性别</view>
|
||||
<view class="gender-selector">
|
||||
<view
|
||||
class="gender-option"
|
||||
:class="{ active: form.sex === 1 }"
|
||||
@click="form.sex = 1"
|
||||
>
|
||||
<text class="gender-icon">👨</text>
|
||||
<text>男</text>
|
||||
</view>
|
||||
<view
|
||||
class="gender-option"
|
||||
:class="{ active: form.sex === 2 }"
|
||||
@click="form.sex = 2"
|
||||
>
|
||||
<text class="gender-icon">👩</text>
|
||||
<text>女</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">🔒</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.password"
|
||||
:password="!showPassword"
|
||||
placeholder="请输入密码（6-20位）"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
<view class="eye-icon" @click="showPassword = !showPassword">
|
||||
<text>{{ showPassword ? '👁️' : '👁️🗨️' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="input-wrapper">
|
||||
<view class="input-icon">🔐</view>
|
||||
<input
|
||||
class="form-input"
|
||||
v-model="form.confirmPassword"
|
||||
:password="!showConfirmPassword"
|
||||
placeholder="请再次输入密码"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
<view class="eye-icon" @click="showConfirmPassword = !showConfirmPassword">
|
||||
<text>{{ showConfirmPassword ? '👁️' : '👁️🗨️' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="agreement-wrapper">
|
||||
<label class="checkbox-label" @click="agreeTerms = !agreeTerms">
|
||||
<view :class="['checkbox', agreeTerms ? 'checked' : '']">
|
||||
<text v-if="agreeTerms" class="check-icon">✓</text>
|
||||
</view>
|
||||
<text class="agreement-text">
|
||||
我已阅读并同意
|
||||
<text class="link-text" @click.stop="showAgreement">《用户协议》</text>
|
||||
和
|
||||
<text class="link-text" @click.stop="showPrivacy">《隐私政策》</text>
|
||||
</text>
|
||||
</label>
|
||||
</view>
|
||||
|
||||
<button class="register-btn" @click="handleRegister" :loading="loading" :disabled="loading">
|
||||
<text class="btn-text">{{ loading ? '注册中...' : '立即注册' }}</text>
|
||||
</button>
|
||||
|
||||
<view class="login-link">
|
||||
已有账号？<text class="link-text" @click="goToLogin">立即登录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部装饰 -->
|
||||
<view class="footer-decoration">
|
||||
<view class="wave"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userAPI from '@/api/user.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
account: '',
|
||||
phone: '',
|
||||
code: '',
|
||||
realName: '',
|
||||
sex: 1,
|
||||
password: '',
|
||||
confirmPassword: ''
|
||||
},
|
||||
showPassword: false,
|
||||
showConfirmPassword: false,
|
||||
agreeTerms: false,
|
||||
loading: false,
|
||||
countdown: 0,
|
||||
timer: null
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取验证码
|
||||
*/
|
||||
async handleGetCode() {
|
||||
if (this.countdown > 0) return
|
||||
|
||||
// 验证手机号
|
||||
if (!this.form.phone) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await userAPI.getCaptcha(this.form.phone)
|
||||
|
||||
uni.showToast({
|
||||
title: '验证码已发送',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 开始倒计时
|
||||
this.countdown = 60
|
||||
this.timer = setInterval(() => {
|
||||
this.countdown--
|
||||
if (this.countdown <= 0) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
console.error('获取验证码失败:', error)
|
||||
uni.showToast({
|
||||
title: error.message || '获取验证码失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 表单验证
|
||||
*/
|
||||
validateForm() {
|
||||
if (!this.form.account) {
|
||||
uni.showToast({
|
||||
title: '请输入账号',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!/^[a-zA-Z0-9]{4,20}$/.test(this.form.account)) {
|
||||
uni.showToast({
|
||||
title: '账号为4-20位字母或数字',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.form.phone) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.form.code) {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
// 测试用万能验证码：888888
|
||||
// 如果不是万能验证码，则需要验证码长度为6位
|
||||
if (this.form.code !== '888888' && this.form.code.length !== 6) {
|
||||
uni.showToast({
|
||||
title: '请输入6位验证码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.form.realName) {
|
||||
uni.showToast({
|
||||
title: '请输入真实姓名',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!/^[\u4e00-\u9fa5]{2,10}$/.test(this.form.realName)) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的姓名（2-10个汉字）',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.form.password) {
|
||||
uni.showToast({
|
||||
title: '请输入密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.form.password.length < 6 || this.form.password.length > 20) {
|
||||
uni.showToast({
|
||||
title: '密码长度为6-20位',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.form.confirmPassword) {
|
||||
uni.showToast({
|
||||
title: '请确认密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.form.password !== this.form.confirmPassword) {
|
||||
uni.showToast({
|
||||
title: '两次密码输入不一致',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.agreeTerms) {
|
||||
uni.showToast({
|
||||
title: '请阅读并同意用户协议',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
/**
|
||||
* 注册
|
||||
*/
|
||||
async handleRegister() {
|
||||
if (!this.validateForm()) return
|
||||
|
||||
this.loading = true
|
||||
|
||||
try {
|
||||
await userAPI.register({
|
||||
account: this.form.account,
|
||||
phone: this.form.phone,
|
||||
code: this.form.code,
|
||||
realName: this.form.realName,
|
||||
sex: this.form.sex,
|
||||
password: this.form.password
|
||||
})
|
||||
|
||||
uni.showToast({
|
||||
title: '注册成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 延迟跳转到登录页
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
} catch (error) {
|
||||
console.error('注册失败:', error)
|
||||
uni.showToast({
|
||||
title: error.message || '注册失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到登录页
|
||||
*/
|
||||
goToLogin() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示用户协议
|
||||
*/
|
||||
showAgreement() {
|
||||
uni.showToast({
|
||||
title: '用户协议',
|
||||
icon: 'none'
|
||||
})
|
||||
// TODO: 跳转到用户协议页面
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示隐私政策
|
||||
*/
|
||||
showPrivacy() {
|
||||
uni.showToast({
|
||||
title: '隐私政策',
|
||||
icon: 'none'
|
||||
})
|
||||
// TODO: 跳转到隐私政策页面
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.register-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #C93639 0%, #A82E31 50%, #8B1F22 100%);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景装饰圆圈 */
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
top: -100rpx;
|
||||
right: -50rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
bottom: 100rpx;
|
||||
left: -50rpx;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
top: 30%;
|
||||
right: 50rpx;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-30rpx) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 顶部Logo区域 */
|
||||
.register-header {
|
||||
text-align: center;
|
||||
padding: 80rpx 60rpx 60rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin: 0 auto 30rpx;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(10rpx);
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
letter-spacing: 4rpx;
|
||||
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
letter-spacing: 2rpx;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* 注册表单 */
|
||||
.register-form {
|
||||
background: #fff;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
padding: 50rpx 40rpx 80rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||||
max-height: calc(100vh - 300rpx);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #F7F8FA;
|
||||
border-radius: 16rpx;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.input-wrapper:focus-within {
|
||||
background: #fff;
|
||||
border-color: #C93639;
|
||||
box-shadow: 0 4rpx 16rpx rgba(201, 54, 57, 0.1);
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
width: 70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.eye-icon {
|
||||
width: 70rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.eye-icon:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* 验证码输入 */
|
||||
.code-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.code-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.get-code-btn {
|
||||
height: 88rpx;
|
||||
padding: 0 24rpx;
|
||||
background: linear-gradient(135deg, #C93639 0%, #A82E31 100%);
|
||||
color: #fff;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
white-space: nowrap;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 4rpx 12rpx rgba(201, 54, 57, 0.2);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.get-code-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.get-code-btn.disabled {
|
||||
opacity: 0.6;
|
||||
background: #999;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.test-tip {
|
||||
margin-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
color: #ff9800;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 性别选择 */
|
||||
.gender-label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 12rpx;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.gender-selector {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.gender-option {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
background: #F7F8FA;
|
||||
border-radius: 16rpx;
|
||||
border: 2rpx solid transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.gender-option.active {
|
||||
background: linear-gradient(135deg, #C93639 0%, #A82E31 100%);
|
||||
color: #fff;
|
||||
border-color: #C93639;
|
||||
box-shadow: 0 4rpx 16rpx rgba(201, 54, 57, 0.2);
|
||||
}
|
||||
|
||||
.gender-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/* 用户协议 */
|
||||
.agreement-wrapper {
|
||||
margin: 30rpx 0 40rpx;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border: 2rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10rpx;
|
||||
margin-top: 2rpx;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.checkbox.checked {
|
||||
background: #C93639;
|
||||
border-color: #C93639;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
color: #C93639;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.link-text:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 注册按钮 */
|
||||
.register-btn {
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
background: linear-gradient(135deg, #C93639 0%, #A82E31 100%);
|
||||
border-radius: 16rpx;
|
||||
border: none;
|
||||
box-shadow: 0 8rpx 24rpx rgba(201, 54, 57, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.register-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.register-btn:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4rpx 16rpx rgba(201, 54, 57, 0.2);
|
||||
}
|
||||
|
||||
.register-btn:active::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
/* 登录链接 */
|
||||
.login-link {
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 底部装饰 */
|
||||
.footer-decoration {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%);
|
||||
}
|
||||
</style>
|
||||
448
src/pages/schedule/schedule-example.vue
Normal file
448
src/pages/schedule/schedule-example.vue
Normal file
@@ -0,0 +1,448 @@
|
||||
<template>
|
||||
<view class="schedule-page">
|
||||
<view class="header">
|
||||
<text class="title">赛程编排管理</text>
|
||||
</view>
|
||||
|
||||
<!-- 状态显示 -->
|
||||
<view class="status-card">
|
||||
<view class="status-item">
|
||||
<text class="label">编排状态：</text>
|
||||
<text :class="['status-text', getStatusClass()]">{{ getStatusText() }}</text>
|
||||
</view>
|
||||
<view class="status-item">
|
||||
<text class="label">分组数：</text>
|
||||
<text class="value">{{ scheduleData.totalGroups || 0 }}</text>
|
||||
</view>
|
||||
<view class="status-item">
|
||||
<text class="label">参赛人数：</text>
|
||||
<text class="value">{{ scheduleData.totalParticipants || 0 }}</text>
|
||||
</view>
|
||||
<view class="status-item" v-if="scheduleData.lastAutoScheduleTime">
|
||||
<text class="label">最后编排时间：</text>
|
||||
<text class="value">{{ scheduleData.lastAutoScheduleTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<!-- 触发自动编排 -->
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="handleAutoArrange"
|
||||
:disabled="loading || scheduleData.scheduleStatus === 2"
|
||||
>
|
||||
{{ loading ? '编排中...' : '自动编排' }}
|
||||
</button>
|
||||
|
||||
<!-- 刷新编排结果 -->
|
||||
<button
|
||||
class="btn btn-default"
|
||||
@click="loadScheduleResult"
|
||||
:disabled="loading"
|
||||
>
|
||||
刷新结果
|
||||
</button>
|
||||
|
||||
<!-- 保存并锁定 -->
|
||||
<button
|
||||
class="btn btn-success"
|
||||
@click="handleSaveAndLock"
|
||||
:disabled="loading || scheduleData.scheduleStatus === 2 || scheduleData.scheduleStatus === 0"
|
||||
>
|
||||
{{ scheduleData.scheduleStatus === 2 ? '已锁定' : '保存并锁定' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 编排结果列表 -->
|
||||
<view class="schedule-list" v-if="scheduleData.scheduleGroups && scheduleData.scheduleGroups.length > 0">
|
||||
<view class="list-title">编排结果</view>
|
||||
<view
|
||||
class="schedule-item"
|
||||
v-for="group in scheduleData.scheduleGroups"
|
||||
:key="group.groupId"
|
||||
>
|
||||
<view class="group-header">
|
||||
<text class="group-name">{{ group.groupName }}</text>
|
||||
<text class="participant-count">{{ group.participants.length }}人</text>
|
||||
</view>
|
||||
<view class="group-info">
|
||||
<text class="info-text">场地：{{ group.venueName }}</text>
|
||||
<text class="info-text">时间：{{ group.scheduleDate }} {{ group.scheduleTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-else>
|
||||
<text class="empty-text">暂无编排数据</text>
|
||||
<text class="empty-hint">点击"自动编排"开始编排</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scheduleAPI from '@/api/schedule.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
competitionId: null, // 赛事ID，从页面参数获取
|
||||
loading: false,
|
||||
scheduleData: {
|
||||
scheduleStatus: 0, // 0-未编排, 1-已编排, 2-已锁定
|
||||
totalGroups: 0,
|
||||
totalParticipants: 0,
|
||||
lastAutoScheduleTime: null,
|
||||
scheduleGroups: []
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 从页面参数获取赛事ID
|
||||
if (options.competitionId) {
|
||||
this.competitionId = parseInt(options.competitionId)
|
||||
this.loadScheduleResult()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '缺少赛事ID',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载赛程编排结果
|
||||
*/
|
||||
async loadScheduleResult() {
|
||||
if (!this.competitionId) return
|
||||
|
||||
this.loading = true
|
||||
try {
|
||||
const result = await scheduleAPI.getScheduleResult(this.competitionId)
|
||||
this.scheduleData = result
|
||||
console.log('编排结果:', result)
|
||||
} catch (error) {
|
||||
console.error('加载编排结果失败:', error)
|
||||
uni.showToast({
|
||||
title: error.message || '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 触发自动编排
|
||||
*/
|
||||
async handleAutoArrange() {
|
||||
if (!this.competitionId) return
|
||||
|
||||
// 确认提示
|
||||
const [err, res] = await uni.showModal({
|
||||
title: '确认编排',
|
||||
content: '确定要执行自动编排吗？',
|
||||
confirmText: '确定',
|
||||
cancelText: '取消'
|
||||
})
|
||||
|
||||
if (err || !res.confirm) return
|
||||
|
||||
this.loading = true
|
||||
uni.showLoading({
|
||||
title: '编排中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
try {
|
||||
await scheduleAPI.triggerAutoArrange(this.competitionId)
|
||||
|
||||
uni.showToast({
|
||||
title: '编排成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 延迟1秒后刷新结果
|
||||
setTimeout(() => {
|
||||
this.loadScheduleResult()
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
console.error('自动编排失败:', error)
|
||||
uni.showToast({
|
||||
title: error.message || '编排失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 保存并锁定编排
|
||||
*/
|
||||
async handleSaveAndLock() {
|
||||
if (!this.competitionId) return
|
||||
|
||||
// 确认提示
|
||||
const [err, res] = await uni.showModal({
|
||||
title: '确认锁定',
|
||||
content: '锁定后将无法再修改编排，确定要锁定吗？',
|
||||
confirmText: '确定锁定',
|
||||
cancelText: '取消'
|
||||
})
|
||||
|
||||
if (err || !res.confirm) return
|
||||
|
||||
this.loading = true
|
||||
uni.showLoading({
|
||||
title: '保存中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
try {
|
||||
await scheduleAPI.saveAndLockSchedule(this.competitionId)
|
||||
|
||||
uni.showToast({
|
||||
title: '锁定成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 刷新结果
|
||||
setTimeout(() => {
|
||||
this.loadScheduleResult()
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
console.error('保存锁定失败:', error)
|
||||
uni.showToast({
|
||||
title: error.message || '锁定失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取状态文本
|
||||
*/
|
||||
getStatusText() {
|
||||
const statusMap = {
|
||||
0: '未编排',
|
||||
1: '已编排',
|
||||
2: '已锁定'
|
||||
}
|
||||
return statusMap[this.scheduleData.scheduleStatus] || '未知'
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取状态样式类
|
||||
*/
|
||||
getStatusClass() {
|
||||
const classMap = {
|
||||
0: 'status-pending',
|
||||
1: 'status-draft',
|
||||
2: 'status-locked'
|
||||
}
|
||||
return classMap[this.scheduleData.scheduleStatus] || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.schedule-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
min-width: 180rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&.status-pending {
|
||||
color: #999;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
&.status-draft {
|
||||
color: #1890ff;
|
||||
background: #e6f7ff;
|
||||
}
|
||||
|
||||
&.status-locked {
|
||||
color: #52c41a;
|
||||
background: #f6ffed;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
|
||||
&.btn-primary {
|
||||
background: #1890ff;
|
||||
color: #fff;
|
||||
|
||||
&:disabled {
|
||||
background: #d9d9d9;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-default {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
|
||||
&:disabled {
|
||||
background: #f5f5f5;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-success {
|
||||
background: #52c41a;
|
||||
color: #fff;
|
||||
|
||||
&:disabled {
|
||||
background: #d9d9d9;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-list {
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.schedule-item {
|
||||
padding: 24rpx;
|
||||
background: #f9f9f9;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.group-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.participant-count {
|
||||
font-size: 24rpx;
|
||||
color: #1890ff;
|
||||
background: #e6f7ff;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.group-info {
|
||||
display: flex;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 26rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
176
src/pages/select-event/select-event.vue
Normal file
176
src/pages/select-event/select-event.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<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>
|
||||
import competitionAPI from '@/api/competition.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
eventId: '',
|
||||
type: '',
|
||||
projectList: []
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.eventId) {
|
||||
this.eventId = options.eventId;
|
||||
this.loadProjectList(options.eventId)
|
||||
}
|
||||
if (options.type) {
|
||||
this.type = options.type;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载报名项目列表
|
||||
*/
|
||||
async loadProjectList(eventId) {
|
||||
try {
|
||||
const res = await competitionAPI.getProjectList({ competitionId: eventId })
|
||||
|
||||
let list = []
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
}
|
||||
|
||||
// 数据映射
|
||||
this.projectList = list.map(item => ({
|
||||
id: item.id,
|
||||
name: item.name || item.projectName,
|
||||
price: item.price || item.registrationFee || 0,
|
||||
selected: false
|
||||
}))
|
||||
} catch (err) {
|
||||
console.error('加载项目列表失败:', err)
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
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=${encodeURIComponent(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