Skip to content

Commit 83b9cee

Browse files
dotnet9dotnet9
committed
Update NuoChe.razor
1 parent acc63c3 commit 83b9cee

File tree

1 file changed

+81
-14
lines changed

1 file changed

+81
-14
lines changed

‎src/CodeWF/Pages/Tool/Converter/NuoChe.razor

Lines changed: 81 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,30 @@
3030
<h1 class="generator-title">挪车码生成器</h1>
3131
<div class="input-group">
3232
<label for="phoneNumber">手机号码</label>
33-
<input type="tel" id="phoneNumber" placeholder="请输入手机号码" />
33+
<input type="tel" id="phoneNumber" placeholder="请输入手机号码" value="18600000000" />
34+
<div class="privacy-notice">
35+
<i class="fas fa-info-circle"></i> 您的手机号码将被用于生成挪车码，扫码者可以通过此号码联系您。
36+
</div>
3437
</div>
3538
<div class="input-group">
3639
<label for="title">标题</label>
37-
<input type="text" id="title" placeholder="请输入标题" value="请输入标题" />
40+
<input type="text" id="title" placeholder="请输入标题" value="扫码挪车" />
3841
</div>
3942
<div class="input-group">
4043
<div class="checkbox-container">
4144
<input type="checkbox" id="enableSubtitle" />
4245
<label for="enableSubtitle">添加副标题</label>
4346
</div>
44-
<input type="text" id="subtitle" placeholder="请输入副标题" disabled />
47+
<input type="text" id="subtitle" placeholder="请输入副标题" value="扫码联系车主或拨打电话: 18600000000" disabled />
48+
</div>
49+
50+
<div class="privacy-consent">
51+
<div class="checkbox-container">
52+
<input type="checkbox" id="privacyConsent" />
53+
<label for="privacyConsent">我已了解并同意：我的手机号码将被收集并用于生成挪车码，扫码者可以通过此号码联系我。</label>
54+
</div>
4555
</div>
56+
4657
<div class="button-group">
4758
<button class="primary-button" onclick="generateQrCode()">
4859
<i class="fas fa-qrcode"></i> 生成二维码
@@ -69,10 +80,10 @@
6980
<div class="card">
7081
<div class="card-header">
7182
<i class="fas fa-car"></i>
72-
<h1 class="title">临时停车，请挪车</h1>
83+
<h1 class="title">临时停靠，请多关照</h1>
7384
</div>
7485
<div class="card-body">
75-
<p class="description">您的爱车临时停放在这里，请您挪车。</p>
86+
<p class="description">如果我的车阻碍了您的车辆通行，点击下方按钮通知我，给您带来不便敬请谅解。</p>
7687
<a class="phone-button" href="tel:@_decodePhone">
7788
<i class="fas fa-phone-alt"></i> 联系车主
7889
</a>
@@ -322,19 +333,56 @@
322333
background-color: #f5f5f5;
323334
color: #999;
324335
}
336+
337+
/* 隐私提示样式 */
338+
.privacy-notice {
339+
font-size: 0.85rem;
340+
color: #666;
341+
margin-top: 5px;
342+
text-align: left;
343+
display: flex;
344+
align-items: center;
345+
}
346+
347+
.privacy-notice i {
348+
margin-right: 5px;
349+
color: #3385ff;
350+
}
351+
352+
.privacy-consent {
353+
margin: 15px 0;
354+
padding: 10px;
355+
background-color: #f8f9fa;
356+
border-radius: 8px;
357+
border-left: 3px solid #3385ff;
358+
}
359+
360+
.privacy-consent label {
361+
font-size: 0.9rem;
362+
color: #555;
363+
line-height: 1.4;
364+
}
365+
366+
.privacy-error {
367+
color: #dc3545;
368+
font-size: 0.9rem;
369+
margin-top: 5px;
370+
display: none;
371+
}
325372
</style>
326373

327374
<script>
328375
async function generateQrCode() {
329376
const title = document.getElementById('title').value;
330377
const phoneNumber = document.getElementById('phoneNumber').value;
331378
const enableSubtitle = document.getElementById('enableSubtitle').checked;
379+
const privacyConsent = document.getElementById('privacyConsent').checked;
332380
let subtitle = null;
333381
334382
if (enableSubtitle) {
335383
subtitle = document.getElementById('subtitle').value.trim();
336384
if (!subtitle) {
337-
subtitle = `扫码联系车主: ${phoneNumber || "16800000000"}`;
385+
subtitle = `扫码联系车主或拨打电话: ${phoneNumber || "18600000000"}`;
338386
document.getElementById('subtitle').value = subtitle;
339387
}
340388
}
@@ -344,6 +392,11 @@
344392
return;
345393
}
346394
395+
if (!privacyConsent) {
396+
alert('请确认您已了解并同意隐私声明');
397+
return;
398+
}
399+
347400
try {
348401
const response = await fetch('/api/Image/nuoche', {
349402
method: 'POST',
@@ -385,31 +438,45 @@
385438
}
386439
}
387440
388-
// 副标题选择
441+
// 添加小标题复选框的事件处理
389442
document.addEventListener('DOMContentLoaded', function() {
390443
const enableSubtitleCheckbox = document.getElementById('enableSubtitle');
391444
const subtitleInput = document.getElementById('subtitle');
392445
const phoneInput = document.getElementById('phoneNumber');
446+
const privacyConsentCheckbox = document.getElementById('privacyConsent');
447+
const privacyConsentSection = document.querySelector('.privacy-consent');
448+
449+
if (privacyConsentCheckbox && privacyConsentSection) {
450+
privacyConsentCheckbox.addEventListener('change', function() {
451+
if (this.checked) {
452+
privacyConsentSection.style.backgroundColor = '#e8f4ff';
453+
privacyConsentSection.style.borderLeftColor = '#007bff';
454+
} else {
455+
privacyConsentSection.style.backgroundColor = '#f8f9fa';
456+
privacyConsentSection.style.borderLeftColor = '#3385ff';
457+
}
458+
});
459+
}
393460
394461
if (enableSubtitleCheckbox && subtitleInput) {
395462
enableSubtitleCheckbox.addEventListener('change', function() {
396463
subtitleInput.disabled = !this.checked;
397464
if (this.checked) {
398465
if (!subtitleInput.value.trim()) {
399-
const phoneNumber = phoneInput.value.trim() || "16800000000";
400-
subtitleInput.value = `扫码联系车主: ${phoneNumber}`;
466+
const phoneNumber = phoneInput.value.trim() || "18600000000";
467+
subtitleInput.value = `扫码联系车主或拨打电话: ${phoneNumber}`;
401468
}
402469
subtitleInput.focus();
403470
}
404471
});
405472
406-
// 手机号码变化时，更新副标题
473+
// 当手机号码变化时，如果小标题已启用且使用的是默认格式，则更新小标题中的电话号码
407474
phoneInput.addEventListener('input', function() {
408-
if (enableSubtitleCheckbox.checked && subtitleInput.value.startsWith('扫码联系车主:')) {
409-
const phoneNumber = this.value.trim() || "16800000000";
410-
subtitleInput.value = `扫码联系车主: ${phoneNumber}`;
475+
if (enableSubtitleCheckbox.checked && subtitleInput.value.startsWith('扫码联系车主或拨打电话:')) {
476+
const phoneNumber = this.value.trim() || "18600000000";
477+
subtitleInput.value = `扫码联系车主或拨打电话: ${phoneNumber}`;
411478
}
412479
});
413480
}
414481
});
415-
</script>
482+
</script>

0 commit comments

Comments
 (0)