Proj_SafePlat_Vue_Sgh5/src/view/login/Register.vue

<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-box">
        <div class="login-header">
          <img src="../../assets/logo.png" alt="logo" class="logo" />
          <h2>请填写您的信息</h2>
          <p class="subtitle">用于记录考试参与情况</p>
        </div>

        <van-form @submit="onSubmit" class="login-form">
          <van-cell-group inset>
            <van-field
              v-model="formData.userCode"
              name="userCode"
              placeholder="请输入您的工号"
              :rules="[{ required: true, message: '请输入工号' }]"
            >
              <template #left-icon>
                <van-icon name="idcard-o" />
              </template>
            </van-field>
            <van-field
              v-model="formData.userName"
              name="userName"
              placeholder="请输入您的姓名"
              :rules="[{ required: true, message: '请输入姓名' }]"
            >
              <template #left-icon>
                <van-icon name="contact" />
              </template>
            </van-field>
          </van-cell-group>
          <div class="submit-btn">
            <van-button
              round
              block
              type="primary"
              native-type="submit"
              :loading="isLoading"
            >
              确认进入
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'
import axios from '@/axios'
const router = useRouter()
const route = useRoute()
const isLoading = ref(false)

const formData = ref({
  userCode: '',
  userName: ''
})

async function onSubmit() {
  if (!formData.value.userCode.trim() || !formData.value.userName.trim()) {
    showToast('请完整填写工号和姓名')
    return
  }

  try {
    isLoading.value = true
    const userId=ref('C19810FBCBD111B2B2FA58EA818C71F9')

    var url = 'framework/SysLogin/queryPublicKeyToken'
    // var url = 'framework/SysLogin/queryPublicKey'
    var param = {
      param: userId.value
    }
    await axios.post(url, param).then(response => {

      localStorage.setItem('publicKey', response.data.data.publicKey)
      localStorage.setItem('userId', response.data.data.id)
      localStorage.setItem('userCode', formData.value.userCode.trim())
      localStorage.setItem('userName', response.data.data.userName)
      localStorage.setItem('userDesc', formData.value.userName.trim())
      localStorage.setItem('userType', response.data.data.userType)
      localStorage.setItem('token', response.data.data.token)
      localStorage.setItem('belongId', response.data.data.belongId)
    })
    showToast({
      type: 'success',
      message: '信息提交成功'
    })

    // 跳回原扫码页面（/fcbkdatistart），保留原始 query 参数
    // 注意：route.query 中应包含 examId, testRole 等参数（如果从该页跳转而来）
    // 如果不是从 fcbkdatistart 进来的，可默认跳首页或提示

    const targetPath = '/sgsafeh5/fcbkdatistart'
    const originalQuery = route.query // 如果是从 fcbkdatistart 跳过来的，query 会保留
    console.log("携带参数：",originalQuery);
    debugger
    // 更健壮的方式：检查是否有必要参数，否则跳首页
    if (originalQuery.examId) {

      await router.replace({ path: targetPath, query: originalQuery })
    } else {

    }
  } catch (error) {
    console.error('游客信息提交失败:', error)
    showToast('提交失败，请重试')
  } finally {
    isLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
/* 样式保持不变，仅微调标题 */
.login-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1890ff 0%, #1d39c4 100%);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: url('@/assets/login-bg.svg') repeat;
    opacity: 0.1;
    animation: move 10s linear infinite;
  }
}

.login-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 20px;
}

.login-box {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 30px 24px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

  .login-header {
    text-align: center;
    margin-bottom: 32px;

    .logo {
      width: 64px;
      height: 64px;
      margin-bottom: 16px;
    }

    h2 {
      font-size: 24px;
      color: #1a1a1a;
      margin: 0 0 8px;
      font-weight: 600;
    }

    .subtitle {
      font-size: 14px;
      color: #666;
      margin: 0;
    }
  }

  :deep(.van-cell-group) {
    background: transparent;

    .van-field {
      background: rgba(255, 255, 255, 0.8);
      border-radius: 8px;
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .van-field__left-icon {
        margin-right: 8px;
        color: #666;
      }
    }
  }

  .submit-btn {
    margin-top: 24px;

    .van-button {
      height: 44px;
      font-size: 16px;
      background: linear-gradient(135deg, #1890ff 0%, #1d39c4 100%);
      border: none;

      &--loading {
        opacity: 0.8;
      }
    }
  }
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

@media screen and (max-width: 480px) {
  .login-box {
    padding: 24px 16px;

    .login-header h2 {
      font-size: 20px;
    }
  }
}
</style>