Skip to content

M
mr-julyedu
Commit d4e680ee by wangshuo
Options

合并dev分支

parents 99d545a8 5aef9c96
Showing with 309 additions and 148 deletions
src/common/OrderList/index.js
......@@ -13,13 +13,13 @@ import './orderlist.scss';
*/
const OrderItem = ({ info, tab, children, src, ...restProps }) => {
const OrderItem = ({ info, tab, children, ...restProps }) => {
return (
<div className='public-list-item'>
<div className="public-content">
{tab}
<div className="public-cover" >
<img src={src} alt="" />
<img src={restProps.image_name} alt="" />
</div>
{info}
</div>
......
src/components/order/index.js
import React, { Component } from 'react';
import { Flex, NavBar, List } 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,8 +61,13 @@ function OrderList(props) {
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
<Link to='/coupons'>
<Flex justify='between'>
<span>优惠券</span>
<span>无</span>
</Flex>
</Link>
</Item>
</List>
</div>
</OrderItem>
......@@ -76,87 +82,170 @@ class Order extends Component {
constructor(props) {
super(props);
this.state = {
perfect: true
perfect: this.props.location.state,
user_account: 0.00,
total_sale: 0.00,
discount: 0.00,
useBalance: false,
orderList: [],
}
}
handleClick = () => {
console.log(1);
// 提交订单
submitOrder = () => {
const {
perfect,
total,
discount
} = this.state;
if (!perfect) {
Toast.info('请完善报名信息！');
}
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
// 使用余额
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" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
{
!this.state.perfect &&
<Link to='/orderinfo' className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</Link>
}
{
this.state.perfect &&
<div className="order-information2">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
}
<div className="order-list">
<OrderList list={mockData}/>
{
!this.state.perfect &&
<Link to='/orderinfo' className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</Link>
}
{
this.state.perfect &&
<div className="order-information2">
<WingBlank>
<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">{`姓名：${perfect.real_name}`}</div>
<div>{`电话：${perfect.cellphone}`}</div>
</Flex>
<Flex align='start' className="order-cell">
<div>{`QQ：${perfect.qq}`}</div>
</Flex>
</Flex>
</WingBlank>
</div>
}
<div className="order-list">
<OrderList list={orderList} />
</div>
<div className="order-balance">
<List>
<Item
className="order-prefer-text"
>
<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">{`${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_sale}`}</span>
</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>
</Item>
</List>
<div className="order-preprice">
<span className="order-preprice-title">已优惠:</span>
<span className="order-preprice-price">{`¥${discount}`}</span>
</div>
<div className="order-bar">
<div className="order-course">
<span className="order-course-text">2门课程</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>
</div>
<div className="order-preprice">
<span className="order-preprice-title">已优惠:</span>
<span className="order-preprice-price">¥ 200.50</span>
</div>
</div>
<button type="button" className="order-button">
<span className="order-button-text">提交订单</span>
</div>
{
perfect ? (
<button type="button" className="order-button has-info">
<span className="order-button-text" onClick={this.submitOrder}>提交订单</span>
</button>
</div>
</Flex.Item>
</Flex>
</div>
) : (
)
}
<button type="button" className="order-button">
<span className="order-button-text" onClick={this.submitOrder}>提交订单</span>
</button>
)
}
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
......
src/components/order/order.scss
......@@ -31,21 +31,40 @@
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;
.user-icon {
font-size: 28px;
}
.name {
margin-bottom: 10px;
.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 {
font-size: 22px !important;
margin-bottom: 0px;
......@@ -61,7 +80,7 @@
.order-list {
margin-top: 8px;
background-color: $white;
background-color: #F5F5F5;
.public-content {
padding: 10px 15px;
}
......@@ -72,13 +91,18 @@
height: 22px;
line-height: 22px;
margin-left: 10px;
font-size: $font_16;
font-size: $font_14;
color: $color_555;
}
.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;
......@@ -88,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;
......@@ -170,6 +189,9 @@
-webkit-text-size-adjust: 100%;
border: 1px solid transparent;
}
.has-info {
background-color: #FF3131;
}
.v-list-item {
margin-top: 8px;
......@@ -181,6 +203,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 { Formik, Field, Form, withFormik } from 'formik';
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
const InnerForm = ({
values,
errors,
touched,
setFieldValue,
handleBlur,
handleSubmit,
isSubmitting,
}) => (
<form>
<InputItem
clear
name="real_name"
onChange={(value) => setFieldValue('real_name', value)}
placeholder="请输入您的真实姓名"
>姓名</InputItem>
<InputItem
clear
type='phone'
name='cellphone'
placeholder="请输入您的手机号码"
onChange={(value) => setFieldValue('cellphone', value)}
>电话</InputItem>
<InputItem
clear
name='qq'
placeholder="请输入您的QQ号码"
maxLength='15'
onChange={(value) => setFieldValue('qq', value)}
>QQ</InputItem>
<div style={{ marginTop: '21px' }}>
<WingBlank>
<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" }}
style={{ "height": "44px", backgroundColor: '#F7F9FC' }}
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>
</div>
</Flex.Item>
</Flex>
)
}
}
</NavBar>
<MyForm history={this.props.history} />
</div>
)
}
};
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