feat: 增加预约界面公告展示后的确认弹窗

feat: 增加预约界面公告展示后的确认弹窗

src/page/custom/requestOrder/OrderForm.tsx

@@ -132,10 +132,21 @@ export const OrderForm: React.FC = () => {
     navigate(`/${routePath.CUSTOM}/${routePath.custom.RETRIEVE}`);
   }
 
-  const [modalVisible, setModalVisible] = useState(true);
+  const [announcementVisible, setAnnouncementVisible] = useState(true);
+  const [confirmVisible, setConfirmVisible] = useState(false);
 
   function handleHideAnnouncement() {
-    setModalVisible(false);
+    setAnnouncementVisible(false);
+    setConfirmVisible(true);
+  }
+
+  function handleHideConfirm() {
+    setConfirmVisible(false);
+  }
+
+  function handleShowAnnouncement() {
+    setAnnouncementVisible(true);
+    setConfirmVisible(false);
   }
 
   function handleBack() {
@@ -164,7 +175,7 @@ export const OrderForm: React.FC = () => {
     >
       <Modal
         title="公告栏"
-        open={modalVisible}
+        open={announcementVisible}
         centered={true}
         okText="我已知晓"
         cancelText="返回"
@@ -194,6 +205,52 @@ export const OrderForm: React.FC = () => {
         <Alert message={"在预约之前，请确认最近的公告信息。"} />
         <AnnouncementList type={AnnouncementType.EXTERNAL} />
       </Modal>
+      <Modal
+        title="注意！"
+        open={confirmVisible}
+        centered={true}
+        okText="我已知晓"
+        cancelText="我再想想"
+        closable={false}
+        onOk={handleHideConfirm}
+        onCancel={handleShowAnnouncement}
+        okButtonProps={{
+          style: {
+            height: "48px",
+            width: "18%",
+            minWidth: "90px",
+            fontSize: "15px",
+            borderRadius: "10px",
+          },
+        }}
+        cancelButtonProps={{
+          style: {
+            height: "48px",
+            width: "18%",
+            minWidth: "90px",
+            fontSize: "15px",
+            borderRadius: "10px",
+          },
+        }}
+        width={800}
+      >
+        <Alert
+          type="warning"
+          message={"在预约之前，IT侠希望您理解："}
+          description={<div>
+            IT侠的维修服务存在<strong>损坏您的设备与数据的风险</strong>。<br/>
+            若维修过程中涉及<strong>硬件损坏</strong>，后续维修产生费用者，需要您与IT侠<strong>共同承担</strong>。<br/>
+            细则详见
+            <a
+              href="https://itxia.club/service#TOS"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              预约须知和服务条款
+            </a>
+        </div>}
+        />
+      </Modal>
       <Form
         {...formItemLayout}
         form={form}