ContestPortal/src/views/registrationGroup/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>
        <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.annualCompid" 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.number="ruleForm.teamName" />
            </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.push('/')">取消报名</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()
// 用户信息
const { userInfo: info } = toRefs(user)

// 解析性别
function pasSex(num: number) {
  if (num == 1) return '男'
  else if (num == 2) return '女'
  else return '保密'
}

// 比赛信息、项目信息
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
})

// members:学生 adviser:老师
const activeName = ref('members')

// form表单
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive<any>({
  annualCompid: route.query.objName,
  entryFormat: '团队',
  id: route.query.id,
  teamName: '', // 队伍名称
  instructorSheetList: [], // 老师
  teamManagementList: [], // 学生
})

const rules = reactive<FormRules<typeof ruleForm>>({})

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) => {
      ElMessage({
        message: res?.message || '报名成功',
        type: 'success',
      })
      router.push('/')
    })
    .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: 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;

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