首次

src/components/UserAgreement.vue

@@ -4,7 +4,9 @@
       <view class="agreement-header">
         <text class="agreement-title">用户须知</text>
       </view>
-      <scroll-view class="agreement-body" scroll-y show-scrollbar="true">
+      
+      <!-- 用普通view替代scroll-view -->
+      <view class="agreement-body">
         <view class="agreement-inner">
           <view class="agreement-section">
             <view class="section-title">1 年龄与身份</view>
@@ -29,17 +31,32 @@
             <text class="section-item">3.3 若不同意本须知，请立即退出并停止使用本平台及相关产品。</text>
           </view>
         </view>
-      </scroll-view>
+      </view>
+      
       <view class="agreement-footer">
-        <button class="btn-disagree" @click="handleDisagree">暂不进入</button>
-        <button class="btn-agree" @click="handleAgree">确定</button>
+        <view 
+          class="btn-disagree" 
+          :class="{ 'btn-disabled': isProcessing }"
+          @click.stop.prevent="handleDisagree" 
+          @tap.stop.prevent="handleDisagree"
+        >
+          {{ isProcessing ? '处理中...' : '暂不进入' }}
+        </view>
+        <view 
+          class="btn-agree" 
+          :class="{ 'btn-disabled': isProcessing }"
+          @click.stop.prevent="handleAgree" 
+          @tap.stop.prevent="handleAgree"
+        >
+          {{ isProcessing ? '处理中...' : '确定' }}
+        </view>
       </view>
     </view>
   </view>
 </template>
 
 <script setup>
-import { ref, defineEmits } from 'vue';
+import { ref, onMounted, nextTick } from 'vue';
 
 const props = defineProps({
   visible: {
@@ -50,15 +67,80 @@ const props = defineProps({
 
 const emit = defineEmits(['agree', 'disagree']);
 
-// 处理同意事件
-const handleAgree = () => {
-  emit('agree');
+// 防止重复点击的状态
+const isProcessing = ref(false);
+
+// 组件挂载时的调试信息
+onMounted(() => {
+  console.log('UserAgreement component mounted, visible:', props.visible);
+});
+
+// 防抖处理函数
+const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
 };
 
+// 处理同意事件
+const handleAgree = debounce(async () => {
+  if (isProcessing.value) {
+    console.log('UserAgreement: handleAgree already processing, skipping');
+    return;
+  }
+  
+  isProcessing.value = true;
+  console.log('UserAgreement: handleAgree clicked');
+  
+  try {
+    console.log('About to emit agree event');
+    emit('agree');
+    console.log('Agree event emitted');
+    
+    // 确保DOM更新完成
+    await nextTick();
+  } catch (error) {
+    console.error('Error in handleAgree:', error);
+  } finally {
+    // 延迟重置状态，避免快速连续点击
+    setTimeout(() => {
+      isProcessing.value = false;
+    }, 300);
+  }
+}, 300);
+
 // 处理不同意事件
-const handleDisagree = () => {
-  emit('disagree');
-};
+const handleDisagree = debounce(async () => {
+  if (isProcessing.value) {
+    console.log('UserAgreement: handleDisagree already processing, skipping');
+    return;
+  }
+  
+  isProcessing.value = true;
+  console.log('UserAgreement: handleDisagree clicked');
+  
+  try {
+    console.log('About to emit disagree event');
+    emit('disagree');
+    console.log('Disagree event emitted');
+    
+    // 确保DOM更新完成
+    await nextTick();
+  } catch (error) {
+    console.error('Error in handleDisagree:', error);
+  } finally {
+    // 延迟重置状态，避免快速连续点击
+    setTimeout(() => {
+      isProcessing.value = false;
+    }, 300);
+  }
+}, 300);
 </script>
 
 <style scoped>
@@ -72,7 +154,8 @@ const handleDisagree = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 9999;
+  z-index: 99999;
+  pointer-events: auto;
 }
 
 .agreement-content {
@@ -84,6 +167,7 @@ const handleDisagree = () => {
   display: flex;
   flex-direction: column;
   max-height: 88vh;
+  pointer-events: auto;
 }
 
 .agreement-header {
@@ -100,6 +184,7 @@ const handleDisagree = () => {
 
 .agreement-body {
   max-height: 70vh;
+  overflow-y: auto;
   box-sizing: border-box;
 }
 
@@ -153,6 +238,12 @@ const handleDisagree = () => {
   font-size: 30rpx;
   margin: 0;
   border-radius: 0;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  pointer-events: auto;
+  user-select: none;
+  transition: all 0.2s ease;
 }
 
 .btn-disagree {
@@ -161,8 +252,30 @@ const handleDisagree = () => {
   border-right: 1rpx solid #EEEEEE;
 }
 
+.btn-disagree:hover {
+  background: #f5f5f5;
+}
+
+.btn-disagree:active {
+  background: #eeeeee;
+}
+
 .btn-agree {
   background: #FF9800;
   color: #FFFFFF;
 }
+
+.btn-agree:hover {
+  background: #e68900;
+}
+
+.btn-agree:active {
+  background: #cc7700;
+}
+
+.btn-disabled {
+  background: #cccccc;
+  color: #999999;
+  cursor: not-allowed;
+}
 </style>