fe / YOHOBUYWAP · Commits

Go to a project

Authored by 王水玲
Commit 90338fac95ef5c28b91d76466ec9cdd18ad8e671 1 parent 00e02291

发票

Inline Side-by-side
Showing 11 changed files with 396 additions and 2 deletions
/**
* 发票信息
* @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();
});
\ No newline at end of file
... ...
... ... @@ -2,6 +2,7 @@
@import "chose-panel";
@import "gift-advance-good";
@import "order-ensure";
@import "invoice-info";
@import "select-coupon";
@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;
}
}
}
}
\ No newline at end of file
... ...
... ... @@ -495,6 +495,12 @@
#invoice {
border-top: 1px solid #f7f7f7;
.invoice-type {
float: right;
font-size: 28px;
color: #444;
}
label {
display: block;
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}}">
<span class="title">发票</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="发票抬头">
<label>
发票类型
... ... @@ -153,7 +157,7 @@
{{/ invoice}}
</select>
</label>
</form>
</form> -->
</li>
{{/if}}
</ul>
... ...
... ... @@ -27,6 +27,9 @@
{{#orderDetail}}
<a href="{{serviceUrl}}" target="_blank" class="iconfont nav-home">&#xe63c;</a>
{{/orderDetail}}
{{#invoiceNotice}}
<span class="invoice-btn">{{.}}</span>
{{/invoiceNotice}}
</header>
{{#navBtn}}
<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');
</script>
{{/if}}
{{#if invoiceInfoPage}}
<script>
seajs.use('js/cart/invoice-info');
</script>
{{/if}}
{{#if selectAddressPage}}
<script>
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()
... ...