forked from natuka/web.puabadge.com
Initial commit
This commit is contained in:
natuka committed
commit
84061c9a18
243 files changed
+63148
No files matched your search
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 隐私协议弹窗 -->
|
||||
<van-popup
|
||||
v-model:show="popupShow"
|
||||
:close-on-click-overlay="false"
|
||||
round
|
||||
>
|
||||
<!-- <div class="hint_container">
|
||||
<div class="hint_title">
|
||||
{{'用户协议及隐私政策'.$t}}
|
||||
</div>
|
||||
<div class="hint_content">
|
||||
<div class="hint_text">{{'无论数据在何处进行处理和存储，我们将始终按照隐私政策及用户协议收集、处理您的数据。'.$t}}</div>
|
||||
<div class="hint_text">{{"遵照中国大陆隐私保护法律的要求，需要你签署本知情同意书。".$t}}</div>
|
||||
<div class="hint_contract">
|
||||
<div class="contract_item">
|
||||
<van-checkbox class="check_box" icon-size="20px" v-model="checked" checked-color="#009944" @change="onChange"></van-checkbox>
|
||||
<div class="a-text">{{'我同意'.$t}}
|
||||
<div class="active" @click="secretJump('user_service', 1)">{{'用户服务协议'.$t}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contract_item">
|
||||
<van-checkbox class="check_box" icon-size="20px" v-model="checked2" checked-color="#009944" @change="onChange2"></van-checkbox>
|
||||
<div class="a-text">{{'我同意'.$t}}
|
||||
<div class="active" @click="secretJump('user_privacy', 2)">{{'用户隐私政策'.$t}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contract_item">
|
||||
<van-checkbox class="check_box" icon-size="20px" v-model="checked3" checked-color="#009944" @change="onChange3"></van-checkbox>
|
||||
<div class="a-text">{{'我同意'.$t}}
|
||||
<div class="active" @click="secretJump('child_privacy', 3)">{{'儿童隐私政策'.$t}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint_btn" @click="handleConfirm">
|
||||
<div :class="['btn', {checked: isChecked}]">{{'同意并继续'.$t}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="xieyi-body">
|
||||
<div class="xieyi-box">
|
||||
<div class="xieyi-title">服务协议及隐私保护</div>
|
||||
<div>
|
||||
<div class="xieyi-text">为更好的保护你的合法权益，请阅读并同意
|
||||
<span class="xieyi-active" @click="secretJump('user_service', 1)">《用户服务协议》</span>
|
||||
<span class="xieyi-active" @click="secretJump('user_service', 2)">《用户隐私政策》</span>
|
||||
<span class="xieyi-active" @click="secretJump('user_service', 3)">《儿童隐私政策》</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xieyi-btn">
|
||||
<div class="hint_no_btn" @click="closeHint">
|
||||
不同意
|
||||
</div>
|
||||
<div class="hint_btn" @click="handleConfirm">
|
||||
同意
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
hintShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
const popupShow = ref(false)
|
||||
const checked = ref(false)
|
||||
const checked2 = ref(false)
|
||||
const checked3 = ref(false)
|
||||
const isChecked = ref(false)
|
||||
const emit = defineEmits([
|
||||
"check",
|
||||
"close",
|
||||
"onViewAgree",
|
||||
]);
|
||||
|
||||
watch(() => props.hintShow, (val, oldVal) => {
|
||||
console.log("props.hintShow",val)
|
||||
popupShow.value = val ? true : false
|
||||
|
||||
}, { immediate: true })
|
||||
// const onChange = (e) => {
|
||||
// checked.value = e;
|
||||
// isChecked.value = e && checked2.value && checked3.value;
|
||||
// }
|
||||
// const onChange2 = (e) => {
|
||||
// checked2.value = e;
|
||||
// isChecked.value = e && checked.value && checked3.value;
|
||||
// }
|
||||
// const onChange3 = (e) => {
|
||||
// checked3.value = e;
|
||||
// isChecked.value = e && checked.value && checked2.value;
|
||||
// }
|
||||
const handleConfirm = () => {
|
||||
// if(checked.value && checked2.value && checked3.value) {
|
||||
emit("check", true)
|
||||
emit("close")
|
||||
// 清空数据
|
||||
// checked.value = false
|
||||
// checked2.value = false
|
||||
// checked3.value = false
|
||||
// isChecked.value = false
|
||||
// }
|
||||
}
|
||||
|
||||
const closeHint = () => {
|
||||
emit("check", false)
|
||||
emit("close")
|
||||
}
|
||||
|
||||
// 隐私跳转
|
||||
const secretJump = (title, val) => {
|
||||
emit("onViewAgree", title, val)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.hint_container {
|
||||
position: relative;
|
||||
padding: 20px 0;
|
||||
.hint_title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
font-size: 17px;
|
||||
}
|
||||
.hint_content {
|
||||
position: relative;
|
||||
width: 85%;
|
||||
margin: 10px auto 0 auto;
|
||||
.hint_text {
|
||||
margin-bottom: 7px;
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
color: #444444;
|
||||
}
|
||||
.hint_contract {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
|
||||
.contract_item {
|
||||
display: flex;
|
||||
margin: 5px 0;
|
||||
.check_box {
|
||||
display: flex;
|
||||
}
|
||||
.a-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
color: #767676;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
.active {
|
||||
color: #009944;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .hint_btn {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// position: relative;
|
||||
// width: 100%;
|
||||
// margin-top: 25px;
|
||||
// .btn {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// position: relative;
|
||||
// width: 150px;
|
||||
// height: 40px;
|
||||
// border-radius: 5px;
|
||||
// background: #009944;
|
||||
// color: #fff;
|
||||
// font-size: 15px;
|
||||
// filter: opacity(0.5)
|
||||
// }
|
||||
// .checked {
|
||||
// filter: brightness(1);
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.xieyi-body {
|
||||
padding: 15px;
|
||||
}
|
||||
.xieyi-box {
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
.xieyi-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
.xieyi-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.xieyi-active {
|
||||
color: #1aad19!important;
|
||||
cursor: pointer;
|
||||
}
|
||||
.xieyi-btn {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
.hint_btn {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
background: #009944;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.hint_no_btn {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border: 1px solid #333;
|
||||
color: #000;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in new issue
Block a user