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

<template>
  <div class="h-full 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-14" />
      </div>
    </div>



    <!-- 表单区域 -->
    <div class="p-4 -mt-10 z-10 relative">
      <div class="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 v-if="![2, 3].includes(activityInfo.status)">
            <!-- 手机号输入 -->
            <div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4">
              <input :disabled="formData.verifyCode" v-model="formData.phone" type="tel" placeholder="请输入手机号码"
                maxlength="11" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-14 w-full" />

              <button @click="formData.verifyCode ? clearPhone() : 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}秒后重发` : formData.verifyCode ? '清除' : '获取验证码' }}
              </button>
            </div>

            <!-- 验证码输入 -->
            <div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4">
              <input :disabled="formData.verifyCode" v-model="formData.smsCode" type="text" placeholder="请输入验证码"
                maxlength="6" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-14 w-full" />
              <button v-if="!formData.verifyCode" @click="verifyCode" :disabled="formData.smsCode.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>

          <div v-if="formData.verifyCode && !formData.qrCode">
            <!-- 结婚证信息 -->
            <div class="mb-6">
              <div class="text-base text-gray-800 mb-3 font-medium flex items-center justify-between">
                <span>结婚证信息:</span>
                <div v-if="formData.marriageNo" class="text-xs" @click="resetMarriageInfo">重新扫描</div>
              </div>
                <div v-if="!formData.marriageNo"
                class="border border-dashed 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>
                </div>
              <div v-if="formData.marriageNo"
                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">{{ formData.marriageNo }}</span>
                </div>
                <div class="mt-2">
                  <span class="inline-block w-25 text-right">男方姓名：</span>
                  <span class="pl-2">{{ formData.husbandName }}</span>
                </div>
                <div class="mt-2">
                  <span class="inline-block w-25 text-right">女方姓名：</span>
                  <span class="pl-2">{{ formData.wifeName }}</span>
                </div>
              </div>
            </div>

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

          <div v-if="formData.qrCode">
            <div>
              <h3 class="text-base text-gray-800 mb-1 font-bold">您已成功领取喜礼</h3>
              <span class="text-sm text-gray-600">下面是您的专属核销二维码，请在领取站点出示给工作人员扫码核销。</span>
            </div>
            <div class="mt-4 flex justify-center items-center relative">
              <div v-if="formData.status == 1"
                class="h-[210px] w-[210px] bg-white/90 rounded-md flex justify-center items-center absolute">
                <span class="text-[#E8424D] text-lg font-bold">二维码已核销</span>
              </div>
              <qrcode-vue :value="formData.qrCode" :size="200" level="H" render-as="canvas" />
            </div>
          </div>
        </div>

        <div v-if="activityInfo.status === 2">
          <!-- 活动结束状态 -->
          <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">【{{ activityInfo.activityName }}】活动已结束，感谢您的参与，敬请期待下一次活动</div>
            <div class="mt-4 text-xs text-gray-500">活动时间：{{ activityInfo.activityStartTime }} - {{
              activityInfo.activityEndTime }}</div>
          </div>
        </div>

        <div v-else-if="activityInfo.status === 3">
          <!-- 活动失败状态 -->
          <div class="mt-6 p-4 border border-[#FF7A7A] bg-[#FFF5F5] rounded-lg text-center">
            <div class="text-[#FF7A7A] text-lg font-semibold mb-2">活动获取失败</div>
            <div class="text-gray-600 text-sm">活动获取失败，请稍后重试</div>
            <div class="mt-4 text-xs text-gray-500">活动时间：--</div>
          </div>
        </div>

      </div>
    </div>

    <!-- 使用说明 -->
    <div class="p-4" v-if="![2, 3].includes(activityInfo.status)">
      <div class="w-full relative">
        <div class="h-full">
          <h3 class="h-9 text-lg text-[#E8424D] font-bold flex items-center justify-center pt-4"
            style="background: url('/并集.png') no-repeat center center / cover; background-size: 100% 100%;">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            使用说明
          </h3>
          <div class="p-4 h-full bg-gradient-to-br from-[#FFFFFF]  to-[#FFF2F2] rounded-xl">
            <div
              class="h-full p-4 text-sm text-gray-600 leading-relaxed bg-gradient-to-br from-[#FFDEEB] to-[#FCC2D7] rounded-xl">
              <ol class="list-decimal list-inside pl-2 text-sm text-[#AB8291]">
                <li>参与活动人员：{{ activityInfo.activityStartTime }}至{{
                  activityInfo.activityEndTime }}，在宁夏全区民政婚姻登记机构（含涉外机构）办理结婚登记的新人；</li>
                <li>凭结婚证可至全区指定福利彩票销售点兑换即开型福利彩票，赠票总额{{ activityInfo.totalMoney > 10000 ? (activityInfo.totalMoney /
                  10000).toFixed(2) + '万' : activityInfo.totalMoney }}元，赠完即止；</li>
                <li>每对新人限使用一次线上二维码兑换券；</li>
                <li>本活动最终解释权归宁夏福利彩票发行中心所有。</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>

    <input type="file" ref="ocrUploadId" class="hidden" accept="image/*" @change="handleImageChange" />
  </div>
