隐私弹窗

miniprogram/component/privacy-popup/privacy-popup.scss

@@ -6,20 +6,69 @@
   position: fixed;
   left: 0;
   top: 0;
-  z-index: 1;
+  z-index: 99;
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-.privacy-content {
-  width: 640rpx;
-  font-size: 32rpx;
-  font-family: PingFang SC-Bold, PingFang SC;
-  color: #333333;
-  text-align: center;
-  padding: 40rpx;
-  box-sizing: border-box;
-  background: #FFFFFF;
-  border-radius: 16rpx 16rpx 16rpx 16rpx;
+
+  .privacy-content {
+    width: 640rpx;
+    font-size: 32rpx;
+    font-family: PingFang SC-Bold, PingFang SC;
+    color: #333333;
+    text-align: center;
+    padding: 40rpx;
+    box-sizing: border-box;
+    background: #FFFFFF;
+    border-radius: 16rpx 16rpx 16rpx 16rpx;
+  }
+
+  .privacy-title {
+    font-weight: bolder;
+  }
+
+  .content {
+    padding: 40rpx 0;
+    box-sizing: border-box;
+    text-indent: 64rpx;
+  }
+
+  .button-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    .button {
+      flex: 1;
+      height: 64rpx;
+      max-width: 326rpx;
+      font-size: 32rpx;
+      font-family: PingFang SC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+      background: #1890ff;
+      border-radius: 62rpx 62rpx 62rpx 62rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      .btn {
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        opacity: 0;
+      }
+    }
+
+    .button+.button {
+      margin-left: 48rpx;
+    }
+
+    .cancel {
+      background: #E6E6E6;
+    }
+  }
 }

miniprogram/component/privacy-popup/privacy-popup.ts

@@ -1,23 +1,58 @@
 // component/privacy-popup/privacy-popup.ts
 Component({
-	/**
-	 * 组件的属性列表
-	 */
-	properties: {
+  /**
+   * 组件的属性列表
+   */
+  properties: {
 
-	},
+  },
 
-	/**
-	 * 组件的初始数据
-	 */
-	data: {
-
-	},
-
-	/**
-	 * 组件的方法列表
-	 */
-	methods: {
-
-	}
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    show: false,
+    needAuthorization: false,
+    privacyContractName: ''
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    check() {
+      if (wx.canIUse('getPrivacySetting')) {
+        wx.getPrivacySetting({
+          success: res => {
+            console.log(res)
+            this.setData({
+              ...res,
+              show: res.needAuthorization
+            })
+            if (!res.needAuthorization) {
+              this.privacySubmit()
+            }
+          }
+        })
+      }
+    },
+    handleAgreePrivacyAuthorization() {
+      this.privacySubmit()
+    },
+    privacySubmit() {
+      this.triggerEvent('privacySubmit')
+      this.hidden()
+    },
+    hidden() {
+      this.setData({
+        show: false
+      })
+    },
+    openPrivacyContract(){
+      wx.openPrivacyContract({
+        success() {
+          console.log('打开隐私协议')
+        }
+      })
+    }
+  }
 })

miniprogram/component/privacy-popup/privacy-popup.wxml

@@ -1,6 +1,26 @@
 <!--component/privacy-popup/privacy-popup.wxml-->
-<view class="privacy-container">
-  <view class="privacy-content">
+<view class="privacy-container" wx:if="{{show}}" bind:tap="hidden">
+  <view class="privacy-content" catchtap>
     <view class="privacy-title">用户隐私保护提示</view>
+    <view class="content">
+      感谢您使用本产品，您使用本产品前应当阅读并同意
+      <text class="name" style="color: blue" catchtap="openPrivacyContract">{{ privacyContractName }}</text>
+      当您点击同意并开始时用本产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用本产品。
+    </view>
+    <view class="button-container">
+          <view class="button cancel" catchtap="hidden">取消</view>
+          <view class="button">
+            <text>确定</text>
+            <button
+              class="btn"
+              open-type="agreePrivacyAuthorization"
+              bindagreeprivacyauthorization="handleAgreePrivacyAuthorization"
+            >同意
+            </button>
+          </view>
+        </view>
   </view>
