221 lines
9.8 KiB
TypeScript
221 lines
9.8 KiB
TypeScript
import { useRef, useState } from "react"
|
||
import { toast } from "sonner"
|
||
import { uploadAgreement } from "@/api/agreement"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Checkbox } from "@/components/ui/checkbox"
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
|
||
export default function AgreementDialog({
|
||
open,
|
||
onOpenChange,
|
||
onSigned,
|
||
}: {
|
||
open: boolean
|
||
onOpenChange: (open: boolean) => void
|
||
onSigned: () => void
|
||
}) {
|
||
const [describe, setDescribe] = useState("")
|
||
const [file, setFile] = useState<File | null>(null)
|
||
const [agreed, setAgreed] = useState(false)
|
||
const [submitting, setSubmitting] = useState(false)
|
||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||
|
||
const handleOpenChange = (next: boolean) => {
|
||
onOpenChange(next)
|
||
if (!next) {
|
||
setDescribe("")
|
||
setFile(null)
|
||
setAgreed(false)
|
||
if (fileInputRef.current) fileInputRef.current.value = ""
|
||
}
|
||
}
|
||
|
||
const handleSubmit = async () => {
|
||
if (!agreed) {
|
||
toast.error("请勾选同意协议！")
|
||
return
|
||
}
|
||
if (describe.trim().length < 2) {
|
||
toast.error("业务描述必须填写！")
|
||
return
|
||
}
|
||
if (!file) {
|
||
toast.error("手持身份证必须上传！")
|
||
return
|
||
}
|
||
if (file.size > 30 * 1024 * 1024) {
|
||
toast.error("文件过大，仅限30M")
|
||
return
|
||
}
|
||
|
||
setSubmitting(true)
|
||
const res = await uploadAgreement({ describe: describe.trim(), file })
|
||
setSubmitting(false)
|
||
|
||
if (!res.success) {
|
||
toast.error(res.message)
|
||
return
|
||
}
|
||
toast.success(res.data.msg || "提交成功，请等待客服审核")
|
||
handleOpenChange(false)
|
||
onSigned()
|
||
}
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||
<DialogContent className="max-h-[85dvh] overflow-y-auto sm:max-w-2xl">
|
||
<DialogHeader>
|
||
<DialogTitle className="text-xl font-semibold">
|
||
签署网络安全协议
|
||
</DialogTitle>
|
||
</DialogHeader>
|
||
|
||
<p className="text-xs leading-5 text-gray-500">
|
||
您可通过以下要求勾选同意网络安全协议书后联系客服审核，然后解除微信QQ等屏蔽，新增的账号不会自动解除，记得联系客服哦
|
||
</p>
|
||
<p className="text-xs leading-5 text-red-500">
|
||
注：解除屏蔽后，qq和微信也仅可用于游戏之类的登录授权，不可用于聊天添加好友等聊天软件内部的功能，系统有严密日志，如有此类情况，账号立即封停，且不予退款，若触犯相关法律将上报给公安部门，请您知晓！
|
||
</p>
|
||
|
||
<div className="space-y-1.5">
|
||
<Label className="text-sm text-gray-600">
|
||
详细描述业务用途<span className="text-red-500">*</span>
|
||
</Label>
|
||
<Input
|
||
value={describe}
|
||
onChange={e => setDescribe(e.target.value)}
|
||
placeholder="请描述业务用途"
|
||
className="h-11 bg-gray-50 border-gray-200"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-1.5">
|
||
<Label className="text-sm text-gray-600">
|
||
上传手持身份证<span className="text-red-500">*</span>
|
||
</Label>
|
||
<div className="flex items-center gap-3">
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
onChange={e => setFile(e.target.files?.[0] ?? null)}
|
||
className="block w-full text-sm text-gray-500 file:mr-3 file:rounded-md file:border-0 file:bg-blue-50 file:px-3 file:py-2 file:text-sm file:font-medium file:text-blue-600 hover:file:bg-blue-100"
|
||
/>
|
||
</div>
|
||
<p className="text-xs text-gray-400">手持身份证的半身照片</p>
|
||
</div>
|
||
|
||
<div className="space-y-1.5">
|
||
<Label className="text-sm text-gray-600">
|
||
网络安全协议书<span className="text-red-500">*</span>
|
||
</Label>
|
||
<div className="max-h-52 overflow-y-auto rounded-lg border border-gray-200 bg-white p-4 text-xs leading-6 text-gray-600">
|
||
<h1 className="text-center text-base font-semibold">
|
||
网络信息安全承诺书
|
||
</h1>
|
||
<p>
|
||
本单位(包含个人)郑重承诺遵守本承诺书的有关条款，如有违反本承诺书有关条款的行为，本单位(包含个人)承担由此带来的一切民事、行政和刑事责任。
|
||
</p>
|
||
<p>
|
||
一、本单位(包含个人)承诺遵守《中华人民共和国计算机信息系统安全保护条例》和《计算机信息网络国际联网安全保护管理办法》及有关法律、法规和行政规章制度、文件规定。
|
||
</p>
|
||
<p>
|
||
二、本单位(包含个人)保证不利用网络危害国家安全、泄露国家秘密，不侵犯国家的、社会的、集体的利益和第三方的合法权益，不从事违法犯罪活动。
|
||
</p>
|
||
<p>
|
||
三、本单位(包含个人)承诺严格按照国家相关法律法规做好本单位(包含个人)网站的信息安全管理工作，按政府有关部门要求设立信息安全责任人和信息安全审查员，信息安全责任人和信息安全审查员应在通过公安机关的安全技术培训后，持证上岗。
|
||
</p>
|
||
<p>
|
||
四、本单位(包含个人)承诺健全各项网络安全管理制度和落实各项安全保护技术措施。
|
||
</p>
|
||
<p>
|
||
五、本单位(包含个人)承诺接受公安机关的监督和检查,如实主动提供有关安全保护的信息、资料及数据文件，积极协助查处通过国际联网的计算机信息网络违法犯罪行为。
|
||
</p>
|
||
<p>
|
||
六、本单位(包含个人)承诺不通过互联网制作、复制、查阅和传播下列信息：
|
||
</p>
|
||
<p className="pl-4">
|
||
1、反对宪法所确定的基本原则的。
|
||
<br />
|
||
2、危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的。
|
||
<br />
|
||
3、损害国家荣誉和利益的。
|
||
<br />
|
||
4、煽动民族仇恨、民族歧视，破坏民族团结的。
|
||
<br />
|
||
5、破坏国家宗教政策，宣扬邪教和封建迷信的。
|
||
<br />
|
||
6、散布谣言，扰乱社会秩序，破坏社会稳定的。
|
||
<br />
|
||
7、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的。
|
||
<br />
|
||
8、侮辱或者诽谤他人，侵害他人合法权益的。
|
||
<br />
|
||
9、含有法律法规禁止的其他内容的。
|
||
</p>
|
||
<p>
|
||
七、本单位(包含个人)承诺不从事任何危害计算机信息网络安全的活动，包括但不限于：
|
||
</p>
|
||
<p className="pl-4">
|
||
1、未经允许，进入计算机信息网络或者使用计算机信息网络资源的。
|
||
<br />
|
||
2、未经允许，对计算机信息网络功能进行删除、修改或者增加的。
|
||
<br />
|
||
3、未经允许，对计算机信息网络中存储或者传输的数据和应用程序进行删除、修改或者增加的。
|
||
<br />
|
||
4、故意制作、传播计算机病毒等破坏性程序的。
|
||
<br />
|
||
5、其他危害计算机信息网络安全的。
|
||
</p>
|
||
<p>
|
||
八、本单位(包含个人)承诺，当计算机信息系统发生重大安全事故时，立即采取应急措施，保留有关原始记录，并在24小时内向政府监管部门报告，并书面知会贵单位(包含个人)。
|
||
</p>
|
||
<p>
|
||
九、本单位(包含个人)承诺，若本单位(包含个人)租用的拨号账号出现违规违法行为导致贵单位(指华连网络科技有限公司)被处罚的，造成的直接损失由本单位(包含个人)赔偿。
|
||
</p>
|
||
<p>
|
||
十、若违反本承诺书有关条款和国家相关法律法规的，本单位(包含个人)直接承担相应法律责任，造成财产损失的，由本单位(包含个人)直接赔偿。同时，贵单位(指华连网络科技有限公司)有权暂停直至解除双方合作合同。
|
||
</p>
|
||
<p>
|
||
十一、解除屏蔽后，qq和微信也仅可用于游戏之类的登录授权，不可用于聊天添加好友等聊天软件内部的功能，系统有严密日志，如有此类情况，账号立即封停，且不预退款，若触犯相关法律将上报给公安部门，请您知晓！
|
||
</p>
|
||
<p>十二、本承诺书自勾选确认之日起生效并遵行。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<Checkbox
|
||
id="agreement-agree"
|
||
checked={agreed}
|
||
onCheckedChange={checked => setAgreed(checked === true)}
|
||
/>
|
||
<Label
|
||
htmlFor="agreement-agree"
|
||
className="text-sm text-gray-600 cursor-pointer"
|
||
>
|
||
阅读、接受并同意签署以上网络信息安全承诺书
|
||
</Label>
|
||
</div>
|
||
|
||
<DialogFooter>
|
||
<Button
|
||
onClick={() => handleSubmit()}
|
||
disabled={submitting}
|
||
className="w-full bg-linear-to-r from-blue-500 to-cyan-400 text-white hover:opacity-90"
|
||
>
|
||
{submitting ? "提交中..." : "提交"}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|