orchestra-app/src/student/download/transfer.tsx

import { browser } from '@/helpers/utils'
import { Button, showToast, Image } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import wxBg from './images/wx_bg.png'
import qs from 'query-string'
import OSticky from '@/components/o-sticky'
import student from './images/student-center.png'
import teacher from './images/teacher-center.png'
import manage from './images/manage-center.png'

export default defineComponent({
  name: 'download-transfer',
  data() {
    return {
      wxStatus: false,
      type: 'student',
      buttonText: '下载管乐团学生端'
    }
  },
  mounted() {
    const { pn, url, action, pageTag, ...rest } = this.$route.query
    const { origin, pathname } = location
    let tempPathname = pathname
    let beforeIos = 'BandMusicTeam://linkUrl='
    let beforeAndroid = 'orchestrastudent://html:8888/SplashActivity?url='

    if (pn === 's') {
      this.type = 'student'
      this.buttonText = '下载管乐团学生端'
      tempPathname = '/orchestra-student/'
      beforeIos = 'BandMusicTeam://linkUrl='
      beforeAndroid = 'orchestrastudent://html:8888/SplashActivity?url='
    } else if (pn === 't') {
      this.type = 'teacher'
      this.buttonText = '下载管乐团伴学端'
      tempPathname = '/orchestra-teacher/'
      beforeIos = 'BandMusicTeamTeacher://linkUrl='
      beforeAndroid = 'orchestrateacher://html:8888/SplashActivity?url='
    } else if (pn === 'm') {
      this.type = 'manage'
      this.buttonText = '下载管乐团管理端'
      tempPathname = '/orchestra-school/'
      beforeIos = 'BandMusicTeamManager://linkUrl='
      beforeAndroid = 'orchestramanager://html:8888/SplashActivity?url='
    }

    let str = origin + tempPathname + '#/'
    // 判断是否有跳转连接, 如果连接和动作没有时, 则不跳转
    if (!url && !action) {
      return
    }

    // 处理参数
    const formatParams = qs.stringify({
      ...rest
    })
    str += url + (formatParams ? '?' + formatParams : '')
    const query = {
      url: str,
      action: action || 'h5', // app, h5
      pageTag: pageTag || 1 // 页面标识
      // params: {}
    } as any
    const iosStr = encodeURIComponent(JSON.stringify(query))
    console.log(query, 'iosStr')
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      /*  
        唤起前缀 IOS
        BandMusicTeam:// 管乐团
        BandMusicTeamTeacher://
        BandMusicTeamManager:// */
      /* 
        唤起前缀 ANDROID
        orchestrastudent://html:8888/SplashActivity?url=
        orchestrateacher://html:8888/SplashActivity?url=
        orchestramanager://html:8888/SplashActivity?url=
       */
      window.location.href = beforeIos + iosStr
    } else if (/(Android)/i.test(navigator.userAgent)) {
      window.location.href = beforeAndroid + iosStr
    } else {
      showToast('请用手机或移动设备打开')
    }
  },
  methods: {
    onDownload() {
      if (browser().weixin) {
        this.wxStatus = true
        return
      }
      let urlIos = ''
      let urlAndroid = ''
      if (location.origin.indexOf('online.lexiaoya.cn') > -1) {
        if (this.type === 'student') {
          urlIos =
            'https://apps.apple.com/cn/app/%E7%AE%A1%E4%B9%90%E5%9B%A2%E7%AE%A1%E7%90%86%E7%AB%AF/id1671473981?uo=4'
          urlAndroid = 'https://appstore.ks3-cn-beijing.ksyuncs.com/gyt-student.apk'
        } else if (this.type === 'teacher') {
          urlIos =
            'https://apps.apple.com/cn/app/%E7%AE%A1%E4%B9%90%E5%9B%A2%E4%BC%B4%E5%AD%A6%E7%AB%AF/id1670584741?uo=4'
          urlAndroid = 'https://appstore.ks3-cn-beijing.ksyuncs.com/gyt-teacher.apk'
        } else if (this.type === 'manage') {
          urlIos =
            'https://apps.apple.com/cn/app/%E7%AE%A1%E4%B9%90%E5%9B%A2%E7%AE%A1%E7%90%86%E7%AB%AF/id1671473981?uo=4'
          urlAndroid = 'https://appstore.ks3-cn-beijing.ksyuncs.com/gyt-manager.apk'
        }
      } else {
        if (this.type === 'student') {
          urlIos = 'https://www.pgyer.com/2Wg2'
          urlAndroid = 'https://www.pgyer.com/9NBz'
        } else if (this.type === 'teacher') {
          urlIos = 'https://www.pgyer.com/v5yB'
          urlAndroid = 'https://www.pgyer.com/BQeE'
        } else if (this.type === 'manage') {
          urlIos = 'https://www.pgyer.com/DGrR'
          urlAndroid = 'https://www.pgyer.com/TEWv'
        }
      }

      if (browser().ios || /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        window.location.href = urlIos
      } else if (/(Android)/i.test(navigator.userAgent)) {
        window.location.href = urlAndroid
      } else {
        showToast('请用手机或移动设备打开')
      }
    }
  },
  render() {
    return (
      <div class={[styles.downloadContainer]}>
        {/* <Image src={student} /> */}
        {this.type !== 'teacher' && this.type !== 'manage' && <Image src={student} />}
        {this.type === 'teacher' && <Image src={teacher} />}
        {this.type === 'manage' && <Image src={manage} />}

        <div class={styles.buttonGroup}>
          <Button round size="large" color="#FF8057" class={styles.btn} onClick={this.onDownload}>
            {this.buttonText}
          </Button>
        </div>

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