Commit 844a295a authored by GuanHua's avatar GuanHua

feat:添加签署合同模态框

parent fb551d9f
.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
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>
)
}
......
......@@ -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>
)
}
......
......@@ -36,7 +36,7 @@
}
&.active {
border: 1px solid rgba(211, 47, 47, 1);
border: 1px solid var(--mall_main_color);
&::after {
content: '';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment