Skip to content

M
mr-julyedu
Commit 2a0ea353 by wangshuo
Options

订单页

parent 91b43ac2
Showing with 147 additions and 72 deletions
src/components/order/index.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile'; import { Flex, NavBar, List, WingBlank } from 'antd-mobile';
import { OrderItem } from '@/common/index' import { OrderItem } from '@/common/index'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
...@@ -60,7 +60,10 @@ function OrderList(props) { ...@@ -60,7 +60,10 @@ function OrderList(props) {
arrow="horizontal" arrow="horizontal"
onClick={() => { }} onClick={() => { }}
> >
优惠券 <Flex justify='between'>
<span>优惠券</span>
<span>无</span>
</Flex>
</Item> </Item>
</List> </List>
</div> </div>
...@@ -75,14 +78,22 @@ function OrderList(props) { ...@@ -75,14 +78,22 @@ function OrderList(props) {
class Order extends Component { class Order extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
console.log(this.props);
this.state = { this.state = {
perfect: true perfect: false,
total: 0.00,
discount: 0.00,
} }
} }
handleClick = () => { handleClick = () => {
console.log(1); console.log(1);
} }
render() { render() {
const {
total,
discount
} = this.state;
return ( return (
<div className="order-wrapper"> <div className="order-wrapper">
<Flex> <Flex>
...@@ -106,15 +117,21 @@ class Order extends Component { ...@@ -106,15 +117,21 @@ class Order extends Component {
{ {
this.state.perfect && this.state.perfect &&
<div className="order-information2"> <div className="order-information2">
<i className="iconfont iconiconfront-20"></i> <WingBlank>
<div className="order-cell"> <Flex align='center' justify='between' style={{height: '80px'}}>
<div className="name">姓名: 张三</div> <i className="iconfont iconiconfront-20 user-icon"></i>
<div>电话: 13266532323</div>
</div> <Flex direction='column' justify='between' align='start' className="order-cell">
<div className="order-cell"> <div className="name">姓名: 张三</div>
<div>QQ: 1084251364</div> <div>电话: 13266532323</div>
</div> </Flex>
<Flex align='start' className="order-cell">
<div>QQ: 1084251364</div>
</Flex>
</Flex>
</WingBlank>
</div> </div>
} }
<div className="order-list"> <div className="order-list">
...@@ -135,16 +152,16 @@ class Order extends Component { ...@@ -135,16 +152,16 @@ class Order extends Component {
</div> </div>
<div className="order-bar"> <div className="order-bar">
<div className="order-course"> <div className="order-course">
<span className="order-course-text">2门课程</span> <span className="order-course-text">{`${mockData.length}门课程`}</span>
</div> </div>
<div className="order-bar-text"> <div className="order-bar-text">
<div className="order-amount"> <div className="order-amount">
<span className="order-amount-title">合计:</span> <span className="order-amount-title">合计:</span>
<span className="order-amount-price">¥ 30.50</span> <span className="order-amount-price">{`￥${total}`}</span>
</div> </div>
<div className="order-preprice"> <div className="order-preprice">
<span className="order-preprice-title">已优惠:</span> <span className="order-preprice-title">已优惠:</span>
<span className="order-preprice-price">¥ 200.50</span> <span className="order-preprice-price">{`¥${discount}`}</span>
</div> </div>
</div> </div>
<button type="button" className="order-button"> <button type="button" className="order-button">
......
src/components/order/order.scss
...@@ -31,19 +31,38 @@ ...@@ -31,19 +31,38 @@
background-size: 80px; background-size: 80px;
} }
.order-cell { .order-information2 {
width: 50%; height: 80px;
height: 45px; background-color: #FFF;
font-size: $font_14; margin-top: 8px;
color: $color_333; position: relative;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.name { .user-icon {
margin-bottom: 10px; font-size: 28px;
} }
.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 { .order-addsize {
...@@ -61,7 +80,7 @@ ...@@ -61,7 +80,7 @@
.order-list { .order-list {
margin-top: 8px; margin-top: 8px;
background-color: $white; background-color: #F5F5F5;
.public-content { .public-content {
padding: 10px 15px; padding: 10px 15px;
} }
...@@ -72,7 +91,7 @@ ...@@ -72,7 +91,7 @@
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
margin-left: 10px; margin-left: 10px;
font-size: $font_16; font-size: $font_14;
color: $color_555; color: $color_555;
} }
...@@ -181,6 +200,9 @@ ...@@ -181,6 +200,9 @@
} }
.order-prefer { .order-prefer {
.am-list-content {
font-size: 15px !important;
}
.am-list-line { .am-list-line {
padding: 0 15px; padding: 0 15px;
} }
......
src/components/order/orderinfo.js
import React, { Component } from 'react'; 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 { createForm } from 'rc-form'; import { createForm } from 'rc-form';
class orderinfo extends Component { class orderinfo extends Component {
render() { submit = () => {
const { getFieldProps } = this.props.form; this.props.form.validateFields((error, value) => {
return ( console.log(error, value);
<Flex> if (error !== null) {
<Flex.Item> if (error.realName) {
<NavBar Toast.info(error.realName.errors[0].message, undefined, undefined, false);
style={{ "height": "44px" }} return;
className="order-tab" }
mode="light" if (error.phone) {
icon={<i className="iconfont iconiconfront-68"></i>} 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
});
});
}
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> </NavBar>
<div> <div>
<List> <List>
<InputItem <InputItem
{...getFieldProps('autofocus')} {...getFieldProps('realName', {
clear rules: [
placeholder="请输入您的真实姓名" { required: true, message: '请输入您的姓名！' },
ref={el => this.autoFocusInst = el} ],
>电话</InputItem> })}
<InputItem clear
{...getFieldProps('focus')} placeholder="请输入您的真实姓名"
clear >姓名</InputItem>
placeholder="请输入您的手机号码" <InputItem
ref={el => this.inputRef = el} {...getFieldProps('phone', {
>姓名</InputItem> rules: [
<InputItem { required: true, message: '请输入手机号！' },
{...getFieldProps('focus')} { pattern: /^1\d{10}$/, message: '请输入正确手机号码!' }
clear ]
placeholder="请输入您的QQ号码" })}
ref={el => this.inputRef = el} clear
>QQ</InputItem> placeholder="请输入您的手机号码"
</List> maxLength='11'
<WhiteSpace /> >电话</InputItem>
<div style={{marginTop: '21px'}}> <InputItem
<WingBlank> {...getFieldProps('qqNumber', {
<Button type="primary">确认</Button> rules: [
</WingBlank> { 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> </div>
</Flex.Item>
</div> </Flex>
</Flex.Item> )
</Flex> }
)
}
} }
const Basicorderinfo = createForm()(orderinfo); const Basicorderinfo = createForm()(orderinfo);
......
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