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';
const OrderItem = ({ info, tab, children, ...restProps }) => {
// tab 没有值
// info 是文字信息
// children 是 order-prefer优惠券
return (
<div className='public-list-item'>
<div className="public-content">
{tab}
<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>
{info}
</div>
......
src/components/order/index.js
import React, { Component } from 'react';
import { Flex, NavBar, List, WingBlank } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import { Link } from 'react-router-dom'
import { Flex, NavBar, List, WingBlank, Toast } from 'antd-mobile';
import { OrderItem } from '@/common/index';
import { Link } from 'react-router-dom';
import { http, api } from "@/utils";
import "./order.scss"
......@@ -11,7 +12,7 @@ const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
content: '涵盖ML主流算法及其应用-文字超过一行换行然后呢再多呢是不是就出省略号了',
newprice: '980',
price: '1280',
id: '110'
......@@ -43,11 +44,11 @@ function OrderList(props) {
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-title' style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.course_title}</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'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
<span className='order-newprice'>¥{item.price0}</span>
<span className='order-price'>¥{item.price1}</span>
</p>
</div>
)
......@@ -60,10 +61,12 @@ function OrderList(props) {
arrow="horizontal"
onClick={() => { }}
>
<Link to='/coupons'>
<Flex justify='between'>
<span>优惠券</span>
<span>无</span>
</Flex>
</Link>
</Item>
</List>
</div>
......@@ -78,28 +81,75 @@ function OrderList(props) {
class Order extends Component {
constructor(props) {
super(props);
console.log(this.props);
this.state = {
perfect: false,
total: 0.00,
perfect: this.props.location.state,
user_account: 0.00,
total_sale: 0.00,
discount: 0.00,
useBalance: false,
orderList: [],
}
}
handleClick = () => {
console.log(1);
}
render() {
// 提交订单
submitOrder = () => {
const {
perfect,
total,
discount
} = 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 (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
......@@ -118,16 +168,16 @@ class Order extends Component {
this.state.perfect &&
<div className="order-information2">
<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>
<Flex direction='column' justify='between' align='start' className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
<div className="name">{`姓名：${perfect.real_name}`}</div>
<div>{`电话：${perfect.cellphone}`}</div>
</Flex>
<Flex align='start' className="order-cell">
<div>QQ: 1084251364</div>
<div>{`QQ：${perfect.qq}`}</div>
</Flex>
</Flex>
......@@ -135,38 +185,60 @@ class Order extends Component {
</div>
}
<div className="order-list">
<OrderList list={mockData}/>
<OrderList list={orderList} />
</div>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice"> (账户余额: <i className="order-money">1元</i>)</span>
<i className="iconfont iconiconfront-22"></i>
<Flex justify='between'>
<Flex align='center'>
<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>
</List>
</div>
<div className="order-bar">
<div className="order-course">
<span className="order-course-text">{`${mockData.length}门课程`}</span>
<span className="order-course-text">{`${orderList.length}门课程`}</span>
</div>
<div className="order-bar-text">
<div className="order-amount">
<span className="order-amount-title">合计:</span>
<span className="order-amount-price">{`￥${total}`}</span>
<span className="order-amount-price">{`￥${total_sale}`}</span>
</div>
<div className="order-preprice">
<span className="order-preprice-title">已优惠:</span>
<span className="order-preprice-price">{`¥${discount}`}</span>
</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">
<span className="order-button-text">提交订单</span>
<span className="order-button-text" onClick={this.submitOrder}>提交订单</span>
</button>
)
}
</div>
</Flex.Item>
</Flex>
......
src/components/order/order.scss
......@@ -98,6 +98,11 @@
.order-info {
color: $color_666;
font-size: $font_14;
min-width: 160px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-around;
.order-title {
height: 16px;
......@@ -107,16 +112,11 @@
}
.order-content {
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des {
margin-top: 10px;
}
.order-newprice {
color: $redprice;
font-size: $font_16;
......@@ -189,6 +189,9 @@
-webkit-text-size-adjust: 100%;
border: 1px solid transparent;
}
.has-info {
background-color: #FF3131;
}
.v-list-item {
margin-top: 8px;
......
src/components/order/orderinfo.js
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
import { Formik, Field, Form, withFormik } from 'formik';
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() {
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>
const InnerForm = ({
values,
errors,
touched,
setFieldValue,
handleBlur,
handleSubmit,
isSubmitting,
}) => (
<form>
<InputItem
{...getFieldProps('realName', {
rules: [
{ required: true, message: '请输入您的姓名！' },
],
})}
clear
name="real_name"
onChange={(value) => setFieldValue('real_name', value)}
placeholder="请输入您的真实姓名"
>姓名</InputItem>
<InputItem
{...getFieldProps('phone', {
rules: [
{ required: true, message: '请输入手机号！' },
{ pattern: /^1\d{10}$/, message: '请输入正确手机号码!' }
]
})}
clear
type='phone'
name='cellphone'
placeholder="请输入您的手机号码"
maxLength='11'
onChange={(value) => setFieldValue('cellphone', value)}
>电话</InputItem>
<InputItem
{...getFieldProps('qqNumber', {
rules: [
{ required: true, message: '请输入QQ号！' },
{ pattern: /^\d{5,}$/, message: '请输入正确QQ号码!' }
]
})}
clear
name='qq'
placeholder="请输入您的QQ号码"
maxLength='15'
onChange={(value) => setFieldValue('qq', value)}
>QQ</InputItem>
</List>
<WhiteSpace />
<div style={{ marginTop: '21px' }}>
<WingBlank>
<Button type="primary" onClick={this.submit}>确认</Button>
<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() {
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>
</Flex.Item>
</Flex>
)
}
}
};
export default orderinfo;
\ No newline at end of file
export default Orderinfo;
\ 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