暂存

src/request/api.ts

@@ -204,5 +204,9 @@ export const updateTrademarkApplicant = (trademarkUserId:any,params:any) => aiSh
 // 提交申请人
 export const submitTrademarkApplicant = (trademarkId:any,params:any) => aiShopRequest.post(`/aishop/api/trademark/save3/${trademarkId}`,params)
 
+// 第四步 
+// 订单支付
+export const orderPay = (trademarkId:any) => aiShopRequest.post(`/aishop/api/trademark/save4/${trademarkId}`)
+
 // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 

src/route/TrademarkMall/TrademarkAiEdit.tsx

@@ -247,6 +247,8 @@ export default function TrademarkAiEdit() {
                     }}>
                         <EditThree
                             // key={editProcess}
+                            editThreeData={editThreeData}
+                            setEditThreeData={setEditThreeData}
                             trademarkId={trademarkId}
                             setEditProcess={setEditProcess}></EditThree>
                     </div>
@@ -255,6 +257,7 @@ export default function TrademarkAiEdit() {
                     }}>
                         <EditFour
                             // key={editProcess}
+                            trademarkId={trademarkId}
                             setEditProcess={setEditProcess}></EditFour>
                     </div>
                     <div style={{

src/route/TrademarkMall/components/EditFour/EditFour.tsx

@@ -1,6 +1,9 @@
-import { useState } from 'react'
+import { useState, useContext } from 'react'
 import './edit-four.css'
-import { Button, Table, Modal } from 'antd'
+import { Button, Table, Modal, message, Spin } from 'antd'
+import { orderPay } from '../../../../request/api'
+// import { GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
+import { GlobalDispatchContext, reloadUser } from "../../../../context/GlobalContext";
 import type { TableProps } from 'antd';
 interface DataType {
   id: string;
@@ -12,7 +15,43 @@ interface DataType {
   price: string; //单价
   num: string; //数量
 }
+import useMessage from "antd/es/message/useMessage";
 export default function EditFour(props: any) {
+  const globalDispatchContext = useContext(GlobalDispatchContext);
+  const [messageApi, contextHolder] = useMessage();
+  const [payLodaing, setPayLodaing] = useState(false)
+  const postOrderPay = async () => {
+    try {
+      setModal(false)
+
+      setPayLodaing(true)
+      const res = await orderPay(props.trademarkId)
+      console.log(res);
+      reloadUser(messageApi, globalDispatchContext).then(() => {
+
+        message.success('付款成功');
+
+      });
+      setPayLodaing(false)
+
+    } catch (error: any) {
+      setModal(false)
+      setPayLodaing(false)
+      if (error.response) {
+        const data = error.response.data;
+        messageApi.open({
+          type: 'error',
+          content: data.msg ? data.msg : `${data.path}(${data.status})`,
+        });
+      } else {
+        console.error(error)
+      }
+    } finally {
+      setPayLodaing(false)
+      setModal(false)
+
+    }
+  }
   const columns: TableProps<DataType>['columns'] = [
     {
       align: 'center',
@@ -106,76 +145,89 @@ export default function EditFour(props: any) {
 
   };
   return (
-    <div className='editOneTwo'>
+    <Spin tip="正在付款，请稍后..." size="small" spinning={payLodaing}>
-      <div className='topLine'></div>
+      <div className='editOneTwo'>
-      <div className='editFourBox' style={{
+        {contextHolder}
-        height: height,
+        <div className='topLine'></div>
-        // background: 'pink'
+        <div className='editFourBox' style={{
-      }}>
+          height: height,
-        <div className='editFourTop'>
+          // background: 'pink'
-          <div className='editFourTopL'>商标申请</div>
+        }}>
-          <div className='editFourTopR'>
+          <div className='editFourTop'>
-            <span>数量 : 2</span>
+            <div className='editFourTopL'>商标申请</div>
-            <span style={{
+            <div className='editFourTopR'>
-              marginLeft: '10px',
+              <span>数量 : 2</span>
-            }}>小计<span style={{
+              <span style={{
-              color: 'red',
+                marginLeft: '10px',
-            }}>￥630.66</span></span>
+              }}>小计<span style={{
+                color: 'red',
+              }}>￥630.66</span></span>
+
+            </div>
 
           </div>
-
+          <Table<DataType> columns={columns}
-        </div>
+            // 取消自带分页
-        <Table<DataType> columns={columns}
+            pagination={false}
-          // 取消自带分页
+            dataSource={data}
-          pagination={false}
+            rowKey='id'
-          dataSource={data}
-          rowKey='id'
           />
 
+        </div>
+        <div className='topLine'></div>
+        <div style={{
+          marginTop: '8px',
+          display: 'flex',
+          justifyContent: 'flex-end',
+        }}>
+          <Button
+            style={{
+              width: '100px',
+              height: '40px',
+              borderRadius: '5px',
+            }}
+            onClick={() => {
+              props.setEditProcess(3)
+            }}
+          >上一步</Button>
+          <Button
+            type='primary'
+            style={{
+              width: '100px',
+              height: '40px',
+              borderRadius: '5px',
+              marginLeft: '10px',
+            }}
+            onClick={() => {
+              handleSubmit()
+            }}
+          >提交订单</Button>
+        </div>
+
+        <Modal title="提示"
+          centered
+          destroyOnClose={true}
+          open={modal}
+          onCancel={() => { setModal(false) }}
+          okText='确定'
+          cancelText='取消'
+          onOk={() => {
+            // setModal(false)
+            // props.setEditProcess(5)
+            postOrderPay()
+          }}
+          okButtonProps={{
+            disabled: payLodaing
+          }}
+          // 设置取消按钮属性，payLodaing 为 true 时禁用
+          cancelButtonProps={{
+            disabled: payLodaing
+          }}
+
+        >
+            该操作会扣除999元，付款后无法修改,确定操作吗？
+        </Modal>
       </div>
-      <div className='topLine'></div>
+    </Spin>
-      <div style={{
-        marginTop: '8px',
-        display: 'flex',
-        justifyContent: 'flex-end',
-      }}>
-        <Button
-          style={{
-            width: '100px',
-            height: '40px',
-            borderRadius: '5px',
-          }}
-          onClick={() => {
-            props.setEditProcess(3)
-          }}
-        >上一步</Button>
-        <Button
-          type='primary'
-          style={{
-            width: '100px',
-            height: '40px',
-            borderRadius: '5px',
-            marginLeft: '10px',
-          }}
-          onClick={() => {
-            handleSubmit()
-          }}
-        >提交订单</Button>
-      </div>
-      <Modal title="提示"
-        centered
-        destroyOnClose={true}
-        open={modal}
-        onCancel={() => { setModal(false) }}
-        okText='确定'
-        cancelText='取消'
-        onOk={()=>{
-          setModal(false)
-          props.setEditProcess(5)
-        }}
-      >
-        该操作会扣除999元，确定操作吗？
-      </Modal>
-    </div>
   )
 }

src/route/TrademarkMall/components/EditThree/EditThree.tsx

@@ -30,6 +30,7 @@ import useMessage from "antd/es/message/useMessage";
 const { Search } = Input;
 export default function EditThree(props: any) {
   // 申请人信息
+
   // const [applicantData, setApplicantData] = useState({
   //   name: '',
   //   trademarkUserId: '',
@@ -151,6 +152,15 @@ export default function EditThree(props: any) {
     trademarkUserId: '',
     name: '',
   });
+  useEffect(() => {
+    if (props.editThreeData.trademarkUserId) {
+      setConfirmSelectPeopleData({
+        trademarkUserId: props.editThreeData.trademarkUserId,
+        name: props.editThreeData.name,
+      })
+
+    }
+  }, [props.editThreeData])
   const [disabled, setDisabled] = useState(false)
   const [showBtn, setShowBtn] = useState(true)
   const columns: TableColumnsType<any> = [
@@ -624,7 +634,40 @@ export default function EditThree(props: any) {
 
   }
   const [subLoading, setSubLoading] = useState(false)
+  function deepCompareObjects(obj1: any, obj2: any): boolean {
+    // 若两个值严格相等，直接返回 true
+    if (obj1 === obj2) {
+      return true;
+    }
+
+    // 若其中一个值为 null 或不是对象类型，返回 false
+    if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
+      return false;
+    }
+
+    // 获取两个对象的键数组
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+
+    // 若键的数量不同，返回 false
+    if (keys1.length !== keys2.length) {
+      return false;
+    }
+
+    // 遍历键，递归比较对应的值
+    for (const key of keys1) {
+      if (!keys2.includes(key) || !deepCompareObjects(obj1[key], obj2[key])) {
+        return false;
+      }
+    }
+
+    return true;
+  }
   const handleSubmit = async () => {
+    if (deepCompareObjects(confirmSelectPeopleData, props.editThreeData)) {
+      props.setEditProcess(4);
+      return;
+    }
     // formA.submit();
     // props.setEditProcess(4);
     // console.log(confirmSelectPeopleData);
@@ -637,7 +680,10 @@ export default function EditThree(props: any) {
         })
         setSubLoading(false)
         props.setEditProcess(4);
-
+        props.setEditThreeData({
+          trademarkUserId: confirmSelectPeopleData.trademarkUserId,
+          name: confirmSelectPeopleData.name,
+        })
       } catch (error: any) {
         setSubLoading(false)
         if (error.response) {