fucai-claim/src/pages/home/index.vue

<template>
  <div class="min-h-screen bg-[#FCEEF3] overflow-hidden">
    <!-- 顶部头图 -->
    <div class="w-full overflow-hidden relative">
      <img src="/头图.png" alt="活动宣传" class="w-full h-auto" />

      <!-- 顶部Logo和标题 -->
      <div class="absolute top-0 left-0 py-4 h-full w-full flex flex-col items-start justify-center px-4">
        <div class="flex items-start mb-4">
          <img src="/logo.png" alt="中国福利彩票" class="h-8 pl-2" />
        </div>
        <img src="/ziti.png" alt="宁福您彩 新婚送福" class="h-15" />
      </div>
    </div>



    <!-- 表单区域 -->
    <div class="p-4 -mt-10 z-10 relative">
      <div class="max-w-md mx-auto bg-white rounded-xl shadow-sm p-6">
        <!-- 标题 -->
        <div class="flex items-center justify-center text-xl text-[#E8424D] mb-6">
          <img src="/爱心点缀1.png" alt="" class="h-5">
          <span class="px-2">领取专属喜礼</span>
          <img src="/爱心点缀2.png" alt="" class="h-5">
        </div>

        <div>
          <!-- 手机号输入 -->
          <div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4">
            <input v-model="formData.phone" type="tel" placeholder="请输入手机号码" maxlength="11"
              class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-11" />

            <button @click="sendVerificationCode" :disabled="countdown > 0 || formData.phone.length !== 11"
              class="h-11 rounded-lg text-sm text-[#E8424D] transition-all disabled:text-[#8a8a8a]">
              {{ countdown > 0 ? `${countdown}秒后重发` : '获取验证码' }}
            </button>
          </div>

          <!-- 验证码输入 -->
          <div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4">
            <input v-model="formData.verificationCode" type="text" placeholder="请输入验证码" maxlength="6"
              class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-11" />
            <button @click="verifyCode" :disabled="formData.verificationCode.length !== 6"
              class="h-8 px-4 bg-[#E8424D] text-white rounded-lg text-sm transition-all hover:opacity-90 active:scale-98 disabled:bg-[#8a8a8a]">
              验证
            </button>
          </div>

          <!-- 结婚证信息 -->
          <div class="mb-6">
            <h3 class="text-base text-gray-800 mb-3 font-medium">结婚证信息:</h3>
            <div v-if="false" class="border border-gray-200 rounded-lg p-5 flex items-center justify-center">
              <div class="relative inline-block" @click="handleScanClick">
                <img src="/扫描.png" alt="" class="h-20">
                <div
                  class="h-16 w-26 absolute border border-[#f0f0f0] rounded-md top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex justify-center">
                  <span class="text-[#E2E4E9] text-xs pt-1">结婚证</span>
                </div>
                <input type="file" ref="ocrUploadId" class="hidden" accept="image/*" @change="handleImageChange" />
              </div>
            </div>
            <div class="w-full flex flex-col items-start border border-gray-200 rounded-lg p-5 bg-[#FAFAFA]">
              <div>
                <span class="inline-block w-25 text-right">结婚证字号：</span>
                <span class="pl-2">{{ 11111 }}</span>
              </div>
              <div class="mt-2">
                <span class="inline-block w-25 text-right">男方姓名：</span>
                <span class="pl-2">{{ 11111 }}</span>
              </div>
              <div class="mt-2">
                <span class="inline-block w-25 text-right">女方姓名：</span>
                <span class="pl-2">{{ 11111 }}</span>
              </div>
            </div>
          </div>

          <!-- 提交按钮 -->
          <button @click="submitForm"
            class="w-full h-12 bg-gradient-to-r from-[#E8424D] to-[#FF7A7A] text-white rounded-full text-lg font-bold transition-all hover:opacity-90 active:scale-98">
            提交领取喜礼
          </button>
        </div>

        <div>
          <!-- 活动结束状态 -->
          <div class="mt-6 p-4 border border-[#E8424D] bg-[#FFF5F5] rounded-lg text-center">
            <div class="text-[#E8424D] text-lg font-semibold mb-2">活动已结束</div>
            <div class="text-gray-600 text-sm">感谢您的参与，敬请期待下一次活动</div>
            <div class="mt-4 text-xs text-gray-500">活动时间：2024年1月1日 - 2024年6月30日</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import message from '../../components/message';
