361 lines
13 KiB
Vue
361 lines
13 KiB
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 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 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}秒后重发` : 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-11" />
|
||
<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">
|
||
<h3 class="text-base text-gray-800 mb-3 font-medium">结婚证信息:</h3>
|
||
<div v-if="!formData.marriageNo"
|
||
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 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-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 disabled:from-[#8a8a8a] disabled:to-[#8a8a8a]">
|
||
提交领取喜礼
|
||
</button>
|
||
</div>
|
||
|
||
<div v-if="formData.qrCode">
|
||
<div>
|
||
<h3 class="text-base text-gray-800 mb-3 font-medium">请使用微信扫描下方二维码:</h3>
|
||
</div>
|
||
<div class="mt-4 flex justify-center items-center">
|
||
<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>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import message from '../../components/message';
|
||
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'
|
||
|
||
const ocrUploadId = ref<HTMLInputElement>();
|
||
|
||
// 表单数据
|
||
const formData = ref({
|
||
phone: '',
|
||
smsCode: '',
|
||
verifyCode: false, // 验证状态
|
||
marriageNo: '', // 结婚证号
|
||
husbandName: '', // 男方姓名
|
||
wifeName: '', // 女方姓名
|
||
registerDate: '', // 登记日期
|
||
qrCode: '', // 二维码
|
||
})
|
||
|
||
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()) {
|
||
message.error('活动已结束');
|
||
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();
|
||
}
|
||
}
|
||
}
|
||
}).catch((error) => {
|
||
message.error('获取活动信息失败，请稍后重试')
|
||
activityInfo.value.status = 3;
|
||
}).finally(() => {
|
||
hideLoading();
|
||
})
|
||
})
|
||
|
||
// 倒计时
|
||
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
|
||
}
|
||
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)
|
||
message.error('验证码发送失败，请稍后重试')
|
||
}).finally(() => {
|
||
hideLoading();
|
||
})
|
||
}
|
||
|
||
// 验证验证码
|
||
const verifyCode = () => {
|
||
const { smsCode } = formData.value
|
||
|
||
if (smsCode.length !== 6 || !/^\d{6}$/.test(smsCode)) {
|
||
message.error('请输入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,
|
||
}
|
||
} else {
|
||
formData.value = {
|
||
...formData.value,
|
||
marriageNo: "",
|
||
husbandName: "",
|
||
wifeName: "",
|
||
registerDate: "",
|
||
qrCode: ""
|
||
}
|
||
}
|
||
}).catch((error) => {
|
||
localStorage.removeItem('userAs');
|
||
|
||
message.error('验证码验证失败，请重试');
|
||
formData.value = {
|
||
...formData.value,
|
||
marriageNo: "",
|
||
husbandName: "",
|
||
wifeName: "",
|
||
registerDate: "",
|
||
qrCode: ""
|
||
}
|
||
}).finally(() => {
|
||
hideLoading();
|
||
})
|
||
}
|
||
|
||
// 处理扫描点击事件
|
||
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)
|
||
|
||
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 {
|
||
message.error('解析OCR信息失败，请稍后重试');
|
||
ocrUploadId.value && (ocrUploadId.value.value = '');
|
||
}
|
||
}).catch((error) => {
|
||
message.error('解析OCR信息失败，请稍后重试')
|
||
ocrUploadId.value && (ocrUploadId.value.value = '');
|
||
}).finally(() => {
|
||
hideLoading();
|
||
})
|
||
}).catch((error) => {
|
||
message.error('图片上传失败，请稍后重试')
|
||
ocrUploadId.value && (ocrUploadId.value.value = '');
|
||
hideLoading();
|
||
})
|
||
}
|
||
|
||
|
||
|
||
// 提交表单
|
||
const submitForm = () => {
|
||
if (!formData.value.phone || !formData.value.smsCode) {
|
||
message.error('请完善所有信息')
|
||
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) => {
|
||
message.error(error?.msg || '提交失败，请稍后重试')
|
||
}).finally(() => {
|
||
hideLoading();
|
||
})
|
||
}
|
||
|
||
// 组件卸载时清理定时器
|
||
import { onUnmounted } from 'vue'
|
||
onUnmounted(() => {
|
||
if (countdownTimer) {
|
||
clearInterval(countdownTimer)
|
||
}
|
||
})
|
||
</script> |