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 { Flex, NavBar, List } from 'antd-mobile';
import { Flex, NavBar, List, WingBlank } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import { Link } from 'react-router-dom'
......@@ -60,7 +60,10 @@ function OrderList(props) {
arrow="horizontal"
onClick={() => { }}
>
优惠券
<Flex justify='between'>
<span>优惠券</span>
<span>无</span>
</Flex>
</Item>
</List>
</div>
......@@ -75,14 +78,22 @@ function OrderList(props) {
class Order extends Component {
constructor(props) {
super(props);
console.log(this.props);
this.state = {
perfect: true
perfect: false,
total: 0.00,
discount: 0.00,
}
}
handleClick = () => {
console.log(1);
}
render() {
const {
total,
discount
} = this.state;
return (
<div className="order-wrapper">
<Flex>
......@@ -106,15 +117,21 @@ class Order extends Component {
{
this.state.perfect &&
<div className="order-information2">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
<WingBlank>
<Flex align='center' justify='between' style={{height: '80px'}}>
<i className="iconfont iconiconfront-20 user-icon"></i>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
<Flex direction='column' justify='between' align='start' className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</Flex>
<Flex align='start' className="order-cell">
<div>QQ: 1084251364</div>
</Flex>
</Flex>
</WingBlank>
</div>
}
<div className="order-list">
......@@ -135,16 +152,16 @@ class Order extends Component {
</div>
<div className="order-bar">
<div className="order-course">
<span className="order-course-text">2门课程</span>
<span className="order-course-text">{`${mockData.length}门课程`}</span>
</div>
<div className="order-bar-text">
<div className="order-amount">
<span className="order-amount-title">合计:</span>
<span className="order-amount-price">¥ 30.50</span>
<span className="order-amount-price">{`￥${total}`}</span>
</div>
<div className="order-preprice">
<span className="order-preprice-title">已优惠:</span>
<span className="order-preprice-price">¥ 200.50</span>
<span className="order-preprice-price">{`¥${discount}`}</span>
</div>
</div>
<button type="button" className="order-button">
......
src/components/order/order.scss
......@@ -31,19 +31,38 @@
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;
.name {
margin-bottom: 10px;
.user-icon {
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 {
......@@ -61,7 +80,7 @@
.order-list {
margin-top: 8px;
background-color: $white;
background-color: #F5F5F5;
.public-content {
padding: 10px 15px;
}
......@@ -72,7 +91,7 @@
height: 22px;
line-height: 22px;
margin-left: 10px;
font-size: $font_16;
font-size: $font_14;
color: $color_555;
}
......@@ -181,6 +200,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 { createForm } from 'rc-form';
class orderinfo extends Component {
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>}
>
报名信息
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() {
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('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>
<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>
</div>
</Flex.Item>
</Flex>
)
}
</Flex.Item>
</Flex>
)
}
}
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