Authored by 王水玲

发票

... ... @@ -7,5 +7,6 @@
require('./cart');
require('./gift-advance');
require('./order-ensure');
require('./invoice-info');
require('./select-coupon');
require('./select-address');
... ...
/**
* 发票信息
* @author: wsl<shuiling.wang@yoho.cn>
* @date: 2016/6/14
*/
var $ = require('jquery'),
tip = require('../plugin/tip'),
dialog = require('../me/dialog'),
order = require('./order-info');
var $invoiceNotice = $('.invoice-notice'),
$companyArea = $('.company-area'),
$editFlag = $('.edit-flag'),
$chooseCont = $('.choose-cont'),
$invoiceType = $('.invoice-type'),
$tel = $('.tel'),
$company = $('.company'),
orderInfo = order.orderInfo,
$chooseContLi = $('.invoice-cont').find('.icon-cb-radio').parent();
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
linkUrl = '/cart/index/orderEnsure?cartType=ordinary';
require('../common');
if (window.getUid() !== orderInfo('uid')) {
order.init();
window.location.reload();
}
//单选效果
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');
dom.parent().addClass('on');
dom.parent().siblings().removeClass('on');
$editFlag.val('true');
}
}
// 确认表单事件
function confirmAction() {
var type = $invoiceType.find('.on').data('id'),
title = $('.invoice-top').find('.on').text(),
tel = $tel.attr('data-tel'),
company = $company.val(),
cont = $chooseCont.data('id');
if ($editFlag.val() === 'true') {
if (!myreg.test($tel.attr('data-tel'))) {
tip.show('请输入正确手机号');
$tel.focus();
return false;
} else if (title === '单位' && company.length === 0) {
tip.show('请填写发票抬头');
$company.focus();
return false;
} else if (title === '单位' && company.length > 30) {
tip.show('发票抬头不得超过30个汉字');
$company.focus();
return false;
} else {
dialog.showDialog({
dialogText: '确认保存修改内容?',
hasFooter: {
leftBtnText: '取消',
rightBtnText: '确定'
}
}, function() {
orderInfo('invoiceText', (title === '单位' ? company : ''));
orderInfo('invoiceType', cont);
orderInfo('receiverMobile', tel);
orderInfo('invoicesType', type);
orderInfo('invoiceTitle', title);
dialog.showDialog({
dialogText: '保存成功',
autoHide: true,
fast: true
});
window.location.href = linkUrl;
}, function() {
window.location.href = linkUrl;
});
}
} else {
window.location.href = linkUrl;
}
}
$chooseCont.html($chooseContLi.text()).attr('data-id', $chooseContLi.find('span').data('id'));
// 发票抬头、发票内容选择
$('.invoice-top span, .invoice-cont li').not('.invoice-cont .cont-title').on('touchstart', function(e) {
chooseAction($(this).parent(), $(this).find('.choose'));
if ($(this).parent().hasClass('invoice-cont')) {
$chooseCont.html($(this).text()).attr('data-id', $(this).find('span').data('id'));
}
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');
$editFlag.val('true');
}
});
// 发票须知
$('.invoice-btn').on('touchstart', function() {
$invoiceNotice.fadeIn();
return false;
});
// 关闭发票须知弹框
$('.think-ok, .mask-bg').on('touchstart', function() {
$invoiceNotice.fadeOut();
});
// 电话清空
$('.istel').one('input', function() {
$(this).val('').removeClass('istel');
});
$tel.on('input', function() {
$(this).attr('data-tel', $(this).val());
$editFlag.val('true');
});
$company.on('input', function() {
$editFlag.val('true');
});
// 确认及返回事件
$('.confirm-btn, .nav-back').on('touchstart', function(e) {
e.preventDefault();
confirmAction();
});
// initData();
\ No newline at end of file
... ...
... ... @@ -23,6 +23,21 @@ var $invoice = $('.invoice'),
dispatchInfo,
total;
var orderCont = window.cookie('order-info') && JSON.parse(window.cookie('order-info'));
var invoiceCont = {
7: '服装',
1: '图书',
9: '配件',
11: '日用品',
3: '办公用品',
6: '体育用品',
10: '数码产品'
},
invoicesType = {
1: '纸质',
2: '电子'
};
require('../common');
lazyLoad();
... ... @@ -107,9 +122,19 @@ $invoice.on('touchend', '.checkbox', function() {
if ($this.hasClass('icon-cb-radio')) {
$invoice.addClass('focus');
orderInfo('invoiceText', '');
orderInfo('invoiceType', '7');
orderInfo('receiverMobile', $('.user-mobile').val());
orderInfo('invoicesType', '2');
orderInfo('invoiceTitle', '个人');
}
if ($this.hasClass('icon-radio')) {
$invoice.removeClass('focus');
orderInfo('invoiceText', null);
orderInfo('invoiceType', null);
orderInfo('receiverMobile', null);
orderInfo('invoicesType', null);
orderInfo('invoiceTitle', null);
}
});
... ... @@ -189,16 +214,18 @@ function submitOrder() {
if (isSubmiting) {
return false;
}
if (orderInfo('invoice')) {
if (!invoiceText) {
tip.show('请输入发票抬头');
return;
}
if (invoiceText.length > 30) {
tip.show('发票抬头不得超过30个汉字');
return;
}
}
// if (orderInfo('invoice')) {
// if (!invoiceText) {
// tip.show('请输入发票抬头');
// return;
// }
// if (invoiceText.length > 30) {
// tip.show('发票抬头不得超过30个汉字');
// return;
// }
// }
if (msg) {
if (msg.length > 40) {
tip.show('留言不得超过40个汉字');
... ... @@ -373,3 +400,9 @@ if (orderInfo('address') && orderInfo('address').is_support === 'N') {
orderInfo('deliveryId', $('.delivery-id .icon-cb-radio').data('id'));
orderCompute();
}
if (orderCont.invoiceType) {
$('.invoice-type').text(invoiceCont[orderCont.invoiceType] + '(' + invoicesType[orderCont.invoicesType] + ')');
} else {
$('.invoice-type').text('服装(电子)');
}
\ No newline at end of file
... ...
... ... @@ -21,6 +21,9 @@ function init() {
invoice: null,
invoiceText: null,
invoiceType: null,
invoiceTitle: null,
receiverMobile: null,
invoicesType: null,
msg: null,
cartType: 'ordinary'
};
... ...
... ... @@ -4,6 +4,7 @@
@import "order-ensure";
@import "select-coupon";
@import "select-address";
@import "invoice-info";
.icon-checkbox:before { content: "\e61c"; }
... ...
.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 {
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: 24px;
line-height: 60px;
width: 400px;
}
.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">
{{#invoicesType}}
<span {{#if choosed}}class="on"{{/if}} data-id="{{id}}">{{type}}</span>
{{/invoicesType}}
</div>
</li>
<li>
<span class="title">发票抬头:</span>
<div class="invoice-top">
{{#invoiceTitle}}
<span {{#if choosed}}class="on"{{/if}}><i class="iconfont choose {{#if choosed}}icon-cb-radio{{else}}icon-radio{{/if}}"></i>{{type}}</span>
{{/invoiceTitle}}
</div>
</li>
<li>
<span class="title">*发票人手机:</span>
<span class="phone">
<input type="text" name="tel" data-tel="{{completeTel}}" class="tel {{#phone}}istel{{/phone}}" value="{{phone}}" placeholder="可通过手机号在发票服务平台查询">
</span>
</li>
<li class="company-area" {{#isCompany}}style="display: none;"{{/isCompany}}><input type="text" name="company" class="company" value="{{companyName}}" placeholder="填写单位名称" maxlength="30"></li>
</ul>
<ul class="invoice-cont">
<li class="cont-title">
<span>发票内容:</span>
<span class="choose-cont" data-id=""></span>
</li>
{{#each content}}
<li><span class="iconfont choose {{#if choosed}}icon-cb-radio{{else}}icon-radio{{/if}}" data-id="{{id}}"></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>
<input type="hidden" class="edit-flag" value="false" />
{{> layout/footer}}
</div>
... ...
... ... @@ -96,11 +96,9 @@
<a href="{{#if isLimit}}javascript:void(0);{{else}}/cart/index/selectCoupon{{/if}}">
<span class="title">优惠券</span>
{{# coupon}}
{{#if isCoupon}}
<span class="coupon-count">
{{count}}张可用
</span>
{{/if}}
{{#if couponName}}
<span class="used coupon-use" data-name="{{couponName}}">
{{couponName}}
... ... @@ -143,9 +141,14 @@
{{#if invoice}}
<li class="invoice {{#if needInvoice}}focus{{/if}}">
<input type="hidden" class="user-mobile" value="{{userMobile}}" />
<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"><i class="iconfont">&#xe614;</i></span>
</a>
<!-- <form id="invoice">
<input type="text" name="invoice-title" value="{{invoiceText}}" maxlength="30" placeholder="发票抬头">
<label>
发票类型
... ... @@ -155,7 +158,7 @@
{{/ invoice}}
</select>
</label>
</form>
</form> -->
</li>
{{/if}}
</ul>
... ...
... ... @@ -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');
... ...