Bladeren bron

修改协议文案内容

yuanmingze 3 maanden geleden
bovenliggende
commit
5b1ffb9e8b

+ 1 - 0
components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     StepProgress: typeof import('./src/components/StepProgress.vue')['default']
     VanButton: typeof import('vant/es')['Button']
     VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanCheckbox: typeof import('vant/es')['Checkbox']
     VanDialog: typeof import('vant/es')['Dialog']
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']

+ 6 - 0
src/router/index.ts

@@ -22,6 +22,12 @@ router.beforeEach((to, from, next) => {
   } else {
     next()
   }
+  if (to.meta && to.meta.title) {
+    document.title = to.meta.title as string
+  } else {
+    // 可设置默认标题
+    document.title = '默认标题'
+  }
 })
 
 // 可选:设置页面标题

+ 6 - 2
src/stores/modules/user.ts

@@ -4,28 +4,32 @@ import { store } from '@/stores'
 interface UserState {
   access_token: string
   tenant_id: string
+  pushRecordId: string
 }
 
 export const useUserStore = defineStore('user', {
   state: (): UserState => ({
     access_token: '',
     tenant_id: '1',
+    pushRecordId: '',
   }),
 
   actions: {
     setAccessToken(token: string) {
       this.access_token = token
     },
+    setPushRecordId(id: string) {
+      this.pushRecordId = id
+    },
     LogOut() {
       this.access_token = ''
     },
   },
 
-  // ✅ 兼容 Pinia v3 + Persistedstate v4.5 正确写法
   persist: {
     key: 'user-store',
     storage: localStorage,
-    pick: ['access_token', 'tenant_id'],
+    pick: ['access_token', 'tenant_id', 'pushRecordId'],
   },
 })
 

+ 2 - 2
src/views/agreement/components/AuthAgreement.vue

@@ -79,7 +79,7 @@
 
 p {
   text-indent: 2em;
-  font-size: 26px;
-  line-height: 48px;
+  font-size: 13px;
+  line-height: 24px;
 }
 </style>

+ 2 - 2
src/views/agreement/components/PrivacyAgreement.vue

@@ -369,7 +369,7 @@
 }
 p {
   text-indent: 2em;
-  font-size: 26px;
-  line-height: 48px;
+  font-size: 13px;
+  line-height: 24px;
 }
 </style>

+ 34 - 12
src/views/agreement/index.vue

@@ -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;

+ 15 - 7
src/views/login/index.vue

@@ -40,10 +40,11 @@
         <!-- 同意协议 -->
         <div class="agree">
           <label>
-            <input type="checkbox" v-model="agree" />
-            我已阅读并同意
-            <a @click="toAgreement('auth')">《授权协议》</a>
-            <a @click="toAgreement('privacy')">《隐私权政策》</a>
+            <van-checkbox v-model="agree" checked-color="#fe783d" shape="square" icon-size="4vw">
+              我已阅读并同意
+              <a @click="toAgreement('auth')">《授权协议》</a>
+              <a @click="toAgreement('privacy')">《隐私权政策》</a>
+            </van-checkbox>
           </label>
         </div>
 
@@ -61,7 +62,7 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { showFailToast, showSuccessToast, showToast } from 'vant'
 import { sendEtsSmsApi, loginEtssmsApi } from '@/services/modules/login'
 import type { SendTtsSmsRequest, LoginEtssmsRequest } from '@/services/modules/login/type.d'
@@ -69,6 +70,7 @@ import { useUserStore } from '@/stores/modules/user'
 
 const userStore = useUserStore()
 const router = useRouter()
+const route = useRoute()
 
 /* 表单数据 */
 const formData = reactive<LoginEtssmsRequest>({
@@ -147,7 +149,6 @@ const login = async () => {
     userStore.setAccessToken(res.access_token)
     router.replace({ path: '/invoice-information' })
   }
-  console.log('登录结果:', res)
 }
 
 /* 协议跳转 */
@@ -159,7 +160,11 @@ const toAgreement = (type: string) => {
 }
 
 onMounted(() => {
-  // 可在此自动聚焦手机号输入或初始化逻辑
+  const pushRecordId = route?.query.pushRecordId || ''
+  if (pushRecordId) {
+    sendEtsSms.pushRecordId = pushRecordId as string
+    userStore.setPushRecordId(pushRecordId as string)
+  }
 })
 </script>
 
@@ -264,6 +269,9 @@ onMounted(() => {
         margin: 4vw 0;
         color: #666;
         padding-left: 36px;
+        .custom-checkbox {
+          accent-color: #fe783d;
+        }
         label {
           display: flex;
           align-items: center;