fe / YOHOBUYWAP · Commits

Go to a project

Authored by 王水玲
Commit 19c415ba210b7cfe5176263a28919cb78bccd711 1 parent 2e7d4ac2

发票

Inline Side-by-side
Showing 10 changed files with 503 additions and 28 deletions
@@ -7,5 +7,6 @@ @@ -7,5 +7,6 @@
7 require('./cart'); 7 require('./cart');
8 require('./gift-advance'); 8 require('./gift-advance');
9 require('./order-ensure'); 9 require('./order-ensure');
  10 +require('./invoice-info');
10 require('./select-coupon'); 11 require('./select-coupon');
11 require('./select-address'); 12 require('./select-address');
  1 +/**
  2 + * 发票信息
  3 + * @author: wsl<shuiling.wang@yoho.cn>
  4 + * @date: 2016/6/14
  5 + */
  6 +
  7 +var $ = require('jquery'),
  8 + tip = require('../plugin/tip'),
  9 + dialog = require('../me/dialog'),
  10 + order = require('./order-info');
  11 +
  12 +var $invoiceNotice = $('.invoice-notice'),
  13 + $companyArea = $('.company-area'),
  14 + $editFlag = $('.edit-flag'),
  15 + $chooseCont = $('.choose-cont'),
  16 + $invoiceType = $('.invoice-type'),
  17 + $tel = $('.tel'),
  18 + $company = $('.company'),
  19 + orderInfo = order.orderInfo,
  20 + $chooseContLi = $('.invoice-cont').find('.icon-cb-radio').parent();
  21 +
  22 +var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
  23 + linkUrl = '/cart/index/orderEnsure?cartType=ordinary';
  24 +
  25 +require('../common');
  26 +
  27 +if (window.getUid() !== orderInfo('uid')) {
  28 + order.init();
  29 + window.location.reload();
  30 +}
  31 +
  32 +//单选效果
  33 +function chooseAction(pDom, dom) {
  34 + if (dom.hasClass('icon-cb-radio')) {
  35 + return;
  36 + } else {
  37 + pDom.find('.choose').removeClass('icon-cb-radio icon-radio').addClass('icon-radio');
  38 + dom.removeClass('icon-radio').addClass('icon-cb-radio');
  39 + dom.parent().addClass('on');
  40 + dom.parent().siblings().removeClass('on');
  41 + $editFlag.val('true');
  42 + }
  43 +}
  44 +
  45 +// 确认表单事件
  46 +function confirmAction() {
  47 + var type = $invoiceType.find('.on').data('id'),
  48 + title = $('.invoice-top').find('.on').text(),
  49 + tel = $tel.attr('data-tel'),
  50 + company = $company.val(),
  51 + cont = $chooseCont.data('id');
  52 +
  53 + if ($editFlag.val() === 'true') {
  54 + if (!myreg.test($tel.attr('data-tel'))) {
  55 + tip.show('请输入正确手机号');
  56 + $tel.focus();
  57 + return false;
  58 + } else if (title === '单位' && company.length === 0) {
  59 + tip.show('请填写发票抬头');
  60 + $company.focus();
  61 + return false;
  62 + } else if (title === '单位' && company.length > 30) {
  63 + tip.show('发票抬头不得超过30个汉字');
  64 + $company.focus();
  65 + return false;
  66 + } else {
  67 + dialog.showDialog({
  68 + dialogText: '确认保存修改内容？',
  69 + hasFooter: {
  70 + leftBtnText: '取消',
  71 + rightBtnText: '确定'
  72 + }
  73 + }, function() {
  74 + orderInfo('invoiceText', (title === '单位' ? company : ''));
  75 + orderInfo('invoiceType', cont);
  76 + orderInfo('receiverMobile', tel);
  77 + orderInfo('invoicesType', type);
  78 + orderInfo('invoiceTitle', title);
  79 +
  80 + dialog.showDialog({
  81 + dialogText: '保存成功',
  82 + autoHide: true,
  83 + fast: true
  84 + });
  85 + window.location.href = linkUrl;
  86 + }, function() {
  87 + window.location.href = linkUrl;
  88 + });
  89 + }
  90 + } else {
  91 + window.location.href = linkUrl;
  92 + }
  93 +}
  94 +
  95 +$chooseCont.html($chooseContLi.text()).attr('data-id', $chooseContLi.find('span').data('id'));
  96 +
  97 +// 发票抬头、发票内容选择
  98 +$('.invoice-top span, .invoice-cont li').not('.invoice-cont .cont-title').on('touchstart', function(e) {
  99 + chooseAction($(this).parent(), $(this).find('.choose'));
  100 +
  101 + if ($(this).parent().hasClass('invoice-cont')) {
  102 + $chooseCont.html($(this).text()).attr('data-id', $(this).find('span').data('id'));
  103 + }
  104 +
  105 + if ($(this).text() === '单位') {
  106 + $companyArea.slideDown();
  107 + }
  108 +
  109 + if ($(this).text() === '个人') {
  110 + $companyArea.slideUp();
  111 + }
  112 +});
  113 +
  114 +// 发票类型选择
  115 +$('.invoice-type span').on('touchstart', function() {
  116 + if ($(this).hasClass('on')) {
  117 + return;
  118 + } else {
  119 + $(this).addClass('on').siblings().removeClass('on');
  120 + $editFlag.val('true');
  121 + }
  122 +});
  123 +
  124 +// 发票须知
  125 +$('.invoice-btn').on('touchstart', function() {
  126 + $invoiceNotice.fadeIn();
  127 + return false;
  128 +});
  129 +
  130 +// 关闭发票须知弹框
  131 +$('.think-ok, .mask-bg').on('touchstart', function() {
  132 + $invoiceNotice.fadeOut();
  133 +});
  134 +
  135 +// 电话清空
  136 +$('.istel').one('input', function() {
  137 + $(this).val('').removeClass('istel');
  138 +});
  139 +
  140 +$tel.on('input', function() {
  141 + $(this).attr('data-tel', $(this).val());
  142 + $editFlag.val('true');
  143 +});
  144 +
  145 +$company.on('input', function() {
  146 + $editFlag.val('true');
  147 +});
  148 +
  149 +// 确认及返回事件
  150 +$('.confirm-btn, .nav-back').on('touchstart', function(e) {
  151 + e.preventDefault();
  152 + confirmAction();
  153 +});
  154 +
  155 +// initData();
