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>
      <!-- 项目信息 -->
      <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-acrd>
      <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-item label="选择题目" prop="topicid">
            <el-select v-model="ruleForm.topicid" placeholder="请选择题目" :disabled="isDisable">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-acrd>
    <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 cyan" :loading="subLoading" @click="submit"  v-if=!isDisable>
        {{  isEdit ? '确认修改' : '确认报名' }}
      </el-button>
    </div>
  </div>
</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 } 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: '', teamSeq: '', userId: '' }],
})

// 比赛信息、项目信息
const ndbs = ref<any>({})
const ndbsXm = ref<any>({})

const subLoading = ref(false)
async function submit() {
  console.log(ruleForm, 'ruleForm');
  
  if (!ruleForm.topicid) return ElMessage.warning('请选择题目')
  upData.value.teamManagementList[0].realname = info.value.realname
  upData.value.teamManagementList[0].userId = info.value.id
  upData.value.annualCompid = route.query.annualCompid
  upData.value.topicid = ruleForm.topicid
  // 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
  }
}
// form表单
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive<any>({
  annualCompid: '',
  entryFormat: '个人',
  id: route.query.id,
  topicid: '',
  objName:route.query.objName
})
const options = ref([])
if (route.query.edit) {
  const getOldRaceListEvent = async () => {
    const res: any = await getOldRaceList({ id: route.query.id })
    ndbs.value = res.result.annualComp
    ndbsXm.value = res.result.annualCompPoint
  }
  const getOldRaceInfoEvent = async () => {
    const res: any = await getOldRaceInfo({ id: route.query.id })
    console.log(res, 'res~~~')
    ruleForm.annualCompid = route.query.annualCompid
    ruleForm.teamName = res.result.teamName
    ruleForm.topicid = res.result.topicObj ? res.result.topicObj.id : ''
    ruleForm.objName = res.result.annualCompPointName

    options.value = res.result.topicList.map((item) => {
      return {
        value: item.id,
        label: item.name,
      }
    })
  }

  getOldRaceListEvent()
  getOldRaceInfoEvent()
} else {
  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 getTopicListApi = async () => {
  const res: any = await getTopicList({ annualCompid: route.query.id })
  console.log(res)

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