|
|
@@ -1,11 +1,12 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted } from 'vue'
|
|
|
+import { ref, onMounted, type Ref } from 'vue'
|
|
|
import QRCode from 'qrcode'
|
|
|
import { DevicePhoneMobileIcon } from '@heroicons/vue/24/outline'
|
|
|
import * as simpleIcons from 'simple-icons'
|
|
|
import Header from '@/components/Header.vue'
|
|
|
import Footer from '@/components/Footer.vue'
|
|
|
import Accordion from '@/components/Accordion.vue'
|
|
|
+import { apiClient } from '@/utils/api'
|
|
|
|
|
|
// 获取图标数据
|
|
|
const appleIcon = simpleIcons.siApple
|
|
|
@@ -14,14 +15,54 @@ const androidIcon = simpleIcons.siAndroid
|
|
|
const showDownloadPopover = ref(false)
|
|
|
const qrCode = ref('')
|
|
|
const isMobile = ref(false)
|
|
|
+const isLoading = ref(false)
|
|
|
let hideTimeout: ReturnType<typeof setTimeout> | null = null
|
|
|
|
|
|
// 下载链接配置
|
|
|
-const downloadLinks = {
|
|
|
+const downloadLinks = ref({
|
|
|
// Android APK 下载地址
|
|
|
android: 'https://static.okx.com/upgradeapp/w-android.apk',
|
|
|
// iOS App Store 链接
|
|
|
ios: 'https://apps.apple.com/us/app/okx-wallet-portal-to-web3/id6743309484',
|
|
|
+}) as Ref<{ android: string; ios: string }>
|
|
|
+
|
|
|
+// 获取安卓下载链接
|
|
|
+const fetchAndroidDownloadLink = async () => {
|
|
|
+ // 检查是否存在 code
|
|
|
+ if (!apiClient.hasCode()) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ isLoading.value = true
|
|
|
+ try {
|
|
|
+ const androidLink = await apiClient.getAndroidDownloadLink()
|
|
|
+ downloadLinks.value.android = androidLink
|
|
|
+ downloadUrl.value = androidLink
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Get Android Download Link Error:', error)
|
|
|
+ } finally {
|
|
|
+ isLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 二维码下载地址
|
|
|
+const downloadUrl = ref(downloadLinks.value.android)
|
|
|
+
|
|
|
+// 生成二维码
|
|
|
+const generateQRCode = async () => {
|
|
|
+ try {
|
|
|
+ const dataUrl = await QRCode.toDataURL(downloadUrl.value, {
|
|
|
+ width: 256,
|
|
|
+ margin: 2,
|
|
|
+ color: {
|
|
|
+ dark: '#000000',
|
|
|
+ light: '#FFFFFF',
|
|
|
+ },
|
|
|
+ })
|
|
|
+ qrCode.value = dataUrl
|
|
|
+ } catch (err) {
|
|
|
+ console.error('Generate QR Code Error:', err)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 弹窗显示与隐藏控制
|
|
|
@@ -40,9 +81,6 @@ const handlePopoverLeave = () => {
|
|
|
}, 200)
|
|
|
}
|
|
|
|
|
|
-// 用于生成二维码的下载地址
|
|
|
-const downloadUrl = downloadLinks.android
|
|
|
-
|
|
|
const downloadApp = () => {
|
|
|
// 检测屏幕宽度，判断是否为 PC 端（>= 1024px）
|
|
|
const isPC = window.innerWidth >= 1024
|
|
|
@@ -57,24 +95,15 @@ const checkMobile = () => {
|
|
|
isMobile.value = window.innerWidth < 1024
|
|
|
}
|
|
|
|
|
|
-// 生成二维码
|
|
|
onMounted(async () => {
|
|
|
checkMobile()
|
|
|
window.addEventListener('resize', checkMobile)
|
|
|
|
|
|
- try {
|
|
|
- const dataUrl = await QRCode.toDataURL(downloadUrl, {
|
|
|
- width: 256,
|
|
|
- margin: 2,
|
|
|
- color: {
|
|
|
- dark: '#000000',
|
|
|
- light: '#FFFFFF',
|
|
|
- },
|
|
|
- })
|
|
|
- qrCode.value = dataUrl
|
|
|
- } catch (err) {
|
|
|
- console.error('生成二维码失败:', err)
|
|
|
- }
|
|
|
+ // 先获取安卓下载链接
|
|
|
+ await fetchAndroidDownloadLink()
|
|
|
+
|
|
|
+ // 生成二维码
|
|
|
+ await generateQRCode()
|
|
|
})
|
|
|
|
|
|
const features = [
|
