微信隐私协议弹窗uniapp组件

1.在vuex里加入如下代码

const state = {
    //微信隐私信息
	privacyProtocol:{   
		needAuthorization:false,
		title:''
	} 
}
 
const getters = {
	privacyProtocol: state => state.privacyProtocol,
}
 
 
const actions = {
	
	// 查询隐私协议接口
	checkUserPrivacyProtocol({
		commit,
		getters
	}) {
		if (wx.getPrivacySetting && !getters.privacyProtocol.title) {  
			wx.getPrivacySetting({  
				success: res => {  
					// console.log(res)  
					commit('privacyProtocol', {
						title:res.privacyContractName,
						needAuthorization: res.needAuthorization
					})
				}  
			})  
		}  
	},
	  // 同意隐私协议
	  agreePrivacyProtocol({commit,getters}){
		  let privacyProtocol = getters.privacyProtocol
		  privacyProtocol.needAuthorization = false
		  commit('privacyProtocol', privacyProtocol)
	  }
}
 
 
const mutations = {
	privacyProtocol(state, data) {
		state.privacyProtocol = data;
	}
}
 
 
 

2.右键components新建组件privacy ，替换为以下代码

 
<script>
	import { mapActions, mapGetters } from 'vuex';
	export default {
		name:"privacy",
		data() {
			return {
 
			};
		},
		computed: {
			...mapGetters(['privacyProtocol']),
			showPrivacy:function () {
				return this.privacyProtocol.needAuthorization
			},
			privacyContractName:function () {
				return this.privacyProtocol.title
			},
		},
		
		
	   methods: {
		   
		   ...mapActions(['agreePrivacyProtocol']),
		   
			// 打开隐私协议页面
			openPrivacyContract() {
				wx.openPrivacyContract({
					fail: () => {
						uni.showToast({
							title: '遇到错误',
							icon: 'error'
						})
					}
				})
			},
			// 拒绝隐私协议
			exitMiniProgram() {
				// 直接退出小程序
				uni.exitMiniProgram()
			},
			// 同意隐私协议
			handleAgreePrivacyAuthorization() {
				this.agreePrivacyProtocol()
				this.$emit('agree')
			},
		}	
	}
script>
 
<style>
.privacy {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.content {
    width: 632rpx;
    padding: 48rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 16rpx;
}
 
.content .title {
    text-align: center;
    color: #333;
    font-weight: bold;
    font-size: 32rpx;
}
 
.content .des {
    font-size: 26rpx;
    color: #666;
    margin-top: 40rpx;
    text-align: justify;
    line-height: 1.6;
}
 
.content .des .link {
    color: #07c160;
    text-decoration: underline;
}
 
.btns {
    margin-top: 48rpx;
    display: flex;
}
 
.btns .item {
    justify-content: space-between;
    width: 244rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16rpx;
    box-sizing: border-box;
    border: none;
}
 
.btns .reject {
    background: #f4f4f5;
    color: #909399;
}
 
.btns .agree {
    background: #07c160;
    color: #fff;
}
style>

3.在需要弹出的隐私协议的页面引用组件

    <privacy @agree="getStoreList">privacy>

4.onLaunch里面调用隐私协议接口

// #ifdef MP-WEIXIN
	store.dispatch("checkUserPrivacyProtocol"); // 获取是否同意隐私协议，注意store要引入进来
// #endif