luoshan_web/components/userPrivacy/userPrivacy.vue

<template>
	<view>
		<!-- 隐私保护指引弹窗 -->
		<u-popup v-model="privacyShow" mode="bottom" border-radius="12" :mask-close-able="false">
			<view class="privacyBox">
				<view class="privacyTit">{{ title }}</view>
				<view class="privacyDesc">
					感谢您的使用，在使用本小程序前，您应当阅读并同意
					<text @click="openClick">{{ title }}</text>
					。当您点击同意并开始使用程序服务时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用该功能。
				</view>
				<view class="privacyPost">
					<view class="refuseBtn" @click="close">
						<!-- <navigator target="miniProgram" open-type="exit">不同意并退出</navigator> -->
						不同意
					</view>
					<button class="agreeBtn" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="agreeClick">同意并继续</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'userPrivacy',
	data() {
		return {
			// 隐私设置弹窗开关
			privacyShow: false,
			title: '',
			resolve: null
		};
	},
	methods: {
		// 打开隐私协议
		openClick() {
			wx.openPrivacyContract({
				success: () => {}, // 打开成功
				fail: () => {}, // 打开失败
				complete: () => {}
			});
		},

		// 同意
		agreeClick() {
			// 用户点击了同意，之后所有已声明过的隐私接口和组件都可以调用了
			this.privacyShow = false;
			uni.showTabBar();
		},
		//close
		close() {
			this.privacyShow = false;
			uni.showTabBar();
		},
		//获取隐私协议
		getPrivacySettingFn() {
			var _this = this;
			// 隐私政策
			wx.getPrivacySetting({
				success: (res) => {
					console.log(res);
					// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
					if (res.needAuthorization) {
						// 需要弹出隐私协议
						_this.privacyShow = true;
						_this.title = res.privacyContractName;
						uni.hideTabBar();
						return;
					} else {
						// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
					}
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style lang="scss">
.privacyBox {
	width: 100%;
	padding: 60rpx;
	box-sizing: border-box;
}

.privacyTit {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
}

.privacyDesc {
	font-size: 28rpx;
	overflow: hidden;
	margin-top: 30rpx;
	color: #000;
}

.privacyDesc text {
	color: #409eff;
}

.privacyPost {
	overflow: hidden;
	margin-top: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.privacyPost .refuseBtn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 28rpx;
	font-weight: bold;
	color: #fff;
	background-color: #f5f5f5;
	border-radius: 12rpx;
	box-sizing: border-box;
	overflow: hidden;
	color: #a5a5a5;
}

.privacyPost .agreeBtn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 28rpx;
	font-weight: bold;
	color: #fff;
	background-color: #07c25f;
	border-radius: 12rpx;
	box-sizing: border-box;
	overflow: hidden;
	margin-left: 20rpx;
}
</style>