qnc-webview/src/views/Authorization.vue

<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>
                    你通过“全能查”或推广方推广查询模式，自愿支付相应费用，用于购买海南省学宇思网络科技有限公司的大数据报告产品。如若对产品内容存在异议，可通过邮箱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>