定金支付页

src/components/deposit-pay-order/index.js

@@ -5,10 +5,8 @@ import { OrderItem, HeaderBar } from '@/common/index'
 import { Link } from 'react-router-dom'
 import './index.scss'
 import { VList } from '@/common'
+import { WithFullSize } from '@/HOCs'
 
-
-const Item = List.Item
-const Brief = Item.Brief
 const RadioItem = Radio.RadioItem
 
 let mockData = []
@@ -24,7 +22,7 @@ if (browser.isWeixin) {
 }
 
 
-export default class PayOrder extends Component {
+class PayOrder extends Component {
     constructor(props) {
         super(props)
         this.state = {
@@ -327,8 +325,7 @@ export default class PayOrder extends Component {
         }*/
     }
 
-    toggleAgree = (e) => {
-        console.log(e)
+    changeAgreement = () => {
         this.setState((prevState) => ({agree: !prevState.agree}))
     }
 
@@ -419,16 +416,18 @@ export default class PayOrder extends Component {
                     ))}
                 </List>
                 <Flex>
-                    <Flex.Item>
-                        <Checkbox.AgreeItem>
+                    <Flex.Item className={'agreement'}>
+                        <Checkbox.AgreeItem onChange={this.changeAgreement}>
                             我已同意定金不退
                         </Checkbox.AgreeItem>
                     </Flex.Item>
                 </Flex>
-                <div className='pay-tip'>请在15分钟内完成支付，否则届时系统将关闭该订单。</div>
+                {/*<div className='pay-tip'>请在15分钟内完成支付，否则届时系统将关闭该订单。</div>*/}
 
                 <div className='pay-button' onClick={this.pay}>确认支付</div>
             </div>
         )
     }
 }
+
+export default WithFullSize(PayOrder)

src/components/deposit-pay-order/index.scss

 .pay-order {
     width: 100%;
+    height: calc(100% - 44px);
     background-color: #f5f5f5;
-    margin-bottom: 50px;
 
     .order-number {
         background-color: #fff;
@@ -74,12 +74,25 @@
             display: block;
         }
 
-        .am-checkbox-agree .am-checkbox{
-            left: unset;
-            right: 10px;
+    }
+
+    .agreement {
+        margin-top: 8px;
+        background: #fff;
+
+        .am-checkbox-agree{
+            .am-checkbox {
+                left: unset;
+                right: 6px;
+            }
+            .am-checkbox-agree-label{
+                margin-left: 3px;
+            }
         }
+
     }
 
+
     .pay-tip {
         width: 100%;
         height: 30px;
@@ -226,7 +239,8 @@
                     background-color: rgba(224, 46, 36, 0.6);
                 }
             }
-            .price-des{
+
+            .price-des {
                 color: #999;
                 font-size: 11px;
             }