goufangtong3/components/gf-yinsi/gf-yinsi.vue

<template>
	<view class="gf-yinsi">
		<u-modal v-model="show" title="用户隐私保护提示" :show-cancel-button="true" confirm-text="同意并继续" cancel-text="不同意并退出" @cancel="handleDisagree">
			<view class="xieyi-content">
				<text class="text1">感谢您使用小程序，您使用小程序前应当阅并同意</text>
				<text class="text2" @click="open">{{privacyContractName}}</text>
				<text class="text1">当您点击同意并开始时用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入小程序。</text>
			</view>
			<button slot="confirm-button" open-type="agreePrivacyAuthorization" class="weui-btn" @agreeprivacyauthorization="handleAgree">同意并继续</button>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: "gf-yinsi",
		data() {
			return {
				show: false,
				privacyContractName: ''
			};
		},
		created() {
			if (wx.getPrivacySetting) {
				wx.getPrivacySetting({
					success: res => {
						console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
						if (res.needAuthorization) {
							this.privacyContractName = res.privacyContractName
							this.show = true
						} else {
							this.handleAgree()
						}
					},
					fail: () => {},
					complete: () => {},
				})
			} else {
				// 低版本基础库不支持 wx.getPrivacySetting 接口，隐私接口可以直接调用
				this.handleAgree()
			}
		},
		methods: {
			open() {
				wx.openPrivacyContract({
					success: res => {
						console.log('openPrivacyContract success')
					},
					fail: res => {
						console.error('openPrivacyContract fail', res)
					}
				})
			},
			handleDisagree(e) {
				wx.exitMiniProgram()
			},
			handleAgree(e) {
				this.$emit('handleAgree')
			},
		}
	}
</script>

<style lang="scss">
	.gf-yinsi {
		.weui-btn {
			padding: 0;
			margin: 0;
			background-color: #fff;
			border: none;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			box-sizing: border-box;
			cursor: pointer;
			text-align: center;
			border-radius: 4rpx;
			color: #2979ff;
		}

		.weui-btn::after {
			border: none;
		}

		.xieyi-content {
			padding: 24rpx;

			.text1 {
				color: #666;
				font-size: 28rpx;
			}

			.text2 {
				font-size: 28rpx;
				color: blue;
			}
		}
	}
</style>