合并dev分支

src/common/OrderList/index.js

@@ -13,13 +13,13 @@ import './orderlist.scss';
  */
 
 
-const OrderItem = ({ info, tab, children, src, ...restProps }) => {
+const OrderItem = ({ info, tab, children, ...restProps }) => {
     return (
             <div className='public-list-item'>
                 <div className="public-content">
                     {tab}
                     <div className="public-cover" >
-                        <img src={src} alt="" />
+                        <img src={restProps.image_name} alt="" />
                     </div>
                     {info}
                 </div>

src/components/order/order.scss

@@ -31,21 +31,40 @@
     background-size: 80px;
   }
 
-  .order-cell {
-    width: 50%;
-    height: 45px;
-    font-size: $font_14;
-    color: $color_333;
-    margin-left: 20px;
-    line-height: 20px;
-    display: inline-block;
-    vertical-align: middle;
+  .order-information2 {
+    height: 80px;
+    background-color: #FFF;
+    margin-top: 8px;
+    position: relative;
+
+    .user-icon {
+      font-size: 28px;
+    }
 
-    .name {
-      margin-bottom: 10px;
+    .order-cell {
+      height: 50px;
+      font-size: 13px;
+      color: $color_333;
+      line-height: 20px;
+  
+      .name {
+        margin-bottom: 10px;
+      }
     }
   }
 
+  .order-information2::before {
+    content: '';
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 2px;
+    position: absolute;
+    background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
+    background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
+    background-size: 80px;
+  }
+
   .order-addsize {
     font-size: 22px !important;
     margin-bottom: 0px;
@@ -61,7 +80,7 @@
 
   .order-list {
     margin-top: 8px;
-    background-color: $white;
+    background-color: #F5F5F5;
     .public-content {
       padding: 10px 15px;
     }
@@ -72,13 +91,18 @@
     height: 22px;
     line-height: 22px;
     margin-left: 10px;
-    font-size: $font_16;
+    font-size: $font_14;
     color: $color_555;
   }
 
   .order-info {
     color: $color_666;
     font-size: $font_14;
+    min-width: 160px;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 
     .order-title {
       height: 16px;
@@ -88,16 +112,11 @@
     }
 
     .order-content {
-      margin-top: 10px;
       color: $color_666;
       font-size: $font_14;
       line-height: 18px;
     }
 
-    .order-des {
-      margin-top: 10px;
-    }
-
     .order-newprice {
       color: $redprice;
       font-size: $font_16;
@@ -170,6 +189,9 @@
     -webkit-text-size-adjust: 100%;
     border: 1px solid transparent;
   }
+  .has-info {
+    background-color: #FF3131;
+  }
 
   .v-list-item {
     margin-top: 8px;
@@ -181,6 +203,9 @@
   }
 
   .order-prefer {
+    .am-list-content {
+      font-size: 15px !important;
+    }
     .am-list-line {
       padding: 0 15px;
     }

src/components/order/orderinfo.js

 import React, { Component } from 'react';
-import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank } from 'antd-mobile';
+import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
+import { Formik, Field, Form, withFormik } from 'formik';
 
-class orderinfo extends Component {
-  render() {
-    const { getFieldProps } = this.props.form;
-    return (
-      <Flex>
-            <Flex.Item>
+const InnerForm = ({
+    values,
+    errors,
+    touched,
+    setFieldValue,
+    handleBlur,
+    handleSubmit,
+    isSubmitting,
+}) => (
+        <form>
+            <InputItem
+                clear
+                name="real_name"
+                onChange={(value) => setFieldValue('real_name', value)}
+                placeholder="请输入您的真实姓名"
+            >姓名</InputItem>
+            <InputItem
+                clear
+                type='phone'
+                name='cellphone'
+                placeholder="请输入您的手机号码"
+                onChange={(value) => setFieldValue('cellphone', value)}
+            >电话</InputItem>
+            <InputItem
+                clear
+                name='qq'
+                placeholder="请输入您的QQ号码"
+                maxLength='15'
+                onChange={(value) => setFieldValue('qq', value)}
+            >QQ</InputItem>
+
+            <div style={{ marginTop: '21px' }}>
+                <WingBlank>
+                    <Button type='primary' onClick={handleSubmit}>确认</Button>
+                </WingBlank>
+            </div>
+        </form>
+    );
+
+const MyForm = withFormik({
+    mapPropsToValues: props => ({ real_name: '', cellphone: '', qq: '' }),
+    validate: (values, props) => {
+        const errors = {};
+        return errors;
+    },
+    handleSubmit: (
+        values,
+        FormBag
+    ) => {
+        if (!values.real_name) {
+            Toast.info('请输入姓名！', undefined, undefined, false);
+            return;
+        }
+        if (!values.cellphone) {
+            Toast.info('请输入手机号！', undefined, undefined, false);
+            return;
+        } else if (!/1\d{10}/g.test(values.cellphone.replace(/\s+/g, ''))) {
+            Toast.info('请输入正确的手机号！', undefined, undefined, false);
+            return;
+        }
+        if (!values.qq) {
+            Toast.info('请输入QQ号！', undefined, undefined, false);
+            return;
+        } else if (!/\d{5,}/g.test(values.qq)) {
+            Toast.info('请输入正确QQ号！', undefined, undefined, false);
+            return;
+        }
+        FormBag.props.history.push({
+            pathname: '/order',
+            state: values
+        });
+    },
+})(InnerForm);
+
+class Orderinfo extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <div>
                 <NavBar
-                    style={{ "height": "44px" }}
+                    style={{ "height": "44px", backgroundColor: '#F7F9FC' }}
                     className="order-tab"
                     mode="light"
                     icon={<i className="iconfont iconiconfront-68"></i>}
                 >
                     报名信息
-                </NavBar>
-                <div>
-                    <List>
-                        <InputItem
-                            {...getFieldProps('autofocus')}
-                            clear
-                            placeholder="请输入您的真实姓名"
-                            ref={el => this.autoFocusInst = el}
-                        >电话</InputItem>
-                        <InputItem
-                            {...getFieldProps('focus')}
-                            clear
-                            placeholder="请输入您的手机号码"
-                            ref={el => this.inputRef = el}
-                        >姓名</InputItem>
-                        <InputItem
-                            {...getFieldProps('focus')}
-                            clear
-                            placeholder="请输入您的QQ号码"
-                            ref={el => this.inputRef = el}
-                        >QQ</InputItem>
-                    </List>
-                    <WhiteSpace />
-                    <div style={{marginTop: '21px'}}>
-                        <WingBlank>
-                            <Button type="primary">确认</Button>
-                        </WingBlank>
-                    </div>
-                   
-                </div>
-            </Flex.Item>
-      </Flex>
-    )
-  }
-}
+                    </NavBar>
+                <MyForm history={this.props.history} />
+            </div>
+        )
+    }
 
+};
 
-export default orderinfo;
\ No newline at end of file
+export default Orderinfo;
\ No newline at end of file