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.
704 lines
18 KiB
704 lines
18 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" style="width:10rem"> |
|
<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 style="width:10rem"> |
|
<div> |
|
<el-form ref="ruleFormRef" :model="ruleForm" status-icon 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> |
|
</div> |
|
</el-card> |
|
<el-card class="center" style="width:10rem"> |
|
<div class="personage-info"> |
|
<div class="head"> |
|
<div class="title">个人信息</div> |
|
<div class="icon"> |
|
<!-- <img src="../../assets/images/ellipsis.png" alt=""> --> |
|
</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 class="info-box"> |
|
<div class="label">队伍名称</div> |
|
<div class="text"> |
|
<el-input v-model="upData.teamName"></el-input> |
|
</div> |
|
</div> --> |
|
<!-- <div class="info-box"> |
|
<div class="label">院系</div> |
|
<div class="text">国际教育学院</div> |
|
</div> |
|
|
|
<div class="info-box"> |
|
<div class="label">专业</div> |
|
<div class="text">软件工程</div> |
|
</div> |
|
|
|
<div class="info-box"> |
|
<div class="label">指导老师</div> |
|
<div class="text">令狐冲</div> |
|
</div> |
|
|
|
<div class="info-box"> |
|
<div class="label">所属团队</div> |
|
<div class="text">王不留行的团队</div> |
|
</div> |
|
|
|
<div class="info-box remark"> |
|
<div class="label">其它备注</div> |
|
<div class="text">无</div> |
|
</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="subLoading" @click="submit('1')" v-if="!isDisable"> |
|
{{ isEdit ? '确认修改' : '确认报名' }} |
|
</el-button> |
|
|
|
</div> |
|
</div> |
|
<el-dialog v-model="dialogVisible" title="上传作品" width="500" :before-close="handleClose" v-if="dialogVisible" |
|
:close-on-click-modal="false"> |
|
<el-form label-width="80" style="padding-right: 30px"> |
|
<el-form-item label="作品名称"> |
|
<el-input v-model="raceName" /> |
|
</el-form-item> |
|
<el-form-item label="作品"> |
|
<el-upload ref="upload" class="upload-demo" action="#" v-model:file-list="fileList" :limit="1" |
|
:auto-upload="false"> |
|
<template #trigger> |
|
<el-button type="primary">选择文件</el-button> |
|
</template> |
|
|
|
<template #tip> |
|
<div class="el-upload__tip text-red">作品只允许上传一个,格式为{{ndbs.uploadWorksType}}</div> |
|
|
|
</template> |
|
</el-upload> |
|
</el-form-item> |
|
</el-form> |
|
<template #footer> |
|
<div class="dialog-footer"> |
|
<el-button @click="handleClose">取消</el-button> |
|
<el-button type="primary" @click="submitWork">确认</el-button> |
|
</div> |
|
</template> |
|
</el-dialog> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { ref, toRefs, reactive, nextTick } from 'vue' |
|
import { getSignUpApi } from '@/api/person' |
|
import { ElMessage } from 'element-plus' |
|
import { useRoute, useRouter } from 'vue-router' |
|
import userStore from '@/store/module/user' |
|
import { getNdbswxqList, getComppxqList } from '@/api/person' |
|
import { getOldRaceList, getOldRaceInfo } from '@/api/oldRace' |
|
import { getTopicList, uploadFileZp, uploadFile } from '@/api/race' |
|
|
|
const user = userStore() |
|
const route = useRoute() |
|
const router = useRouter() |
|
|
|
const { userInfo: info } = toRefs(user) |
|
const isDisable = ref(false) |
|
isDisable.value = route.query.info as any |
|
const isEdit = ref(false) |
|
isEdit.value = route.query.edit as any |
|
// 解析性别 |
|
function pasSex(num: number) { |
|
if (num == 1) return '男' |
|
else if (num == 2) return '女' |
|
else return '保密' |
|
} |
|
|
|
// 确认报名数据及逻辑 |
|
const upData = ref<Parameters<typeof getSignUpApi>[0]>({ |
|
annualCompid: route.query.objName as string, |
|
entryFormat: '个人', |
|
id: route.query.edit ? route.query.annualCompid : route.query.id, |
|
instructorSheetList: [], |
|
teamManagementList: [{ realname: '', captain: '1', teamSeq: '', userId: '' }], |
|
// WorkName:WorkName.value, |
|
// file:fileUrl.value |
|
}) |
|
|
|
//作品 |
|
const dialogVisible = ref(false) |
|
const fileList = ref<any>([]) |
|
const annualCompid = ref('') |
|
const raceName = ref<any>('') |
|
|
|
const uploadZp = (id: any) => { |
|
annualCompid.value = id |
|
dialogVisible.value = true |
|
} |
|
|
|
const handleClose = () => { |
|
dialogVisible.value = false |
|
fileList.value = [] |
|
raceName.value = '' |
|
annualCompid.value = '' |
|
} |
|
const WorkName = ref<string>('') |
|
// const fileUrl = ref<string>('') |
|
const fileUrl = ref<string[]>([]); |
|
const submitWork = async () => { |
|
if (!raceName.value) return ElMessage.warning('请输入作品名称') |
|
if (!fileList.value.length) return ElMessage.warning('请上传作品') |
|
const fromData = new FormData() |
|
fromData.append('annualCompid', annualCompid.value) |
|
fromData.append('file', fileList.value[0].raw) |
|
// fileUrl.value = fileList.value[0].raw.name |
|
fromData.append('workName', raceName.value) |
|
const res: any = await uploadFile(fromData) |
|
if (res && Array.isArray(res.message)) { |
|
fileUrl.value = res.message; |
|
} else { |
|
fileUrl.value = [res.message]; |
|
} |
|
WorkName.value = raceName.value; |
|
handleClose(); |
|
}; |
|
|
|
|
|
// fromData.append('annualCompid', annualCompid.value) |
|
// fromData.append('workName', raceName.value) |
|
// const res: any = await uploadFileZp(fromData).then((res: any) => { |
|
// console.log(res) |
|
// if (res.code == 500) return ElMessage.warning(res.message) |
|
// ElMessage.success(res.message) |
|
// }) |
|
// console.log(res) |
|
|
|
|
|
|
|
|
|
// 比赛信息 |
|
const ndbs = ref<any>({}) |
|
|
|
const subLoading = ref(false) |
|
async function submit(substa:string) { |
|
upData.value.teamManagementList[0].realname = info.value.realname |
|
upData.value.teamManagementList[0].userId = info.value.id |
|
upData.value.annualCompid = route.query.annualCompid |
|
upData.value.workName = WorkName.value |
|
upData.value.files = fileUrl.value |
|
upData.value.substa = substa |
|
try { |
|
const res: any = await getSignUpApi({ ...upData.value }) |
|
if(res.code == 500) return ElMessage.error(res.message) |
|
if(substa == '1'){ |
|
subLoading.value = true |
|
ElMessage({ |
|
message: isEdit.value ? '修改成功' : '报名成功', |
|
type: 'success', |
|
}) |
|
}else{ |
|
ElMessage({ |
|
message: '暂存成功', |
|
type: 'success', |
|
}) |
|
} |
|
|
|
router.push('/user-info') |
|
} catch (error) { |
|
ElMessage({ |
|
// @ts-ignore |
|
message: error?.message, |
|
type: 'error', |
|
}) |
|
} finally { |
|
subLoading.value = false |
|
} |
|
} |
|
// form表单 |
|
const ruleFormRef = ref<FormInstance>() |
|
|
|
const ruleForm = reactive<any>({ |
|
annualCompid: '', |
|
entryFormat: '个人', |
|
id: route.query.id, |
|
topicid: '', |
|
objName: route.query.objName, |
|
// requireUploadWorks: ndbsXm.requireUploadWorks, |
|
raceName: WorkName.value, |
|
fileUrl: fileUrl.value |
|
}) |
|
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.requireUploadWorks = res.result.requireUploadWorks |
|
ruleForm.objName = res.result.annualCompPointName |
|
} |
|
|
|
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 }) |
|
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()*/ |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.fill { |
|
padding-top: 80px; |
|
} |
|
|
|
.banner { |
|
width: 100%; |
|
height: 289; |
|
background: linear-gradient(90deg, #ffffff 0%, #f0f8ff 100%); |
|
// padding: 21px 0 37px 225px; |
|
padding: 0 20px; |
|
|
|
.box { |
|
|
|
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: 32px; |
|
color: #333333; |
|
line-height: 59px; |
|
} |
|
|
|
.text { |
|
width: 100%; |
|
margin-top: 20px; |
|
// font-family: |
|
// Open Sans, |
|
// Open Sans; |
|
font-weight: 400; |
|
font-size: 12px; |
|
color: #666666; |
|
line-height: 23px; |
|
} |
|
} |
|
|
|
.img-box { |
|
// flex: 1; |
|
|
|
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; |
|
|
|
|
|
.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; |
|
|
|
.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 { |
|
width: 340px; |
|
// height: 182px; |
|
// background: linear-gradient(90deg, #21aca5 0%, #42d9ac99 100%); |
|
border: 1px solid #d9d9d9; |
|
margin-top: 10px; |
|
border-radius: 8px; |
|
overflow: hidden; |
|
padding: 20px; |
|
.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; |
|
position: relative; |
|
|
|
.personage-info { |
|
margin: 10px; |
|
// 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; |
|
position: absolute; |
|
right: 30px; |
|
} |
|
} |
|
|
|
.info-box { |
|
&.remark { |
|
width: 377.333px; |
|
} |
|
|
|
width: 176px; |
|
height: 40px; |
|
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; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.bottom { |
|
width: 10rem; |
|
// margin: 46px 0; |
|
height: 70px; |
|
display: flex; |
|
// flex-direction: column; |
|
// gap: 106px; |
|
justify-content: center; |
|
align-items: center; |
|
padding: 20px; |
|
.btn { |
|
--color1: #fff4ce; |
|
--color2: #ff6b6b; |
|
width: 33%; |
|
height: 35px; |
|
border-radius: 69px; |
|
border: none; |
|
font-family: |
|
Microsoft YaHei UI, |
|
Microsoft YaHei UI; |
|
font-weight: bold; |
|
font-size: 14px; |
|
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; |
|
// margin-top: 20px; |
|
&:hover { |
|
transform: scale(1.1); |
|
} |
|
|
|
&.cyan { |
|
--color1: #00d0d0; |
|
--color2: #42d9ac; |
|
} |
|
|
|
&.temp { |
|
// --color1: #b9e63f; |
|
--color2: #FFA500; |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|