更改已读判定

src/views/Register.vue

@@ -263,7 +263,7 @@
             <p>联系电话：</p>
             <p>生效日期：</p>
           </div>
-           <div v-show="activeTab === 'points-text'" class="points-text-content">
+          <div v-show="activeTab === 'points-text'" class="points-text-content" ref="pointsContent">
             <h3>积分使用协议</h3>
             <p>欢迎您使用[炬融圈]（以下简称"本平台"）提供的积分服务。本《积分使用协议》（以下简称"本协议"）是您（以下简称"用户"）与本平台运营方（以下简称"运营方"）之间关于使用积分服务所订立的专项协议，是《炬融圈用户协议》的重要组成部分。您在使用积分服务前，应仔细阅读并充分理解本协议全部条款。您对积分的任何获取、使用等行为，即视为您已阅读并同意接受本协议及上述协议所有内容的约束。</p>
             <p>一、定义</p>
@@ -314,7 +314,7 @@
             <p>联系电话：</p>
             <p>生效日期：</p>
           </div>
-           <div v-show="activeTab === 'vip-text'" class="vip-text-content">
+          <div v-show="activeTab === 'vip-text'" class="vip-text-content" ref="vipContent">
             <h3>会员权益协议</h3>
             <p>欢迎您使用[炬融圈]（以下简称"本平台"）提供的会员服务。本《会员权益协议》（以下简称"本协议"）是您（以下简称"会员"或"用户"）与本平台运营方（以下简称"运营方"）之间关于使用会员服务所订立的专项协议，是《炬融圈用户协议》及《融豆使用协议》的重要组成部分。您在使用会员服务前，应仔细阅读并充分理解本协议全部条款。您购买或使用会员服务的任何行为，即视为您已阅读并同意接受本协议及上述协议所有内容的约束。</p>
             <p>一、会员资格与费用</p>
@@ -361,7 +361,7 @@
             <p>联系电话：</p>
             <p>生效日期：</p>
           </div>
-           <div v-show="activeTab === 'privacy-text'" class="privacy-text-content">
+          <div v-show="activeTab === 'privacy-text'" class="privacy-text-content" ref="privacyContent">
             <h3>用户隐私协议</h3>
             <p>欢迎您使用炬融圈平台服务！本《用户隐私协议》（以下简称"本协议"）由炬融圈平台运营方（以下简称"运营方"或"我们")与注册并使用平台服务的用户（以下简称"用户"或"您")共同订立。本协议旨在明确说明运营方在您注册、使用融豆、积分、会员服务及其他相关功能过程中收集、使用、存储和保护您个人信息的方式及您所享有的权利。请您在使用平台服务前，仔细阅读并充分理解本协议全部内容。您注册、登录或使用平台服务的行为，即视为您已阅读、理解并同意接受本协议所有条款的约束。</p>
             <p>一、信息收集范围</p>
@@ -436,7 +436,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue';
+import { ref, reactive, computed, onMounted, nextTick } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useUserStore } from '@/stores/user';
 import { ElMessage, ElMessageBox } from 'element-plus';
@@ -490,6 +490,9 @@ const showAgreementDialogVisible = ref(false);
 const activeTab = ref('user-text');
 const userContent = ref();
 const beanContent = ref();
+const pointsContent = ref();
+const vipContent = ref();
+const privacyContent = ref();
 
 // 协议标签页数据
 const agreementTabs = ref([
@@ -732,10 +735,10 @@ const handleRegister = async () => {
 const showAgreementDialog = () => {
   showAgreementDialogVisible.value = true;
   activeTab.value = 'user-text';
-  // 弹窗打开时默认用户协议已读
-  userViewed.value = true;
-  // 标记第一个标签页为已读
-  agreementTabs.value[0].viewed = true;
+  // 弹窗打开时不再默认标记为已读，需要滚动到底部才算已读
+  nextTick(() => {
+    addScrollListener('user-text');
+  });
 };
 
 // 关闭协议弹窗
@@ -758,11 +761,47 @@ const confirmAgreement = () => {
 const handleTabClick = (tabName) => {
   activeTab.value = tabName;
   
+  // 切换标签页时，为当前内容区域添加滚动监听
+  nextTick(() => {
+    addScrollListener(tabName);
+  });
+};
+
+// 添加滚动监听器
+const addScrollListener = (tabName) => {
+  let contentRef;
+  
+  // 获取对应的内容区域ref
+  switch (tabName) {
+    case 'user-text':
+      contentRef = userContent.value;
+      break;
+    case 'bean-text':
+      contentRef = beanContent.value;
+      break;
+    case 'points-text':
+      contentRef = pointsContent.value;
+      break;
+    case 'vip-text':
+      contentRef = vipContent.value;
+      break;
+    case 'privacy-text':
+      contentRef = privacyContent.value;
+      break;
+  }
+  
+  if (!contentRef) return;
+  
+  // 定义滚动处理函数
+  const handleScroll = () => {
+    const { scrollTop, scrollHeight, clientHeight } = contentRef;
+    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10; // 10px容差
+    
+    if (isAtBottom) {
       // 标记对应协议为已读
       const tab = agreementTabs.value.find(t => t.name === tabName);
-  if (tab) {
+      if (tab && !tab.viewed) {
         tab.viewed = true;
-  }
         
         // 更新原有的viewed状态
         if (tabName === 'user-text') {
@@ -776,6 +815,15 @@ const handleTabClick = (tabName) => {
         } else if (tabName === 'privacy-text') {
           privacyViewed.value = true;
         }
+        
+        // 移除监听器，避免重复触发
+        contentRef.removeEventListener('scroll', handleScroll);
+      }
+    }
+  };
+  
+  // 添加滚动监听器
+  contentRef.addEventListener('scroll', handleScroll);
 };
 
 
@@ -1345,24 +1393,36 @@ onMounted(() => {
 
 /* 滚动条样式 */
 .user-text-content::-webkit-scrollbar,
-.bean-text-content::-webkit-scrollbar {
+.bean-text-content::-webkit-scrollbar,
+.points-text-content::-webkit-scrollbar,
+.vip-text-content::-webkit-scrollbar,
+.privacy-text-content::-webkit-scrollbar {
   width: 6px;
 }
 
 .user-text-content::-webkit-scrollbar-track,
-.bean-text-content::-webkit-scrollbar-track {
+.bean-text-content::-webkit-scrollbar-track,
+.points-text-content::-webkit-scrollbar-track,
+.vip-text-content::-webkit-scrollbar-track,
+.privacy-text-content::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 3px;
 }
 
 .user-text-content::-webkit-scrollbar-thumb,
-.bean-text-content::-webkit-scrollbar-thumb {
+.bean-text-content::-webkit-scrollbar-thumb,
+.points-text-content::-webkit-scrollbar-thumb,
+.vip-text-content::-webkit-scrollbar-thumb,
+.privacy-text-content::-webkit-scrollbar-thumb {
   background: #c1c1c1;
   border-radius: 3px;
 }
 
 .user-text-content::-webkit-scrollbar-thumb:hover,
-.bean-text-content::-webkit-scrollbar-thumb:hover {
+.bean-text-content::-webkit-scrollbar-thumb:hover,
+.points-text-content::-webkit-scrollbar-thumb:hover,
+.vip-text-content::-webkit-scrollbar-thumb:hover,
+.privacy-text-content::-webkit-scrollbar-thumb:hover {
   background: #a8a8a8;
 }