fe / YOHOBUYWAP · Commits

Go to a project

Authored by liangxs
Commit 18b480315f9571bd83f44f6a427c20693fe69722 1 parent 6f75f7b9

领券修改

Inline Side-by-side
Showing 3 changed files with 150 additions and 42 deletions
@@ -2,16 +2,58 @@ @@ -2,16 +2,58 @@
2 * Created by Administrator on 2016/4/13. 2 * Created by Administrator on 2016/4/13.
3 */ 3 */
4 var $ = require('jquery'); 4 var $ = require('jquery');
5 -var $receive = $('.coupon-right-re'); 5 +var $receive = $('.coupon-right-reBox');
  6 +var $go=$('.coupon-right-goBox');
6 var $mask = $('.coupon-mask'); 7 var $mask = $('.coupon-mask');
7 var $message = $('.coupon-message'); 8 var $message = $('.coupon-message');
  9 +var $messageOpDet = $('.coupon-message-op-det');
  10 +var $messageOpGo = $('.coupon-message-op-go');
  11 +var $messageOpRel = $('.coupon-message-op-rel');
  12 +
  13 +var timeID;
8 $receive.on('touchend',function(){ 14 $receive.on('touchend',function(){
9 $.ajax({ 15 $.ajax({
10 url:'/coupon/receiveCoupon', 16 url:'/coupon/receiveCoupon',
11 - success:function(){ 17 + dataType:'json',
  18 + success:function(data){
  19 + var msg=data.msg;
  20 + var status=data.status;
  21 + $message.find('.coupon-message-content').text(msg);
12 $mask.show(); 22 $mask.show();
13 $message.show(); 23 $message.show();
  24 + if(status==1){
  25 + $messageOpDet.show();
  26 + $messageOpRel.hide();
  27 + $messageOpGo.hide();
  28 + maskAutoHide(3000);
  29 + }else if(status==2){
  30 + $messageOpRel.show();
  31 + $messageOpDet.hide();
  32 + $messageOpGo.hide();
  33 + $mask.unbind('touchend');
  34 + }else{
  35 + $messageOpGo.show();
  36 + $messageOpDet.hide();
  37 + $messageOpRel.hide();
  38 + maskAutoHide(3000);
  39 + }
14 }, 40 },
15 error:function(){} 41 error:function(){}
16 }); 42 });
17 -});  
  43 +});
  44 +
  45 +$mask.on('touchend',function(){
  46 + $mask.hide();
  47 + $message.hide();
  48 + clearTimeout(timeID);
  49 +});
  50 +
  51 +function maskAutoHide(time){
  52 + timeID=setTimeout(task,time);
  53 + function task(){
  54 + if($mask.css('display')!='none') {
  55 + $message.hide();
  56 + $mask.hide();
  57 + }
  58 + }
  59 +}
