沉浸式顶栏

@@ -15,7 +15,8 @@
 </template>
 
 <script>
-import {mapState} from 'vuex';
+import {get} from 'lodash';
+import {mapState, mapMutations} from 'vuex';
 
 export default {
   name: 'App',
@@ -30,6 +31,14 @@ export default {
     ...mapState(['yoho'])
   },
   mounted() {
+    const statusBarColor = get(this.$route, 'meta.statusBarColor');
+
+    if (statusBarColor) {
+      this.SET_STATUS_BAR_COLOR({
+        color: statusBarColor
+      });
+    }
+
     if (process.env.NODE_ENV === 'development') {
       this.showFps = true;
       this.frameCallback();
@@ -41,6 +50,7 @@ export default {
     }
   },
   methods: {
+    ...mapMutations(['SET_STATUS_BAR_COLOR']),
     frameCallback() {
       window.requestAnimationFrame(() => {
         const now = Date.now();
@@ -64,6 +74,11 @@ export default {
         this.$sdk.goLogin();
       }
     },
+    'yoho.window.statusBarColor': function(value) {
+      this.$yoho.setStatusBar({
+        statusBarColor: value
+      });
+    }
   }
 };
 </script>

@@ -652,7 +652,18 @@ const yoho = {
     } else {
       // tip(tipInfo);
     }
-  }
+  },
+  setStatusBar(args, success, fail) {
+    if (this.isYohoBuy && window.yohoInterface) {
+      window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
+        method: 'set.StatusBar',
+        arguments: args
+      });
+    } else {
+      // tip(tipInfo);
+    }
+  },
+
 };
 
 

 <template>
-  <div class="layout-header" :class="{[`theme-${theme}`]: theme}">
-    <div class="back flex hover-opacity" @touchend.stop.prevent="onBack">
-      <slot name="back" v-if="back">
-        <i class="iconfont icon-left"></i>
-      </slot>
-    </div>
-    <div class="title flex" :style="{opacity}">
-      <slot>
-        <span class="title-inner">{{title}}</span>
-      </slot>
-    </div>
-    <div class="opts flex" :style="{opacity}">
-      <slot name="opts"></slot>
+  <div class="layout-header-wrap" :class="{[`theme-${theme}`]: theme}" :style="statusBarHeight">
+    <div class="layout-header">
+      <div class="back flex hover-opacity" @touchend.stop.prevent="onBack">
+        <slot name="back" v-if="back">
+          <i class="iconfont icon-left"></i>
+        </slot>
+      </div>
+      <div class="title flex" :style="{opacity}">
+        <slot>
+          <span class="title-inner">{{title}}</span>
+        </slot>
+      </div>
+      <div class="opts flex" :style="{opacity}">
+        <slot name="opts"></slot>
+      </div>
     </div>
   </div>
 </template>
