隐私 代码 html (modal 组件再后面封装有提供)
html
<modal isShow="{{show}}">
<view class="privacy-auth-dialog">
<view class="title">温馨提示</view>
<view class="content">
<view>
为切实保护用户隐私,优化用户体验,我们更新了
<view class="active" bindtap="openPrivacyContract"> 《 XXXX你的产品名 隐私保护指引》 </view>,
您可点击了解详情。
</view>
<view>
为向您提供服务,您需要同意更新后的
<view class="active" bindtap="openPrivacyContract"> 《XXXX你的产品名 隐私保护指引》 </view>
。我们将严格按照法律法规采取一切必要措施,以保障您的信息安全。
</view>
</view>
<view class="footer">
<view class="reject" hover-class="hover-style-3" hover-stay-time="100" bindtap="handleReject">
拒绝并退出
</view>
<button id="argee-btn" open-type="agreePrivacyAuthorization" class="btn" bindtap="handleAgree">同意</button>
</view>
</view>
</modal>
隐私 代码 css
css
.privacy-auth-dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 32rpx;
width: 650rpx;
height: auto;
overflow: hidden;
.title {
padding: 32rpx;
font-size: 30rpx;
font-weight: bold;
border-bottom: 1rpx solid #eee;
text-align: center;
}
.content {
padding: 32rpx;
font-size: 28rpx;
word-break: break-all;
word-wrap: break-word;
.active {
display: inline-block;
color: $default-color;
}
border-bottom: 1rpx solid #eee;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
.reject {
flex: 1;
height: 92rpx;
line-height: 92rpx;
text-align: center;
font-size: 32rpx;
border-right: 1rpx solid #eee;
}
.btn {
flex: 1;
color: $default-color;
}
}
}
// 初始化按钮样式
button::after {
border: none !important;
}
button {
border-radius: 0;
background-color: transparent;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
隐私 js 代码
javascript
Component({
// 组件的属性列表
properties: {
isDirectHandle: {
type: Boolean,
value: false,
observer(val) {
if (!val || !wx.getPrivacySetting) return
wx.getPrivacySetting({
success: (res) => {
if (res.needAuthorization) {
this.showDialog()
}
},
})
},
},
},
// 组件的初始数据
data: {
show: false,
},
// 全局样式生效
options: {
addGlobalClass: true,
},
// 组件的生命周期
lifetimes: {
// 在组件实例刚刚被创建时执行
created() {
if (wx.onNeedPrivacyAuthorization) {
wx.onNeedPrivacyAuthorization((resolve) => {
this.resolve = resolve
this.showDialog()
})
}
},
// 在组件实例进入页面节点树时执行
attached() {},
// 在组件在视图层布局完成后执行
ready() {},
// 在组件实例被从页面节点树移除时执行
detached() {},
},
// 组件的方法列表
methods: {
showDialog() {
this.setData({ show: true })
},
hideDialog() {
this.setData({ show: false })
},
// 跳转至隐私协议页面。
openPrivacyContract() {
wx.openPrivacyContract()
},
// 拒绝
handleReject() {
this.hideDialog()
this.resolve && this.resolve({ event: "disagree" })
this.triggerEvent("handlePrivacy", { event: "disagree" })
},
// 同意
handleAgree() {
this.hideDialog()
this.resolve && this.resolve({ buttonId: "argee-btn", event: "agree" })
this.triggerEvent("handlePrivacy", { event: "agree" })
},
},
})
使用方法
html
<privacy-auth-dialog isDirectHandle="{{true}}" bind:handlePrivacy="handlePrivacy"></privacy-auth-dialog>
// handlePrivacy 会返回用户的操作结果
model 的封装
html
html
<view class="container" catch:touchmove="" catch:tap="handleClickMask" wx:if="{{isShow}}">
<view catch:tap>
<slot></slot>
</view>
</view>
css
css
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10086;
animation: showModal ease 0.3s;
background: rgba(0, 0, 0, 0.7);
}
@keyframes showModal {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
js
javascript
Component({
data: {},
properties: {
isShow: {
type: Boolean,
value: false,
},
canClose: {
type: Boolean,
value: true,
},
},
observers: {},
methods: {
handleClickMask() {
if (!this.data.canClose) return
this.setData({
isShow: false,
})
this.triggerEvent("close")
},
},
})
拿走不谢