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="relative overflow-hidden rounded-2xl border border-[#FFD7DF] bg-gradient-to-br from-[#FFF7F9] via-white to-[#FFE4EA] shadow-[0_12px_32px_rgba(232,66,77,0.08)] p-6 sm:p-7 backdrop-blur-sm">
        <div class="absolute -right-10 -top-16 h-40 w-40 rounded-full bg-[#FFE3EA] blur-3xl opacity-70"></div>
        <div class="absolute -left-14 -bottom-16 h-40 w-40 rounded-full bg-[#FFD6E2] blur-3xl opacity-60"></div>

        <div class="relative z-10">
          <!-- 标题 -->
          <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 bg-white/85 shadow-[0_6px_14px_rgba(232,66,77,0.06)]">
                <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 bg-white/85 shadow-[0_6px_14px_rgba(232,66,77,0.06)]">
                <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 bg-white/80">
                  <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-white/85 shadow-[0_6px_14px_rgba(232,66,77,0.06)]">
                  <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 flex-col items-center">
                <div class="flex justify-center items-center relative h-[210px] w-[210px]" ref="qrCodeWrapper">
                  <div v-if="formData.status == 1"
                    class="h-[210px] w-[210px] bg-white/90 rounded-md flex justify-center items-center absolute z-10">
                    <span class="text-[#E8424D] text-lg font-bold">二维码已核销</span>
                  </div>
                  <qrcode-vue class="absolute opacity-0 pointer-events-none" :value="formData.qrCode" :size="200"
                    level="H" render-as="canvas" />
                  <img v-if="qrImageSrc" :src="qrImageSrc" alt="核销二维码"
                    class="h-[210px] w-[210px] rounded-md shadow-[0_10px_24px_rgba(232,66,77,0.18)] bg-white object-contain" />
                </div>
                <div class="mt-3 text-xs text-gray-500">长按二维码保存至相册</div>
              </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>

    <!-- 使用说明 -->
    <div class="p-4 pt-0" v-if="![2, 3].includes(activityInfo.status)">
      <div
        class="relative overflow-hidden rounded-2xl border border-[#FFD7DF] bg-gradient-to-br from-[#FFF7F9] via-white to-[#FFE4EA] shadow-[0_12px_32px_rgba(232,66,77,0.08)]">
        <div class="absolute -right-10 -top-16 h-40 w-40 rounded-full bg-[#FFE3EA] blur-3xl opacity-70"></div>
        <div class="absolute -left-14 -bottom-16 h-40 w-40 rounded-full bg-[#FFD6E2] blur-3xl opacity-60"></div>

        <div class="relative px-5 pt-6 pb-3">
          <div
            class="inline-flex items-center gap-2 px-4 h-11 rounded-full bg-white/90 border border-[#F7B9C2] text-[#E8424D] font-semibold shadow-[0_10px_22px_rgba(232,66,77,0.12)]">
            <span
              class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-[#E8424D] via-[#F55F6E] to-[#FF9AAE] text-white shadow-md">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
            </span>
            <span class="text-base tracking-wide">使用说明</span>
          </div>
        </div>

        <div class="relative px-5 pb-5">
          <div class="bg-white/90 backdrop-blur-sm rounded-xl p-4 shadow-[0_10px_24px_rgba(232,66,77,0.08)]">
            <div class="space-y-4">
              <div class="flex items-start gap-3">
                <div class="h-9 w-9 shrink-0 rounded-full bg-gradient-to-br from-[#E8424D] to-[#FF7A7A] text-white flex items-center justify-center font-bold shadow-md">
                  1
                </div>
                <div class="text-sm text-[#7A5967] leading-6">
                  {{ activityInfo.activityStartTime || '-' }}至{{ activityInfo.activityEndTime || '-' }}，在宁夏全区民政婚姻登记机构（含涉外机构）办理结婚登记的新人可参与活动。
                </div>
              </div>
              <div class="flex items-start gap-3">
                <div class="h-9 w-9 shrink-0 rounded-full bg-gradient-to-br from-[#E8424D] to-[#FF7A7A] text-white flex items-center justify-center font-bold shadow-md">
                  2
                </div>
                <div class="text-sm text-[#7A5967] leading-6">
                  凭结婚证到全区指定福利彩票销售点兑换即开型福利彩票，赠票总额{{ activityInfo.totalMoney > 10000 ? (activityInfo.totalMoney / 10000).toFixed(0) + '万' : activityInfo.totalMoney }}元，赠完即止。
                </div>
              </div>
              <div class="flex items-start gap-3">
                <div class="h-9 w-9 shrink-0 rounded-full bg-gradient-to-br from-[#E8424D] to-[#FF7A7A] text-white flex items-center justify-center font-bold shadow-md">
                  3
                </div>
                <div class="text-sm text-[#7A5967] leading-6">
                  每对新人限使用一次线上二维码兑换券，请妥善保管二维码，核销后即失效。
                </div>
              </div>
              <div class="flex items-start gap-3">
                <div class="h-9 w-9 shrink-0 rounded-full bg-gradient-to-br from-[#E8424D] to-[#FF7A7A] text-white flex items-center justify-center font-bold shadow-md">
                  4
                </div>
                <div class="text-sm text-[#7A5967] leading-6">
                  本活动最终解释权归宁夏福利彩票发行中心所有，如有疑问请咨询现场工作人员。
                </div>
              </div>
            </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, nextTick } 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 qrCodeWrapper = ref<HTMLDivElement | null>(null);
const qrImageSrc = ref('');

const syncQrImage = () => {
  nextTick(() => {
    const canvas = qrCodeWrapper.value?.querySelector('canvas') as HTMLCanvasElement | null;
    if (!canvas) {
      qrImageSrc.value = '';
      return;
    }
    try {
      qrImageSrc.value = canvas.toDataURL('image/png');
    } catch (error) {
      console.error('生成二维码图片失败:', error);
      qrImageSrc.value = '';
    }
  });
};

// 表单数据
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,
        // TODO: 测试环境写死时间，正式环境放开
        // activityStartTime: dayjs(response.data.activityStartTime).format('YYYY年MM月DD日'),
        // activityEndTime: dayjs(response.data.activityEndTime).format('YYYY年MM月DD日'),
        activityStartTime: '2026年1月1日',
        activityEndTime: '12月31日',
      };

      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;
  qrImageSrc.value = '';
  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,
      }
      syncQrImage();
    } 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: ""
    }
    qrImageSrc.value = '';
  }).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;
    syncQrImage();
  }).catch((error) => {
    showDialog({
      message: error?.msg || '提交失败，请稍后重试',
    });
  }).finally(() => {
    hideLoading();
  })
}

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