fe / yohobuy-node · Commits

Go to a project

Authored by 刘传洋
Commit 38b933f386eee2e0017962fcc1f64a39aa2e4ac6 2 parents 86341b4c b1429ef4

Merge branch 'feature/shoppingCart' of http://git.yoho.cn/fe/yohobuy-node into feature/shoppingCart

Inline Side-by-side
Showing 6 changed files with 475 additions and 27 deletions
@@ -8,7 +8,6 @@ @@ -8,7 +8,6 @@
8 <div class="block-title">收货信息<span id="new-address-btn" class="right">新增收货地址 +</span></div> 8 <div class="block-title">收货信息<span id="new-address-btn" class="right">新增收货地址 +</span></div>
9 <div id="addr-list" class="addr-list clearfix"> 9 <div id="addr-list" class="addr-list clearfix">
10 {{# deliveryAddress}} 10 {{# deliveryAddress}}
11 - {{log this}}  
12 <div class="addr-item{{#isY is_default}} addr-default addr-select{{/isY}}" data-id="{{id}}" data-consignee="{{consignee}}" data-mobile="{{mobile}}" data-phone="{{phone}}" data-area="{{area}}" data-code="{{area_code}}" data-address="{{address}}"{{#isY is_default}} data-default="1"{{/isY}}{{#isY is_delivery}} data-delivery="1"{{/isY}}> 11 <div class="addr-item{{#isY is_default}} addr-default addr-select{{/isY}}" data-id="{{id}}" data-consignee="{{consignee}}" data-mobile="{{mobile}}" data-phone="{{phone}}" data-area="{{area}}" data-code="{{area_code}}" data-address="{{address}}"{{#isY is_default}} data-default="1"{{/isY}}{{#isY is_delivery}} data-delivery="1"{{/isY}}>
13 <p class="name"> 12 <p class="name">
14 {{consignee}} 13 {{consignee}}
@@ -115,9 +114,11 @@ @@ -115,9 +114,11 @@
115 </div> 114 </div>
116 <div class="invoice-wrap"> 115 <div class="invoice-wrap">
117 <div class="block-title">发票信息</div> 116 <div class="block-title">发票信息</div>
118 - <p>  
119 - <label class="radio-btn">发票开具</label>  
120 - </p> 117 + <label id="invoice-radio" class="invoice-radio radio-btn">发票开具</label>
  118 + <div class="invoice-info-view hide">
  119 + <span></span>
  120 + <label id="modify-invoice">修改</label>
  121 + </div>
121 </div> 122 </div>
122 <div class="extra-wrap"> 123 <div class="extra-wrap">
123 <dl> 124 <dl>
@@ -144,10 +145,7 @@ @@ -144,10 +145,7 @@
144 </li> 145 </li>
145 {{/each}} 146 {{/each}}
146 </ul> 147 </ul>
147 - <p id="delivery-detail" class="delivery-detail">  
148 - 寄送至：<br>  
149 - 收货人：  
150 - </p> 148 + <p id="delivery-detail" class="delivery-detail"></p>
151 </div> 149 </div>
152 150
153 <div class="sum-wrap"> 151 <div class="sum-wrap">
@@ -73,3 +73,68 @@ @@ -73,3 +73,68 @@
73 </p> 73 </p>
74 </div> 74 </div>
75 </script> 75 </script>
  76 +
  77 +<script id="invoice-chose-tpl" type="text/html">
  78 + <p class="invoice-header">发票信息</p>
  79 + <ul class="invoice-type">
  80 + <li class="el-invoice focus">电子发票</li>
  81 + <li class="pa-invoice">纸质发票</li>
  82 + </ul>
  83 + <div class="invoice-content el-content">
  84 + <p class="el-tip">
  85 + ※ 电子发票是税务局认可的有效凭证，其法律效力、基本用途及使用规定同纸质发票，如需纸质发票可自行下载打印。<br>
  86 + <a href="//www.yohobuy.com/help?category_id=99">什么是电子发票?</a>
  87 + </p>
  88 +
  89 + <ul>
  90 + <li class="invoice-title invoice-row">
  91 + <span class="row-title">
  92 + <em>*</em>
  93 + 发票抬头
  94 + </span>
  95 + <div class="row-content">
  96 + <span class="radio-wrap">
  97 + <label class="rbt-1 radio-btn on" data-id="1"></label> 个人
  98 + </span>
  99 + <span class="radio-wrap">
  100 + <label class="rbt-2 radio-btn" data-id="2"></label> 单位
  101 + </span>
  102 +
  103 + <div class="company-row hide">
  104 + <input id="company-name" class="company-name" type="text" placeholder="请填写单位名称">
  105 + <span class="input-tip invoice-title-tip red hide">
  106 + <span class="iconfont">&#xe629;</span>
  107 + 请填写发票抬头
  108 + </span>
  109 + </div>
  110 + </div>
  111 + </li>
  112 + <li class="invoice-goods-type invoice-row">
  113 + <span class="row-title">
  114 + <em>*</em>
  115 + 发票内容：
  116 + </span>
  117 + <div class="row-content">
  118 + {{#each invoices.invoiceContentList}}
  119 + <span class="radio-wrap">
  120 + <label class="radio-btn rbc-{{invoices_type_id}}{{#if @first}} on{{/if}}" data-id="{{invoices_type_id}}" data-name="{{invoices_type_name}}"></label> {{invoices_type_name}}
  121 + </span>
  122 + {{/each}}
  123 + </div>
  124 + </li>
  125 + <li class="receiver invoice-row">
  126 + <span class="row-title">
  127 + <em>*</em>
  128 + 手机号码：
  129 + </span>
  130 + <div class="row-content">
  131 + <input id="receiver-phone" class="receiver-phone" type="text">
  132 + <span class="input-tip receiver-tip red hide">
  133 + <span class="iconfont">&#xe629;</span>
  134 + <em></em>
  135 + </span>
  136 + </div>
  137 + </li>
  138 + </ul>
  139 + </div>
  140 +</script>
@@ -12,6 +12,7 @@ var payWay, @@ -12,6 +12,7 @@ var payWay,
12 deliveryWay; 12 deliveryWay;
13 13
14 require('./order-new/address'); 14 require('./order-new/address');
  15 +require('./order-new/invoice');
15 16
16 // 支付方式 17 // 支付方式
17 payWay = { 18 payWay = {
@@ -129,17 +130,6 @@ deliveryWay = { @@ -129,17 +130,6 @@ deliveryWay = {
129 // 更新订单送货时间数据 130 // 更新订单送货时间数据
130 that.updateOrder({time: $this.data('id')}); 131 that.updateOrder({time: $this.data('id')});
131 }); 132 });
132 -  
133 - // 仅前端展示，该数据无作用，接口不接受此参数  
134 - $('.delivery-time-wrap .radio-btn').click(function() {  
135 - var $this = $(this);  
136 -  
137 - if ($this.hasClass('on')) {  
138 - return;  
139 - }  
140 - $this.siblings('.on').removeClass('on');  
141 - $this.addClass('on');  
142 - });  
143 }, 133 },
144 updateOrder: function(info) { 134 updateOrder: function(info) {
145 if (!info) { 135 if (!info) {
@@ -145,11 +145,11 @@ function setDefaultAddr(id, cb) { @@ -145,11 +145,11 @@ function setDefaultAddr(id, cb) {
145 $.ajax({ 145 $.ajax({
146 url: '/cart/address/setdefault', 146 url: '/cart/address/setdefault',
147 type: 'POST', 147 type: 'POST',
148 - data: {id: id}, 148 + data: {id: id}
149 }).done(function(data) { 149 }).done(function(data) {
150 if (data.code === 200 && cb && typeof cb === 'function') { 150 if (data.code === 200 && cb && typeof cb === 'function') {
151 - cb();  
152 addrDefault = id; 151 addrDefault = id;
  152 + return cb();
153 } 153 }
154 }); 154 });
155 } 155 }
@@ -252,7 +252,7 @@ function newEditAddress(title, info, $el) { @@ -252,7 +252,7 @@ function newEditAddress(title, info, $el) {
252 $.ajax({ 252 $.ajax({
253 url: '/cart/address/save', 253 url: '/cart/address/save',
254 type: 'POST', 254 type: 'POST',
255 - data: data, 255 + data: data
256 }).done(function(resData) { 256 }).done(function(resData) {
257 if (resData.code === 200) { 257 if (resData.code === 200) {
258 $.extend(data, area.text()); 258 $.extend(data, area.text());
@@ -359,11 +359,10 @@ $addrWrap.on('click', '.addr-item', function() { @@ -359,11 +359,10 @@ $addrWrap.on('click', '.addr-item', function() {
359 }).show(); 359 }).show();
360 }); 360 });
361 361
362 -$('.addr-opt').on('click', 'span', function(event) { 362 +$('.addr-opt').on('click', 'span', function() {
363 var $this = $(this).parent(), 363 var $this = $(this).parent(),
364 $sel; 364 $sel;
365 - var height = 650,  
366 - index; 365 + var height = 650;
367 366
368 if ($this.hasClass('open')) { 367 if ($this.hasClass('open')) {
369 height = 212; 368 height = 212;
  1 +/**
  2 + * 订单结算页
  3 + * @author: yyq<yanqing.yang@yoho.cn>
  4 + * @date: 2016/12/29
  5 + */
  6 +
  7 +var $ = require('yoho-jquery');
  8 +
  9 +var Dialog = require('../../common/dialog').Dialog;
  10 +
  11 +var $invoiceRadio = $('#invoice-radio');
  12 +
  13 +var invoiceTpl = $('#invoice-chose-tpl').html();
  14 +
  15 +var invoiceInfo = {};
  16 +
  17 +function validateInvoice($el, info) {
  18 + var pass = true;
  19 + var $receiverTip;
  20 +
  21 + // 发票抬头
  22 + if (!info.titleName) {
  23 + pass = false;
  24 + $('.invoice-title-tip', $el).removeClass('hide');
  25 + } else {
  26 + $('.invoice-title-tip', $el).addClass('hide');
  27 + }
  28 +
  29 + // 收票人手机号
  30 + if (info.invocesType * 1 === 2) {
  31 + $receiverTip = $('.receiver-tip', $el);
  32 +
  33 + if (!info.receiver) {
  34 + $receiverTip.removeClass('hide').find('em').html('请填写手机号码');
  35 + pass = false;
  36 + } else if (!/^[0-9]{11}$/.test(info.receiver)) {
  37 + $receiverTip.removeClass('hide').find('em').html('手机号码不正确');
  38 + pass = false;
  39 + } else {
  40 + $receiverTip.addClass('hide');
  41 + }
  42 + }
  43 +
  44 + return pass;
  45 +}
  46 +
  47 +function bindInvoiceEvent($el) {
  48 + var $invoiceTypeWrap = $('.invoice-type', $el),
  49 + $titleWrap = $('.invoice-title', $el),
  50 + $goodsTypeWrap = $('.invoice-goods-type', $el),
  51 + $receiver = $('.receiver', $el),
  52 + $companyRow = $('.company-row', $el);
  53 +
  54 + $invoiceTypeWrap.on('click', 'li', function() {
  55 + var $this = $(this);
  56 +
  57 + if ($this.hasClass('focus')) {
  58 + return;
  59 + }
  60 +
  61 + if ($this.hasClass('el-invoice')) {
  62 + $receiver.removeClass('hide');
  63 + } else {
  64 + $receiver.addClass('hide');
  65 + }
  66 +
  67 + $this.siblings('.focus').removeClass('focus');
  68 + $this.addClass('focus');
  69 + });
  70 +
  71 + $titleWrap.on('click', '.radio-btn', function() {
  72 + var $this = $(this),
  73 + id = $this.data('id');
  74 +
  75 + if ($this.hasClass('on')) {
  76 + return;
  77 + }
  78 +
  79 + if (id * 1 === 2) {
  80 + $companyRow.removeClass('hide');
  81 + } else {
  82 + $companyRow.addClass('hide');
  83 + }
  84 +
  85 + $titleWrap.find('.on').removeClass('on');
  86 + $this.addClass('on');
  87 + });
  88 +
  89 + $goodsTypeWrap.on('click', '.radio-btn', function() {
  90 + var $this = $(this);
  91 +
  92 + if ($this.hasClass('on')) {
  93 + return;
  94 + }
  95 +
  96 + $goodsTypeWrap.find('.on').removeClass('on');
  97 + $this.addClass('on');
  98 + });
  99 +}
  100 +
  101 +function bindInvoiceInfo($el, info) {
  102 + info = info || {};
  103 +
  104 + // 发票类型
  105 + if (info.invocesType === 1) {
  106 + $('.pa-invoice', $el).trigger('click');
  107 + }
  108 +
  109 + if (info.titleId) {
  110 + $('.rbt-' + info.titleId).trigger('click');
  111 +
  112 + if (info.titleId === 2 && info.titleName) {
  113 + $('#company-name', $el).val(info.titleName);
  114 + }
  115 + }
  116 +
  117 + if (info.contentId) {
  118 + $('.rbc-' + info.contentId, $el).trigger('click');
  119 + }
  120 +
  121 + $('#receiver-phone', $el).val(info.receiver || '');
  122 +}
  123 +
  124 +function packInvoiceInfo($el) {
  125 + var $goodsType = $('.invoice-goods-type .on', $el);
  126 + var resData = {},
  127 + receiver = $('#receiver-phone', $el).val();
  128 +
  129 + if ($('.pa-invoice', $el).hasClass('focus')) {
  130 + resData.invocesType = 1;
  131 + } else {
  132 + resData.invocesType = 2;
  133 + }
  134 +
  135 + resData.titleId = $('.invoice-title .on', $el).data('id') || 1;
  136 +
  137 + if (resData.titleId * 1 === 1) {
  138 + resData.titleName = '个人';
  139 + } else {
  140 + resData.titleName = $('#company-name', $el).val();
  141 + }
  142 +
  143 + resData.contentId = $goodsType.data('id');
  144 + resData.contentName = $goodsType.data('name');
  145 +
  146 + if (receiver) {
  147 + resData.receiver = receiver;
  148 + }
  149 +
  150 + return resData;
  151 +}
  152 +
  153 +function setShowInvoiceInfo() {
  154 + var $dom = $invoiceRadio.next();
  155 + var _h = '';
  156 +
  157 + if (!invoiceInfo.invocesType) {
  158 + $dom.addClass('hide');
  159 + return;
  160 + }
  161 +
  162 + if (invoiceInfo.invocesType * 1 === 1) {
  163 + _h += '纸质发票';
  164 + } else {
  165 + _h += '电子发票';
  166 + }
  167 +
  168 + _h += '&nbsp;&nbsp;&nbsp;&nbsp;' + invoiceInfo.titleName +
  169 + '&nbsp;&nbsp;&nbsp;&nbsp;' + invoiceInfo.contentName;
  170 +
  171 + $dom.removeClass('hide').find('span').html(_h);
  172 +}
  173 +
  174 +function invoiceEditDialog(baseInfo) {
  175 + var invoice = new Dialog({
  176 + content: invoiceTpl,
  177 + className: 'ensure-invoice-dialog',
  178 + btns: [
  179 + {
  180 + id: 'save-invoice',
  181 + name: '保存发票信息',
  182 + btnClass: ['save-invoice'],
  183 + cb: function() {
  184 + var info = packInvoiceInfo(invoice.$el);
  185 +
  186 + if (validateInvoice(invoice.$el, info)) {
  187 + $.extend(invoiceInfo, packInvoiceInfo(invoice.$el));
  188 + setShowInvoiceInfo();
  189 + invoice.close();
  190 + }
  191 + }
  192 + },
  193 + {
  194 + id: 'cancel-invoice',
  195 + name: '取消',
  196 + btnClass: ['btn-close'],
  197 + cb: function() {
  198 + invoice.close();
  199 + if (!invoiceInfo.invocesType) {
  200 + $invoiceRadio.removeClass('on');
  201 + }
  202 + }
  203 + }
  204 + ]
  205 + });
  206 +
  207 + bindInvoiceEvent(invoice.$el);
  208 + bindInvoiceInfo(invoice.$el, baseInfo);
  209 +
  210 + return invoice;
  211 +}
  212 +
  213 +$invoiceRadio.click(function() {
  214 + $invoiceRadio.toggleClass('on');
  215 +
  216 + if ($invoiceRadio.hasClass('on')) {
  217 + invoiceEditDialog(invoiceInfo).show();
  218 + } else {
  219 + invoiceInfo = {};
  220 + setShowInvoiceInfo();
  221 + }
  222 +});
  223 +
  224 +$('#modify-invoice').click(function() {
  225 + invoiceEditDialog(invoiceInfo).show();
  226 +});
  227 +
  228 +
  229 +// 获取发票信息
  230 +exports.getInvoice = function() {
  231 + if (!$invoiceRadio.hasClass('on') || !invoiceInfo.invocesType) {
  232 + return;
  233 + }
  234 +
  235 + return {
  236 + invoicesType: invoiceInfo.invocesType,
  237 + invoicesTitle: invoiceInfo.titleName,
  238 + invoicesContent: invoiceInfo.contentId,
  239 + receiver: invoiceInfo.receiver
  240 + };
  241 +};
@@ -451,9 +451,29 @@ @@ -451,9 +451,29 @@
451 border-left: 1px solid $borderColor; 451 border-left: 1px solid $borderColor;
452 border-right: 1px solid $borderColor; 452 border-right: 1px solid $borderColor;
453 453
454 - > p { 454 + .invoice-radio {
455 line-height: 70px; 455 line-height: 70px;
456 - padding-left: 20px; 456 + margin-left: 20px;
  457 + font-size: 14px;
  458 + }
  459 +
  460 + .invoice-info-view {
  461 + display: inline-block;
  462 + float: right;
  463 + line-height: 70px;
  464 + padding-right: 20px;
  465 + font-size: 14px;
  466 +
  467 + > label {
  468 + width: 80px;
  469 + height: 24px;
  470 + line-height: 24px;
  471 + border: 1px solid #444;
  472 + margin-left: 20px;
  473 + display: inline-block;
  474 + text-align: center;
  475 + cursor: pointer;
  476 + }
457 } 477 }
458 } 478 }
459 479
@@ -765,3 +785,138 @@ @@ -765,3 +785,138 @@
765 } 785 }
766 } 786 }
767 } 787 }
  788 +
  789 +.ensure-invoice-dialog {
  790 + $red: #d0021b;
  791 + width: 440px;
  792 + font-size: 14px;
  793 + color: #444;
  794 + background-color: #fff;
  795 +
  796 + .radio-btn {
  797 + &:before {
  798 + content: '';
  799 + width: 15px;
  800 + height: 15px;
  801 + margin-right: 4px;
  802 + background-image: url(/cart/radio-off.png);
  803 + display: inline-block;
  804 + vertical-align: middle;
  805 + position: relative;
  806 + top: -2px;
  807 + cursor: pointer;
  808 + }
  809 +
  810 + &.on:before {
  811 + background-image: url(/cart/radio-on.png);
  812 + }
  813 + }
  814 +
  815 + > .close {
  816 + top: 10px;
  817 + right: 12px;
  818 +
  819 + .iconfont {
  820 + font-size: 32px;
  821 + }
  822 + }
  823 +
  824 + > .content {
  825 + text-align: left;
  826 + }
  827 +
  828 + .invoice-header {
  829 + font-size: 18px;
  830 + padding-bottom: 10px;
  831 + border-bottom: 1px solid #e8e8e8;
  832 + }
  833 +
  834 + .invoice-type {
  835 + padding: 20px 0;
  836 +
  837 + > li {
  838 + width: 98px;
  839 + height: 28px;
  840 + line-height: 28px;
  841 + text-align: center;
  842 + font-size: 14px;
  843 + margin-right: 17px;
  844 + border: 1px solid #505050;
  845 + color: #505050;
  846 + display: inline-block;
  847 + cursor: pointer;
  848 + }
  849 +
  850 + .focus {
  851 + border-color: #d0021b;
  852 + color: #d0021b;
  853 + }
  854 + }
  855 +
  856 + .el-tip {
  857 + background-color: #f5f5f5;
  858 + padding: 14px;
  859 + line-height: 1.5;
  860 +
  861 + > a {
  862 + color: $red;
  863 + display: inline-block;
  864 + padding-top: 12px;
  865 + }
  866 + }
  867 +
  868 + .invoice-row {
  869 + padding-top: 16px;
  870 + padding-left: 84px;
  871 + overflow: hidden;
  872 +
  873 + .row-content {
  874 + width: 110%;
  875 + }
  876 +
  877 + .row-title {
  878 + line-height: 30px;
  879 + position: absolute;
  880 + margin-left: -84px;
  881 +
  882 + > em {
  883 + color: $red;
  884 + margin-right: 3px;
  885 + position: relative;
  886 + top: 2px;
  887 + }
  888 + }
  889 +
  890 + .radio-wrap {
  891 + width: 92px;
  892 + display: inline-block;
  893 + padding: 8px 0;
  894 + }
  895 +
  896 + input {
  897 + width: 194px;
  898 + height: 26px;
  899 + padding: 0 10px;
  900 + }
  901 +
  902 + .red {
  903 + color: $red;
  904 + }
  905 + }
  906 +
  907 + .btns {
  908 + padding-top: 28px;
  909 + padding-bottom: 10px;
  910 +
  911 + .btn {
  912 + width: 130px;
  913 + height: 28px;
  914 + line-height: 28px;
  915 + }
  916 +
  917 + .save-invoice {
  918 + background-color: #000;
  919 + color: #fff;
  920 + }
  921 + }
  922 +}