Authored by liangxs

领券页面初版

.coupon-page {
background-color: #f0f0f0;
.coupon-box {
background-color: #fff;
padding: 36rem/$pxConvertRem;
margin-bottom: 20rem/$pxConvertRem;
min-height: 242rem/$pxConvertRem;
.coupon-title {
text-align: center;
height: 60rem/$pxConvertRem;
font-size: 30rem / $pxConvertRem;
}
.coupon-box-main {
width: 100%;
background-color: #00ee00;
float: left;
height: 170rem / $pxConvertRem;
.coupon-img {
float: left;
width: 80%;
height: 170rem/$pxConvertRem;
background-size: 100%;
background-repeat: no-repeat;
}
.coupon-op {
float: left;
width: 20%;
height: 170rem/$pxConvertRem;
background-color: #2e2e2e;
margin: 0rem/$pxConvertRem;
.coupon-op-st {
color: #fff;
text-align: center;
margin-top: 40rem/$pxConvertRem;
}
.coupon-op-re {
color: #fff;
text-align: center;
border-radius: 15px;
border: 1px solid #fff;
margin-top: 10rem/$pxConvertRem;
margin-left:6rem/$pxConvertRem;
margin-right:6rem/$pxConvertRem;
}
}
}
}
}
\ No newline at end of file
... ...
<html>
<head>
<meta charset="UTF-8">
<title>领券楼层</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>
{{>layout/header}}
<div class="coupon-page yoho-page">
{{# coupons}}
<div class="coupon-box">
{{#if showTitle}}
<h4>{{title}}</h4>
<div class="coupon-title">
{{title}}
</div>
{{/if}}
{{# coupons}}
<div>
<div><a href=""><img src="{{picUrl}}" alt=""></a></div>
<div>
<div>状态:{{status}} 剩余数量:{{num}}</div>
<button onclick="receiveCoupon()">领券</button>
<div><a href="{{go}}">去逛逛</a></div>
<div class="coupon-box-main">
{{#if url}}
<a href="{{url}}" class="coupon-img">
<img src="{{picUrl}}" />
</a>
{{^}}
<img src="{{picUrl}}" class="coupon-img"/>
{{/if}}
<div class="coupon-op">
<div class="coupon-op-st">已领取</div>
<div class="coupon-op-re">领券</div>
</div>
<!--<div class="coupon-op">
<div>状态:{{status}} 剩余数量:{{num}}</div>
<button onclick="receiveCoupon()">领券</button>
<div><a href="{{go}}">去逛逛</a></div>
</div>-->
</div>
</div>
{{/ coupons}}
</div>
{{/ coupons}}
</div>
{{> layout/footer}}
<script type="application/javascript">
function receiveCoupon() {
$.ajax({
... ... @@ -35,6 +45,4 @@ function receiveCoupon() {
}
});
}
</script>
</body>
</html>
\ No newline at end of file
</script>
\ No newline at end of file
... ...
... ... @@ -25,7 +25,7 @@ class CouponController extends AbstractAction
public function floorAction()
{
$data =[
'title' => '领券中心',
'title' => '热门推荐',
'showTitle' => 1,
'coupons' => [
[
... ... @@ -35,23 +35,21 @@ class CouponController extends AbstractAction
'num' => '123',
'go'=>'http://m.dev.yohobuy.com/boys',
'couponIds' =>[8024,2564,3587]
],
[
'id' => 1,
'picUrl' => 'http://img12.static.yhbimg.com/yhb-img01/2016/01/19/11/02039485d87cc1b100b883244cf386e62d.jpg?imageView/2/w/640/h/200',
'status' => 2,
'num' => '0',
'go'=>'http://m.dev.yohobuy.com/boys',
'couponIds' =>[8024,2564,3587]
],
[
'id' => 1,
'picUrl' => 'http://img12.static.yhbimg.com/yhb-img01/2016/01/19/11/02039485d87cc1b100b883244cf386e62d.jpg?imageView/2/w/640/h/200',
'status' => 3,
'num'=>'456',
'go'=>'http://m.dev.yohobuy.com/boys',
'couponIds' =>[8024,2564,3587]
],
],[
'id' => 1,
'picUrl' => 'http://img12.static.yhbimg.com/yhb-img01/2016/01/19/11/02039485d87cc1b100b883244cf386e62d.jpg?imageView/2/w/640/h/200',
'status' => 1,
'num' => '123',
'go'=>'http://m.dev.yohobuy.com/boys',
'couponIds' =>[8024,2564,3587]
],[
'id' => 1,
'picUrl' => 'http://img12.static.yhbimg.com/yhb-img01/2016/01/19/11/02039485d87cc1b100b883244cf386e62d.jpg?imageView/2/w/640/h/200',
'status' => 1,
'num' => '123',
'go'=>'http://m.dev.yohobuy.com/boys',
'couponIds' =>[8024,2564,3587]
]
]
];
$this->_view->display('index', $data);
... ...