feat: 区分三端下载交互

src/utils/tools.ts

@@ -0,0 +1,17 @@
+export function getBrowserInfo() {
+  const ua = navigator.userAgent
+
+  const isIOS = /(iPhone|iPad|iPod|iOS)/i.test(ua)
+  const isMac = ua.match(/(Mac OS X)\s([\d_]+)/i)
+  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua)
+
+  const isSafari = ua.indexOf('Safari') !== -1 && ua.indexOf('Chrome') === -1
+  const isWx = /MicroMessenger/i.test(ua)
+  return {
+    isIOS,
+    isMobile,
+    isMac,
+    isSafari,
+    isWx
+  }
+}

src/views/Page1/Page1.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
+import { getBrowserInfo } from '@/utils/tools'
+
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/css'
 
@@ -23,10 +25,26 @@ const swiperList = [
 ]
 
 const mainIntroduce = ref('E个魂的APP')
-onMounted(() => {})
+// onMounted(() => {})
+const { isIOS, isMobile } = getBrowserInfo()
+const buttontext = computed(() => {
+  if (!isMobile) {
+    return '前往官网'
+  }
+  if (isIOS) {
+    return '暂无下载链接'
+  }
+  return '前往下载'
+})
 
 const download = () => {
-  window.open('https://alist.vtb.link/EOEFANS/client')
+  if (!isMobile) {
+    window.open('https://eoefans.com')
+    return
+  }
+  if (!isIOS) {
+    window.open('https://eoe.best/appdl')
+  }
 }
 </script>
 <template>
@@ -47,7 +65,7 @@ const download = () => {
         Welcome to eoe world.
       </div>
       <section class="button-section">
-        <div class="download-button__base" @click="download">前往下载</div>
+        <div class="download-button__base" @click="download">{{ buttontext }}</div>
       </section>
     </section>
     <!-- 使用示例 -->