Merge branch 'hotfix/brand-error-channel' into 'gray'

Hotfix/brand error channel

1、品牌跳转区分男女
2、商品详情页图片加载优化和dom高度预设定

See merge request !28

 <div id="app" class="product-page" data-pid="{{pid}}" data-goods-id="{{goodsId}}">
 <div id="app" class="product-page" data-pid="{{pid}}" data-goods-id="{{goodsId}}">
     <div id="ssr">
     <div id="ssr">
         {{#product}}
         {{#product}}
-        <div class="ssr show-box first-box">
+        <div class="ssr show-box first-box carousel">
             <div class="image-swipe">
             <div class="image-swipe">
                 <div class="swipe-wrap">
                 <div class="swipe-wrap">
                     <div class="ssr-swiper-container">
                     <div class="ssr-swiper-container">
@@ -15,7 +15,7 @@
             </div>
             </div>
         </div>
         </div>
         {{#brandInfo}}
         {{#brandInfo}}
-        <div class="show-box zero-top-margin">
+        <div class="show-box zero-top-margin action">
             <div>
             <div>
                 <ul class="item-action">
                 <ul class="item-action">
                     <li><a href="/product/shop/{{brand_domain}}"><i class="brand icon"></i><span class="action-text">
                     <li><a href="/product/shop/{{brand_domain}}"><i class="brand icon"></i><span class="action-text">

@@ -26,8 +26,8 @@ module.exports = () => {
         const channel = channelMap[req.query.app_channel] || req.query.channel || req.cookies._Channel || 'men';
         const channel = channelMap[req.query.app_channel] || req.query.channel || req.cookies._Channel || 'men';
 
 
         // 设置频道
         // 设置频道
-        res.cookie('_Channel', channel);
-        res.cookie('_ChannelIndex', indexMap[channel]);
+        res.cookie('_Channel', channel, {path: '/'});
+        res.cookie('_ChannelIndex', indexMap[channel], {path: '/'});
 
 
         // 用于头部颜色控制
         // 用于头部颜色控制
         yoho.pageChannel[channel] = true;
         yoho.pageChannel[channel] = true;

@@ -99,9 +99,13 @@ const getChannel = function() {
 
 
     yoho.ready(function() {
     yoho.ready(function() {
         yoho.getChannel({}, function(val) {
         yoho.getChannel({}, function(val) {
+            const opt = {
+                path: '/'
+            };
+
             val = val - 1;
             val = val - 1;
-            cookie.set('_Channel', channel[val].en);
-            cookie.set('_ChannelIndex', val);
+            cookie.set('_Channel', channel[val].en, opt);
+            cookie.set('_ChannelIndex', val, opt);
         });
         });
     });
     });
 };
 };

@@ -12,15 +12,6 @@ yoho.ready(() => {
         el: '#app',
         el: '#app',
         components: {
         components: {
             app: app
             app: app
-        },
-        created() {
-            setTimeout(() => {
-                let ssrs = document.getElementById('ssr');
-
-                if (ssrs) {
-                    ssrs.remove();
-                }
-            }, 100);
         }
         }
     });
     });
 });
 });

@@ -74,13 +74,16 @@
         methods: {
         methods: {
             changeChannel(index, id) {
             changeChannel(index, id) {
                 const objY = {};
                 const objY = {};
+                const opt = {
+                    path: '/'
+                };
 
 
                 objY[this.page + '_' + this.channel[this.current].channel] = window.scrollY;
                 objY[this.page + '_' + this.channel[this.current].channel] = window.scrollY;
 
 
                 this.currentChannel = index;
                 this.currentChannel = index;
                 bus.$emit('channel.change', this.page, this.channel[index].channel, objY);
                 bus.$emit('channel.change', this.page, this.channel[index].channel, objY);
-                cookie.set('_Channel', this.channel[index].channel);
-                cookie.set('_ChannelIndex', index);
+                cookie.set('_Channel', this.channel[index].channel, opt);
+                cookie.set('_ChannelIndex', index, opt);
 
 
                 if(yoho.isApp) {
                 if(yoho.isApp) {
                     yoho.setChannel({
                     yoho.setChannel({

@@ -93,9 +93,13 @@
         },
         },
         methods: {
         methods: {
             changeChannel(val) {
             changeChannel(val) {
+                const opt = {
+                    path: '/'
+                };
+
                 this.$emit('cv', val);
                 this.$emit('cv', val);
-                cookie.set('_Channel', this.channel[val].en);
-                cookie.set('_ChannelIndex', val);
+                cookie.set('_Channel', this.channel[val].en, opt);
+                cookie.set('_ChannelIndex', val, opt);
             },
             },
             bgChange(src) {
             bgChange(src) {
                 return `background: url(${src})`;
                 return `background: url(${src})`;

@@ -342,12 +342,15 @@
         created() {
         created() {
             yoho.addNativeMethod('changeChannel', val => {
             yoho.addNativeMethod('changeChannel', val => {
                 let label;
                 let label;
+                const opt = {
+                    path: '/'
+                };
 
 
                 val = val - 1;
                 val = val - 1;
                 label = channelLabel[val];
                 label = channelLabel[val];
                 this.curChannel = label;
                 this.curChannel = label;
-                cookie.set('_ChannelIndex', val);
-                cookie.set('_Channel', label.toLowerCase());
+                cookie.set('_ChannelIndex', val, opt);
+                cookie.set('_Channel', label.toLowerCase(), opt);
             });
             });
         }
         }
     };
     };

 <template>
 <template>
-    <div class="image-swipe">
+    <div class="image-swipe" v-if="allLoaded">
         <div class="swipe-wrap" @click.prevent="showcase()">
         <div class="swipe-wrap" @click.prevent="showcase()">
             <swiper :options="swiperOption" ref="swiper">
             <swiper :options="swiperOption" ref="swiper">
                 <swiper-slide v-for="item in goodsList" :key="item.title">
                 <swiper-slide v-for="item in goodsList" :key="item.title">
@@ -20,6 +20,7 @@
 <script>
 <script>
     require('swiper/dist/css/swiper.css');
     require('swiper/dist/css/swiper.css');
     import yoho from 'yoho';
     import yoho from 'yoho';
+    import util from 'common/util';
     import vas from 'vue-awesome-swiper';
     import vas from 'vue-awesome-swiper';
 
 
     export default {
     export default {
@@ -39,7 +40,8 @@
                     onSlideChangeEnd(swiper) {
                     onSlideChangeEnd(swiper) {
                         vm.setActiveSlide(swiper.realIndex)
                         vm.setActiveSlide(swiper.realIndex)
                     }
                     }
-                }
+                },
+                allLoaded: false
             };
             };
         },
         },
         components: {
         components: {
@@ -69,6 +71,37 @@
                 }
                 }
                 this.goodsList = temp;
                 this.goodsList = temp;
                 this.slideCount = this.goodsList.length;
                 this.slideCount = this.goodsList.length;
+            },
+            goodsList(goods) {
+                const preloadImg = (list, loaded) => {
+                    loaded = loaded || [];
+
+                    // 加载完成
+                    if(list.length === 0) {
+                        let $ssr = document.getElementById('ssr');
+                        $ssr && $ssr.remove();
+                        this.allLoaded = true;
+                        return;
+                    }
+
+                    let img = new Image();
+                    img.src = util.getImgUrl(list[0].image_url, '580', '770');
+
+                    if(img.complete) {
+                        loaded.push(img);
+                        list.shift();
+                        preloadImg(list, loaded);
+                    }
+                    else {
+                        img.onload = function() {
+                            loaded.push(img);
+                            list.shift();
+                            preloadImg(list, loaded);
+                        };
+                    }
+                };
+
+                preloadImg(goods[0].images_list);
             }
             }
         },
         },
         methods: {
         methods: {
@@ -133,9 +166,21 @@
             height: 770px;
             height: 770px;
         }
         }
     }
     }
-}
 
 
+    .show-box.carousel {
+        border-top: none;
+        border-bottom: none;
+    }
+    .show-box.info,
+    .show-box.action {
+        border-top: none;
+    }
 
 
+    .show-box.action {
+        padding-bottom: 0;
+        border-bottom: none;
+    }
+}
 
 
 .image-swipe {
 .image-swipe {
     position: relative;
     position: relative;

@@ -422,7 +422,6 @@
                 return result.data;
                 return result.data;
             }).then((data)=> {
             }).then((data)=> {
                 if (data) {
                 if (data) {
-                    console.log(data)
                     // 读取商品详情
                     // 读取商品详情
                     $.get(`/product/product/intro_${pid}.json`, {skn: data.product_skn}).then(intro => {
                     $.get(`/product/product/intro_${pid}.json`, {skn: data.product_skn}).then(intro => {
                         this.intro = intro;
                         this.intro = intro;
@@ -520,6 +519,7 @@
     }
     }
 
 
     .show-box.carousel {
     .show-box.carousel {
+        border-top: none;
         border-bottom: none;
         border-bottom: none;
     }
     }
     .show-box.info,
     .show-box.info,
@@ -530,6 +530,14 @@
     .show-box.action {
     .show-box.action {
         padding-bottom: 0;
         padding-bottom: 0;
         border-bottom: none;
         border-bottom: none;
+
+        .item-action {
+            height: 103px;
+        }
+
+        .item-price {
+            min-height: 80px;
+        }
     }
     }
 
 
     .service {
     .service {