f

src/pages/authentication/components/FaceRecognition.jsx

 import "../style.less";
 import { getTaCompanyLegalItemAllCompany } from "@/services/taCompanyLegalItem";
 import FaceAuthenticationList from "./FaceAuthenticationList";
+import FaceRecognitionModalTip from "./FaceRecognitionModalTip";
 
 export default (props) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [itemIdentify, setItemIdentify] = useState(false);
+  const [tip, setTip] = useState(false);
 
   const onOpen = (item) => {
     setItemIdentify(item)
       .then((res) => {
         setList(res);
       })
-      .catch((err) => {});
+      .catch((err) => { });
   }, []);
 
   return (
         >
           {t("authentication.FaceRecognitionContent2")}
         </div>
-        <Button size="large" style={{ width: "6vw" }}>
+        <Button size="large" style={{ width: "6vw" }} onClick={() => setTip(true)}>
           {t("authentication.FaceRecognitionBtn2")}
         </Button>
       </Card>
-      <FaceRecognitionModal  itemIdentify={itemIdentify}open={open} setOpen={setOpen} />
+      <FaceRecognitionModal itemIdentify={itemIdentify} open={open} setOpen={setOpen} />
+      <FaceRecognitionModalTip tip={tip} setTip={setTip} />
     </>
   );
 };

src/pages/authentication/components/FaceRecognitionModalTip.jsx

+import React from "react";
+import { Modal, Statistic, Button } from "antd";
+import {
+  InfoCircleTwoTone
+} from '@ant-design/icons';
+import { useTranslation } from "react-i18next";
+
+export default (props) => {
+  const { tip, setTip } = props;
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      title={
+        <div style={{ textAlign: "center", fontSize: '20px', fontWeight: 'bold' }}>Tips</div>
+      }
+      open={tip}
+      // onOk={props.onOk}
+      onCancel={() => setTip(false)}
+      footer={
+        <div style={{ textAlign: "center" }}>
+          <Button size="large" onClick={() => setTip(false)} style={{ width: '6vw' }}>CanCel</Button>
+          <Button
+            size="large"
+            type="primary"
+            style={{ width: '6vw', marginLeft: '3vw' }}
+            onClick={() => setTip(false)}
+          >确认</Button>
+        </div>
+      }
+    >
+      <div style={{ textAlign: "center" }}><InfoCircleTwoTone twoToneColor="#ffac00" style={{ fontSize: '48px' }} /></div>
+      <div style={{ fontWeight: 'bold', marginTop: '1em' }}>请检查是否是以下情况导致核验失败:</div>
+      <div>您拍摄的人像不清晰或不完整</div>
+      <div>您在拍摄时光线过暗</div>
+      <div>您在拍摄时未正视摄像头</div>
+      <div>您在拍摄时距离摄像头过远或过近</div>
+      <div>您在拍摄时佩戴了帽子或眼镜</div>
+      <div>您的网络环境较差</div>
+      <div style={{ fontWeight: 'bold' }}>若非以上原因导致的核验失败请联系客服</div>
+    </Modal>
+  )
+}

src/pages/authentication/index.jsx

 
 export default (props) => {
   const { t } = useTranslation();
-  const [index, setIndex] = useState(3);
+  const [index, setIndex] = useState(0);
   return (
     <Page>
       <div className="authentication-box">