vue 集成openinstall

• 主要是mounted中的方法
• 其他内容不重要

<template>
  <div id="appDownLoad">
    <el-container>
      <el-main>
        <el-container style=" height: auto;">
          <el-header style="height: auto;">
            <div class="Image1" style="text-align: center;">
              <el-image src="../../static/images/appImages/titleImage.png">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <div>
              <p style="font-size: 1.75rem; font-weight: 600; margin: 0.625rem">
                众茂云校
              </p>
              <p style="color: #828998">随时随地看课程</p>
            </div>
          </el-header>
          <el-main>
            <div class="Image2">
              <el-image src="../../static/images/appImages/contImage.png">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </el-main>
          <el-footer style="height: auto;">
            <div class="downLoad">
              <div id="downLoad" style="height: 100%;display: flex;justify-content: center;align-items: center;">
                <div>
                  <i v-if="isMobile == 0" style="font-size: 1.5rem;" class="iconfont icon-android-fill"></i>
                  <i v-else style="font-size: 1.5rem;" class="iconfont icon-pingguo"></i>
                </div>
                <div style="margin-left: 0.5rem;">{{ isMobile == 1 ?"iPhone版 下载": "Android版 下载"  }}</div>
              </div>
            </div>
          </el-footer>
        </el-container>


      </el-main>
      <el-footer style="height: auto;">
        <div class="foot">
          <p>开发者：上海众茂医疗科技有限公司</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "appDownLoad",
  props: {},
  components: {},
  data() {
    return {
      description: "移动端--云校app下载页面",
      isMobile: 0, //判断是安卓还是ios   安卓0  ios1
    };
  },
  computed: {},
  watch: {},
  created() {
    this.isMobile = this.$public.isMobile();
    document.title="众茂云校";
  },
  mounted() {
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "//web.cdn.openinstall.io/openinstall.js"; //在线引用

    //初始化
    s.addEventListener(
      "load",
      () => {
        var data = OpenInstall.parseUrlParams(); //解析获取参数
        new OpenInstall(
          {
            appKey: "h92xte",//根据自己项目配置
            //apkFileName : 'xx.apk',//自定义下载时的apk包名
            preferWakeup: true,
            mask: function () {
              return;
              ("<div  id='openinstall_shadow'style='position:fixed;left:0;top:0;background:rgba(0,255,0,			0.5);filter:alpha(opacity=50);width:100%;height:100%;z-index:10000;'></div>");
            }, //自定义打开时的遮罩样式

            //openinstall初始化完成的回调函数，可选
            onready: function () {
              var m = this,
                button = document.getElementById("downLoad");
              m.schemeWakeup(); //页面加载时拉起
              button.style.visibility = "visible";
              button.onclick = function () {
                m.wakeupOrInstall(); //下载或者拉起应用
                return false;
              };
            },
          },
          data
        );
      },
      false
    );

    document.head.appendChild(s);
  },
  methods: {

  },
};
</script>

<style scoped>
.center {
  text-align: center;
}
#appDownLoad {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-image: url(../../static/images/appImages/bgImage.png);
  text-align: center;
}
/* .appBody {
  position: relative;
  height: 100%;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-image: url(../../static/images/appImages/bgImage.png);
} */
.Image1 {
  /* padding-top: 3.75rem; */
  padding-top: 4.375rem;
}

.Image1 img {
  width: 3.75rem;
  height: 3.75rem;
}
.Image2 {
  margin: 1.25rem;
}

.Image2 img {
  width: 16.75rem;
  height: 16.75rem;
}
.downLoad {
  /* margin-top: 1.25rem; */
  display: inline-block;
  width: 12.5rem;
  height: 3rem;
  background-color: #3662ec;
  border-radius: 1.5rem;
  text-align: center;
  color: #ffffff;
}
.downLoad span {
  /* line-height: 3rem; */
}
.downLoad img {
  width: 1.5rem;
  height: 1.5rem;
}
.foot {
  padding: 0.625rem 0 ;
 /* position: absolute;
  bottom: 5%;
  left: 0;
  right: 0; */
  color: #828998;
}
</style>