wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by 周少峰
Commit 5af3c0a08483cf273d610e74e70f93bc3c690b07 1 parent 4d3d3ba3

invoice page

Inline Side-by-side
Showing 8 changed files with 511 additions and 50 deletions
... ... @@ -278,24 +278,28 @@
</tbody>
</table>
<!--YOHO-->
<div class="play-content clearfix">
<div class="play-left">
<dl class="play-piao-pan pan">
<dt>索要发票</dt>
<dd>
<div class="section-play">
<div class="section-head">发票信息</div>
<div class="play-pan">
<ul>
<li><label>发票抬头 :</label><input type="text" class="textbox" id="piaodesc" /></li>
<li><label>发票类型 :</label> <select class="dropdown" id="piaotype">
<option value="0">请选择</option>
{{#each piaoTypes}}
<option value="{{id}}">{{name}}</option>
{{/each}}
</select> </li>
</ul>
<input class="invoice mes" name="invoice" type="radio" id="" autocomplete="off"/>发票开具
<div class="invoice-content hide">
<div class="invoice-type mes">电子发票</div>
<div class="invoice-partment mes">个人</div>
<div class="invoice-kind mes">服装</div>
<button class="revise mes">修改
</div>
</dd>
</dl>
<div class='invoice-upload hide'>
<div class="invoice-upload-type"></div>
<div class="invoice-upload-content"></div>
<div class="invoice-upload-mobile"></div>
<div class="invoice-upload-title"></div>
</div>
</div>
</div>
<div class="play-content clearfix">
<div class="play-left">
<dl class="play-remark-pan pan">
<dt>添加备注信息</dt>
<dd>
... ... @@ -391,7 +395,71 @@
</div>
</div>
</div>
<div class="receipt-info hide">
<div class="receipt-mask">
</div>
<div class="receipt-info-container">
<div class="receipt-title">发票信息
</div>
<div class="receipt-type receipt-margin">
<span class="e-receipt receipt-type-selected">电子发票</span>
<span class="paper-receipt">纸质发票</span>
</div>
<div class="receipt-container receipt-margin">
<div class="e-receipt-desc">
<a href="{{invoiceUrl}}"></a>
</div>
<div class="invoice-list invoice-title invoice-title-personal-hight">
<span class="invoice-star">*</span>
<span class="invoice-list-type">发票抬头</span>
<div class="invoice-line first-line">
<input checked="true" type="radio" value="1" name="title" />
<label>个人</label>
<input type="radio" value="2" name="title" />
<label>单位</label>
</div>
<div class="invoice-line second-line input-line hide">
<input id="input-organization-name" type="text" placeholder="请填写单位名称" maxlength="30"/>
<i class="enpty-input iconfont hide">&#xe626; 请填写发票抬头</i>
</div>
</div>
<div class="invoice-list invoice-content">
<span class="invoice-star">*</span>
<span class="invoice-list-type">发票内容</span>
<div class="invoice-line first-line">
{{# piaoTypes}}
<div class="blind">
<input {{#if @first}}checked="true"{{/if}} type="radio" value="{{name}}" name="content" data-receiptID="{{id}}"/>
<label>{{name}}</label>
</div>
{{/ piaoTypes}}
</div>
</div>
<div class="invoice-list invoice-phone">
<span class="invoice-star">*</span>
<span class="invoice-list-type">收票人手机</span>
<div class="invoice-line first-line input-line">
<input id="input-mobile" value="{{receiverMobile}}" type="text" maxlength="11"/>
<i class="enpty-input iconfont hide">&#xe626; 请填写手机号码</i>
</div>
</div>
</div>
<div class="receipt-footer">
<div class="save-receipt highlight curser-button">保存发票信息</div>
<div class="cancel-receipt normal curser-button">取消</div>
</div>
</div>
</div>
{{/ orderEnsure}}
<div class="loading"><span></span>请稍后...</div>
</div>
{{> layout/footer}}
... ...
... ... @@ -99,6 +99,25 @@
</div>
{{/ orderInfo}}
<div class="pay-mode">
<p class="sub-title">
<span class="icon"></span>
发票信息
</p>
<div class="content">
{{#if invoiceMode}}
<div class="invoice-type"><p>发票类型：{{invoiceType}}</p>
{{#if pdfUrl}}<a class="invoice-button" href="{{pdfUrl}}">电子发票下载</a>
{{/if}}
</div>
<p>发票抬头：{{title}}</p>
<p>发票内容：{{contentValue}}</p>
{{^}}
<p>暂不需要发票
{{/if}}
</div>
</div>
<div class="order-remark">
<p class="sub-title">
<span class="icon"></span>
... ...
... ... @@ -26,7 +26,8 @@ var $addressManage = $('.address-manage'),
$useNewAddress = $('.use-new-address'),
$existAddressList = $('.exist-address-list'),
$loading = $('.loading'),
$orderEditMain = $('#order-edit-main');
$orderEditMain = $('#order-edit-main'),
$invoiceCheck = $('.invoice');
var cartType = $addressManage.attr('cart-type');
... ... @@ -761,8 +762,10 @@ $('.to-play input.submit').click(function() {
var addressId = $('.exist-address-list input[name="address"]:checked').closest('li').attr('data-id'),
deliveryTimeId = $('.pay-time-modify input[name="pay-time-radio"]:checked').val(),
deliveryWayId = $('.select-express input[name="carriagegroup"]:checked').val(),
invoiceTitle = $('#piaodesc').val(),
invoiceId = $('#piaotype').val(),
invoiceType,
invoiceContent,
receiverMobile,
invoiceTitle,
paymentType = $('.pay-time-modify input[name="pay-type"]:checked').val(),
paymentId = $('.pay-time-modify input[name="pay-type"]:checked').data('pay'),
remark = $('#notedesc').val(),
... ... @@ -774,6 +777,13 @@ $('.to-play input.submit').click(function() {
codeVal = $juangroupInput.val(),
juanCode = !!codeVal ? codeVal : $juangroupInput.closest('li').find('#juancode').val();
if ($invoiceCheck.hasClass('active')) {
invoiceType = $('.invoice-upload-type').html();
invoiceContent = $('.invoice-upload-content').html();
receiverMobile = $('.invoice-upload-mobile').html();
invoiceTitle = $('.invoice-upload-title').html();
}
$loading.show();
if (!!$this.attr('disabled')) {
... ... @@ -791,8 +801,10 @@ $('.to-play input.submit').click(function() {
cartType: cartType,
deliveryTimeId: deliveryTimeId,
deliveryWayId: deliveryWayId,
invoiceType: invoiceType,
invoiceContent: invoiceContent,
receiverMobile: receiverMobile,
invoiceTitle: invoiceTitle,
invoiceId: invoiceId,
paymentId: paymentId,
paymentType: paymentType,
remark: remark,
... ...
... ... @@ -3,9 +3,19 @@
* @time: 2015/12/21
*/
var $ = require('yoho.jquery');
var $ = require('yoho.jquery'),
$invoiceCheck = $('.invoice'),
$receiptInfo = $('.receipt-info'),
$receiptInfoSaveBtn = $('.receipt-info .save-receipt'),
$receiptInfoCancelBtn = $('.receipt-info .cancel-receipt'),
$eReceiptBtn = $('.receipt-type .e-receipt'),
$paperReceiptBtn = $('.receipt-type .paper-receipt');
var address = require('./address');
var address = require('./address'),
receiptTitle = "个人",
receiptMobile = $('#input-mobile').val(),
receiptMobileStar;
var dialog = require('../common/dialog');
... ... @@ -852,3 +862,148 @@ $('.bag').find('ul').each(function() {
$next.hide();
}
});
$invoiceCheck.click(function(){
if ($invoiceCheck.hasClass('active')) {
$invoiceCheck.removeAttr('checked');
$invoiceCheck.removeClass('active');
}
if ($invoiceCheck.attr('checked')) {
$invoiceCheck.addClass('active');
if ($('.invoice-content').hasClass('hide')) {
$receiptInfo.removeClass('hide');
}
}
});
//电子发票
(function receiptMobileToStarString(numb) {
receiptMobileStar = numb.substr(0, 3) + '****' + numb.substr(7);
$('#input-mobile').val(receiptMobileStar);
}(receiptMobile));
function saveReceiptInfo() {
var passInfoVerify = true,
receiptType,
receiptContent,
verifymobile,
receiptTypeID,
invoiceTypeInt,
finalReceiptMobile;
if ($eReceiptBtn.hasClass('receipt-type-selected')) {
receiptType = "电子发票";
invoiceTypeInt = '2';
} else {
receiptType = "纸质发票";
invoiceTypeInt = '1';
}
if (receiptTitle === "单位") {
$('.input-line').each(function(){
if ($(this).find('input').val() === '') {
$(this).find('.enpty-input').removeClass('hide');
passInfoVerify = false;
};
})
};
finalReceiptMobile = $('#input-mobile').val();
if (finalReceiptMobile === receiptMobileStar) {
finalReceiptMobile = receiptMobile;
} else {
verifymobile = /[0-9]{11}/;
if (!verifymobile.test(finalReceiptMobile)) {
$('.invoice-phone .enpty-input').removeClass('hide');
if (finalReceiptMobile.length === 0) {
$('.invoice-phone .enpty-input').html('&#xe626; 请填写手机号码');
} else {
$('.invoice-phone .enpty-input').html('&#xe626; 手机号码不正确');
}
passInfoVerify = false;
}
}
if (!passInfoVerify) {
return;
} else {
$('.invoice-title .enpty-input').addClass('hide');
$('.invoice-phone .enpty-input').addClass('hide');
if (receiptTitle === "单位") {
receiptTitle = $('#input-organization-name').val();
}
}
receiptContent = $('input[name="content"]:checked').val();
receiptTypeID = $('input[name="content"]:checked').data('receiptid');
$('.invoice-type').html(receiptType);
$('.invoice-partment').html(receiptTitle);
$('.invoice-kind').html(receiptContent);
$('.invoice-upload-type').html(invoiceTypeInt);
$('.invoice-upload-content').html(receiptTypeID);
$('.invoice-upload-mobile').html(finalReceiptMobile);
$('.invoice-upload-title').html(receiptTitle);
$receiptInfo.addClass('hide');
$('.invoice-content').removeClass('hide');
}
$receiptInfoSaveBtn.click(function(){
saveReceiptInfo();
});
$receiptInfoCancelBtn.click(function(){
$receiptInfo.addClass('hide');
if ($('.invoice-content').hasClass('hide')) {
$invoiceCheck.removeAttr('checked');
$invoiceCheck.removeClass('active');
} else {
}
});
$('.revise').click(function(){
$receiptInfo.removeClass('hide');
});
$eReceiptBtn.click(function(){
$eReceiptBtn.addClass('receipt-type-selected');
$paperReceiptBtn.removeClass('receipt-type-selected');
$('.e-receipt-desc').removeClass('hide');
});
$paperReceiptBtn.click(function(){
$paperReceiptBtn.addClass('receipt-type-selected');
$eReceiptBtn.removeClass('receipt-type-selected');
$('.e-receipt-desc').addClass('hide');
});
$('.invoice-title').change(function(){
var selectType = $('input[name="title"]:checked').val();
if (selectType === "1") {
receiptTitle = "个人";
$('.invoice-title').addClass('invoice-title-personal-hight');
$('.invoice-title .input-line').addClass('hide');
} else {
receiptTitle = "单位";
$('.invoice-title').removeClass('invoice-title-personal-hight');
$('.invoice-title .input-line').removeClass('hide');
}
})
$('#input-organization-name').bind('input propertychange', function() {
if ($(this).val().length >= 1) {
$('.invoice-title .enpty-input').addClass('hide');
}
});
$('#input-mobile').bind('input propertychange', function() {
if ($(this).val().length >= 1) {
$('.invoice-phone .enpty-input').addClass('hide');
}
});
... ...
... ... @@ -2,6 +2,9 @@
.none{
display: none;
}
.curser-button {
cursor: pointer;
}
.gift{
position: relative;
width: 988px;
... ... @@ -122,7 +125,7 @@
line-height: 18px;
padding: 4px 5px 4px 10px;
color: #666;
background: resolve(/cart/cartnew_tipsbox.png) no-repeat;
background: resolve(/cart/cartnew_tipsbox.png) no-repeat;
position: relative;
float: left;
... ... @@ -130,7 +133,7 @@
width: 17px;
height: 17px;
padding: 0px;
background: url(/cart/i_close_f.png) no-repeat;
background: url(/cart/i_close_f.png) no-repeat;
float: right;
cursor: pointer;
}
... ... @@ -176,7 +179,7 @@
color: #c21250;
display: block;
}
}
.giftInfo{
margin-left: 30px;
}
... ... @@ -317,10 +320,10 @@
font-size: 10px;
}
.minus{
background: url(/cart/ico_minus.png);
background: url(/cart/ico_minus.png);
}
.plus{
background: url(/cart/ico_plus.png);
background: url(/cart/ico_plus.png);
}
}
.cart-add-btn{
... ... @@ -347,7 +350,7 @@
position: relative;
border: 1px solid #dcdcdc;
background: #ebebeb;
border-radius: 3px;
border-radius: 3px;
}
.cart-del-btn,.cart-remove-btn {
height: 22px;
... ...
... ... @@ -6,7 +6,6 @@
}
.status {
margin: 10px 0;
padding: 10px;
background: #efefef;
border-bottom: 1px solid #e6e6e6;
... ... @@ -23,28 +22,7 @@
.complete-tip {
color: #999;
}
.cancel-order{
float:right;
margin-right: 20px;
background: #ebebeb;
border: 1px solid #c1c1c1;
color: #000;
}
.edit-order{
float:right;
background: #ebebeb;
border: 1px solid #c1c1c1;
color: #000;
}
.edit-order-active{
background: #444;
border: 1px solid #444;
color: #fff;
}
.go-pay{
margin-left: 60px;
}
}
.detail-info {
padding: 10px;
... ... @@ -165,6 +143,22 @@
.trace-order th {
line-height: 18px;
}
.invoice-type {
display: inline-block;
p {
display: inline-block;
}
}
.invoice-button {
display: inline-block;
margin-left: 20px;
color: #d93549;
border:1px solid #444444;
padding: 5px;
}
.differentOrder{
position: relative;
width: 100%;
... ...
... ... @@ -603,6 +603,189 @@
}
}
}
.receipt-info {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%!important;
.receipt-mask {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
opacity: 0.4;
z-index: 1000;
}
.receipt-info-container {
position: fixed;
top: 5%;
left: 0;
right: 0;
width: 700px;
height: auto;
margin-left: auto;
margin-right: auto;
background-color: #fff;
border: 3px solid #444;
}
.receipt-title {
margin: 42px 55px 0;
text-align: left;
font-size: 16px;
padding-bottom: 20px;
border-bottom: 3px solid #888;
}
.receipt-type {
margin: 17px 0;
span {
margin-right: 17px;
padding: 5px 15px;
font-size: 14px;
border: 1px solid #e0e0e0;
color: #505050;
}
.receipt-type-selected {
border: 1px solid #d0021b;
color: #d0021b;
}
}
.e-receipt-desc {
position: relative;
background: url(/order/invoice-desc.png);
width: 100%;
height: 108px;
a {
position: absolute;
left: 0;
bottom: 0;
width: 150px;
height: 40px;
}
}
.receipt-margin {
margin-left: 55px;
margin-right: 55px;
}
.invoice-list {
position: relative;
margin-top: 17px;
height: 90px;
.invoice-star {
position: absolute;
top: 0;
left: 0;
margin-top: 5px;
width: 12px;
height: 20px;
line-height: 20px;
font-size: 20px;
color: #d0021b;
text-align: center;
}
.invoice-list-type {
position: absolute;
top: 0;
left: 15px;
width: 80px;
height: 20px;
line-height: 20px;
font-size: 14px
}
.invoice-line {
position: absolute;
left: 120px;
width: 500px;
height: 30px;
}
.first-line {
top: 0;
}
.second-line {
top: 30px;
}
.input-line {
height: 40px;
input {
width: 200px;
height: 30px;
font-size: 14px;
}
}
.invoice-line label {
width: 90px;
display: inline-block;
}
.invoice-line i {
margin-left: 20px;
}
}
.invoice-title-personal-hight {
height: 30px;
}
.invoice-phone {
height: 40px;
}
.invoice-title_group{
height: 90px;
}
.blind {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
}
.receipt-footer {
margin-left: 160px;
div {
display: inline-block;
width: 140px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 30px 20px 35px 20px;
}
.highlight {
border: 1px solid #3a3a3a;
background: #3a3a3a;
color: #fff;
}
.normal {
border: 1px solid #b0b0b0;
background: #fff;
color: #444;
}
}
.enpty-input {
color: #d3132a;
}
}
}
.freebie-tag{
background:#9c3;
... ...
... ... @@ -87,6 +87,33 @@
}
}
.section-play {
margin: 20px auto;
border: 1px solid #ccc;
.section-head {
line-height: 40px;
background: #eaeaea;;
font-size: 14px;
padding-left: 20px;
font-weight: 500;
}
.play-pan {
padding-left: 20px;
line-height: 60px;
font-size: 10px;
display: inline-block;
}
.invoice-content {
display: inline-block;
}
.mes {
display: inline-block;
margin: 10px;
}
}
.play-content {
padding: 10px;
... ...