android-cloud-H5/pages/introductionCloudPhone/components/layout.vue

<!-- @notes: 页面于2024-11-17 由判断是否为app [isShowApp] 进行背景颜色判断的需求取消,统一换成白色背景. html上直接写 布尔值的均由 [isShowApp] 替换-->
<template>
  <!-- <div :class="isShowApp?'layout':'layout layout-white'"> -->
  <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" />
    </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: ''
    },
    isRouterBack: {
      type: Boolean,
      default: false
    },
    // 用于内嵌页面，标识为最后一页
    isGoBack: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isApp: null,
      isAndroid: null,
    };
  },
  mounted() {
    // 如果是安卓的需要判断一下是否显示h5内置的返回按钮
    // 如果是H5、微信小程序，不需要显示次按钮
    this.isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser
    this.isAndroid = this.$userAgent.isAndroid;
    // 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() {
      // if (this.isShowApp) {
      //   return { backgroundColor: '#1C1C1E', padding: this.padding ? this.padding : '16px' };
      // }
      return { backgroundColor: '#F2F4F7', padding: this.padding ? this.padding : '16px' };
    },
    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) {
        this.isAndroid ? window.native.backClick() : window.webkit.messageHandlers.appGoBack.postMessage({})
        return
      }
      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>