Skip to content

M
mr-julyedu
Commit 2a0ea353 by wangshuo
Options

订单页

parent 91b43ac2
Showing with 105 additions and 30 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'}}>
<i className="iconfont iconiconfront-20 user-icon"></i>
<Flex direction='column' justify='between' align='start' className="order-cell">
<div className="name">姓名: 张三</div> <div className="name">姓名: 张三</div>
<div>电话: 13266532323</div> <div>电话: 13266532323</div>
</Flex>
</div> <Flex align='start' className="order-cell">
<div className="order-cell">
<div>QQ: 1084251364</div> <div>QQ: 1084251364</div>
</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,20 +31,39 @@ ...@@ -31,20 +31,39 @@
background-size: 80px; background-size: 80px;
} }
.order-information2 {
height: 80px;
background-color: #FFF;
margin-top: 8px;
position: relative;
.user-icon {
font-size: 28px;
}
.order-cell { .order-cell {
width: 50%; height: 50px;
height: 45px; font-size: 13px;
font-size: $font_14;
color: $color_333; color: $color_333;
margin-left: 20px;
line-height: 20px; line-height: 20px;
display: inline-block;
vertical-align: middle;
.name { .name {
margin-bottom: 10px; 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 {
font-size: 22px !important; font-size: 22px !important;
...@@ -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 {
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
});
});
}
render() { render() {
const { getFieldProps } = this.props.form; const { getFieldProps } = this.props.form;
return ( return (
...@@ -19,28 +42,41 @@ class orderinfo extends Component { ...@@ -19,28 +42,41 @@ class orderinfo extends Component {
<div> <div>
<List> <List>
<InputItem <InputItem
{...getFieldProps('autofocus')} {...getFieldProps('realName', {
rules: [
{ required: true, message: '请输入您的姓名！' },
],
})}
clear clear
placeholder="请输入您的真实姓名" placeholder="请输入您的真实姓名"
ref={el => this.autoFocusInst = el} >姓名</InputItem>
>电话</InputItem>
<InputItem <InputItem
{...getFieldProps('focus')} {...getFieldProps('phone', {
rules: [
{ required: true, message: '请输入手机号！' },
{ pattern: /^1\d{10}$/, message: '请输入正确手机号码!' }
]
})}
clear clear
placeholder="请输入您的手机号码" placeholder="请输入您的手机号码"
ref={el => this.inputRef = el} maxLength='11'
>姓名</InputItem> >电话</InputItem>
<InputItem <InputItem
{...getFieldProps('focus')} {...getFieldProps('qqNumber', {
rules: [
{ required: true, message: '请输入QQ号！' },
{ pattern: /^\d{5,}$/, message: '请输入正确QQ号码!' }
]
})}
clear clear
placeholder="请输入您的QQ号码" placeholder="请输入您的QQ号码"
ref={el => this.inputRef = el} maxLength='15'
>QQ</InputItem> >QQ</InputItem>
</List> </List>
<WhiteSpace /> <WhiteSpace />
<div style={{marginTop: '21px'}}> <div style={{ marginTop: '21px' }}>
<WingBlank> <WingBlank>
<Button type="primary">确认</Button> <Button type="primary" onClick={this.submit}>确认</Button>
</WingBlank> </WingBlank>
</div> </div>
......
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