发票

+/**
+ * 发票信息
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/6/14
+ */
+
+var $ = require('jquery');
+
+var $invoiceNotice = $('.invoice-notice'),
+    $companyArea = $('.company-area');
+
+require('../common');
+
+function chooseAction(pDom, dom) {
+    if (dom.hasClass('icon-cb-radio')) {
+        return;
+    } else {
+        pDom.find('.choose').removeClass('icon-cb-radio icon-radio').addClass('icon-radio');
+        dom.removeClass('icon-radio').addClass('icon-cb-radio');
+    }
+}
+
+// 发票抬头、发票内容选择
+$('.invoice-top span, .invoice-cont li').on('touchstart', function(e) {
+    chooseAction($(this).parent(), $(this).find('.choose'));
+
+    if ($(this).parent().hasClass('invoice-cont')) {
+        $('.choose-cont').html($(this).text());
+    }
+
+    if ($(this).text() === '单位') {
+        $companyArea.slideDown();
+    }
+
+    if ($(this).text() === '个人') {
+        $companyArea.slideUp();
+    }
+});
+
+// 发票类型选择
+$('.invoice-type span').on('touchstart', function() {
+    if ($(this).hasClass('on')) {
+        return;
+    } else {
+        $(this).addClass('on').siblings().removeClass('on');
+    }
+});
+
+// 发票须知
+$('.invoice-btn').on('touchstart', function() {
+    $invoiceNotice.fadeIn();
+    return false;
+});
+
+$('.think-ok, .mask-bg').on('touchstart', function() {
+    $invoiceNotice.fadeOut();
+});

@@ -2,6 +2,7 @@
 @import "chose-panel";
 @import "chose-panel";
 @import "gift-advance-good";
 @import "gift-advance-good";
 @import "order-ensure";
 @import "order-ensure";
+@import "invoice-info";
 @import "select-coupon";
 @import "select-coupon";
 @import "select-address";
 @import "select-address";
 
 

