uniapp实现微信小程序隐私协议组件封装

uniapp实现微信小程序隐私协议组件封装。

<template>
	<view class="diygw-modal basic" v-if="showPrivacy" :class="showPrivacy?'show':''" style="z-index: 1000000">
		<view class="diygw-dialog diygw-dialog-modal basis-lg">
			<view class="justify-end diygw-bar">
				<view class="content"> {{title}} </view>
			</view>
			<view>
				<view class="flex diygw-dialog-content flex-direction-column privacy-content">
					<view class="diygw-col-24"> {{contentstart}}<text :style="{color:agreebg}"  @tap="handleOpenPrivacyContract">{{privacy}}</text>。{{contentend}} </view>
					<view class="flex diygw-col-24">
						<button id="agree-btn" :style="{background:agreebg,color:agreecolor}" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgree" class="diygw-btn  radius flex-sub margin-xs">同意并继续</button>
					</view>
					<view class="flex diygw-col-24">
						<button id="disagree-btn" :style="{background:disagreebg,color:disagreecolor}" class="diygw-btn  radius flex-sub margin-xs" @tap="handleDisagree">不同意</button>
					</view>
				</view>
			</view>
		</view>	
	</view> 
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '用户隐私保护提示'
			},
			contentstart:{
				type: String,
				default:'亲爱的用户，感谢您信任并使用本小程序。请您在点击同意之前仔细阅读并充分理解',
			},
			privacy:{
				type: String,
				default:'《用户隐私保护指引》',
			},
			contentend:{
				type: String,
				default:'当点击同意并继续时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，将无法继续使用小程序相关功能。',
			},
			agreebg:{
				type: String,
				default:'#07c160',
			},
			agreecolor:{
				type: String,
				default:'#fff',
			},
			disagreebg:{
				type: String,
				default:'#aaaaaa',
			},
			disagreecolor:{
				type: String,
				default:'#fff',
			},
			isexit:{
				type:Boolean,
				default:true
			},
		},
		data() {
			return {
				showPrivacy: false,
				resolvePrivacyAuthorization: null,
				privacyResolves: new Set()
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			// 监听何时需要提示用户阅读隐私政策
			init() {
				let thiz = this;
				// #ifdef MP-WEIXIN
				if (wx.onNeedPrivacyAuthorization) {
					wx.requirePrivacyAuthorize({
						success: (e) => {
							// 用户同意授权
							// 继续小程序逻辑
							console.log(e)
						  // 用户同意授权
						  // 继续小程序逻辑
						},
						fail: (e) => {
							console.log(e)
						}, // 用户拒绝授权
						complete: () => {}
					})
					wx.onNeedPrivacyAuthorization((resolve) => {
						thiz.resolvePrivacyAuthorization = resolve
						thiz.openPrivacy()
					})
				}
				// #endif
			},
			//打开隐私协议
			openPrivacyContract() {
				wx.openPrivacyContract({
					success(res) {
						console.log('打开隐私协议', res);
					},
					fail(err) {
						console.error('打开隐私协议失败', err)
					}
				});
			},
			// 不同意
			handleDisagree() {
				this.resolvePrivacyAuthorization({
						event: 'disagree',
						buttonId: 'disagree-btn'
				});
				//关闭弹窗
				this.disopenPrivacy()
				if(this.isexit){
					//退出小程序
					wx.exitMiniProgram();
				}
				
			},
			// 同意并继续
			handleAgree() {
				this.resolvePrivacyAuthorization({
						event: 'agree',
						buttonId: 'agree-btn'
				});
				//关闭弹窗
				this.disopenPrivacy()
			},
			//打开弹窗
			openPrivacy() {
				if (this.showPrivacy === false) {
					this.showPrivacy = true
				}
			},
			//关闭弹窗
			disopenPrivacy() {
				if (this.showPrivacy === true) {
					this.showPrivacy = false
				}
			},
		}
	}
</script>

<style>
	.privacy-content{
		padding:10px;
		line-height: 1.5;
		font-size: 28rpx;
	}
</style>

隐私协议封装组件后快速调用。

<diy-privacy></diy-privacy>