Authored by baoss

Merge branch 'feature/group-buy' of git.yoho.cn:fe/yohobuywap-node into feature/group-buy

@@ -4,62 +4,69 @@ @@ -4,62 +4,69 @@
4 <div class="inner-card go-join" data-product-skn="{{yourJoinItem.productSkn}}" 4 <div class="inner-card go-join" data-product-skn="{{yourJoinItem.productSkn}}"
5 data-activity-id="{{activityId}}" data-group-no="{{groupNo}}" data-page-go="{{pageGo}}"> 5 data-activity-id="{{activityId}}" data-group-no="{{groupNo}}" data-page-go="{{pageGo}}">
6 <img src="{{image2 yourJoinItem.productIcon w=200 h=282}}" alt="" class="card-pre-img"> 6 <img src="{{image2 yourJoinItem.productIcon w=200 h=282}}" alt="" class="card-pre-img">
7 - <div class="info" > 7 + <div class="info">
8 <div class="name">{{yourJoinItem.productName}}</div> 8 <div class="name">{{yourJoinItem.productName}}</div>
9 <div class="group-price">{{yourJoinItem.productGroupPrice}}</div> 9 <div class="group-price">{{yourJoinItem.productGroupPrice}}</div>
10 <div class="single-buy-price">单人购买:<span class="line-through">{{yourJoinItem 10 <div class="single-buy-price">单人购买:<span class="line-through">{{yourJoinItem
11 .productSalePrice}}</span></div> 11 .productSalePrice}}</span></div>
12 </div> 12 </div>
13 </div> 13 </div>
14 -  
15 - <div class="members">  
16 - {{#membershipItems}}  
17 - {{#if empty}}  
18 - <div class="meb-item empty"></div>  
19 - {{else}}  
20 - <div class="meb-item">  
21 - <img class="avatar" src="{{image2 headUrl w=160 h=160}}" alt="">  
22 - {{#if @first}}  
23 - <span class="leader-badge"></span> 14 + <div class="card-body">
  15 + <div class="members">
  16 + {{#membershipItems}}
  17 + {{#if empty}}
  18 + <div class="meb-item empty"></div>
  19 + {{else}}
  20 + <div class="meb-item">
  21 + <img class="avatar" src="{{image2 headUrl w=160 h=160}}" alt="">
  22 + {{#if @first}}
  23 + <span class="leader-badge"></span>
  24 + {{/if}}
  25 + </div>
24 {{/if}} 26 {{/if}}
  27 + {{/membershipItems}}
25 </div> 28 </div>
26 - {{/if}}  
27 - {{/membershipItems}}  
28 - </div>  
29 29
30 - {{#ifcond pageGo '===' 1}}  
31 - <div class="status-text">还差{{lackNum}}人拼团成功,剩余时间</div>  
32 - <div class="status-btn positive">邀请小伙伴拼团</div>  
33 - {{/ifcond}} 30 + {{#ifcond pageGo '===' 1}}
  31 + <div class="status-tip">还差<span class="red">{{lackNum}}</span>拼团成功,剩余时间</div>
  32 + {{> group/progress-countdown}}
  33 + <div class="status-btn positive">邀请小伙伴拼团{{#ifcond joinLimit '==' 1}}(仅限新人){{/ifcond}}</div>
  34 + {{/ifcond}}
34 35
35 - {{#ifcond pageGo '===' 2}}  
36 - <div class="status-text">还差{{lackNum}}人拼团成功,剩余时间</div>  
37 - {{/ifcond}} 36 + {{#ifcond pageGo '===' 2}}
  37 + <div class="status-tip">还差<span class="red">{{lackNum}}</span>拼团成功,剩余时间</div>
  38 + {{> group/progress-countdown}}
  39 + <div class="status-btn positive">去参团</div>
  40 + {{/ifcond}}
38 41
39 - {{#ifcond pageGo '===' 3}}  
40 - <div class="status-text">还差{{lackNum}}人拼团成功,剩余时间</div>  
41 - <div class="status-btn positive">邀请小伙伴拼团</div>  
42 - {{/ifcond}} 42 + {{#ifcond pageGo '===' 3}}
  43 + <div class="status-tip">还差<span class="red">{{lackNum}}</span>拼团成功,剩余时间</div>
  44 + {{> group/progress-countdown}}
  45 + <div class="status-btn positive">邀请小伙伴拼团{{#ifcond joinLimit '==' 1}}(仅限新人){{/ifcond}}</div>
  46 + {{/ifcond}}
43 47
44 - {{#ifcond pageGo '===' 4}}  
45 - <div class="status-text">拼团成功</div>  
46 - {{/ifcond}} 48 + {{#ifcond pageGo '===' 4}}
  49 + <div class="status-text">拼团成功</div>
  50 + <div class="status-btn">查看更多拼团活动</div>
  51 + {{/ifcond}}
47 52
48 - {{#ifcond pageGo '===' 5}}  
49 - <div class="status-text">你来晚了 你的好友拼团已经成功</div>  
50 - {{/ifcond}} 53 + {{#ifcond pageGo '===' 5}}
  54 + <div class="status-text">你来晚了 你的好友拼团已经成功</div>
  55 + <div class="status-btn positive">我也要开团</div>
  56 + {{/ifcond}}
51 57
  58 + {{#ifcond pageGo '===' 6}}
  59 + <div class="status-text">拼团失败</div>
  60 + <div class="status-btn">查看更多拼团活动</div>
  61 + {{/ifcond}}
52 62
53 - {{#ifcond pageGo '===' 6}}  
54 - <div class="status-text">拼团失败</div>  
55 - {{/ifcond}} 63 + {{#ifcond pageGo '===' 7}}
  64 + <div class="status-text">拼团失败</div>
  65 + <div class="status-btn">查看更多拼团活动</div>
  66 + {{/ifcond}}
56 67
57 - {{#ifcond pageGo '===' 7}}  
58 - <div class="status-text">拼团失败</div>  
59 - <div class="status-btn">查看更多拼团活动</div>  
60 - {{/ifcond}}  
61 -  
62 - <a class="tip" href="http://m.yohobuy.com/activity/group">支付开团-支付参团-凑齐人数发货-凑不齐退款 玩法介绍》</a> 68 + <a class="tip" href="http://m.yohobuy.com/activity/group">支付开团-支付参团-凑齐人数发货-凑不齐退款 玩法介绍》</a>
  69 + </div>
63 </div> 70 </div>
64 {{/data}} 71 {{/data}}
65 <div class="divide"></div> 72 <div class="divide"></div>
  1 +<div class="count-down">
  2 + <span class="digit-square">1</span>
  3 + <span class="digit-square">1</span> :
  4 + <span class="digit-square">1</span>
  5 + <span class="digit-square">1</span> :
  6 + <span class="digit-square">1</span>
  7 + <span class="digit-square">1</span>
  8 +</div>
@@ -4,40 +4,34 @@ @@ -4,40 +4,34 @@
4 .card { 4 .card {
5 position: relative; 5 position: relative;
6 width: 680px; 6 width: 680px;
7 - height: 690px;  
8 margin: 0 auto; 7 margin: 0 auto;
9 background: #fff; 8 background: #fff;
10 box-shadow: 0 0 20px rgba(205, 205, 205, 0.5); 9 box-shadow: 0 0 20px rgba(205, 205, 205, 0.5);
11 } 10 }
12 11
13 .status-text { 12 .status-text {
14 - position: absolute;  
15 - bottom: 250px;  
16 - left: 50%;  
17 - transform: translateX(-50%);  
18 font-size: 36px; 13 font-size: 36px;
19 color: #444; 14 color: #444;
20 - letter-spacing: -1px;  
21 text-align: center; 15 text-align: center;
22 font-weight: bold; 16 font-weight: bold;
23 } 17 }
24 18
25 .status-btn { 19 .status-btn {
26 - position: absolute;  
27 - bottom: 130px;  
28 - left: 50%; 20 + display: inline-block;
29 height: 80px; 21 height: 80px;
30 padding: 0 50px; 22 padding: 0 50px;
  23 + min-width: 380px;
  24 + margin-top: 40px;
31 font-size: 32px; 25 font-size: 32px;
32 color: #fff; 26 color: #fff;
33 text-align: center; 27 text-align: center;
34 line-height: 80px; 28 line-height: 80px;
35 border-radius: 40px; 29 border-radius: 40px;
36 background-color: #000; 30 background-color: #000;
37 - transform: translateX(-50%);  
38 31
39 &.positive { 32 &.positive {
40 background: #d0021b; 33 background: #d0021b;
  34 + margin-top: 60px;
41 } 35 }
42 } 36 }
43 37
@@ -80,44 +74,59 @@ @@ -80,44 +74,59 @@
80 } 74 }
81 } 75 }
82 76
  77 + .card-body {
  78 + position: relative;
  79 + width: 680px;
  80 + padding-top: 140px;
  81 + padding-bottom: 130px;
  82 + text-align: center;
  83 + }
  84 +
83 .members { 85 .members {
84 - position: absolute;  
85 - top: 194px;  
86 - left: 0;  
87 - right: 0; 86 + margin-top: 40px;
88 font-size: 0; 87 font-size: 0;
89 text-align: center; 88 text-align: center;
90 - }  
91 89
92 - .meb-item {  
93 - position: relative;  
94 - display: inline-block;  
95 - width: 80px;  
96 - height: 80px;  
97 - margin-left: 40px;  
98 - border-radius: 40px; 90 + .meb-item {
  91 + position: relative;
  92 + display: inline-block;
  93 + width: 80px;
  94 + height: 80px;
  95 + margin-left: 40px;
  96 + border-radius: 40px;
99 97
100 - &:first-child {  
101 - margin-left: 0;  
102 - } 98 + &:first-child {
  99 + margin-left: 0;
  100 + }
103 101
104 - &.empty {  
105 - background-image: url("img/activity/group/member-empty.png");  
106 - background-size: 80px 80px;  
107 - } 102 + &.empty {
  103 + background-image: url("img/activity/group/member-empty.png");
  104 + background-size: 80px 80px;
  105 + }
108 106
109 - .avatar {  
110 - border-radius: 40px; 107 + .avatar {
  108 + border-radius: 40px;
  109 + }
  110 +
  111 + .leader-badge {
  112 + position: absolute;
  113 + top: 0;
  114 + left: 0;
  115 + width: 80px;
  116 + height: 80px;
  117 + background-image: url("img/activity/group/member-leader.png");
  118 + background-size: 80px 80px;
  119 + }
111 } 120 }
  121 + }
112 122
113 - .leader-badge {  
114 - position: absolute;  
115 - top: 0;  
116 - left: 0;  
117 - width: 80px;  
118 - height: 80px;  
119 - background-image: url("img/activity/group/member-leader.png");  
120 - background-size: 80px 80px; 123 + .status-tip {
  124 + font-size: 24px;
  125 + margin-top: 38px;
  126 + margin-bottom: 20px;
  127 +
  128 + .red {
  129 + color: #d0021b;
121 } 130 }
122 } 131 }
123 132
@@ -128,6 +137,7 @@ @@ -128,6 +137,7 @@
128 left: 28px; 137 left: 28px;
129 font-size: 24px; 138 font-size: 24px;
130 color: #b0b0b0; 139 color: #b0b0b0;
  140 + text-align: left;
131 letter-spacing: -0.68px; 141 letter-spacing: -0.68px;
132 } 142 }
133 143
@@ -253,4 +263,16 @@ @@ -253,4 +263,16 @@
253 width: 104px; 263 width: 104px;
254 height: 110px; 264 height: 110px;
255 } 265 }
  266 +
  267 + .count-down {
  268 + .digit-square {
  269 + display: inline-block;
  270 + width: 36px;
  271 + height: 44px;
  272 + font-size: 28px;
  273 + color: #fff;
  274 + line-height: 44px;
  275 + background-color: #000;
  276 + }
  277 + }
256 } 278 }