|
|
|
|
@ -13,7 +13,7 @@ |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="img-box"> |
|
|
|
|
<img src="../../assets/images/applyImg.png" alt=""> |
|
|
|
|
<img src="../../assets/images/applyImg.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -27,7 +27,7 @@ |
|
|
|
|
<div class="annual">{{ ndbs.annualid }}年度</div> |
|
|
|
|
<div class="title-box"> |
|
|
|
|
<div class="text">{{ ndbs.name }}</div> |
|
|
|
|
<img src="../../assets/images/编组.png" alt=""> |
|
|
|
|
<img src="../../assets/images/编组.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
@ -108,8 +108,15 @@ |
|
|
|
|
<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 |
|
|
|
|
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.annualCompid" type="text" disabled /> |
|
|
|
|
</el-form-item> |
|
|
|
|
@ -127,7 +134,10 @@ |
|
|
|
|
<el-tab-pane label="指导老师表" name="adviser" /> |
|
|
|
|
</el-tabs> |
|
|
|
|
<!-- 动画区域 --> |
|
|
|
|
<div class="animation-box" :class="{ translate: activeName === 'adviser' }"> |
|
|
|
|
<div |
|
|
|
|
class="animation-box" |
|
|
|
|
:class="{ translate: activeName === 'adviser' }" |
|
|
|
|
> |
|
|
|
|
<stu-list ref="stuRef" /> |
|
|
|
|
<tea-list ref="teaRef" /> |
|
|
|
|
</div> |
|
|
|
|
@ -135,27 +145,28 @@ |
|
|
|
|
</el-card> |
|
|
|
|
<div class="bottom"> |
|
|
|
|
<el-button class="btn" @click="$router.push('/')">取消报名</el-button> |
|
|
|
|
<el-button class="btn cyan" @click="submit" :loading="loading">确认报名</el-button> |
|
|
|
|
<el-button class="btn cyan" @click="submit" :loading="loading"> |
|
|
|
|
确认报名 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import { reactive, ref, toRefs } 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, getComppxqList } from '@/api/person'; |
|
|
|
|
const user = userStore(); |
|
|
|
|
const route = useRoute(); |
|
|
|
|
const router = useRouter(); |
|
|
|
|
import { reactive, ref, toRefs } 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, getComppxqList } from '@/api/person' |
|
|
|
|
const user = userStore() |
|
|
|
|
const route = useRoute() |
|
|
|
|
const router = useRouter() |
|
|
|
|
// 用户信息 |
|
|
|
|
const { userInfo: info } = toRefs(user); |
|
|
|
|
const { userInfo: info } = toRefs(user) |
|
|
|
|
|
|
|
|
|
// 解析性别 |
|
|
|
|
function pasSex(num: number) { |
|
|
|
|
@ -171,16 +182,15 @@ getNdbswxqList(route.query.bcId as string).then((res: any) => { |
|
|
|
|
if (res.result) ndbs.value = res.result |
|
|
|
|
}) |
|
|
|
|
getComppxqList(route.query.id as string).then((res: any) => { |
|
|
|
|
console.log(res.result, 'xm'); |
|
|
|
|
console.log(res.result, 'xm') |
|
|
|
|
if (res.result) ndbsXm.value = res.result |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// members:学生 adviser:老师 |
|
|
|
|
const activeName = ref('members'); |
|
|
|
|
const activeName = ref('members') |
|
|
|
|
|
|
|
|
|
// form表单 |
|
|
|
|
const ruleFormRef = ref<FormInstance>(); |
|
|
|
|
const ruleFormRef = ref<FormInstance>() |
|
|
|
|
|
|
|
|
|
const ruleForm = reactive<any>({ |
|
|
|
|
annualCompid: route.query.objName, |
|
|
|
|
@ -188,33 +198,38 @@ const ruleForm = reactive<any>({ |
|
|
|
|
id: route.query.id, |
|
|
|
|
teamName: '', // 队伍名称 |
|
|
|
|
instructorSheetList: [], // 老师 |
|
|
|
|
teamManagementList: [] // 学生 |
|
|
|
|
teamManagementList: [], // 学生 |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const rules = reactive<FormRules<typeof ruleForm>>({}); |
|
|
|
|
const rules = reactive<FormRules<typeof ruleForm>>({}) |
|
|
|
|
|
|
|
|
|
const stuRef = ref<any>(null); |
|
|
|
|
const teaRef = ref<any>(null); |
|
|
|
|
const loading = ref(false); |
|
|
|
|
const stuRef = ref<any>(null) |
|
|
|
|
const teaRef = ref<any>(null) |
|
|
|
|
const loading = ref(false) |
|
|
|
|
|
|
|
|
|
const submit = () => { |
|
|
|
|
ruleForm.instructorSheetList = [...teaRef.value.submit()] |
|
|
|
|
ruleForm.teamManagementList = [...stuRef.value.submit()] |
|
|
|
|
loading.value = true; |
|
|
|
|
getSignUpApi(ruleForm).then((res: any) => { |
|
|
|
|
loading.value = true |
|
|
|
|
getSignUpApi(ruleForm) |
|
|
|
|
.then((res: any) => { |
|
|
|
|
ElMessage({ |
|
|
|
|
message: res?.message || '报名成功', |
|
|
|
|
type: 'success' |
|
|
|
|
type: 'success', |
|
|
|
|
}) |
|
|
|
|
router.push('/') |
|
|
|
|
}).catch(err => { |
|
|
|
|
}) |
|
|
|
|
.catch((err) => { |
|
|
|
|
ElMessage({ |
|
|
|
|
message: err.message, |
|
|
|
|
type: 'error' |
|
|
|
|
type: 'error', |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}).finally(() => loading.value = false) |
|
|
|
|
.finally(() => (loading.value = false)) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@ -233,12 +248,10 @@ const submit = () => { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.el-tabs--top { |
|
|
|
|
flex-direction: column; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.fill { |
|
|
|
|
padding-top: 80px; |
|
|
|
|
} |
|
|
|
|
@ -246,7 +259,7 @@ const submit = () => { |
|
|
|
|
.banner { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 289; |
|
|
|
|
background: linear-gradient(90deg, #FFFFFF 0%, #F0F8FF 100%); |
|
|
|
|
background: linear-gradient(90deg, #ffffff 0%, #f0f8ff 100%); |
|
|
|
|
padding: 21px 0 37px 225px; |
|
|
|
|
|
|
|
|
|
.box { |
|
|
|
|
@ -262,7 +275,9 @@ const submit = () => { |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
height: 59px; |
|
|
|
|
font-family: Open Sans, Open Sans; |
|
|
|
|
font-family: |
|
|
|
|
Open Sans, |
|
|
|
|
Open Sans; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 42px; |
|
|
|
|
color: #333333; |
|
|
|
|
@ -271,7 +286,9 @@ const submit = () => { |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
margin-top: 20px; |
|
|
|
|
font-family: Open Sans, Open Sans; |
|
|
|
|
font-family: |
|
|
|
|
Open Sans, |
|
|
|
|
Open Sans; |
|
|
|
|
font-weight: 400; |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: #666666; |
|
|
|
|
@ -299,7 +316,7 @@ const submit = () => { |
|
|
|
|
width: 1397px; |
|
|
|
|
|
|
|
|
|
& > * { |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
background: #ffffff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.top { |
|
|
|
|
@ -317,7 +334,9 @@ const submit = () => { |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
height: 28px; |
|
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
|
|
|
|
font-family: |
|
|
|
|
Microsoft YaHei UI, |
|
|
|
|
Microsoft YaHei UI; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: rgba(0, 0, 0, 0.9); |
|
|
|
|
@ -338,7 +357,7 @@ const submit = () => { |
|
|
|
|
|
|
|
|
|
width: 340px; |
|
|
|
|
height: 182px; |
|
|
|
|
background: linear-gradient(90deg, #21ACA5 0%, #42D9AC99 100%); |
|
|
|
|
background: linear-gradient(90deg, #21aca5 0%, #42d9ac99 100%); |
|
|
|
|
border-radius: 8px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
@ -362,7 +381,7 @@ const submit = () => { |
|
|
|
|
font-family: Inter, Inter; |
|
|
|
|
font-weight: normal; |
|
|
|
|
font-size: 32px; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
color: #ffffff; |
|
|
|
|
line-height: 39px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -370,24 +389,33 @@ const submit = () => { |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
.info-box { |
|
|
|
|
width: 210px; |
|
|
|
|
.name { |
|
|
|
|
height: 20px; |
|
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
|
|
|
|
font-family: |
|
|
|
|
Microsoft YaHei UI, |
|
|
|
|
Microsoft YaHei UI; |
|
|
|
|
font-weight: 400; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #ACACAC; |
|
|
|
|
color: #acacac; |
|
|
|
|
line-height: 20px; |
|
|
|
|
margin-bottom: 8px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
height: 20px; |
|
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
|
|
|
|
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 { |
|
|
|
|
@ -400,10 +428,12 @@ const submit = () => { |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-wrap: nowrap; |
|
|
|
|
height: 20px; |
|
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
|
|
|
|
font-family: |
|
|
|
|
Microsoft YaHei UI, |
|
|
|
|
Microsoft YaHei UI; |
|
|
|
|
font-weight: 400; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #ACACAC; |
|
|
|
|
color: #acacac; |
|
|
|
|
line-height: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -411,7 +441,9 @@ const submit = () => { |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-wrap: nowrap; |
|
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
|
|
|
|
font-family: |
|
|
|
|
Microsoft YaHei UI, |
|
|
|
|
Microsoft YaHei UI; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #333333; |
|
|
|
|
@ -431,10 +463,12 @@ const submit = () => { |
|
|
|
|
padding: 0; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
|
|
|
|
font-family: |
|
|
|
|
Microsoft YaHei UI, |
|
|
|
|
Microsoft YaHei UI; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 40px; |
|
|
|
|
color: #76DAE5; |
|
|
|
|
color: #76dae5; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -462,7 +496,9 @@ const submit = () => { |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
height: 28px; |
|
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
|
|
|
|
font-family: |
|
|
|
|
Microsoft YaHei UI, |
|
|
|
|
Microsoft YaHei UI; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: rgba(0, 0, 0, 0.9); |
|
|
|
|
@ -488,7 +524,9 @@ const submit = () => { |
|
|
|
|
|
|
|
|
|
.label { |
|
|
|
|
height: 22px; |
|
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
|
|
|
|
font-family: |
|
|
|
|
Microsoft YaHei UI, |
|
|
|
|
Microsoft YaHei UI; |
|
|
|
|
font-weight: 400; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: rgba(0, 0, 0, 0.4); |
|
|
|
|
@ -497,7 +535,9 @@ const submit = () => { |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
height: 22px; |
|
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
|
|
|
|
font-family: |
|
|
|
|
Microsoft YaHei UI, |
|
|
|
|
Microsoft YaHei UI; |
|
|
|
|
font-weight: 400; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: rgba(0, 0, 0, 0.9); |
|
|
|
|
@ -511,7 +551,7 @@ const submit = () => { |
|
|
|
|
.head { |
|
|
|
|
padding: 32px; |
|
|
|
|
height: 96px; |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
background: #ffffff; |
|
|
|
|
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1); |
|
|
|
|
border-radius: 6px 6px 0px 0px; |
|
|
|
|
display: flex; |
|
|
|
|
@ -530,19 +570,20 @@ const submit = () => { |
|
|
|
|
.btn { |
|
|
|
|
height: 32px; |
|
|
|
|
width: 88px; |
|
|
|
|
background: #42D9AC; |
|
|
|
|
background: #42d9ac; |
|
|
|
|
border-radius: 3px 3px 3px 3px; |
|
|
|
|
border: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
|
|
|
|
font-family: |
|
|
|
|
Microsoft YaHei UI, |
|
|
|
|
Microsoft YaHei UI; |
|
|
|
|
font-weight: 400; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: rgba(0, 0, 0, 0.4); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.table-box { |
|
|
|
|
@ -565,20 +606,20 @@ const submit = () => { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
li.number.is-active { |
|
|
|
|
background-color: #42D9AC; |
|
|
|
|
background-color: #42d9ac; |
|
|
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
|
|
|
|
font-family: |
|
|
|
|
Microsoft YaHei UI, |
|
|
|
|
Microsoft YaHei UI; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
span.el-pagination__jump { |
|
|
|
|
background-color: #F3F3F3; |
|
|
|
|
background-color: #f3f3f3; |
|
|
|
|
padding: 2px 8px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -591,16 +632,18 @@ const submit = () => { |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.btn { |
|
|
|
|
--color1: #FFF4CE; |
|
|
|
|
--color2: #FF6B6B; |
|
|
|
|
--color1: #fff4ce; |
|
|
|
|
--color2: #ff6b6b; |
|
|
|
|
width: 387px; |
|
|
|
|
height: 69px; |
|
|
|
|
border-radius: 69px; |
|
|
|
|
border: none; |
|
|
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
|
|
|
|
font-family: |
|
|
|
|
Microsoft YaHei UI, |
|
|
|
|
Microsoft YaHei UI; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 24px; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
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; |
|
|
|
|
@ -610,12 +653,10 @@ const submit = () => { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.cyan { |
|
|
|
|
--color1: #00D0D0; |
|
|
|
|
--color2: #42D9AC; |
|
|
|
|
--color1: #00d0d0; |
|
|
|
|
--color2: #42d9ac; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
</style> |
JayChou
8 months ago