verificationtest

<style><!--

.verification_cantainer_flex {

display: flex;

max-width: 1610px;

margin: 60px auto;

gap: 40px;

}

.verification_cantainer_left {

width: 40%;

}

.verification_cantainer_right {

width: 60%;

}

.verification_cantainer_content {

width: 40%;

}

.verification_cantainer_content img {

width: 100%;

}

.verification_cantainer_number_1, .verification_cantainer_number_2 {

display: inline-block;

width: 20px;

height: 20px;

color: #fff;

background-color: #e90e12;

text-align: center;

line-height: 20px;

border-radius: 50%;

}

.verification_cantainer_top, .verification_cantainer_top img {

width: 100%;

}

.verification_language_select {

display: flex;

justify-content: flex-end;

align-items: center;

gap: 10px;

font-size: 15px;

.language_select {

width: 130px;

font-size: 13px;

.selected {

cursor: pointer;

display: flex;

justify-content: space-between;

align-items: center;

border: 1px solid #ddd;

padding: 5px;

border-radius: 7px;

.icon {

font-size: 9px;

color: #666;

pointer-events: none;

}

.item {

display: flex;

justify-content: flex-start;

align-items: center;

gap: 4px;

}

.item > img {

border: none !important;

}

.option {

display: none;

border: 1px solid #ddd;

padding: 5px;

border-radius: 7px;

position: absolute;

margin-top: 5px;

background-color: #f9f9f9;

.item {

padding: 2px 8px 2px 8px;

display: flex;

justify-content: flex-start;

align-items: center;

gap: 4px;

cursor: pointer;

border-radius: 7px;

}

.item > img {

border: none !important;

}

.item:hover {

background-color: rgba(233, 14, 18, 0.5);

color: white;

}

.verification_form {

background: #f9f9f9;

padding: 20px;

border-radius: 8px;

border: 1px solid #ddd;

margin-top: 20px;

}

.verification_form h3 {

margin-top: 0;

color: #333;

font-size: 18px;

}

.form_group {

margin-bottom: 15px;

}

.form_group label {

display: block;

margin-bottom: 5px;

font-weight: bold;

color: #555;

}

.form_group input {

width: 100%;

padding: 10px;

border: 1px solid #ccc;

border-radius: 4px;

font-size: 14px;

box-sizing: border-box;

}

.verify_button {

background-color: #e90e12;

color: white;

padding: 12px 24px;

border: none;

border-radius: 4px;

font-size: 16px;

cursor: pointer;

width: 100%;

transition: background-color 0.3s;

}

.verify_button:hover {

background-color: #c70d10;

}

.verify_button:disabled {

background-color: #ccc;

cursor: not-allowed;

}

.result_message {

margin-top: 15px;

padding: 10px;

border-radius: 4px;

display: none;

justify-content: center;

align-items: center;

flex-direction: column;

gap: 10px;

}

.result_message.success {

background-color: #d4edda;

color: #155724;

border: 1px solid #c3e6cb;

.result_icon {

.result_icon_fail {

display: none;

}

.result_icon_success {

border: none !important;

}

.result_icon_warning {

display: none;

}

.result_message.error {

background-color: #f8d7da;

color: #721c24;

border: 1px solid #f5c6cb;

.result_icon {

.result_icon_fail {

border: none !important;

}

.result_icon_success {

display: none;

}

.result_icon_warning {

display: none;

}

.result_message.warning {

background-color: #fff3cd;

color: #856404;

border: 1px solid #ffeeba;

.result_icon {

.result_icon_fail {

display: none;

}

.result_icon_success {

display: none;

}

.result_icon_warning {

border: none !important;

}

@media (max-width: 768px) {

.verification_cantainer_flex {

display: flex;

flex-direction: column;

box-sizing: border-box;

padding: 0 0%;

gap: 20px;

}

.verification_cantainer_left {

width: 100%;

padding: 0 10%;

}

.verification_cantainer_right {

width: 100%;

}

.verification_cantainer_right .verification_cantainer_number_1 {

margin-left: 10%;

}

.verification_cantainer_right .verification_cantainer_step {

width: 100%;

padding: 0 10%;

}

-->

</style>

</a></p>

<label for="lang" id="language-label">🌐 Language: </label>

</div>

</div>

</div>

<p class="verification_cantainer_step" id="step1-text">Locate the anti-counterfeiting sticker on the product

packaging.</p>

</div>

<p class="verification_cantainer_step" id="step2-text">Scratch off the anti-counterfeiting coating and enter the

product's anti-counterfeiting code in the designated box to verify authenticity.</p>

</div>

</div>

</div>

const languages = [

{ value: "en-US", label: "English", img: "https://cdn.shopify.com/s/files/1/0590/2571/9369/files/united-states.png?v=1756448126" },

{ value: "zh-CN", label: "简体中文", img: "https://cdn.shopify.com/s/files/1/0590/2571/9369/files/china.png?v=1756448126" },

];

// 国际化翻译数据

const translations = {

'en-US': {

'language-label': '🌐 Language: ',

'step1-text': 'Locate the anti-counterfeiting sticker on the product packaging.',

'step2-text': 'Scratch off the anti-counterfeiting coating and enter the product’s verification code in the designated box to check authenticity.',

'verify-btn': 'Verify',

'code-placeholder': 'Scratch coating, enter the code to verify',

'code-rule': 'Please enter the code to verify',

'code-loading': 'Querying, please wait...',

'req-failed': 'Verification failed. Error：',

'req-response-error': 'Verify failed: invalid response received.',

'req-response-query-empty': 'The anti-counterfeiting code you entered is not authorized. Please contact the official channel.',

'req-response-params-error': 'The anti-counterfeiting code you entered is not authorized. Please contact the official channel.',

'req-response-query-first': 'Authorized code. This is the first verification of this code.',

'req-response-query-multiple': 'Authorized code. This code has been verified ${number} times.',

'req-response-first-time': 'First verification time: ${time} (Eastern Time)'

'zh-CN': {

'language-label': '🌐 语言: ',

'step1-text': '在产品包装上找到防伪标签。',

'step2-text': '刮开防伪涂层，在指定框中输入产品防伪码以验证真伪。',

'verify-btn': '查询',

'code-placeholder': '刮开防伪涂层，输入产品防伪码进行验证',

'code-rule': '请输入产品防伪码进行验证',

'code-loading': '查询中，请稍候...',

'req-failed': '查询失败，错误信息：',

'req-response-error': '查询失败，响应结果异常。',

'req-response-query-empty': '您输入的防伪码未获授权，请联系官方渠道。',

'req-response-params-error': '您输入的防伪码未获授权，请联系官方渠道。',

'req-response-query-first': '已授权的防伪码，当前为该防伪码的首次查询。',

'req-response-query-multiple': '已授权的防伪码，该防伪码已查询次数：${number}',

'req-response-first-time': '首次查询时间：${time}（美国东部时间）'

}

};

// 获取当前语言设置

function getCurrentLanguage() {

const selected = localStorage.getItem('selectedLanguage')

const filterList = languages.filter(item => item.value === selected)

return filterList.length > 0 ? filterList[0].value : languages[0].value;

}

// 保存语言设置

function saveLanguage(language) {

localStorage.setItem('selectedLanguage', language);

}

// 更新页面内容

function updatePageContent(language) {

const translation = translations[language];

// 更新文本内容

Object.keys(translation).forEach(key => {

if (key === 'code-placeholder') {

const input = document.getElementById('verification-code');

if (input) {

input.placeholder = translation[key];

}

} else if (key === 'verify-btn') {

const button = document.getElementById('verify-btn');

if (button) {

button.textContent = translation[key];

}

} else {

const element = document.getElementById(key);

if (element) {

element.textContent = translation[key];

}

});

// 更新HTML的lang属性

document.documentElement.lang = language;

}

// 语言切换事件处理

function handleLanguageChange(event) {

const selectedLanguage = this.dataset.value

loadSelector(selectedLanguage)

saveLanguage(selectedLanguage);

updatePageContent(selectedLanguage);

clearMessage();

}

function toETString(timestamp) {

const date = new Date(timestamp);

return new Intl.DateTimeFormat('en-US', {

timeZone: 'America/New_York', // 东部时区

year: 'numeric',

month: '2-digit',

day: '2-digit',

hour: '2-digit',

minute: '2-digit',

second: '2-digit',

hour12: false

}).format(date);

}

function renderTemplate(template, data) {

return template.replace(/\$\{(\w+)\}/g, (match, key) => {

return key in data ? data[key] : match; // 有对应值就替换，否则保留原样

});

}

// 显示结果消息

function showMessage(messageKey, status = -1, extra = '', data = undefined) {

const messageDiv = document.getElementById('result-message');

const textDiv = document.getElementById('result-text');

const currentLang = getCurrentLanguage();

textDiv.textContent = renderTemplate((translations[currentLang]?.[messageKey] || messageKey), data) + extra;

messageDiv.className = 'result_message ' + (status === -1 ? 'error' : (status === 0 ? 'warning' : 'success'));

messageDiv.style.display = 'flex';

const textDiv2 = document.getElementById('result-text-2');

if (data) {

textDiv2.textContent = renderTemplate(translations[currentLang]['req-response-first-time'], data);

textDiv2.style.display = 'block';

} else {

textDiv2.style.display = 'none';

}

// 清除结果消息

function clearMessage() {

const messageDiv = document.getElementById('result-message');

messageDiv.style.display = 'none';

}

// 字典排序生成串

function sortParamsToString(params) {

// 获取对象的 key 并排序

const keys = Object.keys(params).sort();

// 按顺序拼接 key + value

return keys.map(key => `${key}${params[key]}`).join('');

}

// 验证防伪码

async function verifyCode() {

const codeInput = document.getElementById('verification-code');

const verifyBtn = document.getElementById('verify-btn');

const fwm = codeInput.value.trim();

if (!fwm) {

showMessage('code-rule');

return;

}

// 禁用按钮，防止重复提交

verifyBtn.disabled = true;

verifyBtn.textContent = translations[getCurrentLanguage()]['code-loading'];

try {

// 生成时间戳（毫秒级）

const timestamp = Date.now().toString();

const appid = "rx1278";

const appsecret = "bc3bd3761ce451b142a9b49f3cd43829";

const signParam = {

appid,

fwm,

timestamp

}

// 生成签名

const sign = CryptoJS.MD5(appsecret + (sortParamsToString(signParam) + appsecret).toLowerCase()).toString();

// 准备POST请求参数

const postData = {

appid,

fwm,

timestamp,

sign

};

// 发送POST请求

const response = await fetch('https://c.fw1860.com/fwm/query', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

body: JSON.stringify(postData)

});

if (!response || response.status !== 200) {

showMessage('req-response-error');

return;

}

const responseText = await response.text();

const result = JSON.parse(responseText);

// const result = {

// "status": true,

// "code": 0,

// "error_msg": null,

// "fwm_fwm": "0-4-A-1-9-3",

// "fwm_query_ret_cn": "LAIFE",

// "fwm_query_ret_en": "LAIFE",

// "fwm_first_query_tm_timestamp": 0,

// "fwm_last_query_tm_timestamp": 0,

// "fwm_query_times": 1

// }

if (!result.status) {

if (result.code === -1 || result.code === -2 || result.code === -3) {

showMessage('req-response-params-error');

} else if (result.code === -5) {

showMessage('req-response-query-empty');

} else {

showMessage('req-response-error');

}

return;

}

if (result.code === 0 && result.fwm_query_times === 1) {

showMessage('req-response-query-first', 1);

} else {

showMessage('req-response-query-multiple', 0, '', {number: result.fwm_query_times, time: toETString(result.fwm_first_query_tm_timestamp)});

}

} catch (error) {

showMessage('req-failed', -1, error.message);

} finally {

// 恢复按钮状态

verifyBtn.disabled = false;

const currentLang = getCurrentLanguage();

verifyBtn.textContent = translations[currentLang]['verify-btn'];

}

function onSelectorClick() {

const option = document.getElementById("language-select-option")

option.style.display = 'block'

}

function loadSelector(currentLanguage) {

// 初始化下拉选择

const option = document.getElementById('language-select-option');

while (option.firstChild) {

option.removeChild(option.firstChild);

}

let selectedHtml = null;

languages.forEach(item => {

const div = document.createElement("div");

if (item.value === currentLanguage) {

div.innerHTML = `<div class="item">

<div>${item.label}</div>

</div>`;

selectedHtml = `<div class="item">

<div>${item.label}</div>

</div>`;

} else {

div.innerHTML = `<div class="item">

<div>${item.label}</div>

</div>`;

}

div.addEventListener('click', handleLanguageChange)

div.dataset.value = item.value;

option.appendChild(div);

});

if (selectedHtml) {

const selected = document.getElementById('language-select-selected');

selected.innerHTML = selectedHtml

}

option.style.display = 'none'

}

// 页面加载时初始化

function initializeLanguage() {

const currentLanguage = getCurrentLanguage();

const languageSelect = document.getElementById('language-select');

const option = document.getElementById('language-select-option');

loadSelector(currentLanguage)

document.addEventListener('click', (e) => {

// 如果点击的不是下拉框自身或子元素

if (!languageSelect.contains(e.target)) {

option.style.display = 'none';

}

});

languageSelect.addEventListener('click', onSelectorClick)

// 设置select的值

languageSelect.value = currentLanguage;

// 更新页面内容

updatePageContent(currentLanguage);

}

// 从 URL 里读取 code 参数，并填充到输入框

function prefillCodeFromUrl() {

const searchParams = new URLSearchParams(window.location.search);

const code = searchParams.get("code") ?? searchParams.get("id");

if (code) {

const codeInput = document.getElementById("verification-code");

codeInput.value = code; // 回显到输入框

}

// 页面加载完成后初始化

document.addEventListener('DOMContentLoaded', function () {

initializeLanguage();

prefillCodeFromUrl()

// 添加验证按钮点击事件

document.getElementById('verify-btn').addEventListener('click', verifyCode);

// 添加回车键验证功能

document.getElementById('verification-code').addEventListener('keypress', function (e) {

if (e.key === 'Enter') {

verifyCode();

}

});

</script>