Skip to content

M
mr-julyedu
Commit 5aef9c96 by wangshuo
Options

订单页以及接口

parent f6faedcc
Showing with 103 additions and 86 deletions
src/common/OrderList/index.js
...@@ -14,12 +14,15 @@ import './orderlist.scss'; ...@@ -14,12 +14,15 @@ import './orderlist.scss';
const OrderItem = ({ info, tab, children, ...restProps }) => { const OrderItem = ({ info, tab, children, ...restProps }) => {
// tab 没有值
// info 是文字信息
// children 是 order-prefer优惠券
return ( return (
<div className='public-list-item'> <div className='public-list-item'>
<div className="public-content"> <div className="public-content">
{tab} {tab}
<div className="public-cover" > <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> </div>
{info} {info}
</div> </div>
......
src/components/order/order.scss
...@@ -98,6 +98,11 @@ ...@@ -98,6 +98,11 @@
.order-info { .order-info {
color: $color_666; color: $color_666;
font-size: $font_14; font-size: $font_14;
min-width: 160px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-around;
.order-title { .order-title {
height: 16px; height: 16px;
...@@ -107,16 +112,11 @@ ...@@ -107,16 +112,11 @@
} }
.order-content { .order-content {
margin-top: 10px;
color: $color_666; color: $color_666;
font-size: $font_14; font-size: $font_14;
line-height: 18px; line-height: 18px;
} }
.order-des {
margin-top: 10px;
}
.order-newprice { .order-newprice {
color: $redprice; color: $redprice;
font-size: $font_16; font-size: $font_16;
...@@ -189,6 +189,9 @@ ...@@ -189,6 +189,9 @@
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
border: 1px solid transparent; border: 1px solid transparent;
} }
.has-info {
background-color: #FF3131;
}
.v-list-item { .v-list-item {
margin-top: 8px; margin-top: 8px;
......
src/components/order/orderinfo.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank, Toast } 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 { const InnerForm = ({
submit = () => { values,
this.props.form.validateFields((error, value) => { errors,
console.log(error, value); touched,
if (error !== null) { setFieldValue,
if (error.realName) { handleBlur,
Toast.info(error.realName.errors[0].message, undefined, undefined, false); handleSubmit,
return; isSubmitting,
} }) => (
if (error.phone) { <form>
Toast.info(error.phone.errors[0].message, undefined, undefined, false); <InputItem
return; clear
} name="real_name"
if (error.qqNumber) { onChange={(value) => setFieldValue('real_name', value)}
Toast.info(error.qqNumber.errors[0].message, undefined, undefined, false); placeholder="请输入您的真实姓名"
return; >姓名</InputItem>
} <InputItem
} clear
this.props.history.push({ type='phone'
pathname: '/order', name='cellphone'
state: value 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() { render() {
const { getFieldProps } = this.props.form;
return ( return (
<Flex> <div>
<Flex.Item> <NavBar
<NavBar style={{ "height": "44px", backgroundColor: '#F7F9FC' }}
style={{ "height": "44px" }} className="order-tab"
className="order-tab" mode="light"
mode="light" icon={<i className="iconfont iconiconfront-68"></i>}
icon={<i className="iconfont iconiconfront-68"></i>} >
> 报名信息
报名信息 </NavBar>
</NavBar> <MyForm history={this.props.history} />
<div> </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>
) )
} }
}
};
export default orderinfo; export default Orderinfo;
\ No newline at end of file \ No newline at end of file
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