添加下载地址

src/views/download/index.module.less

@@ -18,4 +18,20 @@
     width: 230px;
     height: 46px;
   }
+
+
+  .wxpopup {
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+
+    img {
+      width: 88%;
+      margin: 0 6%;
+    }
+  }
 }

src/views/download/index.tsx

@@ -1,15 +1,63 @@
-import { defineComponent } from 'vue';
+import { defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
 import center from './images/center.png';
 import btnBg from './images/btn-bg.png';
+import { browser } from '@/helpers/utils';
+import wxBg from './images/wx_bg.png';
+import { showToast } from 'vant';
 
 export default defineComponent({
   name: 'download-page',
   setup() {
+    const state = reactive({
+      wxStatus: false,
+      type: 'student',
+      buttonText: '下载管乐团学员端'
+    });
+
+    const onDownload = () => {
+      if (browser().weixin) {
+        state.wxStatus = true;
+        return;
+      }
+
+      let urlIos = '';
+      let urlAndroid = '';
+      if (location.origin.indexOf('manonline') > -1) {
+        urlIos = 'https://itunes.apple.com/cn/app/id6449429354';
+        urlAndroid =
+          'https://appstore.ks3-cn-beijing.ksyuncs.com/manage-domain.apk';
+      } else {
+        urlIos = 'https://www.pgyer.com/gnTDCk';
+        urlAndroid = 'https://www.pgyer.com/Jg6K';
+      }
+
+      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.download}>
         <img src={center} class={styles.center} />
-        <img src={btnBg} class={styles.btn} />
+        <img src={btnBg} class={styles.btn} onClick={onDownload} />
+
+        {state.wxStatus && (
+          <div
+            class={styles.wxpopup}
+            onClick={() => {
+              state.wxStatus = false;
+            }}>
+            <img src={wxBg} alt="" />
+          </div>
+        )}
       </div>
     );
   }