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

import { Button, showToast, Image } from 'vant';
import { defineComponent, 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';

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

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

      let urlIos = '';
      let urlAndroid = '';
      if (location.origin.indexOf('online.lexiaoya.cn') > -1) {
        urlIos =
          'https://apps.apple.com/cn/app/%E7%AE%A1%E4%B9%90%E5%9B%A2/id1671474346?uo=4 ';
        urlAndroid =
          'https://appstore.ks3-cn-beijing.ksyuncs.com/gyt-student.apk';
      } else {
        urlIos = 'https://www.pgyer.com/dzRRNN';
        urlAndroid = '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('请用手机或移动设备打开');
      }
    };
    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>
    );
  }
});