shop_H5_download/pages/index/index.vue

<template>
  <view class="content">
    <image src="@/static/bg.jpg" class="bg"></image>
    <view class="download">
      <a v-if="is_H5" :href="Android.dow_url" @click="accept"
        download="huinongshenghuo.apk">
        <view class="btn">
          <myIcon />
          Android下载
        </view>
      </a>
      <view v-else class="btn" @click="showTip">
        <myIcon />
        Android下载
      </view>
      <view class="btn" @click="downLoadIOS">
        <myIcon :type="'ios'" />
        IOS下载
      </view>
    </view>
    <view class="tip" v-if="tip">
      <image src="@/static/tip.png"></image>
      <view class="close" @click="tip=false"></view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from "@dcloudio/uni-app"
  import myIcon from "@/component/my_icon.vue"
  import { getInfo, postCode } from "@/api/app.js"
  import { ref } from "vue"

  const Android = ref({})
  const IOS = ref({})
  const code = ref('')

  const getAPPInfo = async () => {
    let res = await getInfo();
    if (res.status == 200) {
      Android.value = res.data.android;
      IOS.value = res.data.ios;
    }
  }
  getAPPInfo();

  const downLoadIOS = () => {
    let os = uni.getSystemInfoSync();
    if (os.platform == 'ios') {
      accept();
      window.location.href = IOS.value.dow_url;
    }
    else uni.showToast({
      icon: 'none',
      title: '您不是IOS设备'
    })
  }
  
  const tip = ref(false);
  const showTip = ()=>{
    tip.value = true;
  }
  
  const is_H5 = ref(true)
  const getUserAgent = ()=>{
    try{
      let us = window.navigator.userAgent.toLowerCase();
      if(us.match(/MicroMessenger/i) == 'micromessenger'||match(/AlipayClient/i) == 'alipayclient'||us.match(/QQ/i) == "qq"){
        is_H5.value = false;
      }
    }catch(e){
      //TODO handle the exception
    }
  }
  getUserAgent();
  
  // 接受邀请
  const accept = ()=>{
    if(code.value){
      postCode({
        code: code.value
      }).then((res)=>{
        console.log(res);
      }).catch(err=>{
        console.log(err);
      })
    }
  }
  
  onLoad((option)=>{
    code.value = option.code;
  })
</script>

<style lang="scss">
  a {
    text-decoration: none;
    color: inherit;
  }

  .content {
    overflow: hidden;
    background-color: #f49a2b;
    position: relative;
    width: 100vw;
    height: 100vh;

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100vw;
      height: 100vh;
      background-color: #f49a2b;
    }

    .download {
      position: absolute;
      top: 60vh;
      left: 0;
      z-index: 100;
      width: 100vw;
      height: 200rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;

      .btn {
        width: 350rpx;
        height: 80rpx;
        line-height: 80rpx;
        background-color: #fc902e;
        text-align: center;
        color: #fff;
        border-radius: 8rpx;
        box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
      }
    }
    .tip{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      image{
        width: 100%;
        height: 100%;
      }
      .close{
        position: absolute;
        top: 65vh;
        left: 50%;
        transform: translate(-50%);
        // background-color: rgba(255, 255, 255, 0.5);
        width: 300rpx;
        height: 160rpx;
      }
    }
  }
</style>