保存二维码
This commit is contained in:
weichengwu
parent
5bc08bd007
commit
167916057e
|
|
@ -93,20 +93,26 @@
|
|||
</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="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">
|
||||
<!-- 活动结束状态 -->
|
||||
|
|
@ -198,14 +204,32 @@
|
|||
|
||||
<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>();
|
||||
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({
|
||||
|
|
@ -272,14 +296,15 @@ const clearPhone = () => {
|
|||
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;
|
||||
}
|
||||
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 = '';
|
||||
}
|
||||
|
|
@ -348,33 +373,34 @@ const verifyCode = (flag: any) => {
|
|||
mobile: formData.value.phone,
|
||||
smsCode: smsCode,
|
||||
type: 3,
|
||||
}).then((res) => {
|
||||
localStorage.setItem('userAs', JSON.stringify({
|
||||
phone: formData.value.phone,
|
||||
smsCode: formData.value.smsCode,
|
||||
}));
|
||||
}).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: ""
|
||||
}
|
||||
// 验证成功如果有二维码，保存到表单
|
||||
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');
|
||||
|
|
@ -382,20 +408,21 @@ const verifyCode = (flag: any) => {
|
|||
flag && showDialog({
|
||||
message: error.msg || '验证码验证失败，请重试',
|
||||
});
|
||||
formData.value = {
|
||||
...formData.value,
|
||||
smsCode: "",
|
||||
marriageNo: "",
|
||||
husbandName: "",
|
||||
wifeName: "",
|
||||
registerDate: "",
|
||||
qrCode: ""
|
||||
}
|
||||
}).finally(() => {
|
||||
hideLoading();
|
||||
})
|
||||
}
|
||||
// 重置结婚证信息
|
||||
formData.value = {
|
||||
...formData.value,
|
||||
smsCode: "",
|
||||
marriageNo: "",
|
||||
husbandName: "",
|
||||
wifeName: "",
|
||||
registerDate: "",
|
||||
qrCode: ""
|
||||
}
|
||||
qrImageSrc.value = '';
|
||||
}).finally(() => {
|
||||
hideLoading();
|
||||
})
|
||||
}
|
||||
// 重置结婚证信息
|
||||
function resetMarriageInfo() {
|
||||
formData.value = {
|
||||
...formData.value,
|
||||
|
|
@ -465,11 +492,11 @@ const handleImageChange = () => {
|
|||
|
||||
|
||||
// 提交表单
|
||||
const submitForm = () => {
|
||||
if (!formData.value.phone || !formData.value.smsCode) {
|
||||
showDialog({
|
||||
message: '请完善所有信息',
|
||||
});
|
||||
const submitForm = () => {
|
||||
if (!formData.value.phone || !formData.value.smsCode) {
|
||||
showDialog({
|
||||
message: '请完善所有信息',
|
||||
});
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -479,21 +506,22 @@ const submitForm = () => {
|
|||
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) {
|
||||
}).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)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue