feat(certify): add certify page (#48)

* feat(certify): add certify page

* feat(certify): add certify page

* fix: fix type error

* chore: do not commit fucking lock file!!!

.gitignore

@@ -37,3 +37,4 @@ next-env.d.ts
 # IDE
 .vscode/*
 .idea/*
+*-lock.yaml

app/dashboard/component/cert.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { Button, Input, Modal, ModalBody, ModalContent, ModalHeader, useDisclosure, useModal } from "@nextui-org/react"
+import { Component, Dispatch, SetStateAction, useEffect, useMemo, useState } from "react"
+import {QRCodeSVG} from 'qrcode.react';
+import useCert from "../hooks/use-cert";
+
+interface CertInitProps {
+    onClick: ()=>void;
+    certName: string;
+    certNo: string;
+    setCertName:  Dispatch<SetStateAction<string>>
+    setCertNo:  Dispatch<SetStateAction<string>>
+}
+
+const CertInit = (props: CertInitProps) => {
+    const {certNo,certName,setCertNo,setCertName} = props;
+    return (
+        <>
+            <Input label="真实姓名" onValueChange={setCertName} value={certName} isRequired />
+            <Input label="身份证号" onValueChange={setCertNo} value={certNo} isRequired />
+            <Button className="w-fit mx-auto" onClick={props.onClick}>下一步</Button>
+        </>
+    )
+}
+
+const CertVerify = (props: {cert_url: string}) => {
+    const {cert_url} = props;
+    const [qrUrl, setQrUrl] = useState(cert_url);
+    return (
+        <>
+            <QRCodeSVG value={qrUrl} size={320} bgColor="#000" fgColor="#fff" includeMargin={false} />
+            <span>请使用支付宝扫描二维码</span>
+            <Button>我已扫描</Button>
+        </>
+    )
+}
+
+export default function Cert(){
+    const {isOpen, onOpenChange, onOpen} = useDisclosure();
+    const {step, addStep, certInitHook, certVerifyHook} = useCert();
+    const CertSteps = (step: number) => {
+        const steps = [
+            <CertInit key='init' {...certInitHook} />,
+            <CertVerify key='verify' cert_url={certVerifyHook.certUrl} />
+        ];
+        return steps[step];
+    }    
+    useEffect(()=>{
+        onOpen();
+    },[])
+    return (
+        <Modal backdrop="blur" isOpen={isOpen} onOpenChange={onOpenChange}>
+            <ModalContent>
+                {(close) => (
+                    <>
+                        <ModalHeader>
+                            实名认证
+                        </ModalHeader>
+                        <ModalBody>
+                            <div className="w-full flex flex-col justify-center items-center justify-items-center content-center text-center gap-2">
+                                {CertSteps(step)}
+                            </div>
+                        </ModalBody>
+                    </>
+                )}
+            </ModalContent>
+        </Modal>
+    )
+}

app/dashboard/hooks/use-cert.ts

@@ -0,0 +1,88 @@
+import { Message } from "@/components/message";
+import IOC from "@/providers";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+interface CertInitProps {
+    next: ()=>void;
+    certName: string;
+    certId: string;
+    setCertName:  Dispatch<SetStateAction<string>>
+    setCertId:  Dispatch<SetStateAction<string>>
+}
+
+export const useCertInit = (
+    certId: string,
+    setCertId: Dispatch<SetStateAction<string>>,
+    next: ()=>void
+) => {
+    const [certName, setCertName] = useState('');
+    const [certNo, setCertNo] = useState('');
+    const [loading, setLoading] = useState(false);
+    const onClick = () => {
+        setLoading(true);
+        IOC.certify.initialize({
+            identity_param:{
+                cert_name: certName,
+                cert_no: certNo
+            }
+        })
+        .then(({data})=>{
+            setCertId(data.certify_id)
+            next()
+        })
+        .finally(()=>setLoading(false));
+    }
+    return {
+        certNo,
+        certName,
+        loading,
+        setCertNo,
+        setCertName,
+        setLoading,
+        onClick
+    }
+}
+
+export const useCertVerify = (certId: string) => {
+    const [certUrl, setCertUrl] = useState('');
+    const [loading, setLoading] = useState(false);
+    useEffect(()=>{
+        if (certId){
+            IOC.certify.start({certify_id: certId})
+            .then(({data}) => {
+                setCertUrl(data.certify_url);
+            })
+        }
+    }, [certId])
+    const onClick = () => {
+        setLoading(true)
+        IOC.certify.queryCertifyResult(certId)
+        .finally(()=>{
+            setLoading(false);
+        })
+    }
+    return {
+        certUrl,
+        loading,
+        setCertUrl,
+        setLoading,
+        onClick
+    }
+}
+
+const useCert = () => {
+    const [step, setStep] = useState(0);
+    const addStep = () => setStep(step+1);
+    const [certId, setCertId] = useState('');
+    const certInitHook = useCertInit(certId, setCertId, addStep);
+    const certVerifyHook = useCertVerify(certId);
+    return {
+        certInitHook,
+        certVerifyHook,
+        step,
+        setStep,
+        addStep,
+    }
+}
+
+export default useCert;

app/dashboard/page.tsx

@@ -18,6 +18,8 @@ import cookie from "react-cookies";
 import {PriceInfo} from "@/components/price";
 import {IsLoggedIn} from "@/interface/hooks";
 import {RedirectType} from "next/dist/client/components/redirect";
+import Cert from "./component/cert";
+import IOC from "@/providers";
 
 const getPriceColor = (price: string) => {
     switch (price.toLowerCase()) {
@@ -60,6 +62,9 @@ export default function Page() {
     let [timeDescription, setTimeDescription] = useState("无限时间");
     let [pictures, setPictures] = useState<PictureList>();
     let [group, setGroup] = useState<PriceInfo>()
+
+    const [certify, setCertify] = useState(true);
+
     const [groupColor, setGroupColor] = useState({});
     const [drag, setDrag] = useState(false);
     const router = useRouter();
@@ -68,8 +73,9 @@ export default function Page() {
         UserAPI.getExtendedInformation().then((r) => {
             if (r == undefined) {
                 router.push("/authenticate");
+                return;
             }
-            let user = r!;
+            let user = r;
             let price = getGroupPrice(r!.extend!.userGroup);
             setUsed(Number((user.extend!.storageUsed / 1024 / 1024).toFixed(2)));
             setTotal(Number(price.allSpace.substring(0, price.allSpace.length - 3)) * 1024);
@@ -91,12 +97,16 @@ export default function Page() {
             setPictures(r);
         });
     }
-
-    useEffect(() => {
+    useEffect(()=>{
+        IOC.certify.getCertifyState()
+        .catch(()=>{
+            setCertify(false)
+        })
         if (used == 0 && total == 1) {
             updateInfo();
         }
     }, [])
+
 
     const deletePicture = (pid: string) => {
         const records = pictures?.records?.filter((record) => record.id !== Number(pid));
@@ -205,6 +215,7 @@ export default function Page() {
                 url={SERVER_URL + "/picture/preview?shareMode=2&id=" + picture.id.toString() + "&token=" + cookie.load("token")}
                 name={picture.fileName} pid={picture.id.toString()} group={group} onDelete={deletePicture}/>)}
             {/* <Picture url="https://t7.baidu.com/it/u=2961459243,2146986594&fm=193&f=GIF" name="雪景.png" pid="" onPress={onOpen} /> */}