+.invoice-info-page {
+    background: #f0f0f0;
+
+    .invoice-btn {
+        position: absolute;
+        right: 30px;
+        width: auto;
+        font-size: 28px;
+    }
+
+    .title {
+        color: #444;
+        font-size: 28px;        
+        float: left;
+    }
+
+    .invoice-form {
+        background: #fff;
+        border-bottom: 1px solid #e0e0e0;
+        padding: 0 30px;
+        box-sizing: border-box;
+        overflow: hidden;
+
+        li {
+            width: 100%;
+            clear: both;
+            margin-top: 15px;
+            line-height: 60px;
+            float: left;
+        }
+
+        li:first-child {
+            margin-bottom: 15px;
+        }
+
+        li:last-child {
+            margin-bottom: 10px;
+        }
+
+        .company-area {
+            display: none;
+        }
+
+        .company {
+            width: 100%;
+            height: 88px;
+            line-height: 88px;
+            border-radius: 8px;
+            border: 1px solid #e0e0e0;
+            font-size: 28px;
+            color: #b0b0b0;
+            padding: 0 20px;
+            margin-bottom: 15px;            
+        }
+
+        .tel {
+            border: none;
+            font-size: 28px;
+            line-height: 60px;
+        }
+
+        .invoice-type {
+            float: left;
+
+            span {
+                width: 120px;
+                height: 60px;
+                line-height: 60px;
+                text-align: center;
+                font-size: 24px;
+                color: #b0b0b0;
+                border-radius: 5px;
+                border: 1px solid #b0b0b0;
+                display: inline-block;
+                background: #fff;
+                margin-right: 20px;
+            }
+
+            .on {
+                background: #444;
+                border-color: #444;
+                color: #fff;
+            }
+        }
+
+        .invoice-top {
+            float: left;
+
+            span {
+                color: #444;
+                font-size: 28px;
+                margin-right: 55px;
+            }
+        }
+
+        .phone {
+            color: #b0b0b0;
+            font-size: 28px;
+        }
+    }
+
+    .invoice-cont {
+        background: #fff;
+        margin-top: 30px;
+        border-top: 1px solid #e0e0e0;
+        padding: 0 30px;
+        box-sizing: border-box;
+        color: #444;
+        font-size: 28px;
+        line-height: 48px;
+        overflow: hidden;
+        padding-bottom: 20px;
+
+        li {
+            width: 100%;
+            margin-top: 28px;
+            float: left;
+        }
+
+        .choose-cont {
+            float: right;
+        }
+    }
+
+    .choose {
+        font-size: 44px;
+        display: inline-block;
+        vertical-align: top;
+        margin-right: 20px;
+    }
+
+    .icon-radio {
+        color: #b0b0b0;
+    }
+
+    .btn-area {
+        width: 100%;
+        border-top: 1px solid #e0e0e0;
+        background: #fff;
+
+        .confirm-btn {
+            width: 259px;
+            height: 88px;
+            line-height: 88px;
+            text-align: center;
+            background: #d0021b;
+            color: #fff;
+            display: block;
+            margin: 0 auto;
+            border-radius: 8px;
+            font-size: 28px;
+            margin-top: 18px;
+        }
+    }
+
+    .invoice-notice {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        display: none;
+        z-index: 9;
+
+        .mask-bg {
+            background: rgba(0,0,0,0.4);
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+
+        .notice-area {
+            width: 540px;
+            height: 400px;
+            background: #fafafa;
+            border-radius: 10px;
+            transform: translate(-50%, -50%);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+
+            .notice-cont {
+                padding: 40px;
+            }
+
+            h2 {
+                text-align: center;
+                font-size: 28px;
+                color: #444;
+                padding-bottom: 4px;
+            }
+
+            p {
+                font-size: 24px;
+                color: #444;
+                line-height: 38px;
+            }
+
+            .think-ok {
+                width: 100%;
+                border-top: 1px solid #c5c5c5;
+                height: 90px;
+                line-height: 90px;
+                box-sizing: border-box;
+                text-align: center;
+                color: #d1021c;
+                font-size: 34px;
+            }
+        }
+    }
+}

@@ -495,6 +495,12 @@
     #invoice {
     #invoice {
         border-top: 1px solid #f7f7f7;
         border-top: 1px solid #f7f7f7;
 
 
+        .invoice-type {
+            float: right;
+            font-size: 28px;
+            color: #444;
+        }
+
         label {
         label {
             display: block;
             display: block;
             border-top: 1px solid #f7f7f7;
             border-top: 1px solid #f7f7f7;

+<div class="invoice-info-page yoho-page">
+    {{> layout/header}}
+    
+    <ul class="invoice-form">
+        <li>
+            <span class="title">发票类型：</span>
+            <div class="invoice-type">
+                <span class="on">电子发票</span>
+                <span>纸质发票</span>
+            </div>
+        </li>
+        <li>
+            <span class="title">发票抬头：</span>
+            <div class="invoice-top">
+                <span><i class="iconfont choose icon-cb-radio"></i>个人</span>
+                <span><i class="iconfont choose icon-radio"></i>单位</span>
+            </div>
+        </li>
+        <li>
+            <span class="title">*发票人手机：</span>
+            <span class="phone">
+                {{#if phone}}
+                    {{.}}
+                {{else}}
+                    <input type="text" name="tel" class="tel" value="" placeholder="可通过手机号在发票服务平台查询">
+                {{/if}}
+            </span>
+        </li>
+        <li class="company-area"><input type="text" name="company" class="company" value="" placeholder="填写单位名称"></li>
+    </ul>
+
+    <ul class="invoice-cont">
+        <li>
+            <span>发票内容：</span>
+            <span class="choose-cont">{{invoiceCont}}</span>
+        </li>
+        {{#each content}}
+            <li><span class="iconfont choose {{#if choosed}}icon-cb-radio{{else}}icon-radio{{/if}}"></span>{{text}}</li>
+        {{/each}}
+    </ul>
+
+    <div class="btn-area"><span class="confirm-btn">确认</span><div>
+
+    <div class="invoice-notice">
+        <div class="mask-bg"></div>
+        <div class="notice-area">
+            <div class="notice-cont">
+                <h2>发票须知</h2>
+                <p>1、发票金额不含优惠券/YOHO币/红包/优惠码/运费，只包含商品实付金额</p>
+                <p>2、电子发票：是税局认可的有效收付款凭证，其法律效力、基本用途及使用规定同纸质发票，如需纸质发票可自行下载打印</p>
+            </div>
+            <div class="think-ok">我知道了</div>
+        </div>
+    </div>
+
+    {{> layout/footer}}
+</div>

@@ -143,7 +143,11 @@
             <li class="invoice {{#if needInvoice}}focus{{/if}}">
             <li class="invoice {{#if needInvoice}}focus{{/if}}">
                 <span class="title">发票</span>
                 <span class="title">发票</span>
                 <span class="iconfont checkbox {{#if needInvoice}}icon-cb-radio{{else}}icon-radio{{/if}}"></span>
                 <span class="iconfont checkbox {{#if needInvoice}}icon-cb-radio{{else}}icon-radio{{/if}}"></span>
-                <form id="invoice">
+                <a id="invoice" class="invoice-info" href="invoiceInfo">
+                    <span class="title">发票信息</span>
+                    <span class="invoice-type">{{invoiceType}}（{{#if paper}}纸质{{else}}电子{{/if}}）<i class="iconfont">&#xe614;</i></span>
+                </a>
+                <!-- <form id="invoice">
                     <input type="text" name="invoice-title" value="{{invoiceText}}" maxlength="30" placeholder="发票抬头">
                     <input type="text" name="invoice-title" value="{{invoiceText}}" maxlength="30" placeholder="发票抬头">
                     <label>
                     <label>
                         发票类型
                         发票类型
@@ -153,7 +157,7 @@
                             {{/ invoice}}
                             {{/ invoice}}
                         </select>
                         </select>
                     </label>
                     </label>
-                </form>
+                </form> -->
             </li>
             </li>
             {{/if}}
             {{/if}}
         </ul>
         </ul>

@@ -27,6 +27,9 @@
     {{#orderDetail}}
     {{#orderDetail}}
     <a href="{{serviceUrl}}" target="_blank" class="iconfont nav-home">&#xe63c;</a>
     <a href="{{serviceUrl}}" target="_blank" class="iconfont nav-home">&#xe63c;</a>
     {{/orderDetail}}
     {{/orderDetail}}
+    {{#invoiceNotice}}
+    <span class="invoice-btn">{{.}}</span>
+    {{/invoiceNotice}}
 </header>
 </header>
 {{#navBtn}}
 {{#navBtn}}
 <div class="homebuttom hide {{#if ../boys}} boys{{/if}}{{#if ../girls}} girls{{/if}}{{#if ../kids}} kids{{/if}}{{#if ../lifeStyle}} life-style{{/if}}">
 <div class="homebuttom hide {{#if ../boys}} boys{{/if}}{{#if ../girls}} girls{{/if}}{{#if ../kids}} kids{{/if}}{{#if ../lifeStyle}} life-style{{/if}}">

@@ -251,6 +251,11 @@
     seajs.use('js/cart/order-ensure');
     seajs.use('js/cart/order-ensure');
 </script>
 </script>
 {{/if}}
 {{/if}}
+{{#if invoiceInfoPage}}
+<script>
+    seajs.use('js/cart/invoice-info');
+</script>
+{{/if}}
 {{#if selectAddressPage}}
 {{#if selectAddressPage}}
 <script>
 <script>
     seajs.use('js/me/address');
     seajs.use('js/me/address');

@@ -346,6 +346,54 @@ class IndexController extends AbstractAction
     }
     }
 
 
     /**
     /**
+     * 发票信息
+     */
+    public function invoiceInfoAction()
+    {
+        $data = array(
+            'invoiceInfoPage' => true,
+            'invoiceNotice' => '发票须知',
+            'phone' => '',
+            'invoiceCont' => '服装',
+            'content' => array(
+                array(
+                    'choosed' => true,
+                    'text' => '服装'
+                ),
+                array(
+                    'choosed' => false,
+                    'text' => '图书'
+                ),
+                array(
+                    'choosed' => false,
+                    'text' => '配件'
+                ),
+                array(
+                    'choosed' => false,
+                    'text' => '日用品'
+                ),
+                array(
+                    'choosed' => false,
+                    'text' => '办公用品'
+                ),
+                array(
+                    'choosed' => false,
+                    'text' => '体育用品'
+                ),
+                array(
+                    'choosed' => false,
+                    'text' => '数码产品'
+                )
+            )
+        );
+
+        $this->setTitle('发票信息');
+        $this->setNavHeader('发票信息', true, false); // 不显示右上角home按钮
+
+        $this->_view->display('invoice-info', $data);
+    }
+
+    /**
      * 购物车选择改变字段，重新运算订单数据
      * 购物车选择改变字段，重新运算订单数据
      */
      */
     public function orderComputeAction()
     public function orderComputeAction()