+</view>
+<view bind:tap="check">
+  <slot></slot>
 </view>

miniprogram/pages/login/login.wxml

@@ -68,7 +68,9 @@
 	</view>
 
 	<view class="bottom">
-		<view class="button {{canLogin?'button-login':''}}" bindtap="submit">登录</view>
+    <privacy-popup bind:privacySubmit="submit">
+      <view class="button {{canLogin?'button-login':''}}">登录</view>
+    </privacy-popup>
 		<text>仅内部授权用户可登录</text>
 	</view>
 
@@ -76,5 +78,4 @@
 	<view class="container-bottom">
 		<image src="../../assets/img/login_bottom.png"></image>
 	</view>
-</view>
-<privacy-popup></privacy-popup>
+</view>

miniprogram/pages/realNameAuthentication/realNameAuthentication.json

@@ -1,3 +1,5 @@
 {
-	"usingComponents": {}
+	"usingComponents": {
+    "privacy-popup": "/component/privacy-popup/privacy-popup"
+  }
 }

miniprogram/pages/realNameAuthentication/realNameAuthentication.wxml

@@ -1,88 +1,92 @@
 <!--pages/realNameAuthentication/realNameAuthentication.wxml-->
 <view class="container">
-      <view class="tips-padding" />
-      <view class="tips">
-        <text>为了您的账户及资金安全，请上传本人真实有效身份证照片!</text>
-      </view>
-      <view class="content">
-        <view class="title">
-          请上传身份证的正反面
-        </view>
-        <view class="image-container">
-          <view class="image-container-bg">
-            <view class="card-img-container">
-              <image src="./images/bottom-left.png" class="bottom-left corner" />
-              <image src="./images/bottom-right.png" class="bottom-right corner" />
-              <image src="./images/top-left.png" class="top-left corner" />
-              <image src="./images/top-right.png" class="top-right corner" />
-              <view class="card-img">
-                <image wx:if="{{headPortraitImgBase64}}" src="{{headPortraitImgBase64}}" class="head-portrait-img" />
-                <view wx:else class="card head-portrait">
-                  <image src="./images/headPortrait-icon.png" class="headPortraitIcon" />
-                  <image src="./images/headPortrait.png" class="headPortrait" />
-                </view>
-                <view class="camera" data-id-card-type="{{IdCardType.headPortrait}}" bindtap="chooseImage">
-                  <image src="./images/camera.png" class="camera-image" />
-                </view>
-              </view>
+  <view class="tips-padding" />
+  <view class="tips">
+    <text>为了您的账户及资金安全，请上传本人真实有效身份证照片!</text>
+  </view>
+  <view class="content">
+    <view class="title">
+      请上传身份证的正反面
+    </view>
+    <view class="image-container">
+      <view class="image-container-bg">
+        <view class="card-img-container">
+          <image src="./images/bottom-left.png" class="bottom-left corner" />
+          <image src="./images/bottom-right.png" class="bottom-right corner" />
+          <image src="./images/top-left.png" class="top-left corner" />
+          <image src="./images/top-right.png" class="top-right corner" />
+          <view class="card-img">
+            <image wx:if="{{headPortraitImgBase64}}" src="{{headPortraitImgBase64}}" class="head-portrait-img" />
+            <view wx:else class="card head-portrait">
+              <image src="./images/headPortrait-icon.png" class="headPortraitIcon" />
+              <image src="./images/headPortrait.png" class="headPortrait" />
             </view>
+            <privacy-popup bind:privacySubmit="chooseImage">
+              <view class="camera" data-id-card-type="{{IdCardType.headPortrait}}">
+                <image src="./images/camera.png" class="camera-image" />
+              </view>
+            </privacy-popup>
           </view>
-          <text>点击拍摄人像面</text>
         </view>
