店铺数据模板渲染

+<div class="shop-container{{#is-equal-or numOfOneRow '2'}} shop-two{{^}} shop-three{{/is-equal-or}} shop-individuation">
+    {{#renderData}}
+        {{#is-equal-or ../numOfOneRow '2'}}
+        <a{{#is-equal-or ../jump2Shop '1'}} href="{{href}}"{{/is-equal-or}} class="pull-left shop-box">
+            <div class="shop-img">
+                <img class="left-icon" src="{{image2 ../lefTopImg q=85}}" alt="">
+                {{#is-equal-or ../displayStyle '1'}}
+                <img src="{{image2 pic_popular w=187 h=275 q=85}}" alt="">
+                {{^}}
+                <img src="{{image2 shop_logo w=187 h=275 q=85}}" alt="">
+                {{/is-equal-or}}
+            </div>
+            <div class="shop-bottom-bar" style="background-image: url({{image2 ../brandImg w=290 h=60 q=85}})">
+                <span class="shop-name" style="{{#if ../shopNameFontColor}}color: {{../shopNameFontColor}}{{/if}}">{{shop_name}}</span>
+            </div>
+        </a>
+        {{^}}
+        <a{{#is-equal-or ../jump2Shop '1'}} href="{{href}}"{{/is-equal-or}} class="pull-left shop-box {{#is-equal-or ../displayStyle '0'}}shop-logo{{/is-equal-or}}">
+            <div class="shop-img">
+                <img class="left-icon" src="{{image2 ../lefTopImg q=85}}" alt="">
+                {{#is-equal-or ../displayStyle '1'}}
+                <img src="{{image2 pic_popular w=187 h=275 q=85}}" alt="">
+                {{^}}
+                <img src="{{image2 shop_logo w=156 h=106 q=85}}" {{#is-equal-or ../displayStyle '0'}}class="shop-logo-img"{{/is-equal-or}} alt="">
+                {{/is-equal-or}}
+                <span class="shop-name" style="{{#if ../shopNameFontColor}}color: {{../shopNameFontColor}}{{/if}}">{{shop_name}}</span>
+            </div>
+            <div class="shop-bottom-bar" style="background-image: url({{image2 ../brandImg w=290 h=60 q=85}});">
+            </div>
+        </a>
+        {{/is-equal-or}}
+    {{/renderData}}
+</div>

@@ -4,6 +4,7 @@ const Swiper = require('yoho-swiper');
 const yoho = require('../yoho-app');
 const qs = require('yoho-qs');
 const cookie = require('yoho-cookie');
+const shopTmpl = require('activity/feature/shop-group.hbs');
 
 global.jQuery = $;
 
@@ -281,10 +282,16 @@ function shopGroupInit() {
             data: config,
             dataType: 'jsonp'
         }).then(res => {
-            if (res && res.html) {
-                $this.replaceWith(res.html);
+            if (res && res.data && res.data.length) {
+                config.renderData = res.data;
+
+                config.renderData.forEach(shop => {
+                    shop.href = `//m.yohobuy.com/product/shop?domain=${shop.shop_domain}&openby:yohobuy={"action":"go.shop","params":{"shop_id":${shop.shops_id},"shop_template_type":${shop.shop_template_type || "1"},"is_red_shop":${shop.is_red_shop || 1}}}`; // eslint-disable-line
+                });
+
+                $this.replaceWith(shopTmpl(config));
             } else {
-                // $this.remove();
+                $this.remove();
             }
         });
     });

@@ -30,11 +30,21 @@ $shop-width-3: 187px;
             top: 0;
             z-index: 1;
         }
+
+        .shop-name {
+            position: absolute;
+            margin-left: 0;
+            text-align: center;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            line-height: 50px;
+        }
     }
 
     .shop-name {
         font-size: 24px;
-        margin-left: 5px;
+        margin-left: 8px;
         white-space: nowrap;
         width: 73%;
         overflow: hidden;
@@ -96,3 +106,45 @@ $shop-width-3: 187px;
         }
     }
 }
+
+/*
+    个性化店铺组与原有店铺组样式几乎完全不一样
+*/
+.shop-individuation {
+    &.shop-two,
+    &.shop-three {
+        margin-top: 10px;
+    }
+
+    &.shop-three {
+        padding-left: 32px;
+
+        .shop-box {
+            width: 184px;
+            margin-right: 8px;
+
+            .shop-bottom-bar {
+                height: 40px;
+            }
+        }
+
+        .shop-logo {
+            height: 126px;
+            background: #ccc;
+            margin-bottom: 8px;
+
+            .shop-bottom-bar,
+            .shop-name {
+                display: none;
+            }
+
+            .shop-logo-img {
+                position: relative;
+                width: 132px;
+                height: 88px;
+                left: 26px;
+                top: 20px;
+            }
+        }
+    }
+}