You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
709 lines
17 KiB
709 lines
17 KiB
<template> |
|
<!-- 报名信息确认页面 团队 --> |
|
<div class="fill"></div> |
|
<div class="banner"> |
|
<div class="box"> |
|
<div class="title-box"> |
|
<div class="title">报名信息确认</div> |
|
<div class="text">请仔细核对报名信息，报名成功后无法修改。</div> |
|
</div> |
|
|
|
<div class="img-box"> |
|
<img src="../../assets/images/applyImg.png" alt="" /> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="registration-layout"> |
|
<div class="top"> |
|
<!-- 比赛信息 --> |
|
<el-card class="com"> |
|
<div class="title">年度比赛信息</div> |
|
<div class="content"> |
|
<div class="card-annual padding"> |
|
<div class="annual">{{ ndbs.annualid }}年度</div> |
|
<div class="title-box"> |
|
<div class="text">{{ ndbs.name }}</div> |
|
<img style="width: 35px;" src="../../assets/images/编组.png" alt="" /> |
|
</div> |
|
</div> |
|
<div class="right"> |
|
<div class="info-box"> |
|
<div class="name">比赛年度</div> |
|
<div class="title">{{ ndbs.annualid }}年度</div> |
|
<div class="name">年度比赛名称</div> |
|
<div class="title">{{ ndbs.name }}</div> |
|
<div class="date-box"> |
|
<div class="label">开始报名时间：</div> |
|
<div class="date">{{ ndbs.starttime }}</div> |
|
</div> |
|
<div class="date-box"> |
|
<div class="label">开始截至时间：</div> |
|
<div class="date">{{ ndbs.endtime }}</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</el-card> |
|
</div> |
|
<el-card class="center"> |
|
<div class="personage-info"> |
|
<div class="head"> |
|
<div class="title">个人信息</div> |
|
</div> |
|
<div class="info-box"> |
|
<div class="label">姓名</div> |
|
<div class="text">{{ info.realname }}</div> |
|
</div> |
|
|
|
<div class="info-box"> |
|
<div class="label">姓别</div> |
|
<div class="text">{{ pasSex(info.sex) }}</div> |
|
</div> |
|
|
|
<div class="info-box"> |
|
<div class="label">学号</div> |
|
<div class="text">{{ info.workNo }}</div> |
|
</div> |
|
|
|
<div class="info-box"> |
|
<div class="label">手机号</div> |
|
<div class="text">{{ info.phone }}</div> |
|
</div> |
|
|
|
<div class="info-box"> |
|
<div class="label">邮箱</div> |
|
<div class="text">{{ info.email }}</div> |
|
</div> |
|
</div> |
|
</el-card> |
|
<el-card class="list"> |
|
<div class="table-box"> |
|
<div> |
|
<el-form |
|
ref="ruleFormRef" |
|
style="max-width: 600px" |
|
:model="ruleForm" |
|
status-icon |
|
:rules="rules" |
|
label-width="auto" |
|
class="demo-ruleForm" |
|
> |
|
<el-form-item label="年度比赛"> |
|
<el-input v-model="ruleForm.objName" type="text" disabled /> |
|
</el-form-item> |
|
<el-form-item label="参赛形式"> |
|
<el-input v-model="ruleForm.entryFormat" type="text" disabled /> |
|
</el-form-item> |
|
<el-form-item label="队伍名称" prop="teamName"> |
|
<el-input v-model="ruleForm.teamName" maxlength="30" type="text" :disabled="isDisable"/> |
|
</el-form-item> |
|
<!-- <el-form-item label="选择题目" prop="topicid" v-show="false"> |
|
<el-select v-model="ruleForm.topicid" placeholder="请选择题目" :disabled="isDisable"> |
|
<el-option |
|
v-for="item in options" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
</el-form-item>--> |
|
</el-form> |
|
</div> |
|
|
|
<el-tabs v-model="activeName"> |
|
<el-tab-pane label="团队成员表" name="members" /> |
|
<el-tab-pane label="指导老师表" name="adviser" /> |
|
</el-tabs> |
|
<!-- 动画区域 --> |
|
<div |
|
class="animation-box" |
|
:class="{ translate: activeName === 'adviser' }" |
|
> |
|
<stu-list ref="stuRef" /> |
|
<tea-list ref="teaRef" /> |
|
</div> |
|
</div> |
|
</el-card> |
|
<div class="bottom"> |
|
<el-button class="btn" @click="$router.back()">{{ isDisable ? '返回' : isEdit ? '取消修改' : '返回' }}</el-button> |
|
<el-button class="btn temp" @click="submit('2')" v-if="!isDisable">暂存信息</el-button> |
|
<el-button class="btn cyan" :loading="loading" @click="submit('1')" v-if="!isDisable"> |
|
{{ isEdit ? '确认修改' : '确认报名' }} |
|
</el-button> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { reactive, ref, toRefs, nextTick } from 'vue' |
|
import { useRoute, useRouter } from 'vue-router' |
|
import userStore from '@/store/module/user' |
|
import type { FormInstance, FormRules } from 'element-plus' |
|
import { ElMessage } from 'element-plus' |
|
import { getSignUpApi } from '@/api/person' |
|
import stuList from './components/stuList.vue' |
|
import teaList from './components/teaList.vue' |
|
import { getNdbswxqList } from '@/api/person' |
|
import { getOldRaceList,getOldRaceInfo } from '@/api/oldRace' |
|
import { getTopicList } from '@/api/race' |
|
const user = userStore() |
|
const route = useRoute() |
|
const router = useRouter() |
|
const isDisable = ref(false) |
|
isDisable.value = route.query.info as any |
|
const isEdit = ref(false) |
|
isEdit.value = route.query.edit as any |
|
// 用户信息 |
|
const { userInfo: info } = toRefs(user) |
|
|
|
// 解析性别 |
|
function pasSex(num: number) { |
|
if (num == 1) return '男' |
|
else if (num == 2) return '女' |
|
else return '保密' |
|
} |
|
|
|
// 比赛信息 |
|
const ndbs = ref<any>({}) |
|
console.log(route.query.edit, 'route.query.edit') |
|
const options = ref([]) |
|
|
|
if (route.query.edit) { |
|
const getOldRaceListEvent = async () => { |
|
const res: any = await getOldRaceList({ id: route.query.id}) |
|
ndbs.value = res.result.annualComp |
|
} |
|
const getOldRaceInfoEvent = async () => { |
|
const res: any = await getOldRaceInfo({ id: route.query.id}) |
|
// ruleForm.annualCompid = route.query.annualCompid |
|
ruleForm.teamName = res.result.teamName |
|
ruleForm.topicid = res.result.topicObj ? res.result.topicObj.id : '' |
|
ruleForm.objName = res.result.annualCompPointName |
|
options.value = res.result.topicList.map((item) => { |
|
return { |
|
value: item.id, |
|
label: item.name, |
|
} |
|
}) |
|
} |
|
|
|
getOldRaceListEvent() |
|
getOldRaceInfoEvent() |
|
|
|
|
|
} else { |
|
getNdbswxqList(route.query.bcId as string).then((res: any) => { |
|
if (res.result) ndbs.value = res.result |
|
}) |
|
// const getTopicListApi = async () => { |
|
// const res: any = await getTopicList({ annualCompid: route.query.id }) |
|
// console.log(res) |
|
|
|
// nextTick(() => { |
|
// if (res.result.length != 0) { |
|
// ruleForm.topicid = res.result[0].id |
|
// } |
|
// }) |
|
// options.value = res.result.map((item) => { |
|
// return { |
|
// value: item.id, |
|
// label: item.name, |
|
// } |
|
// }) |
|
// } |
|
// getTopicListApi() |
|
} |
|
|
|
// members:学生 adviser:老师 |
|
const activeName = ref('members') |
|
|
|
// form表单 |
|
const ruleFormRef = ref<FormInstance>() |
|
|
|
const ruleForm = reactive<any>({ |
|
// annualCompid:'' , |
|
entryFormat: '团队', |
|
id: route.query.id, |
|
teamName: '', // 队伍名称 |
|
instructorSheetList: [], // 老师 |
|
teamManagementList: [], // 学生 |
|
objName:route.query.objName |
|
}) |
|
|
|
const rules = reactive<FormRules<typeof ruleForm>>({}) |
|
|
|
const stuRef = ref<any>(null) |
|
const teaRef = ref<any>(null) |
|
const loading = ref(false) |
|
|
|
const submit = (substa:string) => { |
|
if (!ruleForm.teamName) return ElMessage.warning('请输入队伍名称') |
|
ruleForm.instructorSheetList = [...teaRef.value.submit()] |
|
ruleForm.teamManagementList = [...stuRef.value.submit()] |
|
ruleForm.substa = substa |
|
ruleForm.id = route.query.id |
|
// ruleForm.annualCompid = route.query.id |
|
if(route.query.edit){ |
|
ruleForm.enrollCode = route.query.enrollCode |
|
ruleForm.id = route.query.annualCompid |
|
} |
|
// ruleForm.substa = "1" |
|
getSignUpApi(ruleForm) |
|
.then((res: any) => { |
|
if(substa == '1'){ |
|
loading.value = true |
|
ElMessage({ |
|
message: isEdit.value ? '修改成功' : '报名成功', |
|
type: 'success', |
|
}) |
|
}else{ |
|
ElMessage({ |
|
message: '暂存成功', |
|
type: 'success', |
|
}) |
|
} |
|
router.push('/user-info') |
|
}) |
|
.catch((err) => { |
|
ElMessage({ |
|
message: err.message, |
|
type: 'error', |
|
}) |
|
}) |
|
.finally(() => (loading.value = false)) |
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.animation-box { |
|
display: flex; |
|
transition: all 0.3s; |
|
gap: 20px; |
|
|
|
&.translate { |
|
translate: calc(-100% - 20px); |
|
} |
|
|
|
& > * { |
|
width: 100%; |
|
flex-shrink: 0; |
|
} |
|
} |
|
|
|
.el-tabs--top { |
|
flex-direction: column; |
|
} |
|
|
|
.fill { |
|
padding-top: 80px; |
|
} |
|
|
|
.banner { |
|
width: 100%; |
|
height: 289; |
|
background: linear-gradient(90deg, #ffffff 0%, #f0f8ff 100%); |
|
padding: 21px 0 37px 225px; |
|
|
|
.box { |
|
width: 1515px; |
|
height: 231px; |
|
display: flex; |
|
gap: 104px; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
.title-box { |
|
width: 1151px; |
|
|
|
.title { |
|
height: 59px; |
|
font-family: |
|
Open Sans, |
|
Open Sans; |
|
font-weight: bold; |
|
font-size: 42px; |
|
color: #333333; |
|
line-height: 59px; |
|
} |
|
|
|
.text { |
|
margin-top: 20px; |
|
font-family: |
|
Open Sans, |
|
Open Sans; |
|
font-weight: 400; |
|
font-size: 20px; |
|
color: #666666; |
|
line-height: 23px; |
|
} |
|
} |
|
|
|
.img-box { |
|
img { |
|
object-fit: cover; |
|
} |
|
} |
|
} |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
} |
|
} |
|
|
|
.registration-layout { |
|
margin-top: 20px; |
|
margin: 0 auto; |
|
width: 1397px; |
|
|
|
& > * { |
|
background: #ffffff; |
|
} |
|
|
|
.top { |
|
display: flex; |
|
justify-content: space-between; |
|
margin: 25px 0; |
|
height: 300px; |
|
|
|
.com { |
|
width: 100%; |
|
height: 300px; |
|
border-radius: 6px 6px 6px 6px; |
|
padding-top: 22px; |
|
padding-left: 32px; |
|
|
|
.title { |
|
height: 28px; |
|
font-family: |
|
Microsoft YaHei UI, |
|
Microsoft YaHei UI; |
|
font-weight: bold; |
|
font-size: 20px; |
|
color: rgba(0, 0, 0, 0.9); |
|
line-height: 28px; |
|
margin-bottom: 18px; |
|
} |
|
|
|
|
|
.content { |
|
display: flex; |
|
gap: 22px; |
|
|
|
.card-annual { |
|
&.padding { |
|
padding: 20px; |
|
} |
|
|
|
width: 340px; |
|
height: 182px; |
|
background: linear-gradient(90deg, #21aca5 0%, #42d9ac99 100%); |
|
border-radius: 8px; |
|
overflow: hidden; |
|
|
|
.annual { |
|
height: 19px; |
|
font-family: Inter, Inter; |
|
font-weight: bold; |
|
font-size: 16px; |
|
color: rgba(255, 255, 255, 0.8); |
|
line-height: 19px; |
|
} |
|
|
|
.title-box { |
|
margin-top: 13px; |
|
display: flex; |
|
align-items: center; |
|
gap: 28px; |
|
|
|
.text { |
|
width: 202px; |
|
font-family: Inter, Inter; |
|
font-weight: normal; |
|
font-size: 32px; |
|
color: #ffffff; |
|
line-height: 39px; |
|
display: -webkit-box; |
|
-webkit-box-orient: vertical; |
|
-webkit-line-clamp: 3; /* 限制显示的行数 */ |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
} |
|
} |
|
|
|
.right { |
|
.info-box { |
|
width: 100%; |
|
.name { |
|
height: 20px; |
|
font-family: |
|
Microsoft YaHei UI, |
|
Microsoft YaHei UI; |
|
font-weight: 400; |
|
font-size: 14px; |
|
color: #acacac; |
|
line-height: 20px; |
|
margin-bottom: 8px; |
|
} |
|
|
|
.title { |
|
height: 20px; |
|
font-family: |
|
Microsoft YaHei UI, |
|
Microsoft YaHei UI; |
|
font-weight: bold; |
|
font-size: 20px; |
|
color: #333333; |
|
line-height: 20px; |
|
margin-bottom: 12px; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 1; |
|
-webkit-box-orient: vertical; |
|
overflow: hidden; |
|
} |
|
|
|
.date-box { |
|
margin-bottom: 12px; |
|
display: flex; |
|
align-items: center; |
|
|
|
.label { |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
text-wrap: nowrap; |
|
height: 20px; |
|
font-family: |
|
Microsoft YaHei UI, |
|
Microsoft YaHei UI; |
|
font-weight: 400; |
|
font-size: 14px; |
|
color: #acacac; |
|
line-height: 20px; |
|
} |
|
|
|
.date { |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
text-wrap: nowrap; |
|
font-family: |
|
Microsoft YaHei UI, |
|
Microsoft YaHei UI; |
|
font-weight: bold; |
|
font-size: 18px; |
|
color: #333333; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.track { |
|
.card-annual { |
|
background: url(../../assets/images/item.png) no-repeat; |
|
background-size: cover; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
padding: 0; |
|
|
|
p { |
|
font-family: |
|
Microsoft YaHei UI, |
|
Microsoft YaHei UI; |
|
font-weight: bold; |
|
font-size: 40px; |
|
color: #76dae5; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.center { |
|
// height: 388px; |
|
border-radius: 6px 6px 6px 6px; |
|
margin-bottom: 25px; |
|
|
|
.personage-info { |
|
margin: 30px; |
|
// width: 780px; |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: space-between; |
|
row-gap: 32px; |
|
|
|
.head { |
|
width: 100%; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
.title { |
|
height: 28px; |
|
font-family: |
|
Microsoft YaHei UI, |
|
Microsoft YaHei UI; |
|
font-weight: bold; |
|
font-size: 20px; |
|
color: rgba(0, 0, 0, 0.9); |
|
line-height: 28px; |
|
} |
|
|
|
.icon { |
|
padding: 5px; |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.info-box { |
|
&.remark { |
|
width: 377.333px; |
|
} |
|
|
|
width: 176px; |
|
height: 60px; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
|
|
.label { |
|
height: 22px; |
|
font-family: |
|
Microsoft YaHei UI, |
|
Microsoft YaHei UI; |
|
font-weight: 400; |
|
font-size: 14px; |
|
color: rgba(0, 0, 0, 0.4); |
|
line-height: 22px; |
|
} |
|
|
|
.text { |
|
height: 22px; |
|
font-family: |
|
Microsoft YaHei UI, |
|
Microsoft YaHei UI; |
|
font-weight: 400; |
|
font-size: 14px; |
|
color: rgba(0, 0, 0, 0.9); |
|
line-height: 22px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.list { |
|
.head { |
|
padding: 32px; |
|
height: 96px; |
|
background: #ffffff; |
|
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1); |
|
border-radius: 6px 6px 0px 0px; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
& > * { |
|
height: 32px; |
|
} |
|
|
|
.left { |
|
display: flex; |
|
gap: 12px; |
|
align-items: center; |
|
|
|
.btn { |
|
height: 32px; |
|
width: 88px; |
|
background: #42d9ac; |
|
border-radius: 3px 3px 3px 3px; |
|
border: none; |
|
} |
|
|
|
.text { |
|
font-family: |
|
Microsoft YaHei UI, |
|
Microsoft YaHei UI; |
|
font-weight: 400; |
|
font-size: 14px; |
|
color: rgba(0, 0, 0, 0.4); |
|
} |
|
} |
|
} |
|
|
|
.table-box { |
|
.table { |
|
width: 100%; |
|
} |
|
|
|
.pagin-box { |
|
width: 100%; |
|
height: 64px; |
|
display: flex; |
|
align-items: center; |
|
|
|
.pagination { |
|
padding: 0 24px; |
|
|
|
:deep() { |
|
.el-pagination__total { |
|
margin-right: auto; |
|
} |
|
|
|
li.number.is-active { |
|
background-color: #42d9ac; |
|
color: rgba(255, 255, 255, 0.9); |
|
font-family: |
|
Microsoft YaHei UI, |
|
Microsoft YaHei UI; |
|
} |
|
|
|
span.el-pagination__jump { |
|
background-color: #f3f3f3; |
|
padding: 2px 8px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.bottom { |
|
margin: 46px 0; |
|
height: 70px; |
|
display: flex; |
|
gap: 106px; |
|
justify-content: center; |
|
align-items: center; |
|
|
|
.btn { |
|
--color1: #fff4ce; |
|
--color2: #ff6b6b; |
|
width: 387px; |
|
height: 69px; |
|
border-radius: 69px; |
|
border: none; |
|
font-family: |
|
Microsoft YaHei UI, |
|
Microsoft YaHei UI; |
|
font-weight: bold; |
|
font-size: 24px; |
|
color: #ffffff; |
|
background: linear-gradient(to right, var(--color1), var(--color2)); |
|
box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22); |
|
transition: all 0.2s; |
|
|
|
&:hover { |
|
transform: scale(1.1); |
|
} |
|
|
|
&.cyan { |
|
--color1: #00d0d0; |
|
--color2: #42d9ac; |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|