diff --git a/apps/shopping/controllers/order.js b/apps/shopping/controllers/order.js
index 39b9600..feb6026 100644
--- a/apps/shopping/controllers/order.js
+++ b/apps/shopping/controllers/order.js
@@ -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',
diff --git a/apps/shopping/views/action/order.hbs b/apps/shopping/views/action/order.hbs
index a4b1c29..dc466a8 100644
--- a/apps/shopping/views/action/order.hbs
+++ b/apps/shopping/views/action/order.hbs
@@ -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"></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"></span>
+ <em id="invoice-phone-tip">请填写手机号码</em>
+ </span>
+ </div>
+ </div>
+ </div>
+ </script>
</div>
{{/ content}}
</div>
\ No newline at end of file
diff --git a/public/js/shopping/order.page.js b/public/js/shopping/order.page.js
index 2b655c2..6e5d214 100644
--- a/public/js/shopping/order.page.js
+++ b/public/js/shopping/order.page.js
@@ -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: '',
@@ -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'
+});
diff --git a/public/scss/shopping/_order.css b/public/scss/shopping/_order.css
index 06ea966..b101830 100644
--- a/public/scss/shopping/_order.css
+++ b/public/scss/shopping/_order.css
@@ -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;
+ }
+ }
+}