拼团结果页修改

@@ -41,14 +41,21 @@ class GroupService extends global.yoho.BaseModel {
             // 5. 团已达成--你来晚了没能加入
             // 6. 拼团失败--过期未达成
             // 7. 拼团失败--过期未达成
-
             let yourJoinItem = detail.yourJoinItem;
+            let lackNum = detail.lackNum;
             let membershipItems = detail.membershipItems;
 
             if (!yourJoinItem) {
                 detail.yourJoinItem = membershipItems[0];
             }
 
+            for (let i = 0; i < +lackNum; i++) {
+                detail.membershipItems.push({
+                    empty: true
+                });
+            }
+
+
             return {
                 ...detail,
                 recommend

@@ -3,8 +3,28 @@
     <div class="card">
         <div class="inner-card">
             <img src="{{image2 yourJoinItem.productIcon w=200 h=282}}" alt="" class="card-pre-img">
+            <div class="info">
+                <div class="name">{{yourJoinItem.productName}}</div>
+                <div class="group-price">{{yourJoinItem.productGroupPrice}}</div>
+                <div class="single-buy-price">单人购买：<span class="line-through">{{yourJoinItem
+                    .productSalePrice}}</span></div>
+            </div>
         </div>
 
+        <div class="members">
+            {{#membershipItems}}
+            {{#if empty}}
+            <div class="meb-item empty"></div>
+            {{else}}
+                <div class="meb-item">
+                    <img class="avatar" src="{{image2 headUrl w=160 h=160}}" alt="">
+                    {{#if @first}}
+                    <span class="leader-badge"></span>
+                    {{/if}}
+                </div>
+            {{/if}}
+            {{/membershipItems}}
+        </div>
 
         {{#ifcond pageGo '===' 7}}
             <div class="status-text">拼团失败</div>
@@ -34,6 +54,12 @@
         {{# @root.data.recommend.collageProductVoList}}
         <div class="product-item">
             <img src="{{image2 defaultImages w=200 h=282}}" alt="" class="prd-item-img">
+            <div class="prd-info">
+                <div class="buy-btn">
+                    <span class="num">{{peopleNum}}人成团</span>
+                    <span class="immediate">立即购买</span>
+                </div>
+            </div>
         </div>
         {{/@root.data.recommend.collageProductVoList}}
     </div>

@@ -55,6 +55,68 @@
         height: 282px;
     }
 
+    .inner-card .info {
+        height: 282px;
+        padding: 34px 20px 0 230px;
+        box-sizing: border-box;
+
+        .group-price {
+            font-size: 40px;
+            color: #d0021b;
+            font-weight: bold;
+        }
+
+        .single-buy-price {
+            font-size: 20px;
+            color: #b0b0b0;
+        }
+
+        .single-buy-price .line-through {
+            text-decoration: line-through;
+        }
+    }
+
+    .members {
+        position: absolute;
+        top: 194px;
+        left: 0;
+        right: 0;
+        font-size: 0;
+        text-align: center;
+    }
+
+    .meb-item {
+        position: relative;
+        display: inline-block;
+        width: 80px;
+        height: 80px;
+        margin-left: 40px;
+        border-radius: 40px;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        &.empty {
+            background-image: url("img/activity/group/member-empty.png");
+            background-size: 80px 80px;
+        }
+
+        .avatar {
+            border-radius: 40px;
+        }
+
+        .leader-badge {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 80px;
+            height: 80px;
+            background-image: url("img/activity/group/member-leader.png");
+            background-size: 80px 80px;
+        }
+    }
+
     .tip {
         position: absolute;
         right: 0;
@@ -104,5 +166,45 @@
             height: 260px;
             width: 200px;
         }
+
+        .prd-info {
+            padding-left: 220px;
+            height: 260px;
+        }
+
+        .prd-info .buy-btn {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            width: 240px;
+            height: 60px;
+            font-size: 0;
+            border-radius: 30px;
+            border: 1px solid #d0021b;
+        }
+
+        .buy-btn .num {
+            display: inline-block;
+            width: 50%;
+            height: 100%;
+            font-size: 24px;
+            color: #d0021b;
+            line-height: 58px;
+            text-align: center;
+        }
+
+        .buy-btn .immediate {
+            display: inline-block;
+            width: 50%;
+            height: 100%;
+            font-size: 24px;
+            color: #fff;
+            line-height: 58px;
+            text-align: center;
+            letter-spacing: -0.34px;
+            background-color: #d0021b;
+            border-top-right-radius: 30px;
+            border-bottom-right-radius: 30px;
+        }
     }
 }