电子发票模板

张丽霞
Commit ec987a48416b874fe67f728457d458e8f8d2bf0b 1 parent 3da23b06
Showing 3 changed files with 64 additions and 12 deletions
template/www.yohobuy.com/actions/cart/index/order-ensure.phtml
web-static/js/order/ensure.js
web-static/sass/order/_ensure.css
--- a/template/www.yohobuy.com/actions/cart/index/order-ensure.phtml
View file @ec987a4
+++ b/template/www.yohobuy.com/actions/cart/index/order-ensure.phtml
View file @ec987a4
@@ -399,15 +399,15 @@
             </div>
             <div class="receipt-type receipt-margin">
-                <span>电子发票</span>
-                <span>纸质发票</span>
+                <span class="e-receipt receipt-type-selected">电子发票</span>
+                <span class="paper-receipt">纸质发票</span>
             </div>
             <div class="receipt-container receipt-margin">
                 <div class="e-receipt-desc">
                 </div>
-                <div class="invoice-list invoice-title">
+                <div class="invoice-list invoice-title invoice-title-personal-hight">
                     <span class="invoice-star">*</span>
                     <span class="invoice-list-type">发票抬头</span>
                     <div class="invoice-line first-line">
@@ -417,8 +417,8 @@
                         <label>单位</label>
                     </div>
                     <div class="invoice-line second-line input-line hide">
-                        <input id="input-organization-name" type="text" placeholder="请填写单位名称"/>
-                        <i class="enpty-input iconfont">&#xe626; 请填写发票抬头</i>
+                        <input id="input-organization-name" type="text" placeholder="请填写单位名称" maxlength="30"/>
+                        <i class="enpty-input iconfont hide">&#xe626; 请填写发票抬头</i>
                     </div>
                 </div>
@@ -467,8 +467,8 @@
                     <span class="invoice-star">*</span>
                     <span class="invoice-list-type">收票人手机</span>
                    <div class="invoice-line first-line input-line">
-                        <input id="input-mobile" type="text"/>
-                        <i class="enpty-input iconfont">&#xe626; 请填写手机号码</i>
+                        <input id="input-mobile" type="text" maxlength="11"/>
+                        <i class="enpty-input iconfont hide">&#xe626; 请填写手机号码</i>
                     </div>
                 </div>
             </div>
--- a/web-static/js/order/ensure.js
View file @ec987a4
+++ b/web-static/js/order/ensure.js
View file @ec987a4
@@ -7,7 +7,9 @@ var $ = require('yoho.jquery'),
     $invoiceCheck = $('.invoice'),
     $receiptInfo = $('.receipt-info'),
     $receiptInfoSaveBtn = $('.receipt-info .save-receipt'),
-    $receiptInfoCancelBtn = $('.receipt-info .cancel-receipt');
+    $receiptInfoCancelBtn = $('.receipt-info .cancel-receipt'),
+    $eReceiptBtn = $('.receipt-type .e-receipt'),
+    $paperReceiptBtn = $('.receipt-type .paper-receipt');
 var address = require('./address');
@@ -872,6 +874,7 @@ $invoiceCheck.click(function(){
     }
 });
+//电子发票
 $receiptInfoSaveBtn.click(function(){
     $receiptInfo.addClass('hide');
     $('.invoice-content').removeClass('hide');
@@ -886,3 +889,30 @@ $receiptInfoCancelBtn.click(function(){
 $('.revise').click(function(){
     $receiptInfo.removeClass('hide');
 });
+
+$eReceiptBtn.click(function(){
+    $eReceiptBtn.addClass('receipt-type-selected');
+    $paperReceiptBtn.removeClass('receipt-type-selected');
+    $('.e-receipt-desc').removeClass('hide');
+});
+
+$paperReceiptBtn.click(function(){
+    $paperReceiptBtn.addClass('receipt-type-selected');
+    $eReceiptBtn.removeClass('receipt-type-selected');
+    $('.e-receipt-desc').addClass('hide');
+});
+
+$('.invoice-title').change(function(){
+    var selectType = $('input[name="title"]:checked').val();
+    if (selectType === "1") {
+        console.log('个人');
+        $('.invoice-title').addClass('invoice-title-personal-hight');
+        $('.invoice-title .input-line').addClass('hide');
+        $('.invoice-phone').addClass('hide');
+    } else {
+        console.log('单位');
+        $('.invoice-title').removeClass('invoice-title-personal-hight');
+        $('.invoice-title .input-line').removeClass('hide');
+        $('.invoice-phone').removeClass('hide');
+    }
+})
--- a/web-static/sass/order/_ensure.css
View file @ec987a4
+++ b/web-static/sass/order/_ensure.css
View file @ec987a4
@@ -645,12 +645,18 @@
         .receipt-type {
              margin: 17px 0;
-             span {
+            span {
                 margin-right: 17px;
-                border: 1px solid red;
                 padding: 5px 15px;
                 font-size: 14px;
-             }
+                border: 1px solid #e0e0e0;
+                color: #505050;
+            }
+
+            .receipt-type-selected {
+                border: 1px solid #d0021b;
+                color: #d0021b;
+            }
         }
         .e-receipt-desc {
@@ -672,6 +678,7 @@
                 position: absolute;
                 top: 0;
                 left: 0;
+                margin-top: 5px;
                 width: 12px;
                 height: 20px;
                 line-height: 20px;
@@ -706,6 +713,12 @@
             .input-line {
                 height: 40px;
+
+                input {
+                    width: 200px;
+                    height: 30px;
+                    margin-top: 5px;
+                }
             }
             .invoice-line label {
@@ -717,10 +730,19 @@
                 margin-left: 20px; 
             }
         }
+
+        .invoice-title-personal-hight {
+            height: 30px;
+        }
+
         .invoice-phone {
             height: 40px;
         }
+        .invoice-title_group{
+            height: 70px;
+        }
+
         .blind {
             display: inline-block;
             margin-top: 5px;
@@ -752,7 +774,7 @@
             }
         }
         .enpty-input {
-            color: red;
+            color: #d3132a;
         }
     }
 }