fe / YOHOBUYWAP · Commits

Go to a project

Authored by uedxwg
Commit 5fa5f02ee62a7d64c03d7316683a3c0680104f59 2 parents cb2a2e2a abe34d6b

Merge branch 'feature/coupon' of http://git.dev.yoho.cn/web/yohobuy into feature/coupon

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