Merge branch 'feature/0430' into 'release/6.9.2'

Feature/0430



See merge request !62

@@ -20,10 +20,9 @@ Vue.mixin(titleMixin);
 dayjs.locale('zh-cn');
 dayjs.extend(relativeTime);
 
-export function createApp(context) {
+export function createApp(context, state = {}) {
   const router = createRouter();
-  const store = createStore(context);
-
+  const store = createStore(context, state);
 
   const app = new Vue({
     router,

@@ -115,6 +115,7 @@ export default {
 
   &.single {
     width: 690px;
+    margin-right: 0;
   }
 }
 

 <template>
   <div class="product-group">
-    <ProductGroupItem
-      v-for="(product, inx) in data"
-      :share="share"
-      :thumb="thumb"
-      :single="single"
-      :product="product"
-      :article-id="articleId"
-      :pos-id="posId"
-      :lazy="lazy"
-      :index="index"
-      :key="inx">
-    </ProductGroupItem>
+    <div class="product-group-scroll">
+      <ProductGroupItem
+        v-for="(product, inx) in data"
+        :share="share"
+        :thumb="thumb"
+        :single="single"
+        :product="product"
+        :article-id="articleId"
+        :pos-id="posId"
+        :lazy="lazy"
+        :index="index"
+        :key="inx">
+      </ProductGroupItem>
+    </div>
   </div>
 </template>
 
@@ -51,11 +53,16 @@ export default {
 
 <style lang="scss" scoped>
 .product-group {
+  height: 182px;
+  margin: 40px 0;
+  overflow-y: hidden;
+}
+
+.product-group-scroll {
   width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
-  height: 180px;
-  margin: 40px 0;
+  height: 220px;
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;
 }

@@ -13,7 +13,7 @@ import Lazy from 'vue-lazyload';
 import yoho from 'common/yoho';
 import sdk from 'common/sdk';
 import links from 'utils/links';
-import InitClient from 'utils/init-client';
+import {initClient, getYohoState} from 'utils/init-client';
 import 'statics/scss/common.scss';
 import 'statics/scss/grass-prompt.scss';
 import 'statics/font/iconfont.css';
@@ -22,7 +22,7 @@ const $app = document.getElementById('app');
 
 const isDegrade = Boolean(!($app && $app.attributes['data-server-rendered']));
 const context = get(window, '__INITIAL_STATE__.yoho.context');
-const {app, router, store} = createApp(context);
+const {app, router, store} = createApp(context, {yoho: getYohoState()});
 
 if (window.__INITIAL_STATE__) {
   store.replaceState(window.__INITIAL_STATE__);
@@ -51,7 +51,7 @@ Vue.use(ActionSheet);
 Vue.prop('api', createApi(context, store));
 Vue.use(Lazy, {error: ''});
 
-InitClient(store);
+initClient(store);
 
 const trackPage = (path) => {
   if (window._hmt) {

 <template>
-  <div class="topic-head" :style="headStyle">
+  <div v-if="data.topicImageUrl" class="topic-head" :style="headStyle">
     <div class="center">
       <p class="desc">{{data.topicDesc}}</p>
       <div v-if="showAttAmount" class="att-amount">
@@ -17,6 +17,7 @@
       </div>
     </div>
   </div>
+  <div v-else class="topic-head-empty" :style="headStyle"></div>
 </template>
 
 <script>
@@ -70,7 +71,6 @@ export default {
 .topic-head {
   min-height: 360px;
   background-size: 100%;
-  background-image: linear-gradient(140deg, #7A88FF, #7AFFAF);
   box-sizing: border-box;
   position: relative;
   background-size: cover;

@@ -230,7 +230,9 @@ export default {
 
       let step = Math.round((scrollTop - 10) / (this._topicHeaderHeight - this._headerHeight) * 100);
 
-      this.headerAnimateStep = Math.max(Math.min(step, 100), 0);
+      if (this.topicInfo.topicImageUrl) {
+        this.headerAnimateStep = Math.max(Math.min(step, 100), 0);
+      }
 
       if (+get(item, 'data.dataType') === 1) {
         if (this._currentId !== item.data.articleId) {
@@ -252,6 +254,10 @@ export default {
           });
         }
 
+        if (!get(res, 'data.topicImageUrl')) {
+          this.headerAnimateStep = 100;
+        }
+
         if (this.$refs.scroll) {
           this.$refs.scroll.$el.scrollTop = 0;
           this.$refs.scroll.init();

@@ -9,11 +9,11 @@ import storeProduct from './product';
 
 Vue.use(Vuex);
 
-export function createStore(context) {
+export function createStore(context, state = {}) {
   const store = new Vuex.Store({
     namespaced: true,
     modules: {
-      yoho: storeYoho(),
+      yoho: storeYoho(state.yoho),
       article: storeArticle(),
       user: storeUser(),
       comment: storeComment(),

 import * as Types from './types';
 import cookie from 'yoho-cookie';
+import {merge} from 'lodash';
 
-export default function() {
+export default function(state = {}) {
   return {
-    state: {
+    state: merge({
       context: {
         title: '',
         env: {
@@ -29,7 +30,7 @@ export default function() {
       historys: [],
       direction: 'forword',
       homePage: true
-    },
+    }, state),
     mutations: {
       [Types.SET_SERVER_INFO](state, {context}) {
         state.context.title = context.title;

@@ -3,11 +3,34 @@ import cookie from 'yoho-cookie';
 import yoho from 'common/yoho';
 import version from 'utils/version';
 
-export default store => {
+const setStatusBar = (width, height, store) => {
+  const statusBar = {
+    statusBarStatus: false,
+    statusBarHeight: 0,
+  };
+
+  // 仅支持ios
+  if (yoho.isYohoBuy && yoho.isiOS) {
+    statusBar.statusBarHeight = (height / width) > 2.1 ? 44 : 22;
+
+    store && store.commit('SET_STATUS_BAR_HEIGHT', {
+      height: statusBar.statusBarHeight
+    });
+
+    if (version(cookie.get('app_version'),' 6.9.2') >= 0) {
+      statusBar.statusBarStatus = true;
+      store && store.commit('SET_STATUS_BAR_STATUS', {status: true});
+    }
+  }
+
+  return statusBar;
+};
+
+const initClient = (store) => {
   window.onresize = () => {
     const {clientWidth, clientHeight} = document.body;
     store.commit('SET_WINDOW_SIZE', {clientWidth, clientHeight});
-    setStatusBar(clientWidth, clientHeight);
+    setStatusBar(clientWidth, clientHeight, store);
   };
   const {clientWidth, clientHeight} = document.body;
 
@@ -34,20 +57,7 @@ export default store => {
     }
   });
 
-  function setStatusBar(width, height) {
-    // 仅支持ios
-    if (yoho.isYohoBuy && yoho.isiOS) {
-      store.commit('SET_STATUS_BAR_HEIGHT', {
-        height: (height / width) > 2.1 ? 44 : 22
-      });
-
-      if (version(cookie.get('app_version'),' 6.9.2') >= 0) {
-        store.commit('SET_STATUS_BAR_STATUS', {status: true});
-      }
-    }
-  }
-
-  setStatusBar(clientWidth, clientHeight);
+  setStatusBar(clientWidth, clientHeight, store);
 
   if (/yoho/i.test(navigator.userAgent) && /supportWebp/i.test(navigator.userAgent)) {
     store.commit('SET_SUPPORT_WEBP', {supportWebp: true});
@@ -74,3 +84,24 @@ export default store => {
     });
   });
 };
+
+const getYohoState = () => {
+  const {clientWidth, clientHeight} = document.body;
+
+  return {
+    context: {
+      env: {
+        isApp: yoho.isApp,
+        isiOS: yoho.isiOS,
+        isAndroid: yoho.isAndroid,
+        isYohoBuy: yoho.isYohoBuy
+      }
+    },
+    window: setStatusBar(clientWidth, clientHeight)
+  }
+};
+
+export {
+  initClient,
+  getYohoState
+};