feat: 协议接口对接

pages/login/components/AgreePopup/index.vue

@@ -12,15 +12,7 @@
       <!-- 弹窗内容 -->
       <view class="popup-content">
         <view class="content-text">
-          <text class="main-text">
-            您在使用朵花温泉服务前，请仔细阅读用户隐私条款及用户注册须知，当您点击同意，即表示您已经理解并同意该条款，该条款将构成对您具有法律约束力的文件。
-          </text>
-        </view>
-
-        <view class="notice-text">
-          <text>
-            请您注意：如果您不同意上述用户注册须知、隐私政策或其中任何约定，请您停止注册。如您阅读并点击同意即表示您已充分阅读理解并接受其全部内容，并表明您也同意朵花温泉可以依据以上隐私政策来处理您的个人信息。
-          </text>
+          <zero-markdown-view :markdown="agreement" />
         </view>
       </view>
 
@@ -45,6 +37,10 @@ const props = defineProps({
     type: String,
     default: "温馨提示",
   },
+  agreement: {
+    type: String,
+    default: "",
+  },
 });
 
 // Events定义

pages/login/components/AgreePopup/styles/index.scss

@@ -39,32 +39,20 @@
 
     // 弹窗内容
     .popup-content {
-        padding: 20px;
+        padding: 12px;
+        max-height: 400px; // 设置最大高度
+        overflow-y: auto; // 启用垂直滚动
 
-        .content-text {
-            margin-bottom: 16px;
-
-            .main-text {
-                font-size: 14px;
-                color: #333;
-                line-height: 22px;
-                display: block;
-            }
-        }
-
-        .notice-text {
-            text {
-                font-size: 13px;
-                color: #333;
-                line-height: 20px;
-                display: block;
-            }
+        // 自定义滚动条样式
+        &::-webkit-scrollbar {
+            display: none;
         }
     }
 
     // 按钮区域
     .button-area {
-        padding: 0 20px 20px 20px;
+        padding: 20px;
+        box-sizing: border-box;
         display: flex;
         justify-content: center;
         align-items: center;

pages/login/index.vue

@@ -55,20 +55,33 @@
       </CheckBox>
     </view>
 
-    <AgreePopup ref="agreePopup" :visible="visible" @close="visible = false" />
+    <AgreePopup
+      ref="agreePopup"
+      :visible="visible"
+      :agreement="computedAgreement"
+      @close="visible = false"
+    />
   </view>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import CheckBox from "@/components/CheckBox/index.vue";
-import AgreePopup from "./components/AgreePopup/index.vue";
+import { ref, computed } from "vue";
 import { loginAuth, bindPhone, checkPhone } from "@/manager/LoginManager";
+import {
+  getServiceAgreement,
+  getPrivacyAgreement,
+} from "@/request/api/LoginApi";
 import { goHome } from "@/hooks/useGoHome";
 import loginBg from "./images/bg.png";
+import CheckBox from "@/components/CheckBox/index.vue";
+import AgreePopup from "./components/AgreePopup/index.vue";
 
 const isAgree = ref(false);
 const visible = ref(false);
+const serviceAgreement = ref("");
+const privacyAgreement = ref("");
+// 协议类型
+const AgreeType = ref("service");
 
 // 同意隐私协议并获取手机号
 const handleAgreeAndGetPhone = () => {
@@ -111,7 +124,33 @@ const onLogin = (e) => {
 // 处理同意协议点击事件
 const handleAgreeClick = (type) => {
   visible.value = true;
+  AgreeType.value = type;
 };
+
+// 计算协议类型
+const computedAgreement = computed(() => {
+  if (AgreeType.value === "service") {
+    return serviceAgreement.value;
+  } else {
+    return privacyAgreement.value;
+  }
+});
+
+// 获取服务协议数据
+const getServiceAgreementData = async () => {
+  const { data } = await getServiceAgreement();
+  serviceAgreement.value = data;
+};
+
+getServiceAgreementData();
+
+// 获取隐私协议数据
+const getPrivacyAgreementData = async () => {
+  const { data } = await getPrivacyAgreement();
+  privacyAgreement.value = data;
+};
+
+getPrivacyAgreementData();
 </script>
 
 <style lang="scss" scoped>