feat:添加签署合同模态框

src/components/SignModal/index.less

+.sign_modal {
+
+  :global {
+    .ant-modal-body {
+      padding: 0;
+    }
+
+    .ant-modal-footer {
+      .ant-btn {
+        &:hover {
+          color: #D32F2F;
+          border-color: #D32F2F;
+        }
+      }
+
+      .ant-btn-primary {
+        background-color: #D32F2F;
+        border-color: #D32F2F;
+
+        &:hover {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  .sign_modal_body {
+    position: relative;
+    height: 70vh;
+    overflow-y: auto;
+
+    .sign_iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
+}
\ No newline at end of file

src/components/SignModal/index.tsx

-import React from 'react'
+import React, { useEffect, useCallback, useRef } from 'react'
+import { Modal } from 'antd'
 import styles from './index.less'
 
 interface SignModalPropsType {
-  visible: boolean
+  visible: boolean,
+  onOk?: Function,
+  onCancel?: Function,
+  contractUrl?: string
 }
 
 const SignModal: React.FC<SignModalPropsType> = (props) => {
-  const { visible } = props
+  const { visible, onOk, onCancel, contractUrl } = props
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+
+  // const iframeScrollBottom = () => {
+  //   console.log(iframeRef.current.scrollHeight, 'iframeRef.current.scrollHeight')
+  //   iframeRef.current.contentWindow.scrollTo(0, 1000)
+  // }
+
+  const handleSignConfirm = () => {
+    // iframeScrollBottom()
+    onOk && onOk()
+  }
+  const handleCancel = () => {
+    onCancel && onCancel()
+  }
 
   return (
-    <div>
-      11
+    <Modal
+      className={styles.sign_modal}
+      title="签署电子合同"
+      width={1000}
+      visible={visible}
+      centered
+      okText="签署合同并提交"
+      cancelText="不签署"
+      onCancel={() => handleCancel()}
+      onOk={() => handleSignConfirm()}
+    >
+      <div className={styles.sign_modal_body}>
+        <iframe
+          ref={iframeRef}
+          id="sign-iframe"
+          className={styles.sign_iframe}
+          src={contractUrl}
+        />
       </div>
+    </Modal>
   )
 }
 

src/pages/lxMall/order/index.tsx

@@ -14,6 +14,7 @@ import Invoice from './invoice'
 import styles from './index.less'
 import { PublicApi } from '@/services/api'
 import { GetLogisticsReceiverAddressGetResponse } from '@/services/LogisticsApi'
+import SignModal from '@/components/SignModal'
 import { isEmpty } from 'lodash'
 import { LAYOUT_TYPE, OrderModalType } from '@/constants'
 
@@ -26,7 +27,7 @@ interface OrderPropsType {
 
 const Order: React.FC<OrderPropsType> = (props) => {
   const { shopInfo, mallInfo, layoutType } = props
-  console.log(shopInfo, "shopInfo")
+  const [signModalVisible, setSignModalVisible] = useState<boolean>(false)
   const { spam_id } = props.location.query
   const OrderStore = useLocalStore(() => store.OrderStore)
   const { clearOrderInfo, getOrderInfo } = OrderStore
@@ -136,14 +137,14 @@ const Order: React.FC<OrderPropsType> = (props) => {
    * 提交订单
    */
   const submitOrder = () => {
-    if (isEmpty(selectPayWay)) {
-      message.info('请选择支付方式')
-      return
-    }
-    if (!needTheContract) {
-      message.info('请先同意签订电子合同')
-      return
-    }
+    // if (isEmpty(selectPayWay)) {
+    //   message.info('请选择支付方式')
+    //   return
+    // }
+    // if (!needTheContract) {
+    //   message.info('请先同意签订电子合同')
+    //   return
+    // }
     let params: any = {
       orderModel: layoutType === LAYOUT_TYPE.channel ? OrderModalType.CHANNEL_SPOT_PURCHASE_ORDER : OrderModalType.PURCHASE_ORDER, // 下单模式
       deliveryAddresId: selectAddressInfo.id,
@@ -195,6 +196,23 @@ const Order: React.FC<OrderPropsType> = (props) => {
     })
   }
 
+  const checkOrder = () => {
+    if (isEmpty(selectPayWay)) {
+      message.info('请选择支付方式')
+      return
+    }
+    if (!needTheContract) {
+      message.info('请先同意签订电子合同')
+      return
+    }
+    setSignModalVisible(true)
+  }
+
+  const handleSignModalConfirm = () => {
+
+    // submitOrder()
+  }
+
   return orderInfo && (
     <Spin spinning={spinningState}>
       <div className={styles.order}>
@@ -287,11 +305,17 @@ const Order: React.FC<OrderPropsType> = (props) => {
                 <b className={styles.settlement_box_item_price_total}>{getAmount()}</b>
                 <span>RMB</span>
               </div>
-              <Button loading={confirmLoading} className={styles.settlement_box_item_btn} onClick={() => submitOrder()}>提交订单</Button>
+              <Button loading={confirmLoading} className={styles.settlement_box_item_btn} onClick={() => checkOrder()}>提交订单</Button>
             </div>
           </div>
         </div>
       </div >
+      <SignModal
+        visible={signModalVisible}
+        onCancel={() => setSignModalVisible(false)}
+        onOk={() => handleSignModalConfirm()}
+        contractUrl="https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/40907bcbf5174713b64df540a7238b4a1600322828098.pdf"
+      />
     </Spin>
   )
 }

src/pages/lxMall/order/payway/index.less

@@ -36,7 +36,7 @@
         }
 
         &.active {
-          border: 1px solid rgba(211, 47, 47, 1);
+          border: 1px solid var(--mall_main_color);
 
           &::after {
             content: '';