-        <view class="image-container">
-          <view class="image-container-bg">
-            <view class="card-img-container">
-              <image src="./images/bottom-left.png" class="bottom-left corner" />
-              <image src="./images/bottom-right.png" class="bottom-right corner" />
-              <image src="./images/top-left.png" class="top-left corner" />
-              <image src="./images/top-right.png" class="top-right corner" />
-              <view class="card-img">
-                <image wx:if="{{nationalEmblemImgBase64}}" src="{{nationalEmblemImgBase64}}" class="national-emblem-img" />
-                <view wx:else class="card nationalEmblem">
-                  <image src="./images/national-emblem.png" class="nationalEmblem" />
-                  <image src="./images/national-emblem-icon.png" class="nationalEmblemIcon" />
-                </view>
-                <view class="camera" data-id-card-type="{{IdCardType.nationalEmblem}}" bindtap="chooseImage">
-                  <image src="./images/camera.png" class="camera-image" />
-                </view>
-              </view>
+      </view>
+      <text>点击拍摄人像面</text>
+    </view>
+    <view class="image-container">
+      <view class="image-container-bg">
+        <view class="card-img-container">
+          <image src="./images/bottom-left.png" class="bottom-left corner" />
+          <image src="./images/bottom-right.png" class="bottom-right corner" />
+          <image src="./images/top-left.png" class="top-left corner" />
+          <image src="./images/top-right.png" class="top-right corner" />
+          <view class="card-img">
+            <image wx:if="{{nationalEmblemImgBase64}}" src="{{nationalEmblemImgBase64}}" class="national-emblem-img" />
+            <view wx:else class="card nationalEmblem">
+              <image src="./images/national-emblem.png" class="nationalEmblem" />
+              <image src="./images/national-emblem-icon.png" class="nationalEmblemIcon" />
             </view>
+            <privacy-popup bind:privacySubmit="chooseImage">
+              <view class="camera" data-id-card-type="{{IdCardType.nationalEmblem}}">
+                <image src="./images/camera.png" class="camera-image" />
+              </view>
+            </privacy-popup>
           </view>
-          <text>点击拍摄国徽面</text>
         </view>
-        <view class="title">
-          请上传身份证的正反面
+      </view>
+      <text>点击拍摄国徽面</text>
+    </view>
+    <view class="title">
+      请上传身份证的正反面
+    </view>
+    <view class="info-container">
+      <view class="info">
+        <view class="info-item">
+          <view class="label">
+            姓名
+          </view>
+          <view class="input">
+            <input name="name" value="{{name}}" disabled="{{!headPortraitImg}}" type="text" placeholder="姓名" bindinput="nameChange" />
+          </view>
         </view>
-        <view class="info-container">
-          <view class="info">
-            <view class="info-item">
-              <view class="label">
-                姓名
-              </view>
-              <view class="input">
-							  <input name="name" value="{{name}}" disabled="{{!headPortraitImg}}" type="text" placeholder="姓名" bindinput="nameChange"/>
-              </view>
-            </view>
+      </view>
+      <view class="info">
+        <view class="info-item">
+          <view class="label">
+            证件号码
           </view>
-          <view class="info">
-            <view class="info-item">
-              <view class="label">
-                证件号码
-              </view>
-              <view class="input">
-                {{ idCard || '证件号码' }}
-              </view>
-            </view>
+          <view class="input">
+            {{ idCard || '证件号码' }}
           </view>
         </view>
       </view>
-      <view class="btn-container-padding ios-safe-bottom" />
-      <cover-view class="btn-container ios-safe-bottom">
-        <cover-view class="btn {{canSubmit?'can-submit':''}}" bindtap="submit">
-          <cover-view>提交认证</cover-view>
-        </cover-view>
-        <cover-view class="btn-container-tips">
-          个人隐私信息安全保障中
-        </cover-view>
-      </cover-view>
-    </view>
+    </view>
+  </view>
+  <view class="btn-container-padding ios-safe-bottom" />
+  <cover-view class="btn-container ios-safe-bottom">
+    <cover-view class="btn {{canSubmit?'can-submit':''}}" bindtap="submit">
+      <cover-view>提交认证</cover-view>
+    </cover-view>
+    <cover-view class="btn-container-tips">
+      个人隐私信息安全保障中
+    </cover-view>
+  </cover-view>
+</view>

project.config.json

@@ -52,7 +52,7 @@
 		"tabIndent": "tab",
 		"tabSize": 2
 	},
-	"appid": "wx997164f2857c1a1d",
+	"appid": "wx5ae6908ae55edcb7",
 	"packOptions": {
 		"ignore": [],
 		"include": []