chenchao / YOHOBUYPC · Commits

Go to a project

Authored by 张丽霞
Commit 764e2f8e5e49b0057664060a177778a3042ca56c 1 parent 56518025

电子发票模板

Inline Side-by-side
Showing 8 changed files with 256 additions and 4 deletions
... ... @@ -389,7 +389,98 @@
</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>电子发票</span>
<span>纸质发票</span>
</div>
<div class="receipt-container receipt-margin">
<div class="e-receipt-desc">
</div>
<div class="invoice-list invoice-title">
<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="请填写单位名称"/>
<i class="enpty-input iconfont">&#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">
<div class="blind">
<input checked="true" type="radio" value="1" name="content" />
<label>服饰</label>
</div>
<div class="blind">
<input type="radio" value="2" name="content" />
<label>图书</label>
</div>
<div class="blind">
<input type="radio" value="3" name="content" />
<label>配件</label>
</div>
<div class="blind">
<input type="radio" value="4" name="content" />
<label>日用品</label>
</div class="blind">
<div class="blind">
<input type="radio" value="5" name="content" />
<label>办公用品</label>
</div>
<div class="blind">
<input type="radio" value="6" name="content" />
<label>体育用品</label>
</div>
<div class="blind">
<input type="radio" value="7" name="content" />
<label>数码产品</label>
</div>
</div>
</div>
<div class="invoice-list invoice-phone hide">
<span class="invoice-star">*</span>
<span class="invoice-list-type">收票人手机</span>
<div class="invoice-line first-line input-line">
<input id="input-mobile" type="text"/>
<i class="enpty-input iconfont">&#xe626; 请填写手机号码</i>
</div>
</div>
</div>
<div class="receipt-footer">
<div class="save-receipt highlight">保存发票信息</div>
<div class="cancel-receipt normal">取消</div>
</div>
</div>
</div>
{{/ orderEnsure}}
<div class="loading"><span></span>请稍后...</div>
</div>
{{> layout/footer}}
... ...

48.3 KB | W: | H:

48.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

23.7 KB | W: | H:

38.2 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

8.64 KB | W: | H:

8.64 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -4,7 +4,10 @@
*/
var $ = require('yoho.jquery'),
$invoiceCheck = $('.invoice');
$invoiceCheck = $('.invoice'),
$receiptInfo = $('.receipt-info'),
$receiptInfoSaveBtn = $('.receipt-info .save-receipt'),
$receiptInfoCancelBtn = $('.receipt-info .cancel-receipt');
var address = require('./address');
... ... @@ -864,8 +867,14 @@ $invoiceCheck.click(function(){
if ($invoiceCheck.attr('checked')) {
$invoiceCheck.addClass('active');
alert('开发票');
$receiptInfo.removeClass('hide');
}
});
$receiptInfoSaveBtn.click(function(){
$receiptInfo.addClass('hide');
});
})
$receiptInfoCancelBtn.click(function(){
$receiptInfo.addClass('hide');
});
... ...
... ... @@ -603,6 +603,158 @@
}
}
}
.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: 200px;
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;
border: 1px solid red;
padding: 5px 15px;
font-size: 14px;
}
}
.e-receipt-desc {
background: url(/order/invoice-desc.png);
width: 100%;
height: 108px;
}
.receipt-margin {
margin-left: 55px;
margin-right: 55px;
}
.invoice-list {
position: relative;
margin-top: 17px;
height: 70px;
.invoice-star {
position: absolute;
top: 0;
left: 0;
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;
}
.invoice-line label {
width: 90px;
display: inline-block;
}
.invoice-line i {
margin-left: 20px;
}
}
.invoice-phone {
height: 40px;
}
.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: red;
}
}
}
.freebie-tag{
background:#9c3;
... ...