|
|
@@ -8,26 +8,46 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { onBeforeMount, ref } from 'vue'
|
|
|
+import { onBeforeMount, shallowRef, ref } from 'vue'
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
|
|
-const route = useRoute()
|
|
|
-const title = ref('')
|
|
|
-const currentComponent = ref<any>(null)
|
|
|
-
|
|
|
type AgreementType = 'auth' | 'privacy'
|
|
|
|
|
|
-const componentsMap: Record<AgreementType, { title: string; loader: () => Promise<any> }> = {
|
|
|
+const route = useRoute()
|
|
|
+const title = ref('协议')
|
|
|
+const currentComponent = shallowRef<any>(null) // ✅ 关键:用 shallowRef 存放组件,避免被代理
|
|
|
+
|
|
|
+// 动态组件映射
|
|
|
+const componentsMap: Record<
|
|
|
+ AgreementType,
|
|
|
+ { title: string; loader: () => Promise<{ default: any }> }
|
|
|
+> = {
|
|
|
auth: { title: '授权协议', loader: () => import('./components/AuthAgreement.vue') },
|
|
|
privacy: { title: '隐私权政策', loader: () => import('./components/PrivacyAgreement.vue') },
|
|
|
}
|
|
|
|
|
|
onBeforeMount(async () => {
|
|
|
- const type = (route.query.type as AgreementType) || 'auth'
|
|
|
+ // 读取 ?type=auth|privacy,兜底为 auth
|
|
|
+ const rawType = (route.query.type as string) || 'auth'
|
|
|
+ const type = (['auth', 'privacy'].includes(rawType) ? rawType : 'auth') as AgreementType
|
|
|
+
|
|
|
const match = componentsMap[type]
|
|
|
- document.title = match.title
|
|
|
+
|
|
|
+ try {
|
|
|
+ const mod = await match.loader()
|
|
|
+ currentComponent.value = mod.default // ✅ shallowRef 不会触发“组件被做成响应式”的告警
|
|
|
+ } catch (e) {
|
|
|
+ console.log('err', e)
|
|
|
+
|
|
|
+ // 兜底:加载失败时给出一个简单占位组件
|
|
|
+ currentComponent.value = {
|
|
|
+ name: 'LoadFailed',
|
|
|
+ template: `<div style="color:#f56c6c;">协议内容加载失败,请稍后重试。</div>`,
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
title.value = match.title
|
|
|
- currentComponent.value = (await match.loader()).default
|
|
|
+ document.title = match.title
|
|
|
})
|
|
|
|
|
|
const onClickLeft = () => history.back()
|
|
|
@@ -39,11 +59,13 @@ const onClickLeft = () => history.back()
|
|
|
border-bottom: 1px solid #f2f2f2;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
-/* 修改左侧返回图标颜色 */
|
|
|
+
|
|
|
+/* 修改左侧返回图标颜色与大小 */
|
|
|
::v-deep(.van-icon-arrow-left) {
|
|
|
- color: #ff8036; /* 自定义颜色 */
|
|
|
- font-size: 20px; /* 调整图标大小 */
|
|
|
+ color: #ff8036;
|
|
|
+ font-size: 20px;
|
|
|
}
|
|
|
+
|
|
|
.agreementContent {
|
|
|
padding: 16px;
|
|
|
overflow-y: auto;
|