[스마트디자인] [PC] 주문서에 통관 정보(개인통관고유부호 인증) 영역 추가(
) - HTML/CSS
▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가합니다.
[구)스마트디자인] 주문서작성
주문
/order/orderform.html
CHANGED
|
@@ -569,6 +569,88 @@
|
|
|
569
569
|
</div>
|
|
570
570
|
|
|
571
571
|
<!-- 추가 정보 -->
|
|
572
|
+
<div class="orderArea ecCustomsClearance {$customs_clearance_display|display}">
|
|
573
|
+
<div class="title">
|
|
574
|
+
<h3>报关信息</h3>
|
|
575
|
+
<p class="required"><img src="//img.echosting.cafe24.com/skin/base/common/ico_required.gif" alt="必须" /> 为必填项</p>
|
|
576
|
+
</div>
|
|
577
|
+
<div class="ec-base-table typeWrite">
|
|
578
|
+
<table border="1" summary="">
|
|
579
|
+
<caption>填写报关信息</caption>
|
|
580
|
+
<colgroup>
|
|
581
|
+
<col style="width:139px;" />
|
|
582
|
+
<col style="width:auto;" />
|
|
583
|
+
</colgroup>
|
|
584
|
+
<tbody>
|
|
585
|
+
<tr>
|
|
586
|
+
<th scope="row">
|
|
587
|
+
通关编号 <img src="//img.echosting.cafe24.com/skin/base/common/ico_required.gif" alt="必须" />
|
|
588
|
+
<div class="mTooltip">
|
|
589
|
+
<a href="#none" class="eTip"><img src="//img.echosting.cafe24.com/skin/base_zh_CN/common/ico_tooltip.gif" alt="帮助" /></a>
|
|
590
|
+
<div class="ec-base-tooltip">
|
|
591
|
+
<div class="content">
|
|
592
|
+
<strong>个人海关编码</strong>
|
|
593
|
+
<ul class="ec-base-help typeDash gBlank10">
|
|
594
|
+
<li>对于从海外配送至大韩民国的商品,根据《海关法》,必须向韩国海关提交收件人的个人海关编码及订单、配送信息。</li>
|
|
595
|
+
<li>个人海关编码是在办理进口通关申报时代替居民登录号码使用的个人识别号码,由以P开头的13位数字组成。</li>
|
|
596
|
+
<li>您可以在韩国海关官网申请获取个人海关编码。</li>
|
|
597
|
+
</ul>
|
|
598
|
+
</div>
|
|
599
|
+
<a href="#none" class="btnClose close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close_tip.gif" alt="关闭" /></a>
|
|
600
|
+
<span class="edge"></span>
|
|
601
|
+
</div>
|
|
602
|
+
</div>
|
|
603
|
+
</th>
|
|
604
|
+
<td>
|
|
605
|
+
<input type="text" name="personal_clearance_code" id="personal_clearance_code" class="inputTypeText" maxlength="13" placeholder="请输入个人海关编码。(以P开头的13位)" />
|
|
606
|
+
<button type="button" id="btnCustomsAuthRequest" class="btnNormal {$customs_auth_display|display}">请求认证</button>
|
|
607
|
+
<p class="customsMessage displaynone" id="customsCooldown"><span class="txtEm">已发送 · <span id="customsCooldownTime">3:00</span>后可重新发送</span></p>
|
|
608
|
+
<p class="customsMessage displaynone" id="customsResendReady">可重新发送(发送后已过3分钟)</p>
|
|
609
|
+
<p class="customsMessage displaynone" id="customsErrFormat"><span class="txtWarn">通关编号格式(P+12位数字)不正确。请重新输入。</span></p>
|
|
610
|
+
<p class="customsMessage displaynone" id="customsErrInvalid"><span class="txtWarn">通关编号无效。请在<a href="https://unipass.customs.go.kr/per/persIndex.do" target="_blank">韩国海关UNI-PASS</a>确认后重新输入。</span></p>
|
|
611
|
+
<p class="customsMessage displaynone" id="customsErrMismatch"><span class="txtWarn">与通关编号登记的收件人信息不符。请重新确认。 (<a href="https://unipass.customs.go.kr/per/persIndex.do" target="_blank">韩国海关UNI-PASS</a>)</span></p>
|
|
612
|
+
<p class="customsAgree">
|
|
613
|
+
<input type="checkbox" name="customsAgree" id="customsAgree" value="T" /><label for="customsAgree"> <span class="txtEm">[必须]</span> 我同意收集和使用个人信息。</label>
|
|
614
|
+
<a href="#none" id="btnCustomsConsentDetail"><img src="//img.echosting.cafe24.com/skin/base_zh_CN/common/ico_tooltip.gif" alt="查看详情" /></a>
|
|
615
|
+
</p>
|
|
616
|
+
</td>
|
|
617
|
+
</tr>
|
|
618
|
+
<tr id="customsEmailAuthRow" class="clearanceEmailAuth typeDisabled {$customs_auth_display|display}">
|
|
619
|
+
<th scope="row">邮箱认证</th>
|
|
620
|
+
<td>
|
|
621
|
+
<p class="customsGuide displaynone" id="customsEmailGuide"><strong>已向<span id="customsEmailMasked"></span>发送6位验证码。</strong> (收件人在海关编码中登记的邮箱)<br />邮件将在1-2分钟内送达。如未收到,请查看垃圾邮件文件夹。</p>
|
|
622
|
+
<input type="text" id="customs_auth_code" class="inputTypeText" maxlength="6" placeholder="6位验证码" disabled="disabled" />
|
|
623
|
+
<button type="button" id="btnCustomsAuthConfirm" class="btnNormal" disabled="disabled">验证</button>
|
|
624
|
+
<p class="customsMessage displaynone" id="customsErrCodeMismatch"><span class="txtWarn">验证码不正确。</span></p>
|
|
625
|
+
<p class="customsMessage displaynone" id="customsSuccessBadge"><span class="txtEm">认证已完成。</span></p>
|
|
626
|
+
<p class="customsMessage">※申请认证后超过<strong>30分钟</strong>再结账,需要重新认证。</p>
|
|
627
|
+
<p class="customsMessage displaynone" id="customsExemptGuide"><strong>个人海关编码尚未更新。</strong>此情况下,订单将在无需邮箱认证的情况下自动处理。<br />如需更新,请在<a href="https://unipass.customs.go.kr/per/persIndex.do" target="_blank">韩国海关UNI-PASS</a>更新个人海关编码。</p>
|
|
628
|
+
<p class="customsMessage displaynone" id="customsFailureGuide"><strong>韩国海关认证服务暂时中断。</strong><br /><strong>您可以在不输入验证码的情况下完成订单</strong>,通关身份验证将在服务恢复后自动处理。请准确填写通关编号和收件人信息。</p>
|
|
629
|
+
</td>
|
|
630
|
+
</tr>
|
|
631
|
+
</tbody>
|
|
632
|
+
</table>
|
|
633
|
+
</div>
|
|
634
|
+
<div id="ecCustomsConsentModal" class="customsConsentLayer" hidden="hidden">
|
|
635
|
+
<div class="dimmed"></div>
|
|
636
|
+
<div class="ec-base-layer" role="dialog" aria-modal="true" aria-labelledby="ecCustomsConsentTitle" tabindex="-1">
|
|
637
|
+
<div class="header">
|
|
638
|
+
<h3 id="ecCustomsConsentTitle">[必须] 同意收集和使用个人信息</h3>
|
|
639
|
+
</div>
|
|
640
|
+
<div class="content">
|
|
641
|
+
<p>1. 个人信息收集和使用目的:处理订购商品的进口通关</p>
|
|
642
|
+
<p>2. 收集的个人信息项目:个人海关编码(或护照号码)</p>
|
|
643
|
+
<p>3. 个人信息的保留和使用期限:原则上,在达成个人信息收集及使用目的后,将立即销毁相关信息。但根据相关法令规定需要保存的情况下,可在一定期限内保留个人信息。</p>
|
|
644
|
+
<p>*您可以拒绝本同意,但拒绝后可能会限制您使用相关服务。</p>
|
|
645
|
+
</div>
|
|
646
|
+
<div class="ec-base-button">
|
|
647
|
+
<button type="button" class="btnSubmitFix sizeS" data-action="confirm">确认</button>
|
|
648
|
+
</div>
|
|
649
|
+
<a href="#none" class="close" data-action="confirm"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close.gif" alt="关闭" /></a>
|
|
650
|
+
</div>
|
|
651
|
+
</div>
|
|
652
|
+
</div>
|
|
653
|
+
|
|
572
654
|
<div class="orderArea {$ordadd.display|display}">
|
|
573
655
|
<div class="title">
|
|
574
656
|
<h3>附加信息</h3>
|
formGlobal.css
css
/css/module/order/formGlobal.css
CHANGED
|
@@ -228,6 +228,23 @@
|
|
|
228
228
|
.xans-order-formglobal #tax_request_email1, .xans-order-formglobal #tax_request_email2 {margin:0 4px 0 0; width:110px; }
|
|
229
229
|
.xans-order-formglobal #tax_request_address1, .xans-order-formglobal #tax_request_address2 { margin:5px 0 0; width:400px; }
|
|
230
230
|
|
|
231
|
+
.xans-order-formglobal .ecCustomsClearance th .mTooltip { display:inline-block; position:relative; margin:0 0 0 2px; vertical-align:middle; }
|
|
232
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip .eTip img { vertical-align:middle; }
|
|
233
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip .ec-base-tooltip { left:-20px; width:330px; font-weight:normal; }
|
|
234
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip .ec-base-tooltip .edge { left:27px; }
|
|
235
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip:hover .ec-base-tooltip,
|
|
236
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip.show .ec-base-tooltip { display:block; }
|
|
237
|
+
.xans-order-formglobal .ecCustomsClearance .inputTypeText.error { border-color:#f76560; }
|
|
238
|
+
.xans-order-formglobal .ecCustomsClearance [class^='btnNormal']:disabled { border-color:#e3e3e3; color:#999; background-color:#fff; cursor:default; }
|
|
239
|
+
.xans-order-formglobal .ecCustomsClearance .customsMessage { margin:5px 0 0; }
|
|
240
|
+
.xans-order-formglobal .ecCustomsClearance .customsGuide { margin:0 0 5px; }
|
|
241
|
+
.xans-order-formglobal .ecCustomsClearance .customsMessage a,
|
|
242
|
+
.xans-order-formglobal .ecCustomsClearance .customsGuide a { color:#295cef; text-decoration:underline; }
|
|
243
|
+
.xans-order-formglobal .ecCustomsClearance .customsAgree { margin:10px 0 0; }
|
|
244
|
+
.xans-order-formglobal .ecCustomsClearance .customsAgree img { vertical-align:middle; }
|
|
245
|
+
.xans-order-formglobal .customsConsentLayer .ec-base-layer { position:fixed; top:150px; left:50%; width:420px; margin:0 0 0 -210px; }
|
|
246
|
+
.xans-order-formglobal .customsConsentLayer .ec-base-layer .content p { margin:0 0 6px; line-height:1.6; }
|
|
247
|
+
|
|
231
248
|
#divNvPointInfo { display:none; position:absolute; z-index:99; width:245px; padding:10px; color:#777; font-size:11px; line-height:14px; background:#fff; border:1px solid #5B9761; }
|
|
232
249
|
#divNvPointInfo a { display:block; padding:5px 0 0; color:#1ec228; }
|
|
233
250
|
#divNvPointInfo a img { vertical-align:middle; }
|