feat: 优化表单交互并添加环境变量配置
- 添加生产环境和开发环境配置文件 - 根据环境变量配置axios基础URL - 优化手机号验证流程,增加清除功能 - 添加结婚证信息重置功能 - 显示二维码核销状态 - 修复验证码验证失败时的表单重置问题
This commit is contained in:
parent
b515b793b6
commit
9d15e29b1c
|
|
@ -0,0 +1,3 @@
|
|||
# 开发环境配置
|
||||
NODE_ENV=development
|
||||
VITE_API_BASE_URL=/api
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# 生产环境配置
|
||||
NODE_ENV=production
|
||||
VITE_API_BASE_URL=
|
||||
|
|
@ -30,12 +30,13 @@
|
|||
<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" />
|
||||
<input :disabled="formData.verifyCode" 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"
|
||||
<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 ? '重新获取' : '获取验证码' }}
|
||||
{{ countdown > 0 ? `${countdown}秒后重发` : formData.verifyCode ? '清除' : '获取验证码' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -53,7 +54,10 @@
|
|||
<div v-if="formData.verifyCode && !formData.qrCode">
|
||||
<!-- 结婚证信息 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-base text-gray-800 mb-3 font-medium">结婚证信息:</h3>
|
||||
<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-gray-200 rounded-lg p-5 flex items-center justify-center">
|
||||
<div class="relative inline-block" @click="handleScanClick">
|
||||
|
|
@ -62,7 +66,6 @@
|
|||
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"
|
||||
|
|
@ -93,7 +96,11 @@
|
|||
<div>
|
||||
<h3 class="text-base text-gray-800 mb-3 font-medium">请使用微信扫描下方二维码:</h3>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-center items-center">
|
||||
<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>
|
||||
|
|
@ -120,6 +127,7 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
<input type="file" ref="ocrUploadId" class="hidden" accept="image/*" @change="handleImageChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -143,6 +151,7 @@ const formData = ref({
|
|||
wifeName: '', // 女方姓名
|
||||
registerDate: '', // 登记日期
|
||||
qrCode: '', // 二维码
|
||||
status: 0, // 状态 0-未核销 1-已核销
|
||||
})
|
||||
|
||||
const activityInfo = ref<any>({}); // 活动信息
|
||||
|
|
@ -181,6 +190,24 @@ onMounted(() => {
|
|||
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');
|
||||
}
|
||||
|
||||
// 发送验证码
|
||||
const sendVerificationCode = () => {
|
||||
const { phone } = formData.value
|
||||
|
|
@ -251,10 +278,11 @@ const verifyCode = () => {
|
|||
countdown.value = 0;
|
||||
|
||||
// 验证成功如果有二维码,保存到表单
|
||||
if (res.data.code) {
|
||||
if (res?.data?.code) {
|
||||
formData.value = {
|
||||
...formData.value,
|
||||
qrCode: res.data.code,
|
||||
status: res.data.status,
|
||||
}
|
||||
} else {
|
||||
formData.value = {
|
||||
|
|
@ -267,11 +295,14 @@ const verifyCode = () => {
|
|||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error, 66666666666666);
|
||||
|
||||
localStorage.removeItem('userAs');
|
||||
|
||||
message.error('验证码验证失败,请重试');
|
||||
formData.value = {
|
||||
...formData.value,
|
||||
smsCode: "",
|
||||
marriageNo: "",
|
||||
husbandName: "",
|
||||
wifeName: "",
|
||||
|
|
@ -282,6 +313,20 @@ const verifyCode = () => {
|
|||
hideLoading();
|
||||
})
|
||||
}
|
||||
// 重置结婚证信息
|
||||
function resetMarriageInfo() {
|
||||
formData.value = {
|
||||
...formData.value,
|
||||
marriageNo: "",
|
||||
husbandName: "",
|
||||
wifeName: "",
|
||||
registerDate: "",
|
||||
qrCode: ""
|
||||
}
|
||||
ocrUploadId.value && (ocrUploadId.value.value = '');
|
||||
|
||||
ocrUploadId.value?.click();
|
||||
}
|
||||
|
||||
// 处理扫描点击事件
|
||||
const handleScanClick = () => {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import axios from 'axios'
|
||||
|
||||
// 从环境变量获取API基础路径
|
||||
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api';
|
||||
|
||||
// 创建axios实例
|
||||
const request = axios.create({
|
||||
baseURL: '/api', // 与Vite代理配置一致
|
||||
baseURL: API_BASE_URL, // 根据环境变量配置
|
||||
timeout: 10000, // 请求超时时间
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
|
|
|
|||
Loading…
Reference in New Issue