</template>

<script setup lang="ts">
import apiService from '../../services/apiService'
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
import QrcodeVue from 'qrcode.vue'
import { showLoading, hideLoading } from '../../components/loading'
import { showDialog } from 'vant';
import 'vant/es/dialog/style';

const ocrUploadId = ref<HTMLInputElement>();

// 表单数据
const formData = ref({
  phone: '',
  smsCode: '',
  verifyCode: false,   // 验证状态
  marriageNo: '',        // 结婚证号
  husbandName: '',       // 男方姓名
  wifeName: '',          // 女方姓名
  registerDate: '',       // 登记日期
  qrCode: '',             // 二维码
  status: 0,              // 状态 0-未核销 1-已核销
})

const activityInfo = ref<any>({});  // 活动信息
onMounted(() => {
  // 检查活动是否已结束
  showLoading();
  apiService.getCurrentActivity().then((response: any) => {
    if (response.data) {
      activityInfo.value = {
        ...response.data,
        activityStartTime: dayjs(response.data.activityStartTime).format('YYYY年MM月DD日'),
        activityEndTime: dayjs(response.data.activityEndTime).format('YYYY年MM月DD日'),
      };

      if (new Date(response.data.activityEndTime) < new Date()) {
        showDialog({
          message: '活动已结束',
        });
        activityInfo.value.status = 2;
      } else {
        const user = JSON.parse(localStorage.getItem('userAs') || '{}');
        if (user.phone && user.smsCode) {
          formData.value.phone = user.phone;
          formData.value.smsCode = user.smsCode;
          verifyCode(false);
        }
      }
    } else {
      activityInfo.value.status = 3;
    }
  }).catch((error) => {
    showDialog({
      message: error.msg || '获取活动信息失败，请稍后重试',
    });
    activityInfo.value.status = 3;
  }).finally(() => {
    hideLoading();
  })
})

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

const clearPhone = () => {
  formData.value.phone = '';
  formData.value.smsCode = '';
  formData.value.verifyCode = false;
  formData.value.marriageNo = '';
  formData.value.husbandName = '';
  formData.value.wifeName = '';
  formData.value.registerDate = '';
  formData.value.qrCode = '';
  formData.value.status = 0;
  countdown.value = 0;
  if (countdownTimer) {
    clearInterval(countdownTimer);
    countdownTimer = null;
  }
  localStorage.removeItem('userAs');
  if (ocrUploadId.value) ocrUploadId.value.value = '';
}

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

  // 简单手机号验证
  if (!/^1[3-9]\d{9}$/.test(phone)) {
    showDialog({
      message: '请输入正确的手机号码',
    });
    return
  }
  showLoading();
  // 调用发送短信验证码接口
  apiService.sendSms({
    mobile: phone,
    type: 3,
  }).then(() => {
    formData.value.verifyCode = false;
    formData.value.smsCode = '';
    formData.value.qrCode = '';

    // 开始倒计时
    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)
    showDialog({
      message: error.msg || '验证码发送失败，请稍后重试',
    });
  }).finally(() => {
    hideLoading();
  })
}

