当前位置: 首页 > news >正文

uniapp微信小程序用户隐私保护指引弹窗组件

<template><view v-if="showPrivacy" :class="privacyClass"><view :class="contentClass"><view class="title">用户隐私保护指引</view><view class="des">感谢您选择使用我们的小程序,我们非常重视您的个人信息安全和隐私保护。使用我们的产品前,请您仔细阅读“<text class="link" @tap="openPrivacyContract">{{privacyContractName}} </text>”,如您同意此隐私保护指引,请点击同意按钮,开始使用此小程序,我们将尽全力保护您的个人信息及合法权益,感谢您的信任!<br /></view><view class="btns"><button class="item reject" @tap="exitMiniProgram">拒绝</button><button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button></view></view></view>
</template><script>export default {name: 'PrivacyPopup',data() {return {isRead: false,showPrivacy: false,privacyContractName: '',resolvePrivacyAuthorization: null,};},props: {position: {type: String,default: 'center'}},computed: {privacyClass() {return this.position === 'bottom' ? 'privacy privacy-bottom' : 'privacy';},contentClass() {return this.position === 'bottom' ? 'content2 content-bottom' : 'content2';}},mounted() {if (wx.onNeedPrivacyAuthorization) {wx.onNeedPrivacyAuthorization((resolve) => {this.resolvePrivacyAuthorization = resolve;});}if (wx.getPrivacySetting) {wx.getPrivacySetting({success: (res) => {console.log(res, 'getPrivacySetting');if (res.needAuthorization) {this.privacyContractName = res.privacyContractName;this.showPrivacy = true;}},});}},methods: {openPrivacyContract() {wx.openPrivacyContract({success: () => {this.isRead = true;},fail: () => {uni.showToast({title: '遇到错误',icon: 'error',});},});},exitMiniProgram() {wx.exitMiniProgram();},handleAgreePrivacyAuthorization() {this.showPrivacy = false;if (typeof this.resolvePrivacyAuthorization === 'function') {this.resolvePrivacyAuthorization({buttonId: 'agree-btn',event: 'agree',});}},},};
</script><style lang="scss" scoped>.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;}.privacy-bottom {align-items: flex-end;}.content2 {width: 632rpx;padding: 48rpx;box-sizing: border-box;background: #fff;border-radius: 16rpx;}.content-bottom {position: absolute;bottom: 0;width: 100%;padding: 36rpx;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);border-radius: 16rpx 16rpx 0 0;}.content2 .title {text-align: center;color: #333;font-weight: bold;font-size: 32rpx;}.content2 .des {font-size: 26rpx;color: #666;margin-top: 40rpx;text-align: justify;line-height: 1.6;}.content2 .des .link {color: #07c160;text-decoration: underline;}.btns {margin-top: 48rpx;margin-bottom: 12rpx;display: flex;}.btns .item {width: 200rpx;height: 72rpx;overflow: visible;display: flex;align-items: center;justify-content: center;/* border-radius: 16rpx; */box-sizing: border-box;border: none !important;}.btns .reject {background: #f4f4f5;color: #07c160;font-size: 14px;font-weight: 300;margin-right: 16rpx;width: 240rpx;&::after{border: none;}}.btns .agree {width: 240rpx;background: #07c160;color: #fff;font-size: 16px;&::after{border: none;}}.privacy-bottom .btns .agree {width: 240rpx;}
</style>

然后在用到的页面进行引入

<template><popup ref="privacyComponent" position="bottom"  />
</template><script setup>import popup from '/components/privacy-popup.vue'
</script>

相关文章:

uniapp微信小程序用户隐私保护指引弹窗组件

<template><view v-if"showPrivacy" :class"privacyClass"><view :class"contentClass"><view class"title">用户隐私保护指引</view><view class"des">感谢您选择使用我们的小程序&am…...

Java的反射应用(Method和Class)

记录&#xff1a;473 场景&#xff1a;使用java.lang.reflect.Method和java.lang.Class类&#xff0c;根据Java反射原理实现使用指定字符串类名和方法名称&#xff0c;调用对应对象和对应方法。 版本&#xff1a;JDK 1.8。 1.使用Java反射调用指定类的指定方法 (1)参数说明…...

Java之泛型系列--Class使用泛型的方法(有示例)

原文网址&#xff1a;Java之泛型系列--Class使用泛型的方法(有示例)_IT利刃出鞘的博客-CSDN博客 简介 本文用示例介绍Java在方法前加泛型的使用。 类类型的写法 对象所对应的类的泛型写法 Class classAClass<T> classAClass<?> classB Class与Class<?&g…...

【【无用的知识之串口学习】】

无用的知识之串口学习 USART串口协议 •通信的目的&#xff1a;将一个设备的数据传送到另一个设备&#xff0c;扩展硬件系统 •通信协议&#xff1a;制定通信的规则&#xff0c;通信双方按照协议规则进行数据收发 就是我们并不能在芯片上设计完全部的一下子完成所有的设计&am…...

9月13日上课内容 第三章 ELK日志分析系统

本章结构 ELK日志分析系统简介 ELK日志分析系统分为 Elasticsearch Logstash Kibana 日志处理步骤 1.将日志进行集中化管理 2.将日志格式化(Logstash) 并输出到Elasticsearch 3.对格式化后的数据进行索引和存储 (Elasticsearch) 4.前端数据的展示(Kibana) Elasticsearch介…...

不知道有用没用的Api

encodeURIComponent(https://www.baidu.com/?name啊啊啊) decodeURIComponent(https%3A%2F%2Fwww.baidu.com%2F%3Fname%3D%E5%95%8A%E5%95%8A%E5%95%8A) encodeURI(https://www.baidu.com/?name啊啊啊) decodeURI(https://www.baidu.com/?name%E5%95%8A%E5%95%8A%E5%95%8A) …...

(2023,LENS 视觉模型 LLM)迈向可见的语言模型:通过自然语言的镜头来看计算机视觉

Towards Language Models That Can See: Computer Vision Through the LENS of Natural Language 公众号&#xff1a;EDPJ&#xff08;添加 VX&#xff1a;CV_EDPJ 进交流群获取资料&#xff09; 目录 0. 摘要 1. 简介 2. 相关工作 2.1 大语言模型能力 2.2 解决视觉和…...

线段树上树剖再拿线段树维护:0914T4

cp 一种常见套路&#xff1a; 如果在线段树上进行一段区间修改&#xff0c;那么必然是一段右节点一段左节点 这个过程其实就是zkw的本质 下面都要用zkw来理解 考虑原题&#xff0c;有一棵不规则的线段树 类似zkw&#xff0c;在这类题目中&#xff0c;我们要先把开区间变成闭…...

互联网医院系统|互联网医院探索未来医疗的新蓝海

随着互联网技术的飞速发展&#xff0c;互联网医院应运而生&#xff0c;为人们带来全新的医疗体验。本文将深入探讨互联网医院的开发流程、系统优势以及未来发展方向&#xff0c;带您领略医疗领域的新蓝海。互联网医院的开发流程是一个结合技术、医疗和用户需求的复杂过程。首先…...

Acrel-2000系列监控系统在亚运手球比赛馆建设10kV供配电工程中的应用

安科瑞 崔丽洁 摘要:智能化配电监控系统是数字化和信息化时代应运而生的产物&#xff0c;已经被广泛应用于电网用户侧楼宇、体育场馆、科研设施、机场、交通、医院、电力和石化行业等诸多领域的高/低压变配电系统中。安科瑞自研的Acrel-2000系列监控系统可监控高压开关柜、低压…...

c++中遇到一个不了解的函数,查看能用的接口功能

在C中&#xff0c;您可以使用几种方法来查找函数的接口和使用方式。下面是一些常用的方法&#xff1a; 查阅官方文档&#xff1a;每个常见的C库都应该配有官方文档&#xff0c;其中包含所有可用函数和其接口的详细说明。您可以从官方网站或下载的文档中查找所需函数的接口和使用…...

windows linux子系统 docker无法启动

windows安装Linux子系统后&#xff0c;使用sudo service docker start启动后&#xff0c;再使用sudo service docker status查看docker状态&#xff0c;docker无法启动&#xff0c;使用sudo dockerd查看错误信息如下&#xff1a; failed to start daemon: Error initializing …...

【Redis】深入探索 Redis 的数据类型 —— 无序集合 Set

文章目录 一、Set 类型介绍二、Set 类型相关命令2.1 添加元素和检查成员2.2 移除元素2.3 集合运算求交集求并集求差集 2.4 Set 相关命令总结 三、Set 类型编码方式四、Set 使用场景 一、Set 类型介绍 Set&#xff08;集合&#xff09;是 Redis 数据库中的一种数据类型&#xf…...

可变参数JAVA

public class Main {public static void main(String[] args) {//方法形参的个数是可以变化的//格式&#xff1a;属性类型...名字System.out.println(getSum(1,2,3,4,5,6,7,8));}//通过键值对对象来遍历&#xff1b;public static int getSum(int a,int...args){//可变参数;int…...

Zabbix监控平台部署流程

Zabbix WEB、Zabbix Server、Zabbix Database放在一台服务器&#xff1b;&#xff08;192.168.10.12&#xff09;Zabbix Agent部署在被监控服务器上 &#xff08;192.168.10.11&#xff09;Zabbix Porxy 单独部署在一台服务器上&#xff08;被监控服务器少于500台可以不部署&am…...

重磅!文晔以38亿美元收购富昌电子 | 百能云芯

文晔微电子股份有限公司&#xff08;文晔科技&#xff09;于9月14日正式宣布已完成对富昌电子公司&#xff08;Future Electronics Inc.&#xff09;100%股权的收购&#xff0c;该交易以全现金方式完成&#xff0c;总交易价值高达38亿美元。 文晔科技的董事长兼首席执行官郑家强…...

Multimodel Image synthesis and editing:The generative AI Era

1.introduction 基于GAN和扩散模型&#xff0c;通过融入多模态引导来调节生成过程&#xff0c;从不同的多模态信号中合成图像&#xff1b;是为多模态图像合成和编辑使用预训练模型&#xff0c;通过在GAN潜在空间中进行反演&#xff0c;应用引导函数&#xff0c;或调整扩散模型…...

Linux——(第十章)进程管理

目录 一、概述 二、常用指令 1.ps查看当前系统进程状态 2.kill 终止进程 3.pstree 查看进程树 4.top 实时监控系统进程状态 5.netstat 监控网络状态 一、概述 &#xff08;1&#xff09;进程是正在执行的一个程序或命令&#xff0c;每一个进程都是一个运行的实体&#…...

【操作系统】聊聊协程为什么可以支撑高并发服务

在实际的业务开发中&#xff0c;比如针对一个业务流程&#xff0c;调用三方&#xff0c;然后存储数据&#xff0c;从oss上获取数据。其实都是进行的同步调用&#xff0c;说白了就是A完成之后&#xff0c;B在继续完成。如果整个过程中A、B、C 分别耗时100、300、200毫秒。那么整…...

算法leetcode|80. 删除有序数组中的重复项 II(rust重拳出击)

文章目录 80. 删除有序数组中的重复项 II&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 80. 删除有序数组中的重复项 II&#xff1a; …...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...