订单页以及接口

src/common/OrderList/index.js

@@ -14,12 +14,15 @@ import './orderlist.scss';
 
 
 const OrderItem = ({ info, tab, children, ...restProps }) => {
+    // tab 没有值
+    // info 是文字信息
+    // children 是 order-prefer优惠券
     return (
             <div className='public-list-item'>
                 <div className="public-content">
                     {tab}
                     <div className="public-cover" >
-                        <img src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg' alt="" />
+                        <img src={restProps.image_name} alt="" />
                     </div>
                     {info}
                 </div>

src/components/order/order.scss

@@ -98,6 +98,11 @@
   .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;
@@ -107,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;
@@ -189,6 +189,9 @@
     -webkit-text-size-adjust: 100%;
     border: 1px solid transparent;
   }
+  .has-info {
+    background-color: #FF3131;
+  }
 
   .v-list-item {
     margin-top: 8px;

src/components/order/orderinfo.js

 import React, { Component } from 'react';
 import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
+import { Formik, Field, Form, withFormik } from 'formik';
 
-class orderinfo extends Component {
-    submit = () => {
-        this.props.form.validateFields((error, value) => {
-            console.log(error, value);
-            if (error !== null) {
-                if (error.realName) {
-                    Toast.info(error.realName.errors[0].message, undefined, undefined, false);
-                    return;
-                }
-                if (error.phone) {
-                    Toast.info(error.phone.errors[0].message, undefined, undefined, false);
-                    return;
-                }
-                if (error.qqNumber) {
-                    Toast.info(error.qqNumber.errors[0].message, undefined, undefined, false);
-                    return;
-                }
-            }
-            this.props.history.push({
-                pathname: '/order',
-                state: value
-            });
+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() {
-        const { getFieldProps } = this.props.form;
         return (
-            <Flex>
-                <Flex.Item>
-                    <NavBar
-                        style={{ "height": "44px" }}
-                        className="order-tab"
-                        mode="light"
-                        icon={<i className="iconfont iconiconfront-68"></i>}
-                    >
-                        报名信息
-                </NavBar>
-                    <div>
-                        <List>
-                            <InputItem
-                                {...getFieldProps('realName', {
-                                    rules: [
-                                        { required: true, message: '请输入您的姓名！' },
-                                    ],
-                                })}
-                                clear
-                                placeholder="请输入您的真实姓名"
-                            >姓名</InputItem>
-                            <InputItem
-                                {...getFieldProps('phone', {
-                                    rules: [
-                                        { required: true, message: '请输入手机号！' },
-                                        { pattern: /^1\d{10}$/, message: '请输入正确手机号码!' }
-                                    ]
-                                })}
-                                clear
-                                placeholder="请输入您的手机号码"
-                                maxLength='11'
-                            >电话</InputItem>
-                            <InputItem
-                                {...getFieldProps('qqNumber', {
-                                    rules: [
-                                        { required: true, message: '请输入QQ号！' },
-                                        { pattern: /^\d{5,}$/, message: '请输入正确QQ号码!' }
-                                    ]
-                                })}
-                                clear
-                                placeholder="请输入您的QQ号码"
-                                maxLength='15'
-                            >QQ</InputItem>
-                        </List>
-                        <WhiteSpace />
-                        <div style={{ marginTop: '21px' }}>
-                            <WingBlank>
-                                <Button type="primary" onClick={this.submit}>确认</Button>
-                            </WingBlank>
-                        </div>
-
-                    </div>
-                </Flex.Item>
-            </Flex>
+            <div>
+                <NavBar
+                    style={{ "height": "44px", backgroundColor: '#F7F9FC' }}
+                    className="order-tab"
+                    mode="light"
+                    icon={<i className="iconfont iconiconfront-68"></i>}
+                >
+                    报名信息
+                    </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