1 .coupon-page { 1 .coupon-page {
2 - background-color: #f0f0f0;  
3 .coupon-title { 2 .coupon-title {
  3 + background-color: #fff;
4 text-align: center; 4 text-align: center;
5 - height: 40rem/$pxConvertRem; 5 + height: 96rem/$pxConvertRem;
  6 + line-height: 96rem/$pxConvertRem;
6 font-size: 30rem / $pxConvertRem; 7 font-size: 30rem / $pxConvertRem;
7 - background-color: #fff;  
8 - padding-top:36rem/$pxConvertRem;  
9 } 8 }
10 .coupon-box { 9 .coupon-box {
11 background-color: #fff; 10 background-color: #fff;
12 padding: 36rem/$pxConvertRem; 11 padding: 36rem/$pxConvertRem;
13 - margin-bottom: 20rem/$pxConvertRem; 12 + padding-top: 0;
14 height: 172rem/$pxConvertRem; 13 height: 172rem/$pxConvertRem;
15 .coupon-box-main { 14 .coupon-box-main {
16 width: 100%; 15 width: 100%;
@@ -26,46 +25,88 @@ @@ -26,46 +25,88 @@
26 .coupon-right { 25 .coupon-right {
27 float: left; 26 float: left;
28 width: 20%; 27 width: 20%;
  28 + text-align: center;
29 height: 170rem/$pxConvertRem; 29 height: 170rem/$pxConvertRem;
30 - background-color: #2e2e2e;  
31 - font-size:12rem/$pxConvertRem;;  
32 - .coupon-right-st {  
33 - color: #fff;  
34 - text-align: center;  
35 - margin-top: 40rem/$pxConvertRem; 30 + background-color: rgb(224,84,85);
  31 + .coupon-right-reBox {
  32 + height: 100%;
  33 + width: 100%;
  34 + color:#fff;
  35 + .coupon-right-re {
  36 + font-size: 25rem/$pxConvertRem;
  37 + margin-top: 60rem/$pxConvertRem;
  38 + }
36 } 39 }
37 - .coupon-right-re {  
38 - color: #fff;  
39 - text-align: center;  
40 - border-radius: 15px;  
41 - border: 1px solid #fff;  
42 - margin-top: 20rem/$pxConvertRem;  
43 - margin-left:6rem/$pxConvertRem;  
44 - margin-right:6rem/$pxConvertRem; 40 + .coupon-right-goBox {
  41 + height: 100%;
  42 + width: 100%;
  43 + color:#fff;
  44 + font-size: 15rem/$pxConvertRem;
  45 + .coupon-right-st {
  46 + margin-top: 40rem/$pxConvertRem;
  47 + }
  48 + .coupon-right-go {
  49 + border-radius: 15px;
  50 + border: 1px solid #fff;
  51 + margin: 0 auto;
  52 + margin-top: 20rem/$pxConvertRem;
  53 + width: 90rem/$pxConvertRem;
  54 + height: 30rem/$pxConvertRem;
  55 + line-height: 30rem/$pxConvertRem;
  56 + }
45 } 57 }
46 } 58 }
47 } 59 }
48 } 60 }
49 } 61 }
50 -.coupon-mask{ 62 +
  63 +.coupon-mask {
51 position: absolute; 64 position: absolute;
52 top: 0; 65 top: 0;
53 left: 0; 66 left: 0;
54 right: 0; 67 right: 0;
55 bottom: 0; 68 bottom: 0;
56 - background-color: rgba(0,0,0,.5);  
57 - display:none; 69 + background-color: rgba(0, 0, 0, .5);
  70 + display: none;
58 z-index: 9; 71 z-index: 9;
59 } 72 }
60 -.coupon-message{ 73 +
  74 +.coupon-message {
61 position: fixed; 75 position: fixed;
62 - top:50%; 76 + top: 50%;
63 left: 50%; 77 left: 50%;
64 - width: 100px;  
65 - height: 100px;  
66 - margin-left: -50px;  
67 - margin-top: -50px; 78 + width: 550rem/$pxConvertRem;
  79 + height: 250rem/$pxConvertRem;
  80 + margin-left: -275rem/$pxConvertRem;
  81 + margin-top: -125rem/$pxConvertRem;
68 z-index: 10; 82 z-index: 10;
69 - background: #000;  
70 - display:none; 83 + background-color: rgba(250, 250, 250, .92);
  84 + display: none;
  85 + border-radius: 10px;
  86 + .coupon-message-content {
  87 + border-bottom: 1px solid rgb(197, 197, 197);
  88 + height: 160rem/$pxConvertRem;
  89 + text-align: center;
  90 + line-height: 160rem/$pxConvertRem;
  91 + font-size: 28rem/$pxConvertRem;
  92 + }
  93 + .coupon-message-op {
  94 + height: 90rem/$pxConvertRem;
  95 + text-align: center;
  96 + line-height: 90rem/$pxConvertRem;
  97 + font-size: 32rem/$pxConvertRem;
  98 +
  99 + .coupon-message-op-det {
  100 + color: rgb(223, 98, 112);
  101 + display:none;
  102 + }
  103 + .coupon-message-op-go {
  104 + color:rgb(223,98,112);
  105 + display:none;
  106 + }
  107 + .coupon-message-op-rel {
  108 + color: rgb(223, 98, 112);
  109 + display:none;
  110 + }
  111 + }
71 } 112 }
@@ -18,15 +18,27 @@ @@ -18,15 +18,27 @@
18 {{/if}} 18 {{/if}}
19 <div class="coupon-right"> 19 <div class="coupon-right">
20 {{#if status}} 20 {{#if status}}
21 - <div class="coupon-right-st">点击领券</div> 21 + <div class="coupon-right-reBox">
  22 + <div class="coupon-right-re">
  23 + <div>点击</div>
  24 + <div>领取</div>
  25 + </div>
  26 + </div>
22 {{^}} 27 {{^}}
23 - {{#if is_zero}}  
24 - <div class="coupon-right-st">已抢光</div>  
25 - <div class="coupon-right-re">去逛逛</div>  
26 - {{^}}  
27 - <div class="coupon-right-st">已领取</div>  
28 - <div class="coupon-right-re">去逛逛</div>  
29 - {{/if}} 28 + {{#if is_zero}}
  29 + <a href="{{go}}">
  30 + <div class="coupon-right-goBox">
  31 + <div class="coupon-right-st">已抢光</div>
  32 + <div class="coupon-right-go">去逛逛</div>
  33 + </div>
  34 + </a>
  35 + {{^}}
  36 + <a href="{{go}}">
  37 + <div style="height: 100%;width:100%" class="coupon-right-goBox">
  38 + <div class="coupon-right-st">已领取</div>
  39 + <div class="coupon-right-go">去逛逛</div>
  40 + </div></a>
  41 + {{/if}}
30 {{/if}} 42 {{/if}}
31 </div> 43 </div>
32 </div> 44 </div>
@@ -35,7 +47,20 @@ @@ -35,7 +47,20 @@
35 </div> 47 </div>
36 48
37 <div class="coupon-mask"></div> 49 <div class="coupon-mask"></div>
38 -<div class="coupon-message"></div> 50 +<div class="coupon-message">
  51 + <div class="coupon-message-content"></div>
  52 + <div class="coupon-message-op">
  53 + <a class="coupon-message-op-det">
  54 + <span>去查看</span>
  55 + </a>
  56 + <a href="http://m.dev.yohobuy.com/boy" class="coupon-message-op-go">
  57 + <span>去逛逛</span>
  58 + </a>
  59 + <a href="http://m.dev.yohobuy.com/coupon/floor">
  60 + <span class="coupon-message-op-rel">刷新</span>
  61 + </a>
  62 + </div>
  63 +</div>
39 {{/floor}} 64 {{/floor}}
40 {{> layout/footer}} 65 {{> layout/footer}}
41 <script type="application/javascript"> 66 <script type="application/javascript">