fe / yohobuy-node · Commits

Go to a project

Authored by 郝肖肖
Commit a631884340823234f579c4cdd65f7d4f3ac051c7 1 parent 4bec0454

'礼品卡详情样式'

Inline Side-by-side
Showing 3 changed files with 173 additions and 21 deletions
... ... @@ -73,8 +73,8 @@
<p>短信验证码已发送至您的邮箱“michael.han@yoho.cn”</p>
</div>
<div class="verify-input">
<input type="text" placeholder="短信验证码" />
<input type="button" value="获取短信验证码" class="email-code" />
<input type="text" placeholder="短信验证码" class="email-code" />
<input type="button" value="获取短信验证码" class="email-btn" />
</div>
</script>
... ... @@ -83,14 +83,18 @@
<div class="title">绑定手机号</div>
<div class="verify-input">
<p>
<select>
<option>+86</option>
<select class="mobile-area">
<option value="">+86</option>
<option value="">+61</option>
<option value="">+82</option>
<option value="">+1</option>
<option value="">+60</option>
</select>
<input type="text" placeholder="请输入手机号" class="mobile" />
</p>
<p>
<input type="text" placeholder="短信验证码" />
<input type="button" value="获取短信验证码" class="mobile-code" />
<input type="text" placeholder="短信验证码" class="mobile-code" />
<input type="button" value="获取短信验证码" class="mobile-btn" />
</p>
</div>
</script>
... ... @@ -99,7 +103,57 @@
<script id="activate-gift-tpl" type="text/html">
<div class="title">激活礼品卡</div>
<div class="verify-input">
<p><input type="text" placeholder="请输入礼品卡号" class="gift-id" /></p>
<p><input type="text" placeholder="请输入礼品卡密" class="gift-code" /></p>
<p><input type="text" placeholder="请输入礼品卡号" class="card-code" /></p>
<p><input type="text" placeholder="请输入礼品卡密" class="card-pwd" /></p>
</div>
</script>
{{!-- 消费明细 --}}
<script id="detail-gift-tpl" type="text/html">
<div class="info-title">消费明细</div>
<div class="verify-input">
<table class="info-gift-header">
<tr>
<td class="text-left">卡号：L242353456436456</td>
<td>状态：使用中</td>
<td class="text-right validity-time">有效期：2016-04-17 至2017-04-17（即将过期）</td>
</tr>
<tr>
<td class="text-left">面值：2000.00 </td>
<td colspan="2">余额：500.00</td>
</tr>
</table>
<div class="me-gift-info-table">
<div class="me-gift-header">
<div class="card-number">时间</div>
<div class="card-price">订单编号</div>
<div class="card-balance">类型</div>
<div class="activate-time">金额(元)</div>
</div>
<div class="me-gift-tr">
<div>2017-12-21 09:30</div>
<div>3456436456</div>
<div class="consume">消费</div>
<div class="consume">-122</div>
</div>
<div class="me-gift-tr">
<div>2017-12-21 09:30</div>
<div>3456436456</div>
<div class="refund">退款</div>
<div class="refund">+122</div>
</div>
<div class="me-gift-tr">
<div>2017-12-21 09:30</div>
<div>3456436456</div>
<div class="consume">消费</div>
<div class="consume">-122</div>
</div>
<div class="me-gift-tr">
<div>2017-12-21 09:30</div>
<div>3456436456</div>
<div class="refund">退款</div>
<div class="refund">+122</div>
</div>
</div>
</div>
</script>
... ...
... ... @@ -2,7 +2,11 @@ var $ = require('yoho-jquery'),
Hbs = require('yoho-handlebars'),
dialog = require('../common/dialog');
var meGift = {
var meGift;
require('../common');
meGift = {
// 验证邮箱模板
emailTpl: Hbs.compile($('#verify-email-tpl').html()),
... ... @@ -12,15 +16,24 @@ var meGift = {
// 激活礼品卡模板
giftTpl: Hbs.compile($('#activate-gift-tpl').html()),
// 消费明细模板
detailGiftTpl: Hbs.compile($('#detail-gift-tpl').html()),
// 添加礼品卡按钮
$addGift: $('.add-gift'),
init: function() {
var that = this;
// 添加礼品卡
this.$addGift.click(function() {
that.verifyEmailCode();
});
// 消费明细
$('.me-gift-table').on('click', '.info-list', function() {
that.infoList();
});
},
// 我的礼品卡列表
... ... @@ -48,8 +61,8 @@ var meGift = {
name: '绑定手机号',
btnClass: ['alert-sure'],
cb: function() {
that.getMobileCode();
dg.close();
that.getMobileCode();
}
}]
}).show();
... ... @@ -73,8 +86,8 @@ var meGift = {
name: '激活',
btnClass: ['confirm-sure'],
cb: function() {
that.activateGift();
dg.close();
that.activateGift();
}
}]
}).show();
... ... @@ -103,16 +116,26 @@ var meGift = {
name: '激活',
btnClass: ['confirm-sure'],
cb: function() {
that.meAlert('<p>您的礼品卡激活成功</p><p>请尽情享用</p>');
dg.close();
that.meAlert('<p>您的礼品卡激活成功</p><p>请尽情享用</p>');
}
}]
}).show();
},
// 消费明细
infoList: function() {
var that = this;
new dialog.Dialog({
content: that.detailGiftTpl({}),
className: 'me-gift-page me-gift-confirm'
}).show();
},
// 我的弹框
meAlert: function(content) {
let dg = new dialog.Dialog({
var dg = new dialog.Dialog({
content: content,
className: 'me-gift-alert',
btns: [{
... ...
... ... @@ -14,7 +14,8 @@
}
}
.me-gift-table {
.me-gift-table,
.me-gift-info-table {
display: table;
width: 775px;
text-align: center;
... ... @@ -30,7 +31,11 @@
display: table-cell;
vertical-align: middle;
font-size: 13px;
width: 129px;
width: 120px;
&:first-child {
width: 174px;
}
}
}
... ... @@ -56,6 +61,10 @@
}
}
.me-gift-info-table .me-gift-tr div {
width: auto;
}
.cart-list-empty {
background: resolve("home/gift.png") no-repeat center;
background-size: 110px 132px;
... ... @@ -66,6 +75,14 @@
border: 1px solid #e6e6e6;
border-top: none;
}
.refund {
color: #86bf4a;
}
.consume {
color: #d0021b;
}
}
.me-gift-alert {
... ... @@ -86,9 +103,15 @@
.me-gift-confirm {
color: #444;
.title {
.title,
.info-title {
font-size: 18px;
margin-bottom: 25px;
padding-bottom: 25px;
margin: 0 20px;
}
.info-title {
border-bottom: 1px solid #e6e6e6;
}
p {
... ... @@ -96,23 +119,75 @@
}
.verify-input {
margin: 40px 20px;
margin: 15px 20px 40px;
text-align: left;
input {
height: 16px;
padding: 5px;
height: 30px;
line-height: 28px;
padding: 0 5px;
font-size: 14px;
color: #444;
border: 1px solid #e6e6e6;
outline: none;
box-sizing: border-box;
}
input[type=button] {
background-color: #444;
color: #fff;
height: 30px;
height: 29px;
border: none;
cursor: pointer;
}
}
input.mobile {
width: 232px;
}
.mobile-area {
width: 60px;
height: 28px;
text-align: center;
border: 1px solid #e6e6e6;
outline: none;
box-sizing: border-box;
}
input.mobile-code {
width: 183px;
}
.card-code,
.card-pwd {
width: 295px;
}
.border-top-info {
border-top: 1px solid #e6e6e6;
}
.info-gift-header {
width: 100%;
text-align: center;
margin: 25px 10px 30px;
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
td {
height: 25px;
}
.validity-time {
width: 360px;
}
}
}
... ...