下载APP - 安卓、苹果手机下载

<template>
  <view class='form'>
    <view class='form-row'>
      <view class='form-row-tt'>安卓:</view>
      <view class='form-row-dd'>下载APP</view>
    </view>
    <!-- 这里是下载的逻辑 -->
    <button type='default' class='btn-common' @click='goUrl('/pages/index/xiazai')'>下载APP</button>
    <view class='form-row'>
      <view class='form-row-tt'>苹果:</view>
      <!-- <view class='form-row-dd'><span>￥</span>{{ data.userAccountVo.weightMultiple }}</view> -->
      <view class='form-row-dd'>点击H5跳转到浏览器</view>
    </view>
    <!-- 这里跳转到一个固定的页面，里面是链接 -->
    <button type='default' class='btn-common' @click='goUrl('/pages/index/xiazai')'>点击H5</button>
    <!-- 遮罩层 -->
    <view :class='show ? 'back back-common' : 'back'>
      <view class='text'>
        1、请点击右上方三个点 <br />
        2、选择在浏览器打开<br />
        3、进行注册和下载
      </view>
    </view>
  </view>
</template>
<script>
  import urlConfig from '../../common/config';
  export default {
    data() {
      return {
        show: false, //遮罩层
      }
    },
    onLoad() {
      this.isWeixinOrAlipay();
    },
    methods: {
      //判断扫码来源
      isWeixinOrAlipay() {
        var ua = window.navigator.userAgent.toLowerCase();
        //判断是不是微信
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          //查百度找h5获取用户openid方法，无感静默
          this.getCode();
          this.show = true; //显示遮罩层
          return 'WeiXIN';
        }
        //判断是不是支付宝
        if (ua.match(/AlipayClient/i) == 'alipayclient') {
          //查百度找h5获取用户user_id方法，无感静默
          //this.getAuthCode();
          this.show = true; //显示遮罩层
          return 'Alipay';
        }
        //哪个都不是
        this.show = false; //隐藏遮罩层
        return '我是电脑上的浏览器';
      },
    },
  }
</script>
<style>
  .form {
    margin-top: 60px;
  }

  .form-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .form-row-tt {
    margin-left: 30px;
    flex: 1;
    font-size: 16px;
    color: #333333;
  }

  .form-row-dd {
    margin-right: 30px;
    font-size: 18px;
    color: #666666; //深灰色
  }

  .form button.btn-common {
    width: 60%; /* 调整按钮的宽度为60% */
    margin-top: 20px;
    background-color: #FFC107; /* 设置按钮的背景色为黄色 */
  }

  .back {
    display: none;
  }

  .back-common {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;

    .text {
      margin: 70% auto 0 auto;
      text-align: left;
      color: #FFFFFF;
      font-size: 22px;
      width: 250px;
      line-height: 1.5;
    }
  }
</style>