// 验证验证码
const verifyCode = (flag: any) => {
  const { smsCode } = formData.value

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

  showLoading();
  // 调用验证短信验证码接口
  apiService.verifySms({
    mobile: formData.value.phone,
    smsCode: smsCode,
    type: 3,
  }).then((res) => {
    localStorage.setItem('userAs', JSON.stringify({
      phone: formData.value.phone,
      smsCode: formData.value.smsCode,
    }));

    formData.value.verifyCode = true;

    // 验证成功后重置倒计时
    countdown.value = 0;

    // 验证成功如果有二维码，保存到表单
    if (res?.data?.code) {
      formData.value = {
        ...formData.value,
        qrCode: res.data.code,
        status: res.data.status,
      }
    } else {
      formData.value = {
        ...formData.value,
        marriageNo: "",
        husbandName: "",
        wifeName: "",
        registerDate: "",
        qrCode: ""
      }
    }
  }).catch((error) => {
    localStorage.removeItem('userAs');

    flag && showDialog({
      message: error.msg || '验证码验证失败，请重试',
    });
    formData.value = {
      ...formData.value,
      smsCode: "",
      marriageNo: "",
      husbandName: "",
      wifeName: "",
      registerDate: "",
      qrCode: ""
    }
  }).finally(() => {
    hideLoading();
  })
}
// 重置结婚证信息
function resetMarriageInfo() {
  formData.value = {
    ...formData.value,
    marriageNo: "",
    husbandName: "",
    wifeName: "",
    registerDate: "",
    qrCode: ""
  }
  ocrUploadId.value && (ocrUploadId.value.value = '');

  ocrUploadId.value?.click();
}

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

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

  showLoading();
  apiService.uploadOcrImage(formFormData).then((response: any) => {
    apiService.parseOcrInfo({
      mobile: formData.value.phone,
      smsCode: formData.value.smsCode,
      uploadId: response.data.uploadId,
    }).then((res: any) => {
      if (res?.data?.parsed?.marriageNo) {
        formData.value.marriageNo = res?.data?.parsed?.marriageNo;
        formData.value.husbandName = res?.data?.parsed?.husbandName;
        formData.value.wifeName = res?.data?.parsed?.wifeName;
        formData.value.registerDate = res?.data?.parsed?.registerDate;
      } else {
        showDialog({
          message: '解析OCR信息失败，请稍后重试',
        });
        ocrUploadId.value && (ocrUploadId.value.value = '');
      }
    }).catch((error) => {
      showDialog({
        message: error?.msg || '解析OCR信息失败，请稍后重试',
      });
      ocrUploadId.value && (ocrUploadId.value.value = '');
    }).finally(() => {
      hideLoading();
    })
  }).catch((error) => {
    showDialog({
      message: error?.msg || '图片上传失败，请稍后重试',
    });
    ocrUploadId.value && (ocrUploadId.value.value = '');
    hideLoading();
  })
}



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

  showLoading();
  apiService.receiveCheck({
    marriageNo: formData.value.marriageNo,
    receiveName: formData.value.husbandName,
    receiveMobile: formData.value.phone,
    smsCode: formData.value.smsCode,
  }).then((res: any) => {
    formData.value.qrCode = res.data.code;
  }).catch((error) => {
    showDialog({
      message: error?.msg || '提交失败，请稍后重试',
    });
  }).finally(() => {
    hideLoading();
  })
}

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