ContestPortal/src/views/registrationPersonage/index.vue

<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>
      <div>
        <el-form ref="ruleFormRef" style="max-width: 600px" :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">
      <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(substa == '1'){
      subLoading.value = true
      ElMessage({
        message: res?.message || res?.result || '报名成功',
        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;

  .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;
    position: relative;

    .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;
          position: absolute;
          right: 30px;
        }
      }

      .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;
        }
      }
    }
  }

  .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;
      }

      &.temp {
        // --color1: #b9e63f;
        --color2: #FFA500;
      }
    }
  }
}
</style>