wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by 毕凯
Commit 876937599d9d21dec8de72e5f1839fe6fde0ac5d 1 parent cbcadfef

下单流程 增加优惠券页面

Inline Side-by-side
Showing 10 changed files with 350 additions and 123 deletions
var $ = require('jquery'),
Handlebars = require('yoho.handlebars'),
ellipsis = require('mlellipsis'),
loading = require('../plugin/loading'),
tip = require('../plugin/tip');
var page = 1,
canGetCoupon = true,
isGetData;
var conponTmpl = Handlebars.compile($('#tmpl-coupon').html()),
conponNotAvaliableTmpl = Handlebars.compile($('#tmpl-coupon-not-avaliable').html());
ellipsis.init();
function getCouponDate() {
if (!canGetCoupon) {
return;
}
if (isGetData) {
return;
}
loading.showLoadingMask();
page += 1;
isGetData = true;
$.ajax({
type: 'POST',
url: '/home/couponData',
dataType: 'html',
data: {
statuss: status,
page: page
}
}).then(function(coupons) {
var notAvailableCoupons = [];
// 后端需要返回一个 coupons 列表，如下
// notAvailable 表示不可用的优惠券
coupons = [{
money: '99',
coupon_name: '满XX-减去吴悠右腿有益于有2222',
couponValidity: '20150129-20150430',
coupon_id: '22222'
}, {
money: '99',
coupon_name: '满XX-减去吴悠右腿有益于有2222',
couponValidity: '20150129-20150430',
coupon_id: '2222233'
}, {
money: '99',
coupon_name: 'NONO满XX-减去吴悠右腿有益于有2222',
couponValidity: '20150129-20150430',
coupon_id: '2222233',
notAvailable: 1
}];
// coupons 是个列表，如果不是列表，可能是服务器错误，这次翻页加载不算
if (!$.isArray(coupons)) {
page--;
return;
}
// 每页10张，当不足10张时，说明已经加载完
if (coupons.length < 10) {
canGetCoupon = false;
}
// 第一页张数为 0 ，显示优惠券为空
if (!coupons.length && page === 2) {
$('.select-coupon-page').html($('#tmpl-no-coupon').html());
return;
}
// 把不可用的优惠券分离出来
$.each(coupons, function(i, coupon) {
if (coupon.notAvailable) {
notAvailableCoupons.push(coupon);
}
})
if (notAvailableCoupons.length) {
$('.not-avaliable-coupon-line').show();
}
$('#coupon-list').append(conponTmpl({
coupons: coupons
}));
$('#coupon-list-not').append(conponNotAvaliableTmpl({
notAvailableCoupons: notAvailableCoupons
}));
window.rePosFooter();
}).fail(function() {
page -= 1;
tip.show('加载优惠券失败');
}).always(function() {
isGetData = false;
loading.hideLoadingMask();
});
}
getCouponDate();
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $('body').height() * 0.9) {
getCouponDate();
}
});
... ...
.employ{
width: 100%;
height: 90rem / $pxConvertRem;
.my-coupon-page {
.employ{
width: 100%;
height: 90rem / $pxConvertRem;
border-bottom:1px solid #e0e0e0;
position: relative;
span{
width: 49%;
height: 48rem / $pxConvertRem;
line-height: 48rem / $pxConvertRem;
overflow: hidden;
border-right: 2px solid #e0e0e0;
margin: 21rem / $pxConvertRem 0;
float: left;
text-align: center;
font-size: 48em / $pxConvertRem;
color: #b0b0b0;
&:last-of-type{
border:none;
}
&.active{
color: #444444;
}
}
}
#employ{
width:100%;
height: auto;
overflow:hidden;
.employ-main{
width: 90.625%;
height: 180rem / $pxConvertRem;
overflow: hidden;
margin: 20rem / $pxConvertRem auto;
background-image: image-url('me/employ/employ.jpg');
background-position: top center;
background-repeat:no-repeat;
background-size: 100% 100%;
color: #fff;
position: relative;
span{
width: 34.482759%;
height: 100%;
float: left;
text-align: center;
line-height: 180rem / $pxConvertRem;
font-size: 50px;
}
p{
width: 59.517241%;
height: auto;
margin: 0 3% 16em / $pxConvertRem;
float: left;
&:first-of-type{
margin-top: 0.75rem;
font-size: 18px;
height: auto;
min-height: 42px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
border-bottom:1px solid #e0e0e0;
position: relative;
span{
width: 49%;
height: 48rem / $pxConvertRem;
line-height: 48rem / $pxConvertRem;
overflow: hidden;
border-right: 2px solid #e0e0e0;
margin: 21rem / $pxConvertRem 0;
float: left;
text-align: center;
font-size: 48em / $pxConvertRem;
color: #b0b0b0;
&:last-of-type{
border:none;
}
&.active{
color: #444444;
}
}
}
.coupon-list{
width:100%;
height: auto;
overflow:hidden;
.employ-main{
display: block;
width: 90.625%;
height: 180rem / $pxConvertRem;
overflow: hidden;
margin: 30rem / $pxConvertRem auto;
background-image: image-url('me/employ/employ.jpg');
background-position: top center;
background-repeat:no-repeat;
background-size: 100% 100%;
color: #fff;
position: relative;
span{
width: 34.482759%;
height: 100%;
float: left;
text-align: center;
line-height: 180rem / $pxConvertRem;
font-size: 50px;
}
p{
width: 59.517241%;
height: auto;
margin: 0 3% 16em / $pxConvertRem;
float: left;
&:first-of-type{
margin-top: 0.75rem;
font-size: 16px;
height: auto;
min-height: 42px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
i{
width: 100%;
height: 100%;
overflow: hidden;
display: block;
position: absolute;
top: 0;
left: 0;
background: image-url('me/employ/employsy.png') right top no-repeat;
background-size:auto 100%;
}
}
.null{
width: 100%;
height:auto;
overflow: hidden;
position: absolute;
left: 0;
top:50%;
@include transform(translateY(-50%));
i{
width: 100%;
height: 120rem / $pxConvertRem;
overflow: hidden;
display: block;
background: image-url('me/employ/not.png') center top no-repeat;
background-size:auto 100%;
}
p{
width: 100%;
height: auto;
overflow: hidden;
padding:20rem / $pxConvertRem 0 0;
font-size: 48em / $pxConvertRem;
text-align: center;
color: #444;
}
a{
width: 73.75%;
height: 80rem / $pxConvertRem;
overflow: hidden;
}
}
i{
width: 100%;
height: 100%;
overflow: hidden;
display: block;
position: absolute;
top: 0;
left: 0;
background: image-url('me/employ/employsy.png') right top no-repeat;
background-size:auto 100%;
}
}
.null{
width: 100%;
height:auto;
overflow: hidden;
position: absolute;
left: 0;
top:50%;
@include transform(translateY(-50%));
i{
width: 100%;
height: 120rem / $pxConvertRem;
overflow: hidden;
display: block;
background: image-url('me/employ/not.png') center top no-repeat;
background-size:auto 100%;
}
p{
width: 100%;
height: auto;
overflow: hidden;
padding:20rem / $pxConvertRem 0 0;
font-size: 48em / $pxConvertRem;
text-align: center;
color: #444;
}
a{
width: 73.75%;
height: 80rem / $pxConvertRem;
overflow: hidden;
font-size: 56em / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
display: block;
background: #444444;
color: #fff;
text-align: center;
margin: 60rem / $pxConvertRem auto 0;
@include border-radius(.2rem);
font-size: 56em / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
display: block;
background: #444444;
color: #fff;
text-align: center;
margin: 60rem / $pxConvertRem auto 0;
@include border-radius(.2rem);
}
}
}
}
}
.none{
display: none;
}
}
.none{
display: none;
}
\ No newline at end of file
... ...
@import "good", "chose-panel", "gift-advance-good", "order-ensure";
@import "good", "chose-panel", "gift-advance-good", "order-ensure", "select-coupon";
.icon-checkbox:before { content: "\e61c"; }
... ...
... ... @@ -45,7 +45,7 @@
font-weight: normal;
}
}
.dispatch .title {
margin-bottom: 10rem / $pxConvertRem;
}
... ... @@ -85,6 +85,10 @@
height: 90rem / $pxConvertRem;
line-height: 90rem / $pxConvertRem;
border-bottom: 1px solid #f7f7f7;
a {
display: block;
}
}
.coupon-count {
... ... @@ -174,4 +178,4 @@
font-size: 32rem / $pxConvertRem;
}
}
}
\ No newline at end of file
}
... ...
.select-coupon-page {
margin-top: pxToRem(30px);
margin-bottom: pxToRem(30px);
.coupon-list {
.employ-main:first-child {
margin-top: 0;
}
.employ-main:last-child {
margin-bottom: 0;
}
}
%line {
content: '';
position: absolute;
top: 50%;
border-top: 1px solid #b0b0b0;
width: pxToRem(120px);
height: 0;
}
.not-avaliable-coupon-line {
position: relative;
margin-top: pxToRem(30px);
margin-bottom: pxToRem(30px);
font-size: pxToRem(14px);
line-height: 2;
color: #b0b0b0;
text-align: center;
&:before {
@extend %line;
left: pxToRem(60px);
}
&:after {
@extend %line;
right: pxToRem(60px);
}
}
.not-avaliable {
-webkit-filter: grayscale(100%);
}
}
... ...
{{> layout/header}}
<div class="yoho-page">
<div class="yoho-page my-coupon-page">
<div class="employ">
<span class="active">未使用</span>
<span>已使用</span>
</div>
<div id="employ"></div>
<div id="employ" class="coupon-list"></div>
</div>
{{> layout/footer}}
\ No newline at end of file
{{> layout/footer}}
... ...
... ... @@ -43,7 +43,8 @@
<ul class="sale-invoice">
{{# coupon}}
<li class="coupon">
<a href="{{url}}">
<a href="/shoppingCart/selectCoupon">
<!-- <a href="{{url}}"> -->
<span class="title">优惠券</span>
{{#if count}}
<span class="coupon-count">
... ...
{{> layout/header}}
<div class="yoho-page select-coupon-page my-coupon-page">
<div id="coupon-list" class="coupon-list"></div>
<div class="not-avaliable-coupon-line hide">不可使用的优惠券</div>
<div id="coupon-list-not" class="coupon-list"></div>
</div>
<script id="tmpl-coupon" type="text/tmpl">
\{{#coupons}}
\{{^ notAvailable}}
<a class="employ-main" href="/shoppingCart/orderEnsure?coupon_id={{ coupon_id}}">
<span>\{{ money}}</span>
<p class="coupon-name">\{{ coupon_name}}</p>
<p>有效期：\{{ couponValidity}}</p>
</a>
\{{/ notAvailable}}
\{{/coupons}}
</script>
<script id="tmpl-coupon-not-avaliable" type="text/tmpl">
\{{# notAvailableCoupons}}
<div class="employ-main not-avaliable">
<span>\{{ money}}</span>
<p class="coupon-name">\{{ coupon_name}}</p>
<p>有效期：\{{ couponValidity}}</p>
</div>
\{{/ notAvailableCoupons}}
</script>
<script id="tmpl-no-coupon" type="text/tmpl">
<div class="coupon-list">
<div class="null">
<i></i>
<p>您还没有优惠券!</p>
</div>
</div>
</script>
{{> layout/footer}}
... ...
... ... @@ -218,6 +218,11 @@
seajs.use('js/shopping-cart/order-ensure');
</script>
{{/if}}
{{#if selectCouponPage}}
<script>
seajs.use('js/shopping-cart/select-coupon');
</script>
{{/if}}
{{!-- 个人中心 --}}
{{#if myIndexPage}}
<script>
... ...
... ... @@ -218,6 +218,10 @@ class ShoppingCartController extends AbstractAction
$this->_view->display('order-ensure', $data);
}
/**
* 下单流程 选择地址
*/
public function selectAddressAction() {
// 设置网站标题
$this->setTitle('选择地址');
... ... @@ -235,6 +239,26 @@ class ShoppingCartController extends AbstractAction
}
/**
* 下单流程 选择优惠券
*/
public function selectCouponAction() {
// 设置网站标题
$this->setTitle('选择优惠券');
$this->setNavHeader('选择优惠券', Helpers::url('/shoppingCart/orderEnsure'));
$uid = $this->_uid;
$address = UserModel::getAddressData($uid);
$this->_view->display('select-coupon', array(
'selectCouponPage' => true,
'pageFooter' => true,
'address' => $address
));
}
/**
* 读取chose-panel内容
*/
public function tplAction()
... ...