android-cloud-H5/pages/activity/invite-user/components/layout.vue

<template>
  <div class="layout" :class="{'layout-white': !false}">
    <div style="height: 12.2666666667vw" v-if="isShowNav">
      <van-nav-bar :title="title" left-arrow fixed @click-left="goBackFun">
        <template #right>
          <slot name="right"></slot>
        </template>
      </van-nav-bar>
    </div>
    <div class="layout-container" :style="containerStyle">
      <slot></slot>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: 'layout',
  props: {
    // 是否显示头部nav
    isShowNav: {
      type: Boolean,
      default: true
    },
    // navbar标题
    title: {
      type: String,
      default: '',
    },
    padding: {
      type: String,
      default: '16px'
    },
    background: {
      type: String,
      default: '#F2F4F7'
    },
    // 用于内嵌页面，标识为最后一页
    isGoBack: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isApp: null,
      isAndroid: null,
      isIos: null,
    };
  },
  mounted() {
    setTimeout(() => {
      // 延迟50ms执行,因为title修改时,安卓返nav会重新显示
      this.hideAndroidNav();
    }, 50)
  },
  computed: {
    containerStyle() {
      return { background: this.background, padding: this.padding};
    },
    isShowApp() {
      // 是否是APP
      const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
      const isAndroid = this.$userAgent.isAndroid;
      const isIos = this.$userAgent.isIos;
      const isWx = this.$userAgent.isWx;

      console.log('isApp:' + isApp)
      console.log('isAndroid:' + isAndroid)
      console.log('isIos:' + isIos)
      console.log('isWx:' + isWx)

      // 如果是App并且是安卓，就不显示头部， ios显示
      // 如果微信小程序环境的，也不显示头部
      // 如果是h5 就显示头部
      let bool = false;
      bool = isApp && (isAndroid || isIos) ? true : false;
      return bool;
    },
  },
  methods: {
    goBackFun() {
      if (this?.$listeners?.goBack) {
        this.$emit('goBack');
        return;
      }

      // 如果为true是最前一页
      if (this.isGoBack) {
        if(this.isApp && this.isAndroid) {
          return window.native.backClick();
        }else if(this.isApp && this.isIos) {
          return window.webkit.messageHandlers.appGoBack.postMessage({});
        }
      }

      // 浏览器返回上一页
      this.$router.go(-1);
    },
    // 隐藏安卓navbar
    hideAndroidNav() {
      try {
        // 判断是否是App, 活动页app不显示头部,直接使用H5头部
        this.isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser
        this.isAndroid = this.$userAgent.isAndroid;
        this.isIos = this.$userAgent.isIos;
        
        // 判断如果是安卓环境，且已包含native.goneBack方法，就调用隐藏安卓navbar
        if (this.isApp && this.isAndroid && !!window.native.goneBack) {
          window.native.goneBack() // 安卓隐藏返回按钮
        }
      } catch (error) {
        console.error(error)
      }
    }
  },
};
  </script>
  
  <style lang="less" scoped>
.layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  .layout-container {
    flex: 1;
    overflow-y: auto;
  }

  ::v-deep .van-nav-bar__arrow {
    color: #000000;
    font-size: 24px;
  }

  ::v-deep .van-nav-bar__title {
    font-weight: bold !important;
    font-size: 17px !important;
    color: #0a132b !important;
    line-height: 24px !important;
  }

  .van-nav-bar {
    z-index: 0;
  }

  .floating-back {
    position: fixed; /* 设定定位为固定 */
    left: 26px; /* 距离右侧10像素 */
    bottom: 98px; /* 距离底部10像素 */
    background-color: transparent; /* 背景颜色 */
    z-index: 1000; /* 确保悬浮在其他内容之上 */
  }
}
.layout-white {
  .van-nav-bar {
    background-color: #f2f4f7;
  }

  ::v-deep [class*='van-hairline']::after {
    border: 0px;
  }
}
</style>