import apiService from '../../services/apiService'
import { ref, onMounted } from 'vue'

const ocrUploadId = ref<HTMLInputElement>();

// 表单数据
const formData = ref({
  phone: '',
  verificationCode: ''
})

onMounted(() => {
  // 检查活动是否已结束
  apiService.getCurrentActivity().then((response: any) => {
    console.log(response);

  })
})

// 倒计时
const countdown = ref(0)
let countdownTimer: number | null = null

// 发送验证码
const sendVerificationCode = () => {
  const { phone } = formData.value

  // 简单手机号验证
  if (!/^1[3-9]\d{9}$/.test(phone)) {
    message.error('请输入正确的手机号码')
    return
  }

  // 调用发送短信验证码接口
  apiService.sendSms({
    mobile: phone,
    type: 0,
  }).then(() => {
    // 开始倒计时
    countdown.value = 60

    if (countdownTimer) {
      clearInterval(countdownTimer)
    }

    countdownTimer = window.setInterval(() => {
      if (countdown.value > 0) {
        countdown.value--
      } else {
        if (countdownTimer) {
          clearInterval(countdownTimer)
        }
      }
    }, 1000)
  }).catch((error) => {
    console.error('发送验证码失败:', error)
    message.error('验证码发送失败，请稍后重试')
  })
}

// 验证验证码
const verifyCode = () => {
  const { verificationCode } = formData.value

  if (verificationCode.length !== 6 || !/^\d{6}$/.test(verificationCode)) {
    message.error('请输入6位数字验证码')
    return
  }

  // 调用验证短信验证码接口
  apiService.login({
    mobile: formData.value.phone,
    smsCode: verificationCode,
  }).then(() => {
    message.success('验证码验证成功')
  }).catch((error) => {
    console.error('验证验证码失败:', error)
    message.error('验证码验证失败，请重试')
  })
}

// 处理扫描点击事件
const handleScanClick = () => {
  ocrUploadId.value?.click()
}
const handleImageChange = () => {
  const file = ocrUploadId.value?.files?.[0]
  if (!file) {
    message.error('请选择图片文件')
    return
  }

  // 调用上传OCR图片接口
  const formFormData = new FormData()
  formFormData.append('file', file)

  apiService.uploadOcrImage(formFormData).then((response: any) => {
    apiService.sendSms({
      mobile: formData.value.phone,
      type: 2,  // 2 表示OCR识别 code 获取
    }).then((res) => {
      apiService.parseOcrInfo({
        mobile: formData.value.phone,
        smsCode: res.data,
        uploadId: response.data.uploadId,
      }).then((res) => {
        console.log(res);
      }).catch((error) => {
        console.error('解析OCR信息失败:', error)
        message.error('解析OCR信息失败，请稍后重试')
      })
    }).catch((error) => {
      console.error('发送验证码失败:', error)
      message.error('验证码发送失败，请稍后重试')
    })
  }).catch((error) => {
    console.error('上传OCR图片失败:', error)
    message.error('图片上传失败，请稍后重试')
  })
}



// 提交表单
const submitForm = () => {
  if (!formData.value.phone || !formData.value.verificationCode) {
    message.error('请完善所有信息')
    return
  }

  // 模拟提交
  console.log('提交表单数据:', formData.value)
  message.success('提交成功，正在处理您的请求...')
}

// 组件卸载时清理定时器
import { onUnmounted } from 'vue'
onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
})
</script>