From a7795a9b9862b19c217398adbb563f9084522326 Mon Sep 17 00:00:00 2001
From: feige996 <1020102647@qq.com>
Date: Tue, 27 May 2025 00:30:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(privacy):=20=E6=B7=BB=E5=8A=A0=E9=9A=90?=
 =?UTF-8?q?=E7=A7=81=E5=8D=8F=E8=AE=AE=E5=BC=B9=E7=AA=97=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增隐私协议弹窗组件 privacy-popup，用于处理微信小程序的隐私授权需求。组件包含同意/拒绝按钮，并支持打开隐私协议链接。同时在全局组件声明中添加了相关组件注册。
```

这个提交消息：
1. 使用了正确的类型 `feat` 表示新增功能
2. 添加了适当的范围 `(privacy)` 表明是隐私相关功能
3. 简洁描述了新增的功能（隐私协议弹窗组件）
4. 在正文中补充说明了组件的用途和主要功能点
5. 符合中文语言要求
6. 遵循了50字符限制（标题部分）
7. 使用了命令式语气
---
 src/components/privacy-popup/index.scss       |  47 ++++++
 .../privacy-popup/privacy-popup.vue           | 144 ++++++++++++++++++
 src/layouts/default.vue                       |   1 +
 src/types/components.d.ts                     |   3 +
 4 files changed, 195 insertions(+)
 create mode 100644 src/components/privacy-popup/index.scss
 create mode 100644 src/components/privacy-popup/privacy-popup.vue

diff --git a/src/components/privacy-popup/index.scss b/src/components/privacy-popup/index.scss
new file mode 100644
index 0000000..8cba003
--- /dev/null
+++ b/src/components/privacy-popup/index.scss
@@ -0,0 +1,47 @@
+@import 'wot-design-uni/components/wd-button/index.scss';
+:deep(.wd-privacy-popup) {
+  width: 600rpx;
+  padding: 0 24rpx;
+  box-sizing: border-box;
+  border-radius: 32rpx;
+  overflow: hidden;
+}
+
+.wd-privacy-popup {
+  &__header {
+    width: 100%;
+    height: 128rpx;
+    line-height: 128rpx;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 30rpx;
+    padding: 0 12rpx;
+    box-sizing: border-box;
+  }
+
+  &__container {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 12rpx;
+    margin-bottom: 32rpx;
+
+    font-size: 28rpx;
+    line-height: 1.8;
+    color: #3e3e3e;
+    text-align: left;
+    font-weight: 550;
+    &-protocol {
+      color: #4d80f0;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 36rpx;
+
+    button {
+      border: none;
+      outline: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/privacy-popup/privacy-popup.vue b/src/components/privacy-popup/privacy-popup.vue
new file mode 100644
index 0000000..9bf9ec9
--- /dev/null
+++ b/src/components/privacy-popup/privacy-popup.vue
@@ -0,0 +1,144 @@
+<template>
+  <view>
+    <wd-popup
+      v-model="showPopup"
+      :close-on-click-modal="false"
+      custom-class="wd-privacy-popup"
+      @close="handleClose"
+    >
+      <view class="wd-privacy-popup__header">
+        <!--标题-->
+        <view class="wd-picker__title">{{ title }}</view>
+      </view>
+      <view class="wd-privacy-popup__container">
+        <text>{{ desc }}</text>
+        <text class="wd-privacy-popup__container-protocol" @click="openPrivacyContract">
+          {{ protocol }}
+        </text>
+        <text>{{ subDesc }}</text>
+      </view>
+      <view class="wd-privacy-popup__footer">
+        <button
+          class="wd-privacy-popup__footer-disagree wd-button is-block is-round is-medium is-plain"
+          id="disagree-btn"
+          @click="handleDisagree"
+        >
+          拒绝
+        </button>
+        <button
+          class="wd-privacy-popup__footer-agree wd-button is-primary is-block is-round is-medium"
+          id="agree-btn"
+          open-type="agreePrivacyAuthorization"
+          @agreeprivacyauthorization="handleAgree"
+        >
+          同意
+        </button>
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'privacy-popup',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { onBeforeMount, ref } from 'vue'
+
+type Props = {
+  title?: string // 标题
+  desc?: string // 描述
+  subDesc?: string // 字描述
+  protocol?: string // 协议名称
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '用户隐私保护提示',
+  desc: '感谢您使用本应用，您使用本应用的服务之前请仔细阅读并同意',
+  subDesc:
+    '。当您点击同意并开始时用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用相应服务。',
+  protocol: '《用户隐私保护指引》',
+})
+
+const showPopup = ref<boolean>(false) // 是否展示popup
+
+const privacyResolves = ref(new Set()) // onNeedPrivacyAuthorization的reslove
+
+const privacyHandler = (resolve: any) => {
+  showPopup.value = true
+  privacyResolves.value.add(resolve)
+}
+
+const emit = defineEmits(['agree', 'disagree'])
+
+onBeforeMount(() => {
+  // 注册监听
+  if ((wx as any).onNeedPrivacyAuthorization) {
+    ;(wx as any).onNeedPrivacyAuthorization((resolve: any) => {
+      if (typeof privacyHandler === 'function') {
+        privacyHandler(resolve)
+      }
+    })
+  }
+})
+
+/**
+ * 同意隐私协议
+ */
+function handleAgree() {
+  showPopup.value = false
+  privacyResolves.value.forEach((resolve: any) => {
+    resolve({
+      event: 'agree',
+      buttonId: 'agree-btn',
+    })
+  })
+  privacyResolves.value.clear()
+  emit('agree')
+}
+
+/**
+ * 拒绝隐私协议
+ */
+function handleDisagree() {
+  showPopup.value = false
+  privacyResolves.value.forEach((resolve: any) => {
+    resolve({
+      event: 'disagree',
+    })
+  })
+  privacyResolves.value.clear()
+}
+
+/**
+ * 打开隐私协议
+ */
+function openPrivacyContract() {
+  ;(wx as any).openPrivacyContract({
+    success: (res) => {
+      console.log('openPrivacyContract success')
+    },
+    fail: (res) => {
+      console.error('openPrivacyContract fail', res)
+    },
+  })
+}
+
+/**
+ * 弹出框关闭时清空
+ */
+function handleClose() {
+  privacyResolves.value.clear()
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 768d875..cb3a720 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -3,6 +3,7 @@
     <slot />
     <wd-toast />
     <wd-message-box />
+    <privacy-popup />
   </wd-config-provider>
 </template>
 
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index b23ba0d..9fec748 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -8,5 +8,8 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     FgNavbar: typeof import('./../components/fg-navbar/fg-navbar.vue')['default']
+    FgTabbar: typeof import('./../components/fg-tabbar/fg-tabbar.vue')['default']
+    PrivacyPopup: typeof import('./../components/privacy-popup/privacy-popup.vue')['default']
+    Tabbar: typeof import('./../components/tabbar/tabbar.vue')['default']
   }
 }