Skip to content

M
mr-julyedu
Commit 7f8561ae by wangshuo
Options

订单支付页面

parent d4e680ee
Showing with 347 additions and 63 deletions
src/common/OrderList/orderlist.scss
......@@ -37,8 +37,6 @@
}
.order-des {
position: absolute;
bottom: 0;
height: 24px;
line-height: 33px;
......
src/components/Index/index.js
......@@ -7,6 +7,7 @@ import createStyle from './createStyle'
import LazyLoad from 'react-lazy-load'
import {http, api} from '@/utils'
import LiveRoom from './liveRoom'
import {Link} from "react-router-dom";
const animateTypes = Swiper.animateTypes
......@@ -35,7 +36,7 @@ class Index extends Component {
{
'src': require('./image/zjxj_icon.png'),
'name': '赚奖学金',
'href':'/scholarship'
'href':''
},
{
'src': require('./image/mryt_icon.png'),
......@@ -134,8 +135,10 @@ class Index extends Component {
}
<div className="category all-course">
<Link to='/classify'>
<p>查看全部课程</p>
<span>数学基础、数学结构、大数据实战、Python...</span>
</Link>
</div>
{/* 直播间预约 */}
......@@ -156,9 +159,9 @@ function TopSwiper({bannerList}) {
<Swiper type={animateTypes.CARD} loop={true} height={168} autoPlay={true} typePro createStyle={createStyle}>
{bannerList && bannerList.length > 0 && bannerList.map((item, index) => {
return (
<a href={item.jump_url} key={index}>
<Link to={item.jump_url} key={index}>
<img className="item" src={item.name} alt=""/>
</a>
</Link>
)
})
}
......@@ -184,9 +187,9 @@ function CourseList({modules}) {
{
!isOdd &&
<div className="category-vip">
<a href="/#">
<Link to={`/detail?id=${modules.list[0].course_id}`}>
<img src={modules.list[0].course_img_small} alt=""/>
</a>
</Link>
</div>
}
{
......
src/components/order/index.js
......@@ -3,39 +3,12 @@ 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 {throttle} from 'lodash';
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行然后呢再多呢是不是就出省略号了',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
......@@ -47,8 +20,8 @@ function OrderList(props) {
<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.price0}</span>
<span className='order-price'>¥{item.price1}</span>
<span className='order-newprice'>¥{item.price1}</span>
<span className='order-price'>¥{item.price0}</span>
</p>
</div>
)
......@@ -63,8 +36,8 @@ function OrderList(props) {
>
<Link to='/coupons'>
<Flex justify='between'>
<span>优惠券</span>
<span>无</span>
<span style={{color: '#333', fontSize: '15px'}}>优惠券</span>
<span style={{fontSize: '14px', color: '#999999'}}>{item.coupon_num === 0 ? '无' : `${item.coupon_num}张可用`}</span>
</Flex>
</Link>
</Item>
......@@ -83,29 +56,60 @@ class Order extends Component {
super(props);
this.state = {
perfect: this.props.location.state,
user_account: 0.00,
total_sale: 0.00,
discount: 0.00,
user_account: 0.00, // 账户余额
total_sale: 0.00, // 需要支付总金额
discount: 0.00, //
useBalance: false,
orderList: [],
info: false,
offset: 0,
}
}
// 提交订单
submitOrder = () => {
const {
perfect,
total,
discount
} = this.state;
if (!perfect) {
if (!this.state.perfect) {
Toast.info('请完善报名信息！');
}
if(this.state.orderList.lengtjh === 0) {
Toast.info('没有要提交的订单！');
return;
}
}
// 使用余额
useBalance = () => {
this.setState((prevState) => ({
useBalance: !prevState.useBalance
}));
let useBalanceFlag = this.state.useBalance;
this.setState({
useBalance: !useBalanceFlag
});
if(!useBalanceFlag){
this.cacheObj = {
...this.state
}
}
// console.log(useBalance);
let totalSale = parseFloat(this.cacheObj.total_sale),
userAccount = parseFloat(this.cacheObj.user_account);
if(!useBalanceFlag) {
if(totalSale > userAccount) {
this.setState({
offset: userAccount.toFixed(2),
total_sale: (totalSale - userAccount).toFixed(2),
discount: userAccount.toFixed(2),
});
}else{
this.setState({
offset: totalSale.toFixed(2),
total_sale: 0,
discount: totalSale.toFixed(2),
});
}
}else{
this.setState({
offset: this.cacheObj.offset,
total_sale: this.cacheObj.total_sale,
discount: this.cacheObj.discount,
});
}
this.computedMoney();
}
// 计算金额、优惠金额、优惠券等
......@@ -114,18 +118,25 @@ class Order extends Component {
};
// 展示余额抵扣规则
showInfo = () => {
this.setState((prevState)=>({
info: !prevState.info
}));
};
componentDidMount() {
http.get(`${api.home}/m/order/preorder`).then((res) => {
if (res.code !== 200) {
console.log(res);
if (res.data.code !== 200) {
return;
}
const { course, total_sale, user_account, user_info } = res.data.data;
const { course, total_sale, user_account, user_info, discount } = res.data.data;
this.dataCache = JSON.parse(JSON.stringify(res.data.data));
console.log(course);
this.setState({
perfect: user_info,
orderList: course
orderList: course,
user_account,
total_sale,
discount,
});
})
......@@ -137,11 +148,13 @@ class Order extends Component {
render() {
const {
perfect,
orderList,
user_account,
total_sale,
discount,
useBalance,
orderList,
info,
offset,
} = this.state;
return (
......@@ -168,6 +181,11 @@ class Order extends Component {
this.state.perfect &&
<div className="order-information2">
<WingBlank>
<Link to={{
pathname: '/orderinfo',
state: this.state.perfect
}
} >
<Flex align='center' justify='between' style={{ height: '80px' }}>
<i className="iconfont iconiconfront-20 user-icon"></i>
......@@ -181,11 +199,12 @@ class Order extends Component {
</Flex>
</Flex>
</Link>
</WingBlank>
</div>
}
<div className="order-list">
<OrderList list={orderList} />
<OrderList list={orderList} compute={this.computedMoney}/>
</div>
<div className="order-balance">
<List>
......@@ -195,14 +214,14 @@ class Order extends Component {
<Flex justify='between'>
<Flex align='center'>
<span>余额抵扣</span>
<span className="order-balanceprice"> (账户余额: <i className="order-money">{`${user_account}元`}</i>)</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>
<span style={{ color: '#FF2121', fontSize: '15px', marginRight: "6px" }}>{`-${offset}`}</span>
<i className="iconfont icondanseshixintubiao-5" onClick={throttle(this.useBalance, 600)}></i>
</div>
) : (
<i className="iconfont iconiconfront-3" onClick={this.useBalance}></i>
......@@ -242,6 +261,19 @@ class Order extends Component {
</div>
</Flex.Item>
</Flex>
{
info ? (
<div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.8)', zIndex: '99' }}>
<div style={{ padding: '20px', backgroundColor: '#FFF', width: '300px', height: '170px', margin: '0 auto', position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}>
<Flex direction='column' justify='between' align='center' style={{ height: '100%' }}>
<p style={{ fontSize: '16px', color: '#333333' }}>余额抵扣说明</p>
<p style={{ lineHeight: '20px', fontSize: '13px', color: '#666666' }}>分销课程或者参与七月在线的相关活动，可获得资金奖励。账户资金可直接提现，也可抵扣课程费用。</p>
<div onClick={this.showInfo} style={{ width: '260px', height: '30px', lineHeight: '30px', textAlign: 'center', borderRadius: '3px', border: '1px solid #0099FF', color: '#0099FF', fontSize: '15px' }}>知道了</div>
</Flex>
</div>
</div>
) : null
}
</div>
)
......
src/components/order/order.scss
.order-wrapper {
width: 100%;
height: 100vh;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
......
src/components/order/orderDes.js 0 → 100644
import React, { Component } from 'react'
export default class orderDes extends Component {
render() {
return (
<div>
</div>
)
}
}
function orderDes(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<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.price1}</span>
<span className='order-price'>¥{item.price0}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
<Link to='/coupons'>
<Flex justify='between'>
<span style={{color: '#333', fontSize: '15px'}}>优惠券</span>
<span style={{fontSize: '14px', color: '#999999'}}>{item.coupon_num === 0 ? '无' : `${item.coupon_num}张可用`}</span>
</Flex>
</Link>
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
\ No newline at end of file
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';
import { http, api } from "@/utils";
const InnerForm = ({
values,
......@@ -17,6 +18,7 @@ const InnerForm = ({
name="real_name"
onChange={(value) => setFieldValue('real_name', value)}
placeholder="请输入您的真实姓名"
value={values.real_name}
>姓名</InputItem>
<InputItem
clear
......@@ -24,6 +26,7 @@ const InnerForm = ({
name='cellphone'
placeholder="请输入您的手机号码"
onChange={(value) => setFieldValue('cellphone', value)}
value={values.cellphone}
>电话</InputItem>
<InputItem
clear
......@@ -31,6 +34,7 @@ const InnerForm = ({
placeholder="请输入您的QQ号码"
maxLength='15'
onChange={(value) => setFieldValue('qq', value)}
value={values.qq}
>QQ</InputItem>
<div style={{ marginTop: '21px' }}>
......@@ -42,7 +46,7 @@ const InnerForm = ({
);
const MyForm = withFormik({
mapPropsToValues: props => ({ real_name: '', cellphone: '', qq: '' }),
mapPropsToValues: props => ({ ...props.userInfo }),
validate: (values, props) => {
const errors = {};
return errors;
......@@ -69,10 +73,17 @@ const MyForm = withFormik({
Toast.info('请输入正确QQ号！', undefined, undefined, false);
return;
}
http.post(`${api.home}/m/order/saveUserInfo`, values).then(res=>{
if(res.data.code !== 200) {
Toast.info(res.data.msg, undefined, undefined, false);
return;
}
Toast.info('保存成功！', undefined, undefined, false);
FormBag.props.history.push({
pathname: '/order',
state: values
});
});
},
})(InnerForm);
......@@ -80,6 +91,7 @@ class Orderinfo extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
......@@ -91,7 +103,7 @@ class Orderinfo extends Component {
>
报名信息
</NavBar>
<MyForm history={this.props.history} />
<MyForm history={this.props.history} userInfo={this.props.location.state}/>
</div>
)
}
......
src/components/order/payOrder/PayOrder.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WingBlank, WhiteSpace, List, Radio } from 'antd-mobile';
import {api, http} from '@/utils';
import { OrderItem } from '@/common/index';
import './PayOrder.scss';
const Item = List.Item;
const Brief = Item.Brief;
const RadioItem = Radio.RadioItem;
let mockData = [
{ value: 0, label: '支付宝', icon: 'iconzhifubaox-'},
{ value: 1, label: '微信支付', icon: 'iconweixinzhifu'},
{ value: 2, label: '花呗分期', icon: 'iconhuabei'},
];
export default class PayOrder extends Component {
constructor(props) {
super(props);
this.state = {
money: 1000.00,
payType: 0,
}
}
onChange = (value) => {
this.setState({
payType: value,
});
};
componentDidMount() {
http.get(`${api.home}/m/order/preorder`).then((res) => {
console.log(res);
if (res.data.code !== 200) {
return;
}
const { course, total_sale, user_account, user_info, discount } = res.data.data;
// this.setState({
// perfect: user_info,
// orderList: course,
// user_account,
// total_sale,
// discount,
// });
})
}
render() {
const { money, payType } = this.state;
return (
<div className='pay-order'>
<WhiteSpace size='sm'></WhiteSpace>
<div className='order-number'>
<WingBlank>
<Flex justify='between' align='center' style={{ height: '44px' }}>
<span>订单号</span>
<span className='number'>20160815850565</span>
</Flex>
</WingBlank>
</div>
<WhiteSpace size='md'></WhiteSpace>
<div className='order-number'>
<WingBlank>
<Flex justify='between' align='center' style={{ height: '44px' }}>
<span>支付金额</span>
<span className='money'>{`￥${money}`}</span>
</Flex>
</WingBlank>
</div>
<WhiteSpace size='md'></WhiteSpace>
<List renderHeader={() => '支付方式'} className='pay-type-list'>
{mockData.map(i => (
<RadioItem
thumb={<i className={`iconfont ${i.icon} ${payType === i.value ? 'checked' : ''}`}></i>}
key={i.value}
checked={payType === i.value}
onChange={() => this.onChange(i.value)}>
{i.label}
</RadioItem>
))}
</List>
<div className='pay-tip'>请在24小时内完成支付，否则届时系统将关闭该订单。</div>
<div className='pay-button'>确认支付</div>
</div>
)
}
}
src/components/order/payOrder/PayOrder.scss 0 → 100644
.pay-order {
width: 100%;
height: 100vh;
background-color: #f5f5f5;
.order-number {
background-color: #fff;
span {
font-size: 15px;
color: #333333;
}
.number {
font-size: 12px;
color: #666666;
}
.money {
color: #ff3131;
}
}
.pay-type-list {
.am-list-header {
color: #333333;
font-size: 15px;
background-color: #fff;
}
.iconzhifubaox- {
font-size: 22px;
color: #01aaef;
}
.iconweixinzhifu {
font-size: 22px;
color: #3baf34;
}
.iconhuabei {
font-size: 22px;
color: #01aaef;
}
.am-radio-inner {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #C1C1C1;
}
.am-radio-inner:after{
display: block;
border-color: #FFF;
top: 0;
right: 6px;
}
.am-radio.am-radio-checked .am-radio-inner{
background-color: #009AFF;
border-radius: 50%;
width: 20px;
height: 20px;
}
.am-radio.am-radio-checked .am-radio-inner:after{
display: block;
}
}
.pay-tip{
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 12px;
color: #FF3131;
background-color: #FFF4CE;
}
.pay-button {
position: fixed;
bottom: 0;
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
color: #fff;
font-size: 18px;
background-color: #18b4ed;
}
}
src/router/router-config.js
......@@ -16,7 +16,8 @@ import ShopCart from '@/components/shopCart';
import BargainMiddlePage from '@/components/bargainMiddlePage';
import Passport from '@/components/passport';
import {Scholarship} from '@/components/scholarship/index';
import DrawDocument from '@/components/scholarship/DrawDocument/DrawDocument'
import DrawDocument from '@/components/scholarship/DrawDocument/DrawDocument';
import PayOrder from '@/components/order/payOrder/PayOrder'
const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons'))
const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
......@@ -108,4 +109,8 @@ export default [
path: '/shareposter',
component: sharePoster
},
{
path: '/payOrder',
component: PayOrder
},
]
\ 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