拼团首页资源位及UI调整 review by bevishuang

@@ -341,6 +341,8 @@ class GroupService extends global.yoho.BaseModel {
                 val.market_price = val.market_price ? val.market_price.toFixed(2) : '';
                 val.collagePrice = val.collagePrice ? val.collagePrice.toFixed(2) : '';
                 val.joinLimitStr = val.join_limit === 1 ? '邀新团' : '普通团';
+                // eslint-disable-next-line max-len
+                val.joinPeopleNum = val.joinPeopleNum > 10000 ? (val.joinPeopleNum / 10000).toFixed(1) + '万' : val.joinPeopleNum;
             });
         }
         return finalResult;

@@ -21,6 +21,7 @@
             {{/if}}
             {{> group/resources/filter-tab}}
         </div> --}}
+        <div class="goods-list-title">猜你喜欢</div>
         <div id="goodsContainer" class="goods-container">
             {{#if filterList.length}}
             <div class="new-goods-list">

@@ -23,8 +23,13 @@
         {{#if data.prdList}}
             <div class="resource-collage-buy-prd-list-c templates" data-f-name="{{../template_name}}" data-f-id="{{../template_id}}" data-id="{{@index}}" data-prd-list-length="{{data.prdList.length}}" data-prd-speed="{{speed}}">
                 {{!-- <div class="collage-buy-title">{{../template_intro}}</div> --}}
-                <div class="collage-buy-title">今日必拼</div>
+                <div class="collage-buy-header">
+                    <div class="collage-buy-title">今日必拼</div>
+                    <div class="swiper-pagination1"></div>
+                </div>
+                
                 <div class="swiper-container1 swiper-container">
+                    
                     <div class="swiper-wrapper">
                         {{#each data.prdList}}
                             <div class="swiper-slide swiper-slide-1" data-product-skn="{{productSkn}}"
@@ -47,7 +52,7 @@
                             </div>
                         {{/each}}
                     </div>
-                    <div class="swiper-pagination"></div>
+                    
                 </div>
             </div>
         {{/if}}

@@ -12,7 +12,7 @@
                         {{/if}}
                     </div>
                 {{^}}
-                    <div id="tab-{{@index}}" data-template-name="{{../template_name}}" data-tab-name="{{tab_name}}" data-template-id="{{../template_id}}" data-index="{{@index}}" data-index-idx="{{@../index}}" data-item-idx="{{@index}}" class="guess-tab" data-query="{{queryString}}">
+                    <div id="tab-{{@index}}" data-template-name="{{../template_name}}" data-tab-name="{{tab_name}}" data-template-id="{{../template_id}}" data-index="{{@index}}" data-index-idx="{{@../index}}" data-item-idx="{{@index}}" class="guess-tab" data-query="{{queryString}}" data-code="{{resources_code}}">
                         {{#if src}}
                         <img class="guess-img" src="{{image2 src w=200 h=160 q=60 mode=3}}" />
                         <div></div>

@@ -5,8 +5,8 @@
             <span class="new-group-product-left-icon-number"></span>
         </div>
         {{/ifcond}} --}}
-        {{#if cover_info}}
-        <img src="{{cover_info.list_bg_img}}" class="list-bg-icon" alt="list_icon">
+        {{#if icon}}
+        <img src="{{icon}}" class="list-bg-icon" alt="list_icon">
         {{/if}}
         {{#if @root.lazyLoad}}
         <img class="lazy new-group-product-image" data-original="{{image2 default_images w=400 h=390 q=60 mode=3}}" />
@@ -21,7 +21,7 @@
                 {{#ifcond joinLimitStr "==" "邀新团"}}
                 <div class="new-group-invite">邀新团</div>
                 {{/ifcond}}
-                <div class="new-group-free-post1">包邮</div>
+                {{!-- <div class="new-group-free-post1">包邮</div> --}}
                 <div class="new-group-number forcefontsize10">已拼{{joinPeopleNum}}件</div>
             </div>
             <div class="new-group-prict-bg">

@@ -21,7 +21,7 @@
                 {{#ifcond joinLimitStr "==" "邀新团"}}
                 <div class="new-group-invite">邀新团</div>
                 {{/ifcond}}
-                <div class="new-group-free-post1">包邮</div>
+                {{!-- <div class="new-group-free-post1">包邮</div> --}}
                 <div class="new-group-number forcefontsize10">已拼{{joinPeopleNum}}件</div>
             </div>
             <div class="new-group-prict-bg">

@@ -308,16 +308,17 @@ class Group extends Page {
         // } else {
         //     this.scrollSmoothTo(document.getElementById('goodsContainer').offsetTop);
         // }
-        $('.guess-tab').children('div').removeClass('guess-tab-active');
-        $this.children('div').addClass('guess-tab-active');
-        $('.guess-tab').children('.guess-like-tab').removeClass('guess-like-tab-active');
-        $this.children('.guess-like-tab').addClass('guess-like-tab-active');
+
 
         if (code) {
              this.fetchResources({
                  code: code
              }).then(res => {
                  that.renderFloor(res);
+                 $('.guess-tab').children('div').removeClass('guess-tab-active');
+                 $this.children('div').addClass('guess-tab-active');
+                 $('.guess-tab').children('.guess-like-tab').removeClass('guess-like-tab-active');
+                 $this.children('.guess-like-tab').addClass('guess-like-tab-active');
              });
         } else {
             $('.floors').html('');
@@ -560,7 +561,8 @@ class Group extends Page {
                 slidesPerGroup: 3,
                 autoplay: speed,
                 autoplayDisableOnInteraction: false,
-                pagination: '.swiper-pagination',
+                pagination: '.swiper-pagination1',
+                paginationType: 'fraction',
                 paginationClickable: true,
                 loop: true
             });
@@ -730,6 +732,8 @@ class Group extends Page {
         let resourceHtml = resources(data);
 
         $('.floors').html(resourceHtml);
+        this.swiperTop();
+        this.swiperGroup();
     }
     renderMoreData(list, isLoad) {
         let appendHtml = '';

@@ -4,26 +4,29 @@
 
     .swiper-pagination {
         position: absolute;
-        left: 0;
-        right: 0;
+        left: 50%;
+        transform: translateX(-50%);
         bottom: 20px;
         text-align: center;
         z-index: 1;
 
         .pagination-inner {
-            display: inline-block;
-            padding: 0 8px 4px;
+            display: flex;
+            padding: 5px;
             background: rgba(0, 0, 0, 0.2);
             border-radius: 50px;
-            line-height: 1.2;
+            height: 20px;
+            box-sizing: border-box;
+            justify-content: center;
+            align-items: center;
 
             span {
                 display: inline-block;
-                width: 14px;
-                height: 14px;
+                width: 10px;
+                height: 10px;
                 background: #fff;
                 opacity: 0.5;
-                margin: 0 9px;
+                margin: 0 6px;
                 border-radius: 50%;
 
                 &.swiper-pagination-bullet-active {

 .resource-collage-buy-prd-list-c {
-    margin-left: 20px;
-    margin-right: 20px;
-    margin-top: 20px;
-    margin-bottom: 10px;
+    margin: 20px;
     background: white;
     border-radius: 10px;
 
+    .collage-buy-header {
+        padding: 20px 20px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
     .collage-buy-title {
         font-family: PingFang-SC-Semibold, sans-serif;
         font-size: 32px;
         color: #444;
-        padding-top: 20px;
-        padding-left: 20px;
+        // padding-top: 20px;
+        // padding-left: 20px;
+    }
+
+    .swiper-pagination-fraction {
+        .swiper-pagination-current {
+            color: #444;
+            font-size: 32px;
+        }
+
+        .swiper-pagination-total {
+            color: #444;
+            font-size: 24px;
+        }
     }
 
     .swiper-container1 {
         margin-left: 20px;
         margin-right: 20px;
-        padding-top: 20px;
-        padding-bottom: 60px;
+        padding: 20px 0;
     }
 
     .swiper-slide-1 {

@@ -47,12 +47,12 @@
         line-height: 88px;
         text-align: center;
         font-size: 28px;
-        color: #999;
+        color: #b0b0b0;
     }
 
     .guess-like-tab-active {
         font-size: 32px;
-        color: #333;
+        color: #222;
     }
 
     .wapper::-webkit-scrollbar {

@@ -2,6 +2,16 @@
     background: #f0f0f0;
 }
 
+.goods-list-title {
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+    font-size: 32px;
+    color: #444;
+    letter-spacing: 1px;
+    background-color: #f0f0f0;
+}
+
 .new-goods-list {
     display: flex;
     flex-direction: column;
@@ -180,7 +190,7 @@
     .list-bg-icon {
         position: absolute;
         top: 40px;
-        left: 0;
-        height: 36px;
+        left: 30px;
+        height: 26px;
     }
 }