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 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>
      <!-- 项目信息 -->
      <el-card class="com">
        <div class="title">比赛项目信息</div>
        <div class="content track">
          <div class="card-annual padding">
            <p>{{ ndbsXm.objName }}</p>
          </div>
          <div class="right">
            <div class="info-box">
              <div class="name">项目名称</div>
              <div class="title">{{ ndbsXm.objName }}</div>
              <div class="name">要求人数</div>
              <div class="title">{{ ndbsXm.workCount }}</div>
              <div class="date-box">
                <div class="label">开始报名时间：</div>
                <div class="date">{{ ndbsXm.starttime?.split(' ')[0] }}</div>
              </div>
              <div class="date-box">
                <div class="label">开始截至时间：</div>
                <div class="date">{{ ndbsXm.endtime?.split(' ')[0] }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <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()">取消报名</el-button>
      <el-button class="btn cyan" :loading="subLoading" @click="submit">
        确认报名
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, toRefs } 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'

const user = userStore()
const route = useRoute()
const router = useRouter()

const { userInfo: info } = toRefs(user)

// 解析性别
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.id,
  instructorSheetList: [],
  teamManagementList: [{ realname: '', captain: '', teamSeq: '', userId: '' }],
  teamName: '',
})

// 比赛信息、项目信息
const ndbs = ref<any>({})
const ndbsXm = ref<any>({})
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')
  if (res.result) ndbsXm.value = res.result
})

const subLoading = ref(false)
async function submit() {
  upData.value.teamManagementList[0].realname = info.value.realname
  upData.value.teamManagementList[0].userId = info.value.id
  // if (!upData.value.teamName) {
  //   ElMessage({
  //     message: '队伍名称不能为空',
  //     type: 'warning',
  //   })
  //   return
  // }
  try {
    subLoading.value = true
    const res: any = await getSignUpApi(upData.value)

    ElMessage({
      message: res?.message || res?.result || '报名成功',
      type: 'success',
    })
    router.push('/user-info')
  } catch (error) {
    ElMessage({
      // @ts-ignore
      message: error?.message,
      type: 'error',
    })
  } finally {
    subLoading.value = false
  }
}
</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: 685px;
      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;
      }

      margin-right: 22px;

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

        .right {
          .info-box {
            width: 210px;
            .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;
      }
    }
  }
}
</style>