JHAndroid/src/components/Menu/MenuService.vue

<template>
  <!-- 联系客服 -->
  <div class="menu_service" :width="iframeWidth">
    <iframe
      id="service-iframe"
      class="iframe"
      frameborder="no"
      scrolling="no"
      allowtransparency="yes"
      style="overflow: hidden"
      :src="`${CONFIG.serviceUrl}${userInfo && userInfo.passport}`"
      :width="iframeWidth"
      :height="iframeHeight"
    ></iframe>
    <i class="iconfont icon-baseline-close-px" @click="back"></i>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "MenuService",
  components: {},
  data() {
    return {
      iframeWidth: 0, // iframe宽
      iframeHeight: 0, // iframe高
    };
  },
  computed: {
    ...mapState(["CONFIG", "userInfo"]),
  },
  watch: {},
  created() {},
  mounted() {
    // 根据屏幕宽和高获取iframe高度
    this.h5ScreenOrientation();

    // 监听页面重载
    this.onResize();
  },
  methods: {
    ...mapActions(["showServiceInlineAction"]),

    // 返回
    back() {
      this.showInnerControl("");
      this.showServiceInlineAction(false);
    },

    // 显示哪个组件(工具函数)
    showInnerControl(name) {
      this.$emit("showInnerControl", name);
    },

    /**
     * 根据屏幕宽和高获取iframe高度
     */
    h5ScreenOrientation() {
      // 当前的宽
      const width = window.innerWidth || document.documentElement.clientWidth;
      // 当前的高
      const height =
        window.innerHeight || document.documentElement.clientHeight;
      this.iframeWidth = width;
      this.iframeHeight = height;
    },
    /**
     * 监听页面重载
     */
    onResize() {
      var clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      window.onresize = () => {
        // 页面resize
        clearTimeout(this.resizeTimer);
        this.resizeTimer = setTimeout(() => {
          this.h5ScreenOrientation();
        }, 1000);

        // 页面调起输入框
        var nowClientHeight =
          document.documentElement.clientHeight || document.body.clientHeight;

        if (clientHeight > nowClientHeight) {
          // 键盘打开
          clearTimeout(this.resizeTimer);
          this.h5ScreenOrientation();
          document.getElementById("app").classList.add("focusState");
        } else {
          //键盘收起的事件处理
          document.getElementById("app").classList.remove("focusState");
          this.h5ScreenOrientation();
        }
      };
    },
  },
};
</script>

<style lang='less' scoped>
.menu_service {
  display: flex;
  position: fixed;
  z-index: 10;
  background-color: #f5f5f5;

  i {
    float: right;
    font-size: 60 / @rem;
    position: absolute;
    top: 20 / @rem;
    right: 20 / @rem;
    border-radius: 50%;
    background-color: #f1f3f4;
  }

  .icon-baseline-close-px {
    z-index: 11;
    margin-right: 10 / @rem;
    font-size: 50 / @rem;
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .menu_service {
    .icon-baseline-close-px {
      margin-top: 10 / @rem;
      margin-right: 5 / @rem;
      font-size: 25 / @rem;
    }
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
}
</style>