直播app特殊支持页

b62800d3 · 郑磊 · 994eacc7 · b62800d3 · b62800d3 · b62800d3
Commit b62800d3 authored May 20, 2024 by 郑磊
8 changed files
--- a/web/index.html
+++ b/web/index.html
@@ -10,6 +10,6 @@
    </head>
    <body>
        <div id="app"></div>
-        <script type="module" src="/src/main.ts"></script>
+        <script type="module" src="/src/index/main.ts"></script>
    </body>
 </html>
--- a/web/live.html
+++ b/web/live.html
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta
+            name="viewport"
+            content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover"
+        />
+        <title>Captcha</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/live/main.ts"></script>
+    </body>
+</html>
--- a/web/src/App.vue
+++ b/web/src/App.vue
--- a/web/src/main.ts
+++ b/web/src/main.ts
-import { createApp } from 'vue'
-import './style.css'
 import 'fj-captcha-vue/esm/style.css'
+import { createApp } from 'vue'
+import '../style.css'
 import App from './App.vue'

 createApp(App).mount('#app')
--- a/web/src/live/App.vue
+++ b/web/src/live/App.vue
+<script setup lang="ts">
+import URL from 'core-js-pure/features/url'
+import { Captcha } from 'fj-captcha-vue'
+import { callAppMethod } from './in-app'
+
+const requestCaptchaDataUrl = import.meta.env.VITE_REQUEST_CAPTCHA_URL
+const validCaptchaUrl = import.meta.env.VITE_VALID_CAPTCHA_URL
+
+//通过URL上的参数解析验证码组件的参数
+const { locale } = (() => {
+    const url = new URL(location.href)
+    const locale = url.searchParams.get('lang') ?? undefined
+
+    return {
+        locale,
+    }
+})()
+
+/**
+ * 当验证码校验成功时
+ * @param id
+ */
+const onSuccess = (id: string) => {
+    callAppMethod('fetchImageCode', {
+        captcha_key: id,
+    })
+}
+</script>
+
+<template>
+    <Captcha
+        :requestCaptchaDataUrl="requestCaptchaDataUrl"
+        :validCaptchaUrl="validCaptchaUrl"
+        :showClose="false"
+        :locale="locale"
+        @success="onSuccess"
+    />
+</template>
--- a/web/src/live/in-app.ts
+++ b/web/src/live/in-app.ts
+const device = navigator.userAgent.includes('iPhone') ? 'iOS' : 'android'
+
+/**
+ * 调用app侧提供的方法
+ */
+export function callAppMethod(name: string, data: any) {
+    switch (device) {
+        case 'iOS':
+            // @ts-ignore
+            window.webkit.messageHandlers[name].postMessage(
+                typeof data === undefined ? true : data,
+            )
+            break
+        case 'android':
+            // @ts-ignore
+            window.liveapp[name](
+                typeof data === undefined ? undefined : JSON.stringify(data),
+            )
+            break
+    }
+}
--- a/web/src/live/main.ts
+++ b/web/src/live/main.ts
+import 'fj-captcha-vue/esm/style.css'
+import { createApp } from 'vue'
+import '../style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -14,5 +14,11 @@ export default defineConfig({
    },
    build: {
        cssTarget: 'chrome61',
+        rollupOptions: {
+            input: {
+                index: './index.html',
+                live: './live.html',
+            },
+        },
    },
 })