From 52af2aad8f51545ec3fd5f32b09dad12f65b2b63 Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Mon, 2 Feb 2026 16:49:53 +0800
Subject: [PATCH] feat: PrivacyPopup

---
 api/auth.js                              |   7 +
 components/PrivacyPopup/PrivacyPopup.vue | 178 +++++++++++++++++++++++
 pages/index/index.vue                    |   4 +
 3 files changed, 189 insertions(+)
 create mode 100644 components/PrivacyPopup/PrivacyPopup.vue

diff --git a/api/auth.js b/api/auth.js
index edfb612..935d672 100644
--- a/api/auth.js
+++ b/api/auth.js
@@ -22,3 +22,10 @@ export const updateUserInfo = async (body) => {
     data: body,
   });
 };
+
+export const reportPrivacy = async () => {
+  return request({
+    url: "/api/common/privacy/report",
+    method: "POST",
+  });
+};
diff --git a/components/PrivacyPopup/PrivacyPopup.vue b/components/PrivacyPopup/PrivacyPopup.vue
new file mode 100644
index 0000000..d2fcc80
--- /dev/null
+++ b/components/PrivacyPopup/PrivacyPopup.vue
@@ -0,0 +1,178 @@
+<template>
+  <view v-if="show" class="privacy-popup">
+    <view class="mask"></view>
+    <view class="content">
+      <view class="title">用户隐私保护指引</view>
+      <view class="desc">
+        感谢您使用本小程序。在使用前，请您仔细阅读
+        <text class="link" @click="openPrivacyContract">{{
+          privacyContractName
+        }}</text>
+        。当您点击“同意”并开始使用产品服务时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入小程序。
+      </view>
+      <view class="btns">
+        <button class="btn refuse" @click="handleDisagree">拒绝</button>
+        <button
+          id="agree-btn"
+          class="btn agree"
+          open-type="agreePrivacyAuthorization"
+          @agreePrivacyAuthorization="handleAgree"
+        >
+          同意
+        </button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { reportPrivacy } from "@/api/auth.js";
+
+const show = ref(false);
+const privacyContractName = ref("《用户隐私保护指引》");
+
+// Only for WeChat Mini Program
+// #ifdef MP-WEIXIN
+onMounted(() => {
+  if (uni.getPrivacySetting) {
+    uni.getPrivacySetting({
+      success: (res) => {
+        console.log("getPrivacySetting", res);
+        if (res.needAuthorization) {
+          privacyContractName.value = res.privacyContractName;
+          show.value = true;
+        } else {
+          // Check local storage just in case
+          const hasAgreed = uni.getStorageSync("hasAgreedPrivacy");
+          if (!hasAgreed) {
+            uni.setStorageSync("hasAgreedPrivacy", true);
+          }
+        }
+      },
+      fail: () => {},
+    });
+  }
+});
+// #endif
+
+const openPrivacyContract = () => {
+  uni.openPrivacyContract({
+    success: () => {},
+    fail: (err) => {
+      console.error("openPrivacyContract fail", err);
+    },
+  });
+};
+
+const handleAgree = async () => {
+  // 1. Save to local storage
+  uni.setStorageSync("hasAgreedPrivacy", true);
+
+  // 2. Hide popup
+  show.value = false;
+
+  // 3. Call server API
+  try {
+    await reportPrivacy();
+  } catch (e) {
+    console.error("Report privacy failed", e);
+  }
+};
+
+const handleDisagree = () => {
+  // Exit mini program
+  // #ifdef MP-WEIXIN
+  uni.exitMiniProgram({
+    success: () => {
+      console.log("Exit success");
+    },
+  });
+  // #endif
+};
+</script>
+
+<style lang="scss" scoped>
+.privacy-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+  }
+
+  .content {
+    position: relative;
+    width: 600rpx;
+    background: #fff;
+    border-radius: 24rpx;
+    padding: 48rpx 40rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 32rpx;
+  }
+
+  .desc {
+    font-size: 28rpx;
+    color: #666;
+    line-height: 1.6;
+    margin-bottom: 48rpx;
+    text-align: justify;
+
+    .link {
+      color: #576b95;
+      display: inline;
+    }
+  }
+
+  .btns {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    .btn {
+      width: 240rpx;
+      height: 88rpx;
+      line-height: 88rpx;
+      text-align: center;
+      border-radius: 12rpx;
+      font-size: 32rpx;
+      font-weight: 500;
+      margin: 0;
+
+      &::after {
+        border: none;
+      }
+
+      &.refuse {
+        background: #f2f2f2;
+        color: #666;
+      }
+
+      &.agree {
+        background: #07c160;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index e55335d..681d9cc 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,5 +1,8 @@
 <template>
   <view class="spring-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
+    <!-- Privacy Popup -->
+    <PrivacyPopup />
+
     <!-- 顶部 Banner -->
     <view class="hero">
       <view class="hero-badge">
@@ -108,6 +111,7 @@ import {
 } from "@dcloudio/uni-app";
 import { getBavBarHeight } from "@/utils/system";
 import { getRecommendList } from "@/api/system";
+import PrivacyPopup from "@/components/PrivacyPopup/PrivacyPopup.vue";
 
 const countdownText = ref("");