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="isShowNavBar">
      <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: {
    // 是否显示头部
    title: {
      type: String,
      default: '邀请好友得现金',
    },
    // 是否强制像是头部
    forceShowNavBar: {
      type: Boolean,
      default: false
    },
    padding: {
      type: String,
      default: '16px'
    },
    background: {
      type: String,
      default: '#F2F4F7'
    },
    isRouterBack: {
      type: Boolean,
      default: false
    },
    // 用于内嵌页面，标识为最后一页
    isGoBack: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isApp: null,
      isAndroid: null,
      isIos: null,
    };
  },
  mounted() {
    // 如果是安卓的需要判断一下是否显示h5内置的返回按钮
    // 如果是H5、微信小程序，不需要显示次按钮
    this.isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser
    this.isAndroid = this.$userAgent.isAndroid;
    this.isIos = this.$userAgent.isIos;
    // if (!this.isApp) return this.visible = false
    // if (this.isApp && this.isAndroid) {
    //   this.visible = !!window.native.goneBack
    //   // 判断是否有注册goneBack方法,有就调用
    //   if(!!window.native.goneBack){
    //     console.log('this.visible', this.visible)
    //     window.native.goneBack() // 安卓隐藏返回按钮
    //   }
    // }
  },
  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;
    },
    isShowNavBar() {
      // 是否是APP
      const isApp = this.isApp;
      const isAndroid = this.isAndroid;
      const isIos = this.$userAgent.isIos;
      const isWx = this.$userAgent.isWx;
      // 如果是App并且是安卓，就不显示头部， ios显示
      // 如果微信小程序环境的，也不显示头部
      // 如果是h5 就显示头部
      let bool = false;
      // bool = isApp ? (isAndroid ? !isAndroid : isIos) : (isWx ? !isWx : !isWx);

      bool = (isApp && (isAndroid || !isIos)) || isWx ? false : true;
      // bool = isWx ? false : true;

      return bool || this.forceShowNavBar;
    },
  },
  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);
    },
  },
};
  </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>