classroom-app/src/views/download/index.tsx

import { Button, showToast, Image } from 'vant';
import { defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import wxBg from './images/wx_bg.png';
import { browser } from '@/helpers/utils';
import student from './images/student-center.png';
import request from '@/helpers/request';

// 唤起前缀
export default defineComponent({
  name: 'download',
  setup() {
    const state = reactive({
      wxStatus: false,
      androidUrl: ''
    });

    const onDownload = () => {
      if (browser().weixin) {
        state.wxStatus = true;
        return;
      }

      let urlIos = '';
      let urlAndroid = '';
      if (location.origin.indexOf('kt.colexiu.com') > -1) {
        urlIos =
          'https://apps.apple.com/us/app/%E9%9F%B3%E4%B9%90%E6%95%B0%E5%AD%97%E8%AF%BE%E5%A0%82/id6452725878';
        urlAndroid = state.androidUrl; //'https://oss.dayaedu.com/appstore/kt_cooleshow_student.apk';
      } else {
        urlIos = 'https://www.pgyer.com/dzRRNN';
        urlAndroid = state.androidUrl; //'https://www.pgyer.com/2meenh';
      }

      if (
        browser().ios ||
        /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
      ) {
        urlIos && (window.location.href = urlIos);
      } else if (/(Android)/i.test(navigator.userAgent)) {
        window.location.href = urlAndroid;
      } else {
        showToast('请用手机或移动设备打开');
      }
    };
    onMounted(async () => {
      try {
        const { data } = await request.get(
          '/edu-app/open/appVersionInfo/queryLatestByPlatform',
          {
            params: {
              platform: 'android-student',
              status: 'history'
            }
          }
        );
        state.androidUrl = data.downloadUrl;
      } catch {
        //
      }
    });
    return () => (
      <div class={[styles.downloadContainer]}>
        <Image src={student} />

        <div class={styles.buttonGroup}>
          <Button
            round
            size="large"
            class={styles.btn}
            onClick={onDownload}></Button>
        </div>

        {state.wxStatus && (
          <div
            class={styles.wxpopup}
            onClick={() => {
              state.wxStatus = false;
            }}>
            <img src={wxBg} alt="" />
          </div>
        )}
      </div>
    );
  }
});