小程序隐私功能开发

src/app.json

@@ -17,7 +17,7 @@
     "pages/memberCode/main",
     "pages/toMini/main",
     "pages/paySuccess/main",
-    "pages/stateAccountList/main",
+"pages/stateAccountList/main",
     "pages/order/main"
   ],
   "subPackages": [
@@ -41,5 +41,6 @@
       "desc": "你的位置信息将用于获取附近的门店"
     }
   },
-  "requiredPrivateInfos" : [ "chooseLocation", "getLocation" ,"chooseAddress" ]
+  "requiredPrivateInfos" : [ "chooseLocation", "getLocation" ,"chooseAddress" ],
+  "__usePrivacyCheck__": true
 }

src/components/privacyPopup/index.vue

+<template>
+  <van-popup :show="isShow" round>
+    <div class="privacy-container">
+      <div class="privacy-container__header">
+        <div class="title">隐私保护指引</div>
+        <div class="content">
+          在使用当前小程序服务之前，请仔细阅读<span @click="handleDetail">{{ privacyContractName }}</span>。如您同意{{privacyContractName}}，请点击“同意”开始使用。如您拒绝，将无法完整使用所有服务。
+        </div>
+      </div>
+      <div class="privacy-container__bottom van-hairline--top">
+        <button class="refuse" @click="handleExpose('onRefuse')">拒绝</button>
+        <button
+          class="agree"
+          open-type="agreePrivacyAuthorization"
+          @agreeprivacyauthorization="handleExpose('onAgree')"
+        >
+          同意
+        </button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        isShow: false,
+        privacyContractName: "", // 协议名称
+      }
+    },
+    onLoad() {
+      this.init();
+    },
+    methods: {
+      init() {
+        if (wx.getPrivacySetting) {
+          wx.getPrivacySetting({
+            success: res => {
+              if (res.needAuthorization) { // 需要用户授权
+                this.isShow = res.needAuthorization;
+                this.privacyContractName = res.privacyContractName;
+              }
+            }
+          })
+        }
+      },
+      // 跳转隐私协议详情
+      handleDetail() {
+        wx.openPrivacyContract({
+          fail: () => wx.showToast({ title: '遇到错误', icon: 'error' }),
+        });
+      },
+      // 暴露事件
+      handleExpose(type) {
+        this.isShow = false;
+        this.$emit(type);
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.privacy-container {
+  min-width: 80vw;
+  background-color: #fff;
+  
+  &__header {
+    padding: 30px;
+    font-size: 17px;
+    color: #333;
+    
+    .title {
+      font-weight: 500;
+      text-align: center;
+    }
+    
+    .content {
+      line-height: 1.5;
+      margin-top: 20px;
+      color: #7f7f7f;
+      text-align: justify; // 体验增强
+      
+      span {
+        color: #1989fa;
+      }
+    }
+  }
+  
+  &__bottom {
+    display: flex;
+    align-items: center;
+    
+    div, button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px;
+      flex: 1;
+      margin: 0 15px 20px;
+    }
+    
+    button::after {
+      border: none;
+    }
+    
+    .refuse {
+      background: #f4f4f5;
+      color: #909399;
+    }
+    
+    .agree {
+      background: #07c160;
+      color: #fff;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/pages/login/index.vue

@@ -82,6 +82,8 @@
     <!-- 选择企业 -->
     <SelectEnterpriseAccount ref="SelectEnterpriseAccount" @confirm="getEnterpriseAccount"></SelectEnterpriseAccount>
     <ProtocolDialog v-model="isShowProtocol" :index="currentIndex" :isShowReadTime="isShowReadTime" :protocolList="[userAgreement, privacyPolicy].filter(Boolean)" @onAgree="handleAgree" />
+    <!-- 隐私弹窗 -->
+    <PrivacyPopup @onAgree="handleAgree" @onRefuse="back" />
   </div>
 </template>
 
@@ -102,6 +104,7 @@ import text from '@/components/content/text'
 import richText from "../../components/basicTool/rich-text";
 import interval from '@/components/basicTool/interval/index.vue'
 import partition from '@/components/basicTool/partition/index.vue'
+import PrivacyPopup from '@/components/privacyPopup'
 import SelectEnterpriseAccount from "@/components/common/SelectEnterpriseAccount"
 const app = getApp();
 const { log } = app;
@@ -116,7 +119,8 @@ export default {
     loginBox,
     loginUserAgreement,
     SelectEnterpriseAccount,
-    ProtocolDialog
+    ProtocolDialog,
+    PrivacyPopup
   },
   data() {
     return {
@@ -1002,9 +1006,11 @@ export default {
     },
     handleAgree() {
       this.checked = true;
+      if (this.$refs.agreement) {
         this.$refs.agreement[0].checked = true;
       }
     }
+  }
 };
 </script>