share_h5/pages/down.vue

<template>
  <view class="bg">
    <!-- <navbar backColor="#fff" :config="config"></navbar> -->
    <!-- v-if="showHint" -->
    <view class="view-alert" v-if="showHint">
      <view class="alert-text">
        点击右上角按钮，然后在弹出的菜单中，点击在浏览器中打开，即可下载安装
      </view>
      <image class="alert-arrow" src="../static/alert-arrow.png" mode="aspectFit"></image>
    </view>

    <view class="top-box">
      <image src="/static/down/downApps2.png" mode="aspectFit" class="logo"></image>
    </view>
    <view class="btn-row">
      <button class="btn" @click="downLoad(0)" v-if="osName == 'android'">
        <image src="/static/login/btn_01.png" mode="aspectFit" class="logo"></image>
        <text>安卓下载</text>
      </button>
      <button class="btn" @click="downLoad(1)" v-if="osName == 'ios'">
        <image src="/static/login/btn_02.png" mode="aspectFit" class="logo"></image>
        <text>IOS下载</text>
      </button>
      <button class="btn pdr0" @click.stop="onWeChat()">
        <image src="/static/login/btn_03.png" mode="aspectFit" class="logo"></image>
        <text>宜格服务小程序</text>
      </button>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '"宜格服务"懂宜昌，更懂你！',
          color: "#1A1A1A",
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#fff"],
          statusBarFontColor: "#1A1A1A",
        },
        appInfo: null,
        showHint: false,
        osName: uni.getSystemInfoSync().osName
      };
    },
    onLoad(options) {
      this.osName = uni.getSystemInfoSync().osName
      const ua = navigator.userAgent.toLowerCase()
      const isWeixin = ua.indexOf('micromessenger') != -1;
      this.showHint = isWeixin
    },

    methods: {
      getData(type) {
        this.$http.get("/app/version/newest", {
          type: type
        }).then((res) => {
          if (res && res.data && res.code == 200) {
            try {
              if (type == 0) {
                window.location = "ygfwUrlSchemes://"
              }
            } catch (e) {}
            window.location.href = res.data.downloadLink;
          } else {
            this.$mUtil.toast("暂无下载地址")
          }
        });
      },
      downLoad(type) {
        // const ua = navigator.userAgent.toLowerCase()
        // const isWeixin = ua.indexOf('micromessenger') != -1;
        // if (isWeixin) {
        //   this.showHint = isWeixin;
        //   uni.pageScrollTo({
        //     scrollTop: 0
        //   })
        // } else {
        //   this.getData(type)
        // }
		 this.getData(type)
      },
      onWeChat() {
        location.href = 'weixin://dl/business/?appid=wxe67b047223bd1446&path=pages/homeQX/index'
      },

    },
  };
</script>
<style>
  page {
    width: 750rpx;
    min-height: 100vh;
    overflow: hidden;
  }
</style>
<style lang='scss' scopd>
  * {
    padding: 0;
    margin: 0;
  }

  .view-alert {
    /* position: absolute;
		left: 0;
		top: 0;
		z-index: 9; */
    width: 750rpx;
    background: rgb(52, 52, 52);
    margin-left: 0px;
    margin-right: 0px;
    padding: 60rpx 30rpx 60rpx 60rpx;
    box-shadow: rgba(22, 22, 23, 0.62) 0px -10px 16px inset;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    box-sizing: border-box;

    .alert-text {
      flex: 1;
      color: #7f7e7e;
      font-weight: 400 !important;
      padding-right: 60rpx;
      line-height: 1.5;
    }

    .alert-arrow {
      flex-shrink: 0;
      width: 60rpx;
      height: 60rpx;
      margin-top: -30rpx;
    }
  }

  .bg {
    width: 100%;
    min-height: 100vh;

    background: url('../static/down/downBG1.png') no-repeat top center;
    background-size: 100% 100%;
    padding-bottom: 118rpx;
  }

  .top-box {
    /* 	position: absolute;
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		top: 400rpx;
		left: 50%;
		transform: translateX(-50%); */
    /* margin: 117rpx auto; */
    padding: 117rpx 74px 0 44rpx;
    width: 632rpx;

    .logo {
      width: 632rpx;
      height: 993rpx;
    }
  }

  .btn-row {
    display: flex;
    width: 100%;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    /* position: fixed; */
    /* 
		bottom: 400rpx;
		left: 50%;
		transform: translateX(-50%); */

    .btn {
      border-radius: 60rpx;
      width: 401rpx;
      height: 97rpx;
      background: linear-gradient(189deg, #a7f4ff 0%, #45e3ff 100%), #edf4fc;
      /* background: linear-gradient(189deg, #bbfdbd 0%, #a4f0a4 100%), #edf4fc; */
      border-radius: 20rpx;
      margin-top: 49rpx;
      display: flex;
      align-items: center;
      /* justify-content: center; */
      font-family: AlimamaShuHeiTi, AlimamaShuHeiTi-Bold;
      font-weight: 700;
      color: #333333;
      padding: 0 34rpx 0 54rpx;

      image {
        flex-shrink: 0;
        width: 60rpx;
        height: 60rpx;
        /* margin-right: 10rpx; */
      }

      text {
        flex: 1;
        text-align: center;
      }
    }
  }

  .pdr0 {
    padding-right: 0 !important;
  }
</style>