@@ -36,7 +38,14 @@ export default {
     }
   },
   computed: {
-    ...mapState(['yoho'])
+    ...mapState(['yoho']),
+    statusBarHeight() {
+      if (this.yoho.window && this.yoho.window.statusBarHeight) {
+        return {paddingTop: this.yoho.window.statusBarHeight + 'px'}
+      }
+
+      return {};
+    }
   },
   watch: {
     transparentSeek(value) {
@@ -68,26 +77,33 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.layout-header {
+.layout-header-wrap {
   width: 100%;
-  height: 44PX;
   background-color: #444;
   color: #fff;
-  overflow: hidden;
-  display: flex;
-  align-items: stretch;
-  box-sizing: border-box;
 
   &.theme-white {
     background-color: #fff;
     color: #222;
-    border-bottom: solid 1px #efefef;
+
+    .layout-header {
+      border-bottom: solid 1px #efefef;
+    }
   }
 
   &.theme-transparent {
     background-color: initial;
     color: #fff;
   }
+}
+
+.layout-header {
+  width: 100%;
+  height: 44PX;
+  overflow: hidden;
+  display: flex;
+  align-items: stretch;
+  box-sizing: border-box;
 
   > * {
     position: relative;

@@ -65,6 +65,10 @@ const trackPage = (path) => {
 
 router.onReady(() => {
   router.beforeResolve((to, from, next) => {
+    store.commit('SET_STATUS_BAR_COLOR', {
+      color: get(to, 'meta.statusBarColor')
+    });
+
     try {
       trackPage(to.fullPath);
       store.commit(ROUTE_CHANGE, {to, from});

@@ -20,17 +20,23 @@
 </template>
 
 <script>
+import {mapState} from 'vuex';
+import {get} from 'lodash';
+
 export default {
   props: ['data', 'share'],
   computed: {
+    ...mapState(['yoho']),
     headStyle() {
-      if (!this.data.topicImageUrl) {
-        return {};
+      let style = {
+        paddingTop: `${44 + get(this.yoho, 'window.statusBarHeight', 0)}px`
+      };
+
+      if (this.data.topicImageUrl) {
+        style.backgroundImage = `url(//${this.data.topicImageUrl.split('//')[1]})`;
       }
 
-      return {
-        'background-image': `url(//${this.data.topicImageUrl.split('//')[1]})`
-      };
+      return style;
     },
     showAttAmount() {
       return this.data && +this.data.showAttAmount > 0;
@@ -59,7 +65,6 @@ export default {
   min-height: 360px;
   background-size: 100%;
   background-image: linear-gradient(140deg, #7A88FF, #7AFFAF);
-  padding-top: 44PX;
   box-sizing: border-box;
   position: relative;
   background-size: cover;

@@ -36,7 +36,8 @@ export default [{
   name: 'topic',
   component: () => import(/* webpackChunkName: "article" */ './topic'),
   meta: {
-    keepAlive: true
+    keepAlive: true,
+    statusBarColor: 'white'
   }
 }, {
   path: '/topic/share/:topicId/:topicName',

@@ -18,6 +18,8 @@ export default function() {
         isLogin: false
       },
       window: {
+        statusBarHeight: 0,
+        statusBarColor: 'black',
         clientHeight: 0,
         clientWidth: 0,
         supportsPassive: false,
@@ -75,6 +77,14 @@ export default function() {
       },
       [Types.SET_SUPPORT_WEBP](state, {supportWebp}) {
         state.window.supportWebp = supportWebp;
+      },
+      [Types.SET_STATUS_BAR_HEIGHT](state, {height}) {
+        state.window.statusBarHeight = height;
+      },
+      [Types.SET_STATUS_BAR_COLOR](state, {color}) {
+        if (state.context.env.isYohoBuy && state.context.env.isiOS) {
+          state.window.statusBarColor = color || 'black';
+        }
       }
     },
     getters: {

@@ -8,3 +8,5 @@ export const SET_LOGIN_INFO = 'SET_LOGIN_INFO';
 export const SET_WINDOW_SIZE = 'SET_WINDOW_SIZE';
 export const SET_SUPPORT_PASSIVE = 'SET_SUPPORT_PASSIVE';
 export const SET_SUPPORT_WEBP = 'SET_SUPPORT_WEBP';
+export const SET_STATUS_BAR_HEIGHT = 'SET_STATUS_BAR_HEIGHT';
+export const SET_STATUS_BAR_COLOR = 'SET_STATUS_BAR_COLOR';

@@ -4,8 +4,8 @@ import yoho from 'common/yoho';
 export default store => {
   window.onresize = () => {
     const {clientWidth, clientHeight} = document.body;
-
     store.commit('SET_WINDOW_SIZE', {clientWidth, clientHeight});
+    setStatusBar(clientWidth, clientHeight);
   };
   const {clientWidth, clientHeight} = document.body;
 
@@ -31,6 +31,29 @@ export default store => {
       isYohoBuy: yoho.isYohoBuy,
     }
   });
+
+  function setStatusBar(width, height) {
+    // 仅支持ios
+    if (yoho.isYohoBuy && yoho.isiOS) {
+      const scale = height / width;
+      let barHeight = 0;
+
+      if (scale > 2.1) {
+        barHeight = 44;
+      } else if (scale > 2) {
+        barHeight = 22;
+      }
+
+      if (barHeight) {
+        store.commit('SET_STATUS_BAR_HEIGHT', {
+          height: barHeight
+        });
+      }
+    }
+  }
+
+  setStatusBar(clientWidth, clientHeight);
+
   if (/yoho/i.test(navigator.userAgent) && /supportWebp/i.test(navigator.userAgent)) {
     store.commit('SET_SUPPORT_WEBP', {supportWebp: true});
   }