fe / yoho-blk · Commits

Go to a project

Authored by xuqi
Commit f4fdd05f6d025ef526459131963a32be9cd90b43 1 parent 026da1d4

invoice infos

Inline Side-by-side
Showing 6 changed files with 239 additions and 94 deletions
... ... @@ -15,13 +15,13 @@ const index = (req, res, next) => {
result.data.invoices.invoiceTitle = [
{
name: '个人',
value: '1',
value: 1,
checked: true,
myClass: 'personal'
},
{
name: '单位',
value: '2'
value: 2
}
];
... ...
... ... @@ -79,11 +79,11 @@
</div>
<div class="invoice-info order-block">
<p class="title">发票信息</p>
<div class="content">
<div id="invoice-content" class="content">
<div class="invoice-radio">
{{> icon/radio}}
<label>发票开具</label>
</p>
</div>
</div>
</div>
<div class="coin-and-remark">
... ... @@ -225,9 +225,9 @@
</div>
<div>
<input class="input invoice-title-input hide" type="text" maxlength="30" placeholder="请填写单位名称">
<span class="input-tip hide">
<span class="input-tip invoice-title-tip blue hide">
<span class="iconfont">&#xe60c;</span>
<em id="invoice-title-tip">请填写发票抬头</em>
请填写发票抬头
</span>
</div>
</div>
... ... @@ -254,10 +254,10 @@
收票人手机：
</span>
<div class="row-content">
<input class="input" type="text">
<span class="input-tip hide">
<input class="input receiver-phone" type="text">
<span class="input-tip invoice-phone-tip blue hide">
<span class="iconfont">&#xe60c;</span>
<em id="invoice-phone-tip">请填写手机号码</em>
<em></em>
</span>
</div>
</div>
... ... @@ -274,6 +274,24 @@
</p>
{{> write-address}}
</script>
<script id="checked-invoice-show-tpl" type="text/html">
<div class="invoice-radio">
\{{#if checked}}
<span class="iconfont radio checked">&#xe603;</span>
\{{^}}
<span class="iconfont radio">&#xe604;</span>
\{{/if}}
<label>发票开具</label>
</div>
\{{#if type}}
<p class="invoice-detail"
data-type="\{{type}}" data-title="\{{invoiceTitle}}" data-content="\{{content}}" data-phone="\{{phone}}">
<em>\{{invoiceTypeText}}</em><em>\{{invoiceTitle}}</em><em>\{{invoiceContent}}</em>
<span class="modify-invoice btn white">修改</span>
</p>
\{{/if}}
</script>
</div>
{{/ content}}
</div>
\ No newline at end of file
... ...
... ... @@ -5,8 +5,7 @@
*/
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload'),
Dialog = require('../plugins/dialog').Dialog;
lazyLoad = require('yoho-jquery-lazyload');
var minusPlus = {
minus: '&#xe630;',
... ... @@ -28,90 +27,13 @@ var $coin = $('#input-coin'),
};
var balanceCost = +$('#balance-cost').data('cost');
var $invoiceTitleInput,
$invoceTab,
$invoiceEntity,
invoiceDialog;
require('../plugins/check'); // before 地址和发票
require('../plugins/check');
require('./address');
require('./order/address'); // 地址
require('./order/invoice'); // 发票
lazyLoad($('img.lazy'));
// 发票弹窗Factory
function invoiceDialogFactory() {
var invoice = new Dialog({
className: 'invoice',
content: $('#invoice-dialog-tpl').html(),
btns: [
{
id: 'save-invoice',
btnClass: ['save-invoice'],
name: '保存发票信息',
cb: function() {
// do some thing
invoice.close();
}
},
{
id: 'cancel-invoice',
btnClass: ['cancel-invoice', 'white'],
name: '取消',
cb: function() {
invoice.close();
}
}
],
keep: true
});
return invoice;
}
invoiceDialog = invoiceDialogFactory();
$invoiceTitleInput = $('.yoho-dialog.invoice .invoice-title-input');
$invoceTab = $('.invoice-tab');
$invoiceEntity = $('.invoice-entity');
// 初始化发票弹窗的radio
$('.invoice-title-radio').check({
type: 'radio',
group: 'invoice-title',
onChange: function(el, checked) {
// 只处理选中的change逻辑
if (checked) {
if ($(el).hasClass('personal')) {
$invoiceTitleInput.addClass('hide');
} else {
$invoiceTitleInput.removeClass('hide');
}
}
}
});
$('.invoice-radio').click(function() {
invoiceDialog.show();
});
// 纸质发票和电子发票的切换
$invoceTab.on('click', '.btn', function() {
var $this = $(this);
if ($this.hasClass('no-focus')) {
$invoceTab.children('.btn').toggleClass('no-focus');
if ($this.hasClass('el-invoice')) {
$invoiceEntity.addClass('el');
} else {
$invoiceEntity.removeClass('el');
}
}
});
// 有货币、备注切换显示
$('.coin-ctrl, .remark-ctrl').click(function() {
var $this = $(this),
... ...
... ... @@ -6,8 +6,8 @@
var $ = require('yoho-jquery'),
Hbs = require('yoho-handlebars'),
cascadingAddress = require('../plugins/cascading-address'),
popup = require('../plugins/dialog');
cascadingAddress = require('../../plugins/cascading-address'),
popup = require('../../plugins/dialog');
var $receiver = $('#receiver');
... ...
/**
* 结算页发票
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/7/13
*/
var $ = require('yoho-jquery'),
hbs = require('yoho-handlebars'),
Dialog = require('../../plugins/dialog').Dialog;
var checkedInvoiceTpl = hbs.compile($('#checked-invoice-show-tpl').html());
var $invoiceContent = $('#invoice-content');
var $invoiceTitleInput,
$invoiceTip,
$invoceTab,
$invoiceEntity,
invoiceDialog;
// 发票信息验证
function validateInvoice($el) {
var pass = true;
var phone = $.trim($el.find('.receiver-phone').val());
var name = $.trim($el.find('.invoice-title-input').val());
var phoneRegx = [
{
noEmpty: true,
err: '请填写手机号码'
},
{
regx: /\d{11}/,
err: '手机号码不正确'
}
];
var key,
vaRegx;
// 电子发票
if ($el.find('.paper-invoice').hasClass('no-focus')) {
for (key = 0; key < phoneRegx.length; key++) {
vaRegx = phoneRegx[key];
if (vaRegx.noEmpty && phone === '' ||
vaRegx.regx && !vaRegx.regx.test(phone)) {
pass = false;
$el.find('.invoice-phone-tip').removeClass('hide').find('em').text(vaRegx.err);
break;
}
}
}
// 发票抬头为单位
if ($el.invioceTitleType === 2 && name === '') {
pass = false;
$el.find('.invoice-title-tip').removeClass('hide');
}
return pass;
}
// 发票弹窗Factory
function invoiceDialogFactory() {
var invoice = new Dialog({
className: 'invoice',
content: $('#invoice-dialog-tpl').html(),
btns: [
{
id: 'save-invoice',
btnClass: ['save-invoice'],
name: '保存发票信息',
cb: function() {
var $el = invoice.$el;
var invoiceType;
if (validateInvoice($el)) {
invoiceType = $invoceTab.children().not('no-focus').hasClass('el-invoice') ? 2 : 1;
$invoiceContent.html(checkedInvoiceTpl({
type: invoiceType,
invoiceTypeText: invoiceType === 1 ? '电子发票' : '纸质发票',
invoiceTitle: $el.invoiceTitleType === 1 ? '个人' : $invoiceTitleInput.val(),
content: $el.invoiceContent,
invoiceContent: $el.find('.invoice-content-radio .checked').next('label').text(),
phone: $el.find('.receiver-phone').val(),
checked: true // 发票开具radio选中
}));
// 处理发票信息
invoice.close();
}
}
},
{
id: 'cancel-invoice',
btnClass: ['cancel-invoice', 'white'],
name: '取消',
cb: function() {
invoice.close();
}
}
],
keep: true
});
return invoice;
}
invoiceDialog = invoiceDialogFactory();
// 存储发票参数
$.extend(invoiceDialog.$el, {
invoiceTitleType: 1,
invoiceContent: $('.invoice-content-radio .checked').parent().data('value') // 默认选中项的值
});
$invoiceTitleInput = $('.yoho-dialog.invoice .invoice-title-input');
$invoiceTip = $('.yoho-dialog.invoice .input-tip');
$invoceTab = $('.invoice-tab');
$invoiceEntity = $('.invoice-entity');
// 初始化发票抬头radio
$('.invoice-title-radio').check({
type: 'radio',
group: 'invoice-title',
onChange: function(el, checked, value) {
// 只处理选中的change逻辑
if (checked) {
if ($(el).hasClass('personal')) {
$invoiceTitleInput.addClass('hide');
} else {
$invoiceTitleInput.removeClass('hide');
}
$invoiceTip.addClass('hide'); // 切换时隐藏提示
invoiceDialog.$el.invoiceTitleType = value; // 1-个人；2-单位
}
}
});
// 初始化发票内容radio
$('.invoice-content-radio').check({
type: 'radio',
group: 'invoice-content',
onChange: function(el, checked, value) {
if (checked) {
invoiceDialog.$el.invoiceContent = value;
}
}
});
$invoiceContent.on('click', '.invoice-radio', function() {
if ($(this).find('.checked').length > 0) {
// 取消选中
$invoiceContent.html(checkedInvoiceTpl({
checked: false
}));
} else {
// 选中
invoiceDialog.show();
}
}).on('click', '.modify-invoice', function() {
invoiceDialog.show();
});
// 纸质发票和电子发票的切换
$invoceTab.on('click', '.btn', function() {
var $this = $(this);
if ($this.hasClass('no-focus')) {
$invoceTab.children('.btn').toggleClass('no-focus');
if ($this.hasClass('el-invoice')) {
$invoiceEntity.addClass('el');
} else {
$invoiceEntity.removeClass('el');
}
}
});
... ...
... ... @@ -301,9 +301,29 @@
}
}
.invoice-info .content {
> * {
display: inline-block;
}
.invoice-detail {
margin-left: 40px;
}
em {
margin-right: 20px;
}
.modify-invoice {
display: inline-block;
width: 40px;
height: 20px;
line-height: 20px;
}
}
.invoice-radio {
color: #999;
cursor: pointer;
color: #666;
.iconfont {
font-size: 18px;
... ...