更改协议同意方式

src/views/Register.vue

@@ -136,16 +136,31 @@
           </el-form-item>
           
           <el-form-item prop="agreement">
-            <el-checkbox v-model="registerForm.agreement">
+            <el-checkbox 
+              v-model="registerForm.agreement"
+              @change="handleAgreementChange"
+            >
               我已阅读并同意
-              <el-link type="primary" @click="showAgreement">
+              <el-link 
+                type="primary" 
+                @click="showAgreement"
+                :class="{ 'viewed': agreementViewed }"
+              >
                 《用户协议》
               </el-link>
               和
-              <el-link type="primary" @click="showPrivacy">
+              <el-link 
+                type="primary" 
+                @click="showPrivacy"
+                :class="{ 'viewed': privacyViewed }"
+              >
                 《隐私政策》
               </el-link>
             </el-checkbox>
+            <div v-if="!canCheckAgreement" class="agreement-hint">
+              <el-icon><InfoFilled /></el-icon>
+              <span>请先点击查看用户协议和隐私政策</span>
+            </div>
           </el-form-item>
           
           <el-form-item>
@@ -205,7 +220,7 @@ import { ref, reactive, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { User, Lock, Message, Edit, ChatDotRound, CreditCard, Location } from '@element-plus/icons-vue'
+import { User, Lock, Message, Edit, ChatDotRound, CreditCard, Location, InfoFilled } from '@element-plus/icons-vue'
 import Captcha from '@/components/Captcha.vue'
 
 const router = useRouter()
@@ -230,6 +245,11 @@ const registerForm = reactive({
   agreement: false
 })
 
+// 协议查看状态
+const agreementViewed = ref(false)
+const privacyViewed = ref(false)
+const canCheckAgreement = computed(() => agreementViewed.value && privacyViewed.value)
+
 // 短信验证码相关状态
 const sendingSMS = ref(false)
 const smsCountdown = ref(0)
@@ -484,7 +504,10 @@ const showAgreement = () => {
       dangerouslyUseHTMLString: true,
       customClass: 'agreement-dialog'
     }
-  )
+  ).then(() => {
+    agreementViewed.value = true
+    ElMessage.success('已查看用户协议')
+  })
 }
 
 // 显示隐私政策
@@ -504,7 +527,20 @@ const showPrivacy = () => {
       dangerouslyUseHTMLString: true,
       customClass: 'privacy-dialog'
     }
-  )
+  ).then(() => {
+    privacyViewed.value = true
+    ElMessage.success('已查看隐私政策')
+  })
+}
+
+// 处理协议勾选
+const handleAgreementChange = (value) => {
+  if (value && !canCheckAgreement.value) {
+    registerForm.agreement = false
+    ElMessage.warning('请先查看用户协议和隐私政策后再勾选')
+    return false
+  }
+  return true
 }
 
 // 图片上传成功处理
@@ -835,4 +871,27 @@ onMounted(() => {
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+/* 协议相关样式 */
+.agreement-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  font-size: 12px;
+  color: #e6a23c;
+}
+
+.agreement-hint .el-icon {
+  font-size: 14px;
+}
+
+:deep(.el-link.viewed) {
+  color: #67c23a !important;
+  font-weight: 500;
+}
+
+:deep(.el-link.viewed:hover) {
+  color: #529b2e !important;
+}
 </style>