fe / yoho-blk · Commits

Go to a project

Authored by xuqi
Commit 45da10c08023cc00c6153de327e4da0158e93e1e 1 parent ae37f451

pay style

Inline Side-by-side
Showing 5 changed files with 154 additions and 120 deletions
{{> sign-header}}
<div class="center-content pay-online-wrapper">
{{# order}}
<div class="title">
... ... @@ -8,12 +7,16 @@
<span class="cash right">应付金额：{{paymentAmount}}</span>
</div>
<div class="footer">
<span class="desc left">PADDY.BA<span class="blue">2小时</span>内您无法完成付款，系统会将您的订单取消</span>
<span id="orderDetailCtrl" class="right">收起详情 <span class="iconfont">&#xe616;&#xe617;</span></span>
<span class="desc pay-notice left">{{nickName}}如果<span class="blue">2小时</span>内您无法完成付款，系统会将您的订单取消</span>
<span id="order-detail-ctrl" class="right order-detail-ctrl shrink">
<em>展开详情</em>
<i class="iconfont down">&#xe616;</i>
<i class="iconfont up">&#xe617;</i>
</span>
</div>
</div>
<div class="order-detail">
<div class="order-detail hide">
<div class="row">
<div class="item">
<span class="label"> 收货地址：</span>
... ... @@ -42,45 +45,29 @@
</div>
</div>
{{/order}}
{{# pay}}
<div class="pay-type">
<div class="pay-nav">
<ul class="tabs clearfix">
{{# type}}
<li class="{{#if selected}}active{{/if}}" data-type="{{id}}">{{name}}</li>
{{/type}}
{{#each type}}
<li{{#if selected}} class="active"{{/if}} data-type="{{id}}">{{name}}</li>
{{/each}}
</ul>
</div>
<div id="payItems">
</div>
<div id="online">
{{# onlinePay}}
<div class="pay-type-icon online-pay {{#unless selected}}active{{/unless}}">
{{> pay/online-pay}}
<div class="pay-type-icon online-pay{{#if selected}} active{{/if}}" data-name="{{name}}" data-id="{{id}}">
<img src="{{img}}">
<span class="choose-tag iconfont">&#xe63b;</span>
</div>
{{/onlinePay}}
{{/ onlinePay}}
</div>
{{# debitCard}}
<div class="debit-card {{#unless selected}}hide{{/unless}}">
{{> pay/debit-card}}
</div>
{{/debitCard}}
{{# creditCard}}
<div class="credit-card {{#unless selected}}hide{{/unless}}">
{{> pay/credit-card}}
</div>
{{/creditCard}}
</div>
{{/pay}}
{{/ pay}}
<div class="pay-ctrl">
<a class="btn btn-shape right">去<span id="payTypeName">支付宝</span>支付</a>
<span id="go-pay-btn" class="btn btn-shape right">去<em id="pay-type-name">支付宝</em>支付</span>
</div>
</div>
... ...
<div class="pay-icon-col">
<div >
<img src="{{img}}" alt="">
</div>
<div class="choose-tag"><span class="iconfont">&#xe63b;</span></div>
<div class="pay-icon-col" data-name="{{name}}" data-id="{{id}}">
<img src="{{img}}">
<span class="choose-tag iconfont">&#xe63b;</span>
</div>
\ No newline at end of file
... ...
... ... @@ -2,4 +2,45 @@
* Created by TaoHuang on 2016/7/18.
*/
require('./pay/pay')();
\ No newline at end of file
var $ = require('yoho-jquery');
var $orderDetail = $('.order-detail');
// 展开详情/收起详情
$('#order-detail-ctrl').click(function() {
var $this = $(this);
$this.toggleClass('shrink');
if ($this.hasClass('shrink')) {
// 收起状态
$this.find('em').text('展开详情');
} else {
// 展开状态
$this.find('em').text('收起详情');
}
$orderDetail.toggleClass('hide');
});
$('.pay-type-icon').click(function() {
var $this = $(this);
if ($this.hasClass('active')) {
return;
}
// 切换选中状态
$this.siblings('.active').removeClass('active');
$this.addClass('active');
$('#pay-type-name').text($this.data('name'));
});
// 去支付
$('#go-pay-btn').click(function() {
});
... ...
/**
* Created by TaoHuang on 2016/7/18.
*/
module.exports = function(){
};
\ No newline at end of file
$width: 1150px;
$liWidth: 120px;
$liWidth: 140px;
$liHeight: 40px;
$liBorderColor: #e6e6e6;
$fontColor: #616161;
... ... @@ -14,16 +14,45 @@ $fontColor: #616161;
.content {
font-weight: bold;
height: 40px;
}
.footer {
height: 20px;
}
}
.pay-notice {
color: #999;
font-size: 14px;
}
.order-detail-ctrl {
font-size: 14px;
cursor: pointer;
/* 默认情况为收起状态 箭头方向为上 */
&.shrink {
.desc {
.up {
display: inline-block;
}
.cash {
.down {
display: none;
}
}
.footer {
height: 20px;
.up {
display: none;
}
.down {
display: inline-block;
}
.iconfont {
font-size: 12px;
margin-left: 10px;
}
}
... ... @@ -39,88 +68,78 @@ $fontColor: #616161;
.item {
float: left;
width: calc($width / 2 - 31px);
.label {
}
}
}
}
.pay-type {
.pay-nav {
height: calc($liHeight + 2px);
line-height: calc($liHeight + 2px);
border-bottom: 1px solid $liBorderColor;
z-index: 0;
clear: both;
.pay-nav {
height: calc($liHeight + 2px);
line-height: calc($liHeight + 2px);
border-bottom: 1px solid $liBorderColor;
z-index: 0;
clear: both;
.tabs {
display: inline-block;
height: $liHeight;
.tabs {
display: inline-block;
height: $liHeight;
li {
width: $liWidth;
height: $liHeight;
line-height: $liHeight;
float: left;
font-size: 16px;
text-align: center;
background-color: #fff;
color: $fontColor;
cursor: pointer;
position: relative;
&.active {
border: 1px solid $liBorderColor;
height: calc($liHeight + 1px);
line-height: calc($liHeight - 2px);
top: 1px;
border-bottom: none;
color: black;
font-weight: bold;
z-index: 3;
}
li {
width: $liWidth;
height: $liHeight;
line-height: $liHeight;
float: left;
font-size: 16px;
text-align: center;
background-color: #fff;
color: $fontColor;
cursor: pointer;
position: relative;
&.active {
border: 1px solid $liBorderColor;
height: calc($liHeight + 1px);
line-height: calc($liHeight - 2px);
top: 1px;
border-bottom: none;
color: #000;
z-index: 3;
}
}
}
}
.pay-type-icon {
float: left;
width: 250px;
height: 80px;
margin-bottom: 30px;
margin-right: 50px;
margin-top: 30px;
position: relative;
border: 1px solid $liBorderColor;
&.active {
border: 2px solid black;
}
.pay-type-icon {
position: relative;
float: left;
width: 250px;
height: 80px;
margin-bottom: 30px;
margin-right: 50px;
margin-top: 30px;
cursor: pointer;
border: 1px solid $liBorderColor;
text-align: center;
.pay-icon-col {
height: 80px;
img {
display: inline-block;
margin-top: 19px;
}
.img-wrapper {
height: 60px;
width: 200px;
}
.choose-tag {
display: none;
position: absolute;
bottom: 0;
right: 0;
height: 22px;
width: 23px;
}
img {
margin: 0 auto;
}
&.active {
border: 2px solid black;
.choose-tag {
position: absolute;
bottom: 0;
right: 0;
height: 22px;
width: 23px;
}
.choose-tag {
display: inline-block;
}
}
}
... ... @@ -136,4 +155,4 @@ $fontColor: #616161;
}
}
}
\ No newline at end of file
}
... ...