添加下载功能

src/views/colexiu-person/index.module.less

@@ -245,4 +245,19 @@
     background: url('./images/btn-teacher.png') no-repeat center;
     background-size: contain;
   }
+}
+
+.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/colexiu-person/index.tsx

@@ -7,20 +7,24 @@ import img13 from './images/img-1-3.png';
 import img14 from './images/img-1-4.png';
 import img21 from './images/img-2-1.png';
 import img22 from './images/img-2-2.png';
+import wxBg from './images/wx_bg.png';
 import MFooter from '@/components/m-footer';
 import request from '@/helpers/request';
+import { browser } from '@/helpers/utils';
+import { showToast } from 'vant';
 
 export default defineComponent({
   name: 'colexiu-person',
   setup() {
     const activeTab = ref<'love' | 'music'>('love');
+    const wxStatus = ref(false);
     const studentAndroidUrl = ref('');
     const teacherAndroidUrl = ref('');
 
     onMounted(async () => {
       try {
         const studentRes = await request.get(
-          '/api-web/open/appVersionInfo/queryLatestByPlatform',
+          '/api-website/open/appVersionInfo/queryLatestByPlatform',
           {
             params: {
               platform: 'android-student',
@@ -28,10 +32,10 @@ export default defineComponent({
             }
           }
         );
-        studentAndroidUrl.value = studentRes.value.downloadUrl;
+        studentAndroidUrl.value = studentRes.data?.downloadUrl;
 
         const teacherRes = await request.get(
-          '/api-web/open/appVersionInfo/queryLatestByPlatform',
+          '/api-website/open/appVersionInfo/queryLatestByPlatform',
           {
             params: {
               platform: 'android-teacher',
@@ -39,12 +43,51 @@ export default defineComponent({
             }
           }
         );
-        teacherAndroidUrl.value = teacherRes.value.downloadUrl;
+        teacherAndroidUrl.value = teacherRes.data?.downloadUrl;
       } catch (e) {
         console.log(e);
       }
     });
 
+    // 下载
+    const onDownload = (type: string) => {
+      if (browser().weixin || navigator.userAgent.indexOf('DingTalk') > -1) {
+        wxStatus.value = true;
+        return;
+      }
+
+      let urlIos = '';
+      let urlAndroid = '';
+      if (location.origin.indexOf('online.colexiu.com') <= -1) {
+        if (type === 'student') {
+          urlIos = 'https://itunes.apple.com/cn/app/id1626971695?mt=8';
+          urlAndroid = studentAndroidUrl.value; // 'https://oss.dayaedu.com/appstore/clx-student-domain.apk'
+        } else {
+          urlIos = 'https://itunes.apple.com/cn/app/id1626971149?mt=8';
+          urlAndroid = teacherAndroidUrl.value; // 'https://oss.dayaedu.com/appstore/clx-teacher-domain.apk'
+        }
+      } else {
+        if (type === 'student') {
+          urlIos = 'https://www.pgyer.com/powy';
+          urlAndroid = studentAndroidUrl.value; // 'https://www.pgyer.com/70e7'
+        } else {
+          urlIos = 'https://www.pgyer.com/iO0m';
+          urlAndroid = teacherAndroidUrl.value; // 'https://www.pgyer.com/N2U3'
+        }
+      }
+
+      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('请用手机或移动设备打开');
+      }
+    };
+
     return () => (
       <div class={styles.person}>
         <MHeader />
@@ -149,7 +192,7 @@ export default defineComponent({
               <span>邀约学生</span>
             </div>
             <div class={styles.content}>
-              酷乐秀音乐分享平台集合了众多在乐器练习中不得要领的苦行僧，他们需要你的点拨，将你的毕生所学传授下去，让他们也能成长未一个器乐演奏达人。
+              酷乐秀音乐分享平台集合了众多在乐器练习中不得要领的苦行僧，他们需要你的点拨，将你的毕生所学传授下去，让他们也能成长为一个器乐演奏达人。
             </div>
           </div>
 
@@ -189,11 +232,25 @@ export default defineComponent({
             与器乐爱好者们分享音乐吧！
           </div>
           <div class={styles.btnGroup}>
-            <div class={[styles.btn, styles.btnIos]}></div>
-            <div class={[styles.btn, styles.btnAndroid]}></div>
+            <div
+              class={[styles.btn, styles.btnIos]}
+              onClick={() => onDownload('student')}></div>
+            <div
+              class={[styles.btn, styles.btnAndroid]}
+              onClick={() => onDownload('teacher')}></div>
           </div>
         </div>
         <MFooter />
+
+        {wxStatus.value && (
+          <div
+            class={styles.wxpopup}
+            onClick={() => {
+              wxStatus.value = false;
+            }}>
+            <img src={wxBg} alt="" />
+          </div>
+        )}
       </div>
     );
   }