mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-08 01:58:52 +08:00
feat: ✨ 演示项目新增用户隐私保护指引的处理
This commit is contained in:
parent
aa92332f39
commit
4dd7efe404
47
src/components/wd-privacy-popup/index.scss
Normal file
47
src/components/wd-privacy-popup/index.scss
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
@import '@/uni_modules/wot-design-uni/components/wd-button/index.scss';
|
||||||
|
:deep(.wd-privacy-popup) {
|
||||||
|
width: 600rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 32rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wd-privacy-popup {
|
||||||
|
&__header {
|
||||||
|
width: 100%;
|
||||||
|
height: 128rpx;
|
||||||
|
line-height: 128rpx;
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
font-size: 30rpx;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #3e3e3e;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 550;
|
||||||
|
&-protocol {
|
||||||
|
color: #4d80f0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-bottom: 36rpx;
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
119
src/components/wd-privacy-popup/wd-privacy-popup.vue
Normal file
119
src/components/wd-privacy-popup/wd-privacy-popup.vue
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<wd-popup v-model="showPopup" custom-class="wd-privacy-popup">
|
||||||
|
<view class="wd-privacy-popup__header">
|
||||||
|
<!--标题-->
|
||||||
|
<view class="wd-picker__title">{{ title }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="wd-privacy-popup__container">
|
||||||
|
<text>{{ desc }}</text>
|
||||||
|
<text class="wd-privacy-popup__container-protocol" @click="openPrivacyContract">{{ protocol }}</text>
|
||||||
|
<text>{{ subDesc }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="wd-privacy-popup__footer">
|
||||||
|
<button class="wd-privacy-popup__footer-disagree wd-button is-block is-round is-medium is-plain" id="disagree-btn" @click="handleDisagree">
|
||||||
|
拒绝
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="wd-privacy-popup__footer-agree wd-button is-primary is-block is-round is-medium"
|
||||||
|
id="agree-btn"
|
||||||
|
open-type="agreePrivacyAuthorization"
|
||||||
|
@agreeprivacyauthorization="handleAgree"
|
||||||
|
>
|
||||||
|
同意
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</wd-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'wd-privacy-popup',
|
||||||
|
options: {
|
||||||
|
virtualHost: true,
|
||||||
|
addGlobalClass: true,
|
||||||
|
styleIsolation: 'shared'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { onBeforeMount, ref } from 'vue'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title?: string // 标题
|
||||||
|
desc?: string // 描述
|
||||||
|
subDesc?: string // 字描述
|
||||||
|
protocol?: string // 协议名称
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
title: '用户隐私保护提示',
|
||||||
|
desc: '感谢您使用本应用,您使用本应用的服务之前请仔细阅读并同意',
|
||||||
|
subDesc: '。当您点击同意并开始时用产品服务时,即表示你已理解并同息该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法使用相应服务。',
|
||||||
|
protocol: '《用户隐私保护指引》'
|
||||||
|
})
|
||||||
|
|
||||||
|
const showPopup = ref<boolean>(false) // 是否展示popup
|
||||||
|
|
||||||
|
const privacyResolves = ref(new Set()) // onNeedPrivacyAuthorization的reslove
|
||||||
|
|
||||||
|
const privacyHandler = (resolve: any) => {
|
||||||
|
showPopup.value = true
|
||||||
|
privacyResolves.value.add(resolve)
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
if ((wx as any).onNeedPrivacyAuthorization) {
|
||||||
|
;(wx as any).onNeedPrivacyAuthorization((resolve: any) => {
|
||||||
|
if (typeof privacyHandler === 'function') {
|
||||||
|
privacyHandler(resolve)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleAgree(e) {
|
||||||
|
showPopup.value = false
|
||||||
|
privacyResolves.value.forEach((resolve: any) => {
|
||||||
|
resolve({
|
||||||
|
event: 'agree',
|
||||||
|
buttonId: 'agree-btn'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
privacyResolves.value.clear()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 拒绝隐私协议
|
||||||
|
* @param e
|
||||||
|
*/
|
||||||
|
function handleDisagree(e) {
|
||||||
|
showPopup.value = false
|
||||||
|
privacyResolves.value.forEach((resolve: any) => {
|
||||||
|
resolve({
|
||||||
|
event: 'disagree'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
privacyResolves.value.clear()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开隐私协议
|
||||||
|
*/
|
||||||
|
function openPrivacyContract() {
|
||||||
|
;(wx as any).openPrivacyContract({
|
||||||
|
success: (res) => {
|
||||||
|
console.log('openPrivacyContract success')
|
||||||
|
},
|
||||||
|
fail: (res) => {
|
||||||
|
console.error('openPrivacyContract fail', res)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import './index.scss';
|
||||||
|
</style>
|
||||||
@ -1,5 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<page-wraper>
|
<page-wraper>
|
||||||
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
|
<wd-privacy-popup></wd-privacy-popup>
|
||||||
|
<!-- #endif -->
|
||||||
<wd-message-box></wd-message-box>
|
<wd-message-box></wd-message-box>
|
||||||
<wd-toast id="wd-toast"></wd-toast>
|
<wd-toast id="wd-toast"></wd-toast>
|
||||||
<demo-block title="基本用法">
|
<demo-block title="基本用法">
|
||||||
@ -126,6 +129,12 @@ const beforeRemove = ({ file, fileList, resolve }) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getPhoneNumber(e) {
|
||||||
|
console.log(e.detail.errMsg)
|
||||||
|
console.log(e.detail.iv)
|
||||||
|
console.log(e.detail.encryptedData)
|
||||||
|
}
|
||||||
|
|
||||||
function handleSuccess(event) {
|
function handleSuccess(event) {
|
||||||
console.log('成功', event.detail)
|
console.log('成功', event.detail)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user