feat: 优化表单交互并添加环境变量配置

- 添加生产环境和开发环境配置文件
- 根据环境变量配置axios基础URL
- 优化手机号验证流程,增加清除功能
- 添加结婚证信息重置功能
- 显示二维码核销状态
- 修复验证码验证失败时的表单重置问题
This commit is contained in:
前端小啊白 2025-11-15 16:03:07 +08:00
parent b515b793b6
commit 9d15e29b1c
4 changed files with 63 additions and 9 deletions

3
.env.development Normal file
View File

@ -0,0 +1,3 @@
# 开发环境配置
NODE_ENV=development
VITE_API_BASE_URL=/api

3
.env.production Normal file
View File

@ -0,0 +1,3 @@
# 生产环境配置
NODE_ENV=production
VITE_API_BASE_URL=

View File

@ -30,12 +30,13 @@
<div v-if="![2, 3].includes(activityInfo.status)"> <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"> <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" <input :disabled="formData.verifyCode" v-model="formData.phone" type="tel" placeholder="请输入手机号码"
class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-11" /> 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]"> 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> </button>
</div> </div>
@ -53,7 +54,10 @@
<div v-if="formData.verifyCode && !formData.qrCode"> <div v-if="formData.verifyCode && !formData.qrCode">
<!-- 结婚证信息 --> <!-- 结婚证信息 -->
<div class="mb-6"> <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" <div v-if="!formData.marriageNo"
class="border border-gray-200 rounded-lg p-5 flex items-center justify-center"> class="border border-gray-200 rounded-lg p-5 flex items-center justify-center">
<div class="relative inline-block" @click="handleScanClick"> <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"> 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> <span class="text-[#E2E4E9] text-xs pt-1">结婚证</span>
</div> </div>
<input type="file" ref="ocrUploadId" class="hidden" accept="image/*" @change="handleImageChange" />
</div> </div>
</div> </div>
<div v-if="formData.marriageNo" <div v-if="formData.marriageNo"
@ -93,7 +96,11 @@
<div> <div>
<h3 class="text-base text-gray-800 mb-3 font-medium">请使用微信扫描下方二维码:</h3> <h3 class="text-base text-gray-800 mb-3 font-medium">请使用微信扫描下方二维码:</h3>
</div> </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" /> <qrcode-vue :value="formData.qrCode" :size="200" level="H" render-as="canvas" />
</div> </div>
</div> </div>
@ -120,6 +127,7 @@
</div> </div>
</div> </div>
<input type="file" ref="ocrUploadId" class="hidden" accept="image/*" @change="handleImageChange" />
</div> </div>
</template> </template>
@ -143,6 +151,7 @@ const formData = ref({
wifeName: '', // wifeName: '', //
registerDate: '', // registerDate: '', //
qrCode: '', // qrCode: '', //
status: 0, // 0- 1-
}) })
const activityInfo = ref<any>({}); // const activityInfo = ref<any>({}); //
@ -181,6 +190,24 @@ onMounted(() => {
const countdown = ref(0) const countdown = ref(0)
let countdownTimer: number | null = null 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 sendVerificationCode = () => {
const { phone } = formData.value const { phone } = formData.value
@ -251,10 +278,11 @@ const verifyCode = () => {
countdown.value = 0; countdown.value = 0;
// //
if (res.data.code) { if (res?.data?.code) {
formData.value = { formData.value = {
...formData.value, ...formData.value,
qrCode: res.data.code, qrCode: res.data.code,
status: res.data.status,
} }
} else { } else {
formData.value = { formData.value = {
@ -267,11 +295,14 @@ const verifyCode = () => {
} }
} }
}).catch((error) => { }).catch((error) => {
console.log(error, 66666666666666);
localStorage.removeItem('userAs'); localStorage.removeItem('userAs');
message.error('验证码验证失败,请重试'); message.error('验证码验证失败,请重试');
formData.value = { formData.value = {
...formData.value, ...formData.value,
smsCode: "",
marriageNo: "", marriageNo: "",
husbandName: "", husbandName: "",
wifeName: "", wifeName: "",
@ -282,6 +313,20 @@ const verifyCode = () => {
hideLoading(); hideLoading();
}) })
} }
//
function resetMarriageInfo() {
formData.value = {
...formData.value,
marriageNo: "",
husbandName: "",
wifeName: "",
registerDate: "",
qrCode: ""
}
ocrUploadId.value && (ocrUploadId.value.value = '');
ocrUploadId.value?.click();
}
// //
const handleScanClick = () => { const handleScanClick = () => {

View File

@ -1,8 +1,11 @@
import axios from 'axios' import axios from 'axios'
// 从环境变量获取API基础路径
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api';
// 创建axios实例 // 创建axios实例
const request = axios.create({ const request = axios.create({
baseURL: '/api', // 与Vite代理配置一致 baseURL: API_BASE_URL, // 根据环境变量配置
timeout: 10000, // 请求超时时间 timeout: 10000, // 请求超时时间
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',