Skip to content

M
mr-julyedu
Commit 5aef9c96 by wangshuo
Options

订单页以及接口

parent f6faedcc
Showing with 189 additions and 100 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/index.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Flex, NavBar, List, WingBlank } from 'antd-mobile'; import { Flex, NavBar, List, WingBlank, Toast } 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';
import { http, api } from "@/utils";
import "./order.scss" import "./order.scss"
...@@ -11,7 +12,7 @@ const mockData = [ ...@@ -11,7 +12,7 @@ const mockData = [
{ {
title: '三月面试求职班', title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg', imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行', content: '涵盖ML主流算法及其应用-文字超过一行换行然后呢再多呢是不是就出省略号了',
newprice: '980', newprice: '980',
price: '1280', price: '1280',
id: '110' id: '110'
...@@ -43,11 +44,11 @@ function OrderList(props) { ...@@ -43,11 +44,11 @@ function OrderList(props) {
listData.map((item, index) => { listData.map((item, index) => {
const Info = ( const Info = (
<div className="order-info"> <div className="order-info">
<p className='order-title'>{item.title}</p> <p className='order-title' style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.course_title}</p>
<p className='order-content'>{item.content}</p> <p className='order-content' style={{ WebkitBoxOrient: 'vertical', WebkitLineClamp: '2', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box' }}>{item.simpledescription}</p>
<p className='order-des'> <p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span> <span className='order-newprice'>¥{item.price0}</span>
<span className='order-price'>¥{item.price}</span> <span className='order-price'>¥{item.price1}</span>
</p> </p>
</div> </div>
) )
...@@ -60,10 +61,12 @@ function OrderList(props) { ...@@ -60,10 +61,12 @@ function OrderList(props) {
arrow="horizontal" arrow="horizontal"
onClick={() => { }} onClick={() => { }}
> >
<Link to='/coupons'>
<Flex justify='between'> <Flex justify='between'>
<span>优惠券</span> <span>优惠券</span>
<span>无</span> <span>无</span>
</Flex> </Flex>
</Link>
</Item> </Item>
</List> </List>
</div> </div>
...@@ -78,28 +81,75 @@ function OrderList(props) { ...@@ -78,28 +81,75 @@ 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: false, perfect: this.props.location.state,
total: 0.00, user_account: 0.00,
total_sale: 0.00,
discount: 0.00, discount: 0.00,
useBalance: false,
orderList: [],
} }
} }
handleClick = () => { // 提交订单
console.log(1); submitOrder = () => {
}
render() {
const { const {
perfect,
total, total,
discount discount
} = this.state; } = this.state;
if (!perfect) {
Toast.info('请完善报名信息！');
}
}
// 使用余额
useBalance = () => {
this.setState((prevState) => ({
useBalance: !prevState.useBalance
}));
this.computedMoney();
}
// 计算金额、优惠金额、优惠券等
computedMoney = () => {
};
// 展示余额抵扣规则
showInfo = () => {
};
componentDidMount() {
http.get(`${api.home}/m/order/preorder`).then((res) => {
if (res.code !== 200) {
return;
}
const { course, total_sale, user_account, user_info } = res.data.data;
console.log(course);
this.setState({
perfect: user_info,
orderList: course
});
})
// // 获取报名信息 获取课程列表 获取用户账户余额
// Promise.race([http.get(), http.get(), http.get()]).then(res=>{
// });
};
render() {
const {
perfect,
user_account,
total_sale,
discount,
useBalance,
orderList,
} = this.state;
return ( return (
<div className="order-wrapper"> <div className="order-wrapper">
<Flex> <Flex>
<Flex.Item> <Flex.Item>
<NavBar <NavBar
style={{"height": "44px"}} 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>}
...@@ -118,16 +168,16 @@ class Order extends Component { ...@@ -118,16 +168,16 @@ class Order extends Component {
this.state.perfect && this.state.perfect &&
<div className="order-information2"> <div className="order-information2">
<WingBlank> <WingBlank>
<Flex align='center' justify='between' style={{height: '80px'}}> <Flex align='center' justify='between' style={{ height: '80px' }}>
<i className="iconfont iconiconfront-20 user-icon"></i> <i className="iconfont iconiconfront-20 user-icon"></i>
<Flex direction='column' justify='between' align='start' className="order-cell"> <Flex direction='column' justify='between' align='start' className="order-cell">
<div className="name">姓名: 张三</div> <div className="name">{`姓名：${perfect.real_name}`}</div>
<div>电话: 13266532323</div> <div>{`电话：${perfect.cellphone}`}</div>
</Flex> </Flex>
<Flex align='start' className="order-cell"> <Flex align='start' className="order-cell">
<div>QQ: 1084251364</div> <div>{`QQ：${perfect.qq}`}</div>
</Flex> </Flex>
</Flex> </Flex>
...@@ -135,38 +185,60 @@ class Order extends Component { ...@@ -135,38 +185,60 @@ class Order extends Component {
</div> </div>
} }
<div className="order-list"> <div className="order-list">
<OrderList list={mockData}/> <OrderList list={orderList} />
</div> </div>
<div className="order-balance"> <div className="order-balance">
<List> <List>
<Item <Item
onClick={() => { }}
className="order-prefer-text" className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
> >
余额抵扣 <Flex justify='between'>
<span className="order-balanceprice"> (账户余额: <i className="order-money">1元</i>)</span> <Flex align='center'>
<i className="iconfont iconiconfront-22"></i> <span>余额抵扣</span>
<span className="order-balanceprice"> (账户余额: <i className="order-money">{`${user_account}元`}</i>)</span>
<i className="iconfont iconiconfront-22" onClick={this.showInfo}></i>
</Flex>
{
useBalance ? (
<div>
<span style={{ color: '#FF2121', fontSize: '15px', marginRight: "6px" }}>{`-${user_account}`}</span>
<i className="iconfont icondanseshixintubiao-5" onClick={this.useBalance}></i>
</div>
) : (
<i className="iconfont iconiconfront-3" onClick={this.useBalance}></i>
)
}
</Flex>
</Item> </Item>
</List> </List>
</div> </div>
<div className="order-bar"> <div className="order-bar">
<div className="order-course"> <div className="order-course">
<span className="order-course-text">{`${mockData.length}门课程`}</span> <span className="order-course-text">{`${orderList.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">{`￥${total}`}</span> <span className="order-amount-price">{`￥${total_sale}`}</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">{`¥${discount}`}</span> <span className="order-preprice-price">{`¥${discount}`}</span>
</div> </div>
</div> </div>
{
perfect ? (
<button type="button" className="order-button has-info">
<span className="order-button-text" onClick={this.submitOrder}>提交订单</span>
</button>
) : (
<button type="button" className="order-button"> <button type="button" className="order-button">
<span className="order-button-text">提交订单</span> <span className="order-button-text" onClick={this.submitOrder}>提交订单</span>
</button> </button>
)
}
</div> </div>
</Flex.Item> </Flex.Item>
</Flex> </Flex>
......
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);
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 <InputItem
{...getFieldProps('realName', {
rules: [
{ required: true, message: '请输入您的姓名！' },
],
})}
clear clear
name="real_name"
onChange={(value) => setFieldValue('real_name', value)}
placeholder="请输入您的真实姓名" placeholder="请输入您的真实姓名"
>姓名</InputItem> >姓名</InputItem>
<InputItem <InputItem
{...getFieldProps('phone', {
rules: [
{ required: true, message: '请输入手机号！' },
{ pattern: /^1\d{10}$/, message: '请输入正确手机号码!' }
]
})}
clear clear
type='phone'
name='cellphone'
placeholder="请输入您的手机号码" placeholder="请输入您的手机号码"
maxLength='11' onChange={(value) => setFieldValue('cellphone', value)}
>电话</InputItem> >电话</InputItem>
<InputItem <InputItem
{...getFieldProps('qqNumber', {
rules: [
{ required: true, message: '请输入QQ号！' },
{ pattern: /^\d{5,}$/, message: '请输入正确QQ号码!' }
]
})}
clear clear
name='qq'
placeholder="请输入您的QQ号码" placeholder="请输入您的QQ号码"
maxLength='15' maxLength='15'
onChange={(value) => setFieldValue('qq', value)}
>QQ</InputItem> >QQ</InputItem>
</List>
<WhiteSpace />
<div style={{ marginTop: '21px' }}> <div style={{ marginTop: '21px' }}>
<WingBlank> <WingBlank>
<Button type="primary" onClick={this.submit}>确认</Button> <Button type='primary' onClick={handleSubmit}>确认</Button>
</WingBlank> </WingBlank>
</div> </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() {
return (
<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> </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