Merge branch 'develop' of git.yoho.cn:fe/yohoblk-wap into develop

@@ -23,7 +23,7 @@ const model = {
             const content = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getArticleContent', params);
             const brands = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getBrand', params);
             const other = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getOtherArticle', Object.assign({
-                tags: article.data.tag,
+                tags: article.data ? article.data.tag : {},
                 offset: 0,
                 limit: 3
             }, params));

 const Vue = require('vue');
 const lazyload = require('vue-lazyload');
 const directive = require('common/vue-directive');
-const app = require('product/detail/index.vue');
+const app = require('editorial/detail.vue');
 
 require('common/vue-filter');
 Vue.use(lazyload);

@@ -202,8 +202,6 @@
 }
 </style>
 <script>
-    const bus = require('common/vue-bus');
-
     module.exports = {
         props: {
             category: {
@@ -226,13 +224,7 @@
         },
         watch: {
             category() {
-                this.$set('cateNavLeftData', this.category);
-                this.$set('cateNavRightData', this.cateNavLeftData ? this.cateNavLeftData[0].sub : []);
-
-                this.$set('rightAll', this.cateNavLeftData ? {
-                    sortId: this.cateNavLeftData[0].relationParameter.sort,
-                    categoryName: this.cateNavLeftData[0].categoryName
-                } : {});
+                this.categoryChangeHandler();
             }
         },
         methods: {
@@ -247,11 +239,28 @@
 
             /* 筛选列表使用返回值 */
             noJumpReturn(categoryId, categoryName) {
-                bus.$emit('category.result', {
+                this.$dispatch('select', {
                     id: categoryId,
                     name: categoryName
                 });
+            },
+
+            categoryChangeHandler() {
+                if (!this.category.length) {
+                    return;
+                }
+
+                this.$set('cateNavLeftData', this.category);
+                this.$set('cateNavRightData', this.cateNavLeftData ? this.cateNavLeftData[0].sub : []);
+
+                this.$set('rightAll', this.cateNavLeftData ? {
+                    sortId: this.cateNavLeftData[0].relationParameter.sort,
+                    categoryName: this.cateNavLeftData[0].categoryName
+                } : {});
             }
+        },
+        created() {
+            this.categoryChangeHandler();
         }
     };
 </script>

 <template>
-    <div class="header" :class="class">
-        <div class="header-left">
-            <slot name="left">
-                <i class="icon icon-left" @click="goBack"></i>
-            </slot>
-        </div>
-        <div class="header-right">
-            <slot name="right"></slot>
-        </div>
-        <div class="header-main">
-            <span class="header-title">{{title}}</span>
+    <div class="header-wrap" :class="class">
+        <div class="header">
+            <div class="header-left">
+                <slot name="left">
+                    <i class="icon icon-left" @click="goBack"></i>
+                </slot>
+            </div>
+            <div class="header-right">
+                <slot name="right"></slot>
+            </div>
+            <div class="header-main">
+                <span class="header-title">{{title}}</span>
+            </div>
         </div>
+        <div class="header-gap"></div>
     </div>
-    <div class="header-gap"></div>
 </template>
 <script>
     const yoho = require('yoho');
@@ -68,7 +70,7 @@
 
     .header-gap {
         height: 90px;
-        background-color: #fff;
+        background-color: transparent;
     }
 
     .app.ios {

@@ -23,12 +23,19 @@
     const bus = require('common/vue-bus');
     const Overlay = require('common/overlay');
     const filterSub = require('./filter/filter-sub.vue');
+    const qs = require('yoho-qs/parse');
+    let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, '')));
+    let hasSort = !!locationQuery.sort;
+
+    const aliasMap = {
+        groupSort: 'sort'
+    };
 
     module.exports = {
         props: {
             config: Object,
             isVisible: Boolean,
-            action: '',
+            action: ''
         },
         data: function() {
             return {
@@ -60,8 +67,8 @@
             showCate: function(cateName, cateVals) {
                 if (toString.call(cateVals) === '[object Array]') {
                     if (cateName === 'groupSort') {
-                        // TODO
-                    } else if (cateVals.length > 1) {
+                        return !hasSort;
+                    } else if (cateVals.length >= 1) {
                         return true;
                     }
                 }
@@ -92,10 +99,16 @@
              * @param {[type]} val  [description]
              */
             setParams: function(item) {
-                this.$set(`params.${this.subType}`, item);
+                let sortType = this.subType;
+
+                aliasMap[this.subType] && (sortType = aliasMap[this.subType]);
+
+                this.$set(`params.${sortType}`, item);
             },
 
             showLabel: function(key) {
+                aliasMap[key] && (key = aliasMap[key]);
+                
                 const newSelected = this.params[key];
                 const oldSelected = this.selected[key];
 
@@ -106,24 +119,6 @@
                 }
             }
         },
-        filters: {
-            unifyTxt: function(val, category) {
-                let txt = '';
-                let arr = [];
-                let foo = $.noop;
-
-
-                if ($.isArray(val)) { // [{categoryName,..},{}..]
-                    foo = (index, obj) => {
-                        arr.push(obj[category + 'Name']);
-                    };
-                }
-
-                $.each(val, foo);
-                txt = arr.join(',');
-                return txt;
-            }
-        },
         created() {
             const self = this;
 

@@ -3,19 +3,21 @@
         <c-header class="filter-sub-header" :title="type | filter-cn '选择'">
             <i class="icon icon-left" slot="left" @click="hide"></i>
         </c-header>
-        <div>
-            <brand-filter v-if="type === 'brand'" :data="data" :val.sync="val" @select="selectItem"></brand-filter>
-            <normal-filter v-else :data="data" :type="type" :val.sync="val" @select="selectItem"></normal-filter>
-    </div>
+        <div class="filter-sub-select">
+            <brand-filter v-if="type === 'brand'" :data="data" @select="selectItem"></brand-filter>
+            <normal-filter v-if="type !== 'brand' && type !== 'groupSort'" :data="data" :type="type" @select="selectItem"></normal-filter>
+            <sort-filter class="filter-detail filter-sort" v-if="type === 'groupSort'" :category="data" @select="selectItem"></sort-filter>
+        </div>
     </div>
 </template>
 <script>
     const cHeader = require('component/header.vue');
     const brandFilter = require('./brand.vue');
     const normalFilter = require('./normal.vue');
+    const sortFilter = require('channel/brand-cate.vue');
 
     module.exports = {
-        components: {cHeader, brandFilter, normalFilter},
+        components: {cHeader, brandFilter, normalFilter, sortFilter},
         props: ['type', 'data'],
         data() {
             return {
@@ -47,7 +49,6 @@
     transform: translate3d(100%, 0, 0);
     background-color: $white;
     z-index: 2010;
-    overflow: auto;
 
     &.filter-sub-open {
         transform: translate3d(0, 0, 0);
@@ -90,4 +91,30 @@
 
     }
 }
+
+.filter-sub-select {
+    position: absolute;
+    top: 90px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.filter-detail {
+    height: 100%;
+    overflow: auto;
+}
+
+.filter-sort {
+    .cate-container {
+        margin-top: 0;
+        height: 100%;
+    }
+    .content {
+        height: 100% !important;
+    }
+    .sub-level-container {
+        overflow: auto;
+    }
+}
 </style>
\ No newline at end of file

@@ -4,7 +4,7 @@
             <li class="card" v-for="item in data">
                 <div class="card-pic">
                     <a href="{{item.productId | goodsUrl}}">
-                        <img v-lazy="item.goodsList[0].imagesUrl | resize 372 499" alt="{{item.productName}}">
+                        <img v-lazy="item.defaultImages | resize 372 499" alt="{{item.productName}}">
                     </a>
                 </div>
                 <div class="card-bd">

@@ -60,11 +60,11 @@
                 }, (results)=> {
                     const result = results[0], misc = results[1];
 
-                    if (result.code === 200) {
+                    if (result && result.code === 200) {
                         this.likeCount = result.data;
                     }
 
-                    if (misc.code === 200) {
+                    if (misc && misc.code === 200) {
                         this.isLiked = misc.data.isPraise === 'Y';
                     }
                 });
@@ -75,9 +75,9 @@
                 }, (results)=> {
                     const result = results[0], misc = results[1];
 
-                    if (result.code === 200) {
+                    if (result && result.code === 200) {
                         // TODO:
-                    } if (result.code === 403) {
+                    } if (result && result.code === 403) {
                         // 未登录
                         yoho.goLogin('', function() {
                             this.toggleFavorite();
@@ -86,7 +86,7 @@
                         });
                     }
 
-                    if (misc.code === 200) {
+                    if (misc && misc.code === 200) {
                         this.isFavorite = misc.data.isFavor === 'Y';
                     }
                 });
@@ -109,7 +109,7 @@
         },
         created() {
             $.get(`/editorial/misc_${this.id}.json`).then(result => {
-                if (result.code === 200) {
+                if (result && result.code === 200) {
                     this.isFavorite = result.data.isFavor === 'Y';
                     this.isLiked = result.data.isPraise === 'Y';
                 }

 <template>
+    <top-bar v-bind:share-data="shareData"></top-bar>
     <shop-top v-bind:shop-info="shopInfo"></shop-top>
     <div v-bind:class='{"shop-goods-top": !shopInfo.isBlkShop}'>
-        <goods-list v-bind:data="productList"></goods-list>
+        <goods-list v-bind:data="productList" :empty="empty"></goods-list>
     </div>
     <filter :config="filterConfig" v-ref:filter></filter>
-    <top-bar v-bind:share-data="shareData"></top-bar>
 </template>
 <style>
-    .shop-goods-top {
-        margin-top: 140px;
+    #shop {
+        .empty-tip {
+            margin-top: 40px;
+        }
     }
 </style>
 <script>
@@ -53,6 +55,11 @@
                 inSearching: false
             };
         },
+        computed: {
+            empty: function() {
+                return this.page !== 0 && !this.productList.length;
+            }
+        },
         watch: {
 
             /* order 和 filter 改变 都会触发 重新搜索 (想象成清空所有分页) */
@@ -79,7 +86,7 @@
                         this.shareData = {
                             title: result.shopName,
                             des: shareSubTitle,
-                            url: '/brand/share/' + $shop.data('domain'),
+                            url: location.origin + '/brand/share/' + $shop.data('domain'),
                             img: result.shopBg,
                             isBlkShop: result.isBlkShop,
                             domain: locationQuery.domain,

 <template>
     <div v-if="shopInfo.isBlkShop" class="brand-top-box" v-lazy:background-image="shopInfo.shopBg | resize 750 478">
         <div class="brand-bottom">
-            <img v-if="shopInfo.brandLogo" v-lazy="shopInfo.brandLogo | resize 80 80" alt="{{ shopInfo.shopName }}">
+            <img v-if="shopInfo.shopLogo" v-lazy="shopInfo.shopLogo | resize 80 80" alt="{{ shopInfo.shopName }}">
             <div v-else class="brand-title">{{ shopInfo.shopName }}</div>
             <hr>
             <div v-show="showMore" transition="brand-intro" v-bind:class="{ 'brand-short': !showMore }">{{ shopInfo.shopIntro }}</div>

 <template>
-    <div class="top-box clearfix" v-bind:class='{"top-change" : topChange || !shareData.isBlkShop}' v-infinite-scroll="changeTopStatus()">
-        <span class="icon icon-back back" @click="goBack()"></span>
-        <span class="brand-name" v-if="!shareData.isBlkShop">{{shareData.brandName}}</span>
-        <div class="right">
+    <cheader :title="title" :class='topClass'>
+        <template slot="right">
             <span v-if="shareData.isBlkShop" v-show="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span>
             <span v-if="shareData.isBlkShop" v-show="!shareData.isFav" class="icon" @click="collectShop()">&#xe60c;</span>
             <span v-if="shareData.isBlkShop" class="icon" @click="goShare()">&#xe60e;</span>
             <span class="icon" @click="showFilter()">&#xe60b;</span>
-        </div>
-    </div>
+        </template>
+    </cheader>
 </template>
 
 <style>
     .top-box {
-        width: 100%;
-        height: 80px;
-        padding: 10px 20px;
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 99;
-        color: #fff;
-        font-size: 48px;
-        text-align: center;
-
-        .back {
-            width: 60px;
-            height: 60px;
-            float: left;
-            font-size: 52px;
-        }
-
-        .brand-name {
-            display: inline-block;
-            max-width: 78%;
-            height: 60px;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
+        .header {
+            background-color: transparent;
+            color: #fff;
         }
 
-        .right {
-            height: 60px;
-            float: right;
-            margin: 0;
-            padding: 0;
-
-            span {
-                width: 60px;
-                height: 60px;
-                margin: 0 5px;
-            }
+        .header-gap {
+            display: none;
         }
     }
-
     .top-change {
-        background-color: #fff;
-        color: #000;
-        height: 80px;
-        top: 0;
-        padding: 5px 20px;
-    }
-
-    .app.ios {
-        .top-box {
-            top: 40px;
+        .header {
+            background-color: #fff;
+            color: #000;
         }
 
-        .top-change {
-            top: 0;
-            height: 120px;
-            padding: 55px 20px 10px;
+        .header-gap {
+            display: block;
         }
     }
 </style>
@@ -78,6 +35,7 @@
 <script>
     const yoho = require('yoho');
     const $ = require('jquery');
+    const cheader = require('component/header.vue');
 
     module.exports = {
         data() {
@@ -90,6 +48,26 @@
                 type: Object
             }
         },
+        computed: {
+            topClass() {
+                return {
+                    "top-change": this.topChange || !this.shareData.isBlkShop,
+                    "top-box": true
+                };
+            },
+            title() {
+                let result = '';
+
+                if (this.shareData.isBlkShop) {
+                    result = this.shareData.brandName
+                }
+
+                return result;
+            }
+        },
+        components: {
+            cheader
+        },
         methods: {
             goShare() {
 
@@ -135,6 +113,7 @@
         },
         created() {
             this.domain = this.shareData.domain;
+            window.onscroll = this.changeTopStatus.bind(this);
         }
     };
 </script>