电子发票模板

@@ -389,7 +389,98 @@
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
+
+    <div class="receipt-info hide">
+        <div class="receipt-mask">
+        </div>
+
+        <div class="receipt-info-container">
+            <div class="receipt-title">发票信息
+            </div>
+
+            <div class="receipt-type receipt-margin">
+                <span>电子发票</span>
+                <span>纸质发票</span>
+            </div>
+
+            <div class="receipt-container receipt-margin">
+                <div class="e-receipt-desc">
+                </div>
+
+                <div class="invoice-list invoice-title">
+                    <span class="invoice-star">*</span>
+                    <span class="invoice-list-type">发票抬头</span>
+                    <div class="invoice-line first-line">
+                        <input checked="true" type="radio" value="1"  name="title" />
+                        <label>个人</label>
+                        <input type="radio" value="2"  name="title" />
+                        <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>
+                    </div>
+                </div>
+
+                <div class="invoice-list invoice-content">
+                    <span class="invoice-star">*</span>
+                    <span class="invoice-list-type">发票内容</span>
+                    <div class="invoice-line first-line">
+                        <div class="blind">
+                            <input checked="true" type="radio" value="1"  name="content" />
+                            <label>服饰</label>
+                        </div>
+
+                        <div class="blind">
+                            <input type="radio" value="2"  name="content" />
+                            <label>图书</label>
+                        </div>
+
+                        <div class="blind">
+                            <input type="radio" value="3"  name="content" />
+                            <label>配件</label>
+                        </div>
+
+                        <div class="blind">
+                            <input type="radio" value="4"  name="content" />
+                            <label>日用品</label>
+                        </div class="blind">
+
+                        <div class="blind">
+                            <input type="radio" value="5"  name="content" />
+                            <label>办公用品</label>
+                        </div>
+
+                        <div class="blind">
+                            <input type="radio" value="6"  name="content" />
+                            <label>体育用品</label>
+                        </div>
+
+                        <div class="blind">
+                            <input type="radio" value="7"  name="content" />
+                            <label>数码产品</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="invoice-list invoice-phone hide">
+                    <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>
+                    </div>
+                </div>
+            </div>
+
+            <div class="receipt-footer">
+                <div class="save-receipt highlight">保存发票信息</div>
+                <div class="cancel-receipt normal">取消</div>
+            </div>
+        </div>
+    </div>
 {{/ orderEnsure}}
 {{/ orderEnsure}}
 <div class="loading"><span></span>请稍后...</div>
 <div class="loading"><span></span>请稍后...</div>
+
 </div>
 </div>
 {{> layout/footer}}
 {{> layout/footer}}

@@ -4,7 +4,10 @@
  */
  */
 
 
 var $ = require('yoho.jquery'),
 var $ = require('yoho.jquery'),
-    $invoiceCheck = $('.invoice');
+    $invoiceCheck = $('.invoice'),
+    $receiptInfo = $('.receipt-info'),
+    $receiptInfoSaveBtn = $('.receipt-info .save-receipt'),
+    $receiptInfoCancelBtn = $('.receipt-info .cancel-receipt');
 
 
 var address = require('./address');
 var address = require('./address');
 
 
@@ -864,8 +867,14 @@ $invoiceCheck.click(function(){
 
 
     if ($invoiceCheck.attr('checked')) {
     if ($invoiceCheck.attr('checked')) {
         $invoiceCheck.addClass('active');
         $invoiceCheck.addClass('active');
-        alert('开发票');
+        $receiptInfo.removeClass('hide');
     }
     }
-    
+});
+
+$receiptInfoSaveBtn.click(function(){
+    $receiptInfo.addClass('hide');
+});
 
 
-})
+$receiptInfoCancelBtn.click(function(){
+    $receiptInfo.addClass('hide');
+});

@@ -603,6 +603,158 @@
     		}	
     		}	
         }
         }
     }
     }
+
+    .receipt-info {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%!important;
+
+        .receipt-mask {
+
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background-color: #000;
+            opacity: 0.4;
+            z-index: 1000;
+        }
+
+        .receipt-info-container {
+            position: fixed;
+            top: 200px;
+            left: 0;
+            right: 0;
+            width: 700px;
+            height: auto;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #fff;
+            border: 3px solid #444;
+        }
+
+        .receipt-title {
+            margin: 42px 55px 0;
+            text-align: left;
+            font-size: 16px;
+            padding-bottom: 20px;
+            border-bottom: 3px solid #888;
+        }
+        
+        .receipt-type {
+             margin: 17px 0;
+
+             span {
+                margin-right: 17px;
+                border: 1px solid red;
+                padding: 5px 15px;
+                font-size: 14px;
+             }
+        }
+        
+        .e-receipt-desc {
+            background: url(/order/invoice-desc.png);
+            width: 100%;
+            height: 108px;
+        }
+        .receipt-margin {
+            margin-left: 55px;
+            margin-right: 55px;
+        }
+
+        .invoice-list {
+            position: relative;
+            margin-top: 17px;
+            height: 70px;
+
+            .invoice-star {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 12px;
+                height: 20px;
+                line-height: 20px;
+                font-size: 20px;
+                color: #d0021b;
+                text-align: center;
+            }
+            .invoice-list-type {
+                position: absolute;
+                top: 0;
+                left: 15px;
+                width: 80px;
+                height: 20px;
+                line-height: 20px;
+                font-size: 14px
+            }
+
+            .invoice-line {
+                position: absolute;
+                left: 120px;
+                width: 500px;
+                height: 30px;
+            }
+
+            .first-line {
+                top: 0;
+            }
+
+            .second-line {
+                top: 30px;
+            }
+
+            .input-line {
+                height: 40px;
+            }
+
+            .invoice-line label {
+                width: 90px;
+                display: inline-block; 
+            }
+
+            .invoice-line i {
+                margin-left: 20px; 
+            }
+        }
+        .invoice-phone {
+            height: 40px;
+        }
+        
+        .blind {
+            display: inline-block;
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+
+        .receipt-footer {
+            margin-left: 160px;
+
+            div {
+                display: inline-block;
+                width: 140px;
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                margin: 30px 20px 35px 20px;
+            }
+
+            .highlight {
+                border: 1px solid #3a3a3a;
+                background: #3a3a3a;
+                color: #fff;
+
+            }
+            .normal {
+                border: 1px solid #b0b0b0;
+                background: #fff;
+                color: #444;
+            }
+        }
+        .enpty-input {
+            color: red;
+        }
+    }
 }
 }
 .freebie-tag{
 .freebie-tag{
     background:#9c3;
     background:#9c3;