fe / yoho-blk · Commits

Go to a project

Authored by xuqi
Commit 444f701cf493e045df6783b5712ab2c4b615d0e6 1 parent ba8bcb4c

invoice

Inline Side-by-side
Showing 4 changed files with 336 additions and 7 deletions
... ... @@ -57,6 +57,60 @@ const index = (req, res) => {
],
coinCount: '2301',
printPriceRadio: [
{
name: '是',
value: '1',
checked: true
},
{
name: '否',
value: '0'
}
],
invoiceTitleRadio: [
{
name: '个人',
value: '1',
checked: true,
myClass: 'personal'
},
{
name: '单位',
value: '2'
}
],
invoiceContentRadio: [
{
name: '服装',
value: '1',
checked: true
},
{
name: '图书',
value: '2'
},
{
name: '配件',
value: '3'
},
{
name: '日用品',
value: '4'
},
{
name: '办公用品',
value: '5'
},
{
name: '体育用品',
value: '6'
},
{
name: '数码产品',
value: '7'
}
],
receiver: '把明杨 131****5656 江苏省 南京市 秦淮区 三条巷141号 233室',
count: '4',
sumCost: '58999.00',
... ...
... ... @@ -148,10 +148,18 @@
</p>
<div class="content hide">
<textarea id="remark-content" class="remark-content" placeholder="声明：备注中有关收货人信息、支付方式、配送方式、发票信息等购买要求一律以上面的选择为准，备注无效"></textarea>
<p class="print-price">
<div class="print-price">
是否打印价格：
<span class="remark-tip">（如：送朋友的商品可不打印价格哦！）</span>
</p>
<div class="print-price-radio-group">
{{#each printPriceRadio}}
<div class="print-price-radio" data-value="{{value}}">
<label>{{name}}</label>
{{> icon/radio}}
</div>
{{/each}}
<span class="remark-tip">（如：送朋友的商品可不打印价格哦！）</span>
</div>
</div>
</div>
</div>
</div>
... ... @@ -187,6 +195,73 @@
</li>
</ul>
</div>
<script id="invoice-dialog-tpl" type="text/html">
<p class="dialog-title">发票信息</p>
<ul class="invoice-tab">
<li class="btn el-invoice">电子发票</li>
<li class="btn paper-invoice no-focus">纸质发票</li>
</ul>
<div class="invoice-entity el">
<p class="tip">
※ 电子发票是税务局认可的有效凭证，其法律效力、基本用途及使用规定同纸质发票，如需纸质发票可自行下载。
<a class="what-is-el-invoice" href="" target="_blank">什么是电子发票</a>
</p>
<div class="row clearfix">
<span class="label">
<em class="required-mark">*</em>
发票抬头：
</span>
<div class="row-content">
<div class="invoice-title-radio-group">
{{#each invoiceTitleRadio}}
<div class="invoice-title-radio{{#if myClass}} {{myClass}}{{/if}}" data-value="{{value}}">
{{> icon/radio}}
<label>{{name}}</label>
</div>
{{/each}}
</div>
<div>
<input class="input invoice-title-input hide" type="text" maxlength="30" placeholder="请填写单位名称">
<span class="input-tip hide">
<span class="iconfont">&#xe60c;</span>
<em id="invoice-title-tip">请填写发票抬头</em>
</span>
</div>
</div>
</div>
<div class="row clearfix">
<span class="label">
<em class="required-mark">*</em>
发票内容：
</span>
<div class="row-content">
<div class="invoice-content-radio-group">
{{# each invoiceContentRadio}}
<div class="invoice-content-radio" data-value="{{value}}">
{{> icon/radio}}
<label>{{name}}</label>
</div>
{{/each}}
</div>
</div>
</div>
<div class="row phone-row clearfix">
<span class="label">
<em class="required-mark">*</em>
收票人手机：
</span>
<div class="row-content">
<input class="input" type="text">
<span class="input-tip hide">
<span class="iconfont">&#xe60c;</span>
<em id="invoice-phone-tip">请填写手机号码</em>
</span>
</div>
</div>
</div>
</script>
</div>
{{/ content}}
</div>
\ No newline at end of file
... ...
... ... @@ -5,7 +5,8 @@
*/
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload');
lazyLoad = require('yoho-jquery-lazyload'),
Dialog = require('../plugins/dialog').Dialog;
var minusPlus = {
minus: '&#xe630;',
... ... @@ -27,13 +28,88 @@ var $coin = $('#input-coin'),
};
var balanceCost = +$('#balance-cost').data('cost');
var $invoiceTitleInput,
$invoceTab,
$invoiceEntity,
invoiceDialog;
require('../plugins/check');
lazyLoad($('img.lazy'));
// 发票
$('.invoice-radio').check({
type: 'radio'
/**
* 发票弹窗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');
}
}
});
// 有货币、备注切换显示
... ... @@ -95,6 +171,9 @@ $coin.on('input', function() {
}
});
/**
* 切换使用有货币面板显示
*/
function toggleCoinPanel() {
$('.using-coin, .used-coin').toggleClass('hide');
}
... ... @@ -122,3 +201,8 @@ $('.used-coin').on('click', '.modify', function() {
toggleCoinPanel();
});
// 添加备注-是否打印价格
$('.print-price-radio').check({
type: 'radio',
group: 'print-price'
});
... ...
... ... @@ -373,11 +373,127 @@
resize: none;
}
.print-price-radio-group {
display: inline-block;
}
.print-price {
margin: 20px 0 10px;
}
.print-price-radio {
display: inline-block;
cursor: pointer;
> .iconfont {
font-size: 16px;
}
}
.remark-tip {
color: #b1b1b1;
}
}
.yoho-dialog.invoice {
width: 702px;
background: #fff;
.content {
text-align: left;
}
/* 纸质发票不显示提示和收票人手机 */
.tip,
.phone-row {
display: none;
}
.el .tip,
.el .phone-row {
display: block;
}
.dialog-title {
color: #777;
line-height: 50px;
border-bottom: 1px solid #eee;
}
.invoice-tab {
margin: 17px 0;
.btn {
width: 85px;
height: 26px;
line-height: 26px;
&.no-focus {
background: #fff;
color: #999;
border-color: #eee;
}
}
}
.tip {
background: #f5f5f5;
padding: 20px;
font-size: 15px;
line-height: 18px;
}
.what-is-el-invoice {
display: block;
font-weight: bold;
margin-top: 20px;
}
.required-mark {
color: #f00;
}
.invoice-title-radio,
.invoice-content-radio {
display: inline-block;
cursor: pointer;
}
.row {
margin: 18px 0;
line-height: 30px;
.iconfont {
font-size: 16px;
}
.input {
width: 200px;
height: 30px;
border-color: #eee;
background: #f5f5f5;
}
.label {
float: left;
font-size: 14px;
width: 100px;
}
.row-content {
float: left;
width: 520px;
}
}
.btns .btn {
width: 140px;
height: 40px;
line-height: 40px;
&.white {
border-color: #000;
color: #000;
}
}
}
... ...