@@ -23,6 +23,21 @@ var $invoice = $('.invoice'), @@ -23,6 +23,21 @@ var $invoice = $('.invoice'),
23 dispatchInfo, 23 dispatchInfo,
24 total; 24 total;
25 25
  26 +var orderCont = window.cookie('order-info') && JSON.parse(window.cookie('order-info'));
  27 +var invoiceCont = {
  28 + 7: '服装',
  29 + 1: '图书',
  30 + 9: '配件',
  31 + 11: '日用品',
  32 + 3: '办公用品',
  33 + 6: '体育用品',
  34 + 10: '数码产品'
  35 + },
  36 + invoicesType = {
  37 + 1: '纸质',
  38 + 2: '电子'
  39 + };
  40 +
26 require('../common'); 41 require('../common');
27 42
28 lazyLoad(); 43 lazyLoad();
@@ -107,9 +122,19 @@ $invoice.on('touchend', '.checkbox', function() { @@ -107,9 +122,19 @@ $invoice.on('touchend', '.checkbox', function() {
107 122
108 if ($this.hasClass('icon-cb-radio')) { 123 if ($this.hasClass('icon-cb-radio')) {
109 $invoice.addClass('focus'); 124 $invoice.addClass('focus');
  125 + orderInfo('invoiceText', '');
  126 + orderInfo('invoiceType', '7');
  127 + orderInfo('receiverMobile', $('.user-mobile').val());
  128 + orderInfo('invoicesType', '2');
  129 + orderInfo('invoiceTitle', '个人');
110 } 130 }
111 if ($this.hasClass('icon-radio')) { 131 if ($this.hasClass('icon-radio')) {
112 $invoice.removeClass('focus'); 132 $invoice.removeClass('focus');
  133 + orderInfo('invoiceText', null);
  134 + orderInfo('invoiceType', null);
  135 + orderInfo('receiverMobile', null);
  136 + orderInfo('invoicesType', null);
  137 + orderInfo('invoiceTitle', null);
113 } 138 }
114 }); 139 });
115 140
@@ -189,16 +214,18 @@ function submitOrder() { @@ -189,16 +214,18 @@ function submitOrder() {
189 if (isSubmiting) { 214 if (isSubmiting) {
190 return false; 215 return false;
191 } 216 }
192 - if (orderInfo('invoice')) {  
193 - if (!invoiceText) {  
194 - tip.show('请输入发票抬头');  
195 - return;  
196 - }  
197 - if (invoiceText.length > 30) {  
198 - tip.show('发票抬头不得超过30个汉字');  
199 - return;  
200 - }  
201 - } 217 +
  218 + // if (orderInfo('invoice')) {
  219 + // if (!invoiceText) {
  220 + // tip.show('请输入发票抬头');
  221 + // return;
  222 + // }
  223 + // if (invoiceText.length > 30) {
  224 + // tip.show('发票抬头不得超过30个汉字');
  225 + // return;
  226 + // }
  227 + // }
  228 +
202 if (msg) { 229 if (msg) {
203 if (msg.length > 40) { 230 if (msg.length > 40) {
204 tip.show('留言不得超过40个汉字'); 231 tip.show('留言不得超过40个汉字');
@@ -373,3 +400,9 @@ if (orderInfo('address') && orderInfo('address').is_support === 'N') { @@ -373,3 +400,9 @@ if (orderInfo('address') && orderInfo('address').is_support === 'N') {
373 orderInfo('deliveryId', $('.delivery-id .icon-cb-radio').data('id')); 400 orderInfo('deliveryId', $('.delivery-id .icon-cb-radio').data('id'));
374 orderCompute(); 401 orderCompute();
375 } 402 }
  403 +
  404 +if (orderCont.invoiceType) {
  405 + $('.invoice-type').text(invoiceCont[orderCont.invoiceType] + '(' + invoicesType[orderCont.invoicesType] + ')');
  406 +} else {
  407 + $('.invoice-type').text('服装(电子)');
  408 +}
@@ -21,6 +21,9 @@ function init() { @@ -21,6 +21,9 @@ function init() {
21 invoice: null, 21 invoice: null,
22 invoiceText: null, 22 invoiceText: null,
23 invoiceType: null, 23 invoiceType: null,
  24 + invoiceTitle: null,
  25 + receiverMobile: null,
  26 + invoicesType: null,
24 msg: null, 27 msg: null,
25 cartType: 'ordinary' 28 cartType: 'ordinary'
26 }; 29 };
@@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
4 @import "order-ensure"; 4 @import "order-ensure";
5 @import "select-coupon"; 5 @import "select-coupon";
6 @import "select-address"; 6 @import "select-address";
  7 +@import "invoice-info";
7 8
8 9
9 .icon-checkbox:before { content: "\e61c"; } 10 .icon-checkbox:before { content: "\e61c"; }
  1 +.invoice-info-page {
  2 + background: #f0f0f0;
  3 +
  4 + .invoice-btn {
  5 + position: absolute;
  6 + right: 30px;
  7 + width: auto;
  8 + font-size: 28px;
  9 + }
  10 +
  11 + .title {
  12 + color: #444;
  13 + font-size: 28px;
  14 + float: left;
  15 + }
  16 +
  17 + .invoice-form {
  18 + background: #fff;
  19 + border-bottom: 1px solid #e0e0e0;
  20 + padding: 0 30px;
  21 + box-sizing: border-box;
  22 + overflow: hidden;
  23 +
  24 + li {
  25 + width: 100%;
  26 + clear: both;
  27 + margin-top: 15px;
  28 + line-height: 60px;
  29 + float: left;
  30 + }
  31 +
  32 + li:first-child {
  33 + margin-bottom: 15px;
  34 + }
  35 +
  36 + li:last-child {
  37 + margin-bottom: 10px;
  38 + }
  39 +
  40 + .company {
  41 + width: 100%;
  42 + height: 88px;
  43 + line-height: 88px;
  44 + border-radius: 8px;
  45 + border: 1px solid #e0e0e0;
  46 + font-size: 28px;
  47 + color: #b0b0b0;
  48 + padding: 0 20px;
  49 + margin-bottom: 15px;
  50 + }
  51 +
  52 + .tel {
  53 + border: none;
  54 + font-size: 24px;
  55 + line-height: 60px;
  56 + width: 400px;
  57 + }
  58 +
  59 + .invoice-type {
  60 + float: left;
  61 +
  62 + span {
  63 + width: 120px;
  64 + height: 60px;
  65 + line-height: 60px;
  66 + text-align: center;
  67 + font-size: 24px;
  68 + color: #b0b0b0;
  69 + border-radius: 5px;
  70 + border: 1px solid #b0b0b0;
  71 + display: inline-block;
  72 + background: #fff;
  73 + margin-right: 20px;
  74 + }
  75 +
  76 + .on {
  77 + background: #444;
  78 + border-color: #444;
  79 + color: #fff;
  80 + }
  81 + }
  82 +
  83 + .invoice-top {
  84 + float: left;
  85 +
  86 + span {
  87 + color: #444;
  88 + font-size: 28px;
  89 + margin-right: 55px;
  90 + }
  91 + }
  92 +
  93 + .phone {
  94 + color: #b0b0b0;
  95 + font-size: 28px;
  96 + }
  97 + }
  98 +
  99 + .invoice-cont {
  100 + background: #fff;
  101 + margin-top: 30px;
  102 + border-top: 1px solid #e0e0e0;
  103 + padding: 0 30px;
  104 + box-sizing: border-box;
  105 + color: #444;
  106 + font-size: 28px;
  107 + line-height: 48px;
  108 + overflow: hidden;
  109 + padding-bottom: 20px;
  110 +
  111 + li {
  112 + width: 100%;
  113 + margin-top: 28px;
  114 + float: left;
  115 + }
  116 +
  117 + .choose-cont {
  118 + float: right;
  119 + }
  120 + }
  121 +
  122 + .choose {
  123 + font-size: 44px;
  124 + display: inline-block;
  125 + vertical-align: top;
  126 + margin-right: 20px;
  127 + }
  128 +
  129 + .icon-radio {
  130 + color: #b0b0b0;
  131 + }
  132 +
  133 + .btn-area {
  134 + width: 100%;
  135 + border-top: 1px solid #e0e0e0;
  136 + background: #fff;
  137 +
  138 + .confirm-btn {
  139 + width: 259px;
  140 + height: 88px;
  141 + line-height: 88px;
  142 + text-align: center;
  143 + background: #d0021b;
  144 + color: #fff;
  145 + display: block;
  146 + margin: 0 auto;
  147 + border-radius: 8px;
  148 + font-size: 28px;
  149 + margin-top: 18px;
  150 + }
  151 + }
  152 +
  153 + .invoice-notice {
  154 + position: fixed;
  155 + left: 0;
  156 + right: 0;
  157 + top: 0;
  158 + bottom: 0;
  159 + display: none;
  160 + z-index: 9;
  161 +
  162 + .mask-bg {
  163 + background: rgba(0,0,0,0.4);
  164 + position: absolute;
  165 + top: 0;
  166 + left: 0;
  167 + right: 0;
  168 + bottom: 0;
  169 + }
  170 +
  171 + .notice-area {
  172 + width: 540px;
  173 + height: 400px;
  174 + background: #fafafa;
  175 + border-radius: 10px;
  176 + transform: translate(-50%, -50%);
  177 + position: absolute;
  178 + top: 50%;
  179 + left: 50%;
  180 +
  181 + .notice-cont {
  182 + padding: 40px;
  183 + }
  184 +
  185 + h2 {
  186 + text-align: center;
  187 + font-size: 28px;
  188 + color: #444;
  189 + padding-bottom: 4px;
  190 + }
  191 +
  192 + p {
  193 + font-size: 24px;
  194 + color: #444;
  195 + line-height: 38px;
  196 + }
  197 +
  198 + .think-ok {
  199 + width: 100%;
  200 + border-top: 1px solid #c5c5c5;
  201 + height: 90px;
  202 + line-height: 90px;
  203 + box-sizing: border-box;
  204 + text-align: center;
  205 + color: #d1021c;
  206 + font-size: 34px;
  207 + }
  208 + }
  209 + }
  210 +}
@@ -495,6 +495,12 @@ @@ -495,6 +495,12 @@
495 #invoice { 495 #invoice {
496 border-top: 1px solid #f7f7f7; 496 border-top: 1px solid #f7f7f7;
497 497
  498 + .invoice-type {
  499 + float: right;
  500 + font-size: 28px;
  501 + color: #444;
  502 + }
  503 +
498 label { 504 label {
499 display: block; 505 display: block;
500 border-top: 1px solid #f7f7f7; 506 border-top: 1px solid #f7f7f7;
  1 +<div class="invoice-info-page yoho-page">
  2 + {{> layout/header}}
  3 +
  4 + <ul class="invoice-form">
  5 + <li>
  6 + <span class="title">发票类型：</span>
  7 + <div class="invoice-type">
  8 + {{#invoicesType}}
  9 + <span {{#if choosed}}class="on"{{/if}} data-id="{{id}}">{{type}}</span>
  10 + {{/invoicesType}}
  11 + </div>
  12 + </li>
  13 + <li>
  14 + <span class="title">发票抬头：</span>
  15 + <div class="invoice-top">
  16 + {{#invoiceTitle}}
  17 + <span {{#if choosed}}class="on"{{/if}}><i class="iconfont choose {{#if choosed}}icon-cb-radio{{else}}icon-radio{{/if}}"></i>{{type}}</span>
  18 + {{/invoiceTitle}}
  19 + </div>
  20 + </li>
  21 + <li>
  22 + <span class="title">*发票人手机：</span>
  23 + <span class="phone">
  24 + <input type="text" name="tel" data-tel="{{completeTel}}" class="tel {{#phone}}istel{{/phone}}" value="{{phone}}" placeholder="可通过手机号在发票服务平台查询">
  25 + </span>
  26 + </li>
  27 +
  28 + <li class="company-area" {{#isCompany}}style="display: none;"{{/isCompany}}><input type="text" name="company" class="company" value="{{companyName}}" placeholder="填写单位名称" maxlength="30"></li>
  29 + </ul>
  30 +
  31 + <ul class="invoice-cont">
  32 + <li class="cont-title">
  33 + <span>发票内容：</span>
  34 + <span class="choose-cont" data-id=""></span>
  35 + </li>
  36 + {{#each content}}
  37 + <li><span class="iconfont choose {{#if choosed}}icon-cb-radio{{else}}icon-radio{{/if}}" data-id="{{id}}"></span>{{text}}</li>
  38 + {{/each}}
  39 + </ul>
  40 +
  41 + <div class="btn-area"><span class="confirm-btn">确认</span></div>
  42 +
  43 + <div class="invoice-notice">
  44 + <div class="mask-bg"></div>
  45 + <div class="notice-area">
  46 + <div class="notice-cont">
  47 + <h2>发票须知</h2>
  48 + <p>1、发票金额不含优惠券/YOHO币/红包/优惠码/运费，只包含商品实付金额</p>
  49 + <p>2、电子发票：是税局认可的有效收付款凭证，其法律效力、基本用途及使用规定同纸质发票，如需纸质发票可自行下载打印</p>
  50 + </div>
  51 + <div class="think-ok">我知道了</div>
  52 + </div>
  53 + </div>
  54 +
  55 + <input type="hidden" class="edit-flag" value="false" />
  56 +
  57 + {{> layout/footer}}
  58 +</div>
@@ -96,22 +96,20 @@ @@ -96,22 +96,20 @@
96 <a href="{{#if isLimit}}javascript:void(0);{{else}}/cart/index/selectCoupon{{/if}}"> 96 <a href="{{#if isLimit}}javascript:void(0);{{else}}/cart/index/selectCoupon{{/if}}">
97 <span class="title">优惠券</span> 97 <span class="title">优惠券</span>
98 {{# coupon}} 98 {{# coupon}}
99 - {{#if isCoupon}}  
100 - <span class="coupon-count">  
101 - {{count}}张可用  
102 - </span>  
103 - {{/if}}  
104 - {{#if couponName}}  
105 - <span class="used coupon-use" data-name="{{couponName}}">  
106 - {{couponName}}  
107 - <i class="iconfont">&#xe614;</i>  
108 - </span>  
109 - {{^}}  
110 - <span class="not-used coupon-use">  
111 - {{#if isLimit}}该商品不可使用优惠券{{else}}未使用{{/if}}  
112 - <i class="iconfont">&#xe614;</i>  
113 - </span>  
114 - {{/if}} 99 + <span class="coupon-count">
  100 + {{count}}张可用
  101 + </span>
  102 + {{#if couponName}}
  103 + <span class="used coupon-use" data-name="{{couponName}}">
  104 + {{couponName}}
  105 + <i class="iconfont">&#xe614;</i>
  106 + </span>
  107 + {{^}}
  108 + <span class="not-used coupon-use">
  109 + {{#if isLimit}}该商品不可使用优惠券{{else}}未使用{{/if}}
  110 + <i class="iconfont">&#xe614;</i>
  111 + </span>
  112 + {{/if}}
115 {{/coupon}} 113 {{/coupon}}
116 </a> 114 </a>
117 </li> 115 </li>
@@ -143,9 +141,14 @@ @@ -143,9 +141,14 @@
143 141
144 {{#if invoice}} 142 {{#if invoice}}
145 <li class="invoice {{#if needInvoice}}focus{{/if}}"> 143 <li class="invoice {{#if needInvoice}}focus{{/if}}">
  144 + <input type="hidden" class="user-mobile" value="{{userMobile}}" />
146 <span class="title">发票</span> 145 <span class="title">发票</span>
147 <span class="iconfont checkbox {{#if needInvoice}}icon-cb-radio{{else}}icon-radio{{/if}}"></span> 146 <span class="iconfont checkbox {{#if needInvoice}}icon-cb-radio{{else}}icon-radio{{/if}}"></span>
148 - <form id="invoice"> 147 + <a id="invoice" class="invoice-info" href="invoiceInfo">
  148 + <span class="title">发票信息</span>
  149 + <span class="invoice-type"><i class="iconfont">&#xe614;</i></span>
  150 + </a>
  151 + <!-- <form id="invoice">
149 <input type="text" name="invoice-title" value="{{invoiceText}}" maxlength="30" placeholder="发票抬头"> 152 <input type="text" name="invoice-title" value="{{invoiceText}}" maxlength="30" placeholder="发票抬头">
150 <label> 153 <label>
151 发票类型 154 发票类型
@@ -155,7 +158,7 @@ @@ -155,7 +158,7 @@
155 {{/ invoice}} 158 {{/ invoice}}
156 </select> 159 </select>
157 </label> 160 </label>
158 - </form> 161 + </form> -->
159 </li> 162 </li>
160 {{/if}} 163 {{/if}}
161 </ul> 164 </ul>
@@ -251,6 +251,11 @@ @@ -251,6 +251,11 @@
251 seajs.use('js/cart/order-ensure'); 251 seajs.use('js/cart/order-ensure');
252 </script> 252 </script>
253 {{/if}} 253 {{/if}}
  254 +{{#if invoiceInfoPage}}
  255 +<script>
  256 + seajs.use('js/cart/invoice-info');
  257 +</script>
  258 +{{/if}}
254 {{#if selectAddressPage}} 259 {{#if selectAddressPage}}
255 <script> 260 <script>
256 seajs.use('js/me/address'); 261 seajs.use('js/me/address');