qnc-webview/src/views/Authorization.vue

247 lines
11 KiB
Vue
Raw Normal View History

2024-12-24 11:28:23 +08:00
<template>
<div class="min-h-screen bg-gray-100 flex flex-col p-4">
<!-- 标题 -->
<div class="text-center text-2xl font-bold mb-4">授权书</div>
<!-- 授权书滚动区域 -->
<div
class="authrization-card card flex-1 overflow-y-auto"
ref="agreementBox"
@scroll="handleScroll"
>
<p class="my-2">海南省学宇思网络科技有限公司</p>
<p class="indent-[2em]">
本人<span class="font-bold">
{{ signature ? userData.name : "____________" }}</span
>
拟向贵司申请大数据分析报告查询业务贵司需要了解本人相关状况用于查询大数据分析报告因此本人同意向贵司提供本人的姓名和手机号等个人信息并同意贵司向第三方包括但不限于西部数据交易有限公司传送上述信息第三方将使用上述信息核实信息真实情况查询信用记录并生成报告
</p>
<p class="mt-2 font-bold">授权内容如下</p>
<ol class="list-decimal pl-6">
<li>
贵司向依法成立的第三方服务商包括但不限于西部数据交易有限公司根据本人提交的信息进行核实并有权通过前述第三方服务机构查询使用本人的身份信息设备信息运营商信息等查询本人信息包括但不限于学历婚姻资产状况及对信息主体产生负面影响的不良信息出具相关报告
</li>
<li>
依法成立的第三方服务商查询或核实搜集保存处理共享使用含合法业务应用本人相关数据且不再另行告知本人但法律法规监管政策禁止的除外
</li>
<!-- <li>本人授权本业务推广方 可浏览本人大数据报告</li> -->
<li>
本人授权有效期为自授权之日起
1个月本授权为不可撤销授权但法律法规另有规定的除外
</li>
</ol>
<p class="mt-2 font-bold">用户声明与承诺</p>
<ul class="list-decimal pl-6">
<li>
本人在授权签署前已通过实名认证及动态验证码验证或其他身份验证手段确认本授权行为为本人真实意思表示平台已履行身份验证义务
</li>
<li>
本人在此声明已充分理解上述授权条款含义知晓并自愿承担因授权数据使用可能带来的后果包括但不限于影响个人信用评分生活行为等本人确认授权范围内的相关信息由本人提供并真实有效
</li>
<li>
若用户冒名签署或提供虚假信息由用户自行承担全部法律责任平台不承担任何后果
</li>
</ul>
<p class="mt-2 font-bold">特别提示</p>
<ul class="list-decimal pl-6">
<li>
本产品所有数据均来自第三方可能部分数据未公开数据更新延迟或信息受到限制贵司不对数据的准确性真实性完整性做任何承诺用户需根据实际情况结合报告内容自行判断与决策
</li>
<li>
本产品仅供用户本人查询或被授权查询除非用户取得合法授权用户不得利用本产品查询他人信息用户因未获得合法授权而擅自查询他人信息所产生的任何后果由用户自行承担责任
</li>
<li>
本授权书涉及对本人敏感信息包括但不限于婚姻状况资产状况等的查询与使用本人已充分知晓相关信息的敏感性并明确同意贵司及其合作方依据授权范围使用相关信息
</li>
<li>
平台声明本授权书涉及的信息核实及查询结果由第三方服务商提供平台不对数据的准确性完整性实时性承担责任用户根据报告所作决策的风险由用户自行承担平台对此不承担法律责任
</li>
<li>
本授权书中涉及的数据查询和报告生成由依法成立的第三方服务商提供若因第三方行为导致数据错误或损失用户应向第三方主张权利平台不承担相关责任
</li>
</ul>
<p class="mt-2 font-bold">附加说明</p>
<ul class="list-decimal pl-6">
<li>
本人在授权的相关数据将依据法律法规及贵司内部数据管理规范妥善存储存储期限为法律要求的最短必要时间超过存储期限或在数据使用目的达成后贵司将对相关数据进行销毁或匿名化处理
</li>
<li>
本人有权随时撤回本授权书中的授权但撤回前的授权行为及其法律后果仍具有法律效力若需撤回授权本人可通过贵司官方渠道提交书面申请贵司将在收到申请后依法停止对本人数据的使用
</li>
<li>
你通过全能查APP或推广方推广查询模式自愿支付相应费用用于购买海南省学宇思网络科技有限公司的大数据报告产品如若对产品内容存在异议可通过邮箱admin@iieeii.com或APP联系客服按钮进行反馈贵司将在收到异议之日起20日内进行核查和处理并将结果答复
</li>
<li>
你向海南省学宇思网络科技有限公司的支付方式为海南省学宇思网络科技有限公司及其经官方授权的相关企业的支付宝账户
</li>
</ul>
<p class="mt-2 font-bold">争议解决机制</p>
<ul>
<li>
若因本授权书引发争议双方应友好协商解决协商不成的双方同意将争议提交至授权书签署地海南省有管辖权的人民法院解决
</li>
</ul>
<p class="mt-2 font-bold">签署方式的法律效力声明</p>
<ul>
<li>
本授权书通过用户在线勾选电子签名或其他网络签署方式完成与手写签名具有同等法律效力平台已通过技术手段保存签署过程的完整记录作为用户真实意思表示的证据
</li>
</ul>
<p class="mt-2">本授权书于 {{ signTime }}生效</p>
<p class="mt-4 font-bold">
签署人<span class="underline">{{
signature ? userData.name : "____________"
}}</span>
<br />
手机号码<span class="underline">
{{ signature ? userData.phone : "____________" }}
</span>
<br />
签署时间<span class="underline">{{ signTime }}</span>
</p>
</div>
<!-- 操作按钮 -->
<div class="mt-4 flex justify-between">
<button
class="flex-shrink-0 bg-red-500 text-white px-4 py-2 rounded-lg"
@click="cancel"
>
取消
</button>
<div class="mt-2 px-2 text-center text-sm text-gray-500">
{{ scrollMessage }}
</div>
<button
class="flex-shrink-0 bg-blue-500 text-white px-4 py-2 rounded-lg active:bg-blue-600"
:class="
!canAgree &&
'bg-gray-300 cursor-not-allowed active:bg-gray-300'
"
:disabled="!canAgree"
@click="agree"
>
{{ signature ? "同意" : "签署" }}
</button>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useFetch } from "@vueuse/core";
const userData = ref({
name: "",
idCard: "",
phone: "",
});
const signature = ref(false);
const agreed = ref(false);
const id = ref(null);
const token = ref(null);
const formatDate = (date) => {
const options = { year: "numeric", month: "long", day: "numeric" };
return new Intl.DateTimeFormat("zh-CN", options).format(date);
};
const signTime = ref(formatDate(new Date()));
const canAgree = ref(false); // 同意按钮状态
const scrollMessage = ref("请滑动并阅读完整授权书以继续");
// 滚动事件处理
let timeout = null;
const handleScroll = (event) => {
clearTimeout(timeout);
timeout = setTimeout(() => {
const element = event.target;
if (
Math.abs(
element.scrollHeight - element.scrollTop - element.clientHeight
) <= 50
) {
canAgree.value = true;
scrollMessage.value = "您已阅读完整授权书,可以继续";
}
}, 100);
};
// 接收来自 App 的参数
onMounted(() => {
// 如果是通过 query 参数传递数据
const urlParams = new URLSearchParams(window.location.search);
id.value = urlParams.get("id") || "";
token.value = urlParams.get("token") || "";
if (id.value && token.value) {
const { data, isFetching, error, onFetchResponse } = useFetch(
"/api/v1/query/provisional_order/" + id.value,
{
async beforeFetch({ url, options, cancel }) {
options.headers = {
...options.headers,
Authorization: token.value,
};
return {
options,
};
},
}
)
.get()
.json();
onFetchResponse(() => {
console.log("data", data.value);
if (data.value.code === 200) {
userData.value = {
name: data.value.data.name,
phone: data.value.data.mobile,
};
}
});
}
});
// 用户同意
const agree = () => {
if (!signature.value) {
signature.value = true;
return;
}
uni.postMessage({
data: {
action: "agreed",
},
});
};
// 用户取消
const cancel = () => {
uni.postMessage({
data: {
action: "cancelled",
},
});
};
onMounted(() => {
document.addEventListener("UniAppJSBridgeReady", handleBridgeReady);
});
onUnmounted(() => {
document.removeEventListener("UniAppJSBridgeReady", handleBridgeReady);
});
const handleBridgeReady = () => {
uni.postMessage({
data: {
loaded: true,
},
});
};
</script>
<style scoped>
.authrization-card {
max-height: calc(100vh - 200px);
}
</style>