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

<template>
  <div :class="isShowApp?'layout':'layout layout-white'">
    <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 v-if="isShowApp" class="floating-back" @click="leaveFun"> <img width="42" src="@/assets/image/introductionCloudPhone/back.png" /></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
    }
  },
  data() {
    return {};
  },
  mounted() { },
  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 = isAndroid || isIos ? true : false;
      return bool;
    },
    isShowNavBar() {
      // 是否是APP
      // const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
      const isAndroid = this.$userAgent.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 = isAndroid || isIos || isWx ? false : true;

      // console.log()
      return bool || this.forceShowNavBar;
    },

  },
  methods: {
    goBackFun() {
      if (this.$listeners.goBack) {
        this.$emit('goBack');
        return;
      }
      this.$router.go(-1);
    },// 退出相关逻辑
    leaveFun() {
      const isIos = this.$userAgent.isIos;
      const isAndroid = this.$userAgent.isAndroid;
      const isWx = this.$userAgent.isWx;

      if (this.isRouterBack) {
        if (this.$listeners.goBack) {
          this.$emit('goBack');
          return;
        }
        this.$router.go(-1);
      } else if (isAndroid) {
        window.native.backClick && window.native.backClick();
      } else if (isIos) {
        window.webkit.messageHandlers.appGoBack && window.webkit.messageHandlers.appGoBack.postMessage({})
      }
      else if (isWx) {
        this.$wx.miniProgram.navigateBack({
          data: 1
        })
      }
      else {
        uni.reLaunch({
          url: '/pages/index/index'
        });
      }


    },
  },
};
  </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>