+            {!certify && <Cert />}
         </div>
     )
-}
+}

app/store.ts

@@ -0,0 +1,4 @@
+import { UserModel } from '../interface/model/user';
+import {atom} from 'jotai';
+
+export const profile = atom<null | UserModel>(null);

interface/model/certify.ts

@@ -0,0 +1,27 @@
+export interface CertifyInitializeRequest {
+    identity_param: IdentityParam;
+}
+export interface StartCertifyRequest {
+    certify_id: string;
+}
+export interface QueryCertifyRequest {
+    certify_id: string
+}
+
+export interface CertifyInitializeResponse {
+    certify_id: string;
+}
+export interface StartCertifyResponse {
+    certify_url: string
+}
+
+export interface IdentityParam {
+    /**
+     * 真实姓名
+     */
+    cert_name: string;
+    /**
+     * 身份证号
+     */
+    cert_no: string;
+}

interface/model/user.ts

@@ -13,6 +13,7 @@ export interface UserModel {
     createTime: string;
     updateTime: string;
     extend?: Extend;
+    cert?: boolean;
 }
 
 export interface LoginData {

package.json

@@ -43,6 +43,8 @@
     "typescript": "5.0.4"
   },
   "devDependencies": {
-    "@types/react-cookies": "^0.1.3"
+    "@types/react-cookies": "^0.1.3",
+    "jotai": "^2.6.0",
+    "qrcode.react": "^3.1.0"
   }
 }

providers/certify.ts

@@ -0,0 +1,21 @@
+import { CertifyInitializeRequest, CertifyInitializeResponse, StartCertifyRequest, StartCertifyResponse } from "@/interface/model/certify";
+import { Axios } from "axios";
+
+export class Certify{
+    private axios: Axios;
+    constructor(axios:Axios){
+        this.axios = axios;
+    }
+    initialize({identity_param}: CertifyInitializeRequest){
+        return this.axios.post<CertifyInitializeResponse>('/certify/initialize', identity_param);
+    }
+    start(data: StartCertifyRequest){
+        return this.axios.post<StartCertifyResponse>('/certify/verify', data);
+    }
+    queryCertifyResult(certify_id: string){
+        return this.axios.get('/certify/query', {params: {certify_id}});
+    }
+    getCertifyState(){
+        return this.axios.get('/certify');
+    }
+}

providers/index.ts

@@ -1,10 +1,12 @@
+import { Certify } from './certify';
 import {http} from './http';
 import {Picture} from './picture';
 import {User} from './user';
 
 const IOC = {
     user: new User(http),
-    picture: new Picture(http)
+    picture: new Picture(http),
+    certify: new Certify(http)
 }
 
 export default IOC;