Skip to content

M
mr-julyedu
Commit b15d5864 by wangshuo
Options

支付页面 组件修改 分享赚钱

parent d68ca51e
Showing with 281 additions and 46 deletions
src/components/order/index.js
...@@ -3,7 +3,7 @@ import { Flex, NavBar, List, WingBlank, Toast } from 'antd-mobile'; ...@@ -3,7 +3,7 @@ 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 { http, api } from "@/utils";
import {throttle} from 'lodash'; import { throttle } from 'lodash';
import "./order.scss" import "./order.scss"
...@@ -15,19 +15,22 @@ function OrderList(props) { ...@@ -15,19 +15,22 @@ function OrderList(props) {
<div> <div>
{ {
listData.map((item, index) => { listData.map((item, index) => {
const { is_coupon, course_id, image_name, price1, price0, simpledescription, course_title, coupon_num, coupon_desc } = item;
const Info = ( const Info = (
<div className="order-info"> <div className="order-info">
<p className='order-title' style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.course_title}</p> <Link to={`/detail?id=${course_id}`}><p className='order-title' style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{course_title}</p></Link>
<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-content' style={{ WebkitBoxOrient: 'vertical', WebkitLineClamp: '2', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box' }}>{simpledescription}</p>
<p className='order-des'> <p className='order-des'>
<span className='order-newprice'>¥{item.price1}</span> <span className='order-newprice'>¥{price1}</span>
<span className='order-price'>¥{item.price0}</span> <span className='order-price'>¥{price0}</span>
</p> </p>
</div> </div>
) )
return ( return (
<OrderItem {...item} key={index} info={Info}> <OrderItem {...item} src={image_name} id={course_id} key={index} info={Info}>
{
is_coupon === 1 ? (
<div className="order-prefer"> <div className="order-prefer">
<List key={index}> <List key={index}>
<Item <Item
...@@ -36,13 +39,16 @@ function OrderList(props) { ...@@ -36,13 +39,16 @@ function OrderList(props) {
> >
<Link to='/coupons'> <Link to='/coupons'>
<Flex justify='between'> <Flex justify='between'>
<span style={{color: '#333', fontSize: '15px'}}>优惠券</span> <span style={{ color: '#333', fontSize: '15px' }}>优惠券</span>
<span style={{fontSize: '14px', color: '#999999'}}>{item.coupon_num === 0 ? '无' : `${item.coupon_num}张可用`}</span> <span style={{ fontSize: '14px', color: '#999999' }}>{!coupon_desc ? (coupon_num === 0 ? '无' : `${coupon_num}张可用`) : (coupon_desc)}</span>
</Flex> </Flex>
</Link> </Link>
</Item> </Item>
</List> </List>
</div> </div>
) : null
}
</OrderItem> </OrderItem>
) )
}) })
...@@ -57,7 +63,7 @@ class Order extends Component { ...@@ -57,7 +63,7 @@ class Order extends Component {
this.state = { this.state = {
perfect: this.props.location.state, perfect: this.props.location.state,
user_account: 0.00, // 账户余额 user_account: 0.00, // 账户余额
total_sale: 0.00, // 需要支付总金额 total: 0.00, // 需要支付总金额
discount: 0.00, // discount: 0.00, //
useBalance: false, useBalance: false,
orderList: [], orderList: [],
...@@ -70,10 +76,17 @@ class Order extends Component { ...@@ -70,10 +76,17 @@ class Order extends Component {
if (!this.state.perfect) { if (!this.state.perfect) {
Toast.info('请完善报名信息！'); Toast.info('请完善报名信息！');
} }
if(this.state.orderList.lengtjh === 0) { if (this.state.orderList.lengtjh === 0) {
Toast.info('没有要提交的订单！'); Toast.info('没有要提交的订单！');
return; return;
} }
http.post(`${api.home}/m/order/submitOrder`, { is_deduction: this.state.useBalance }).then(res => {
if(res.data.code !== 200) {
return;
}
console.log(res);
});
} }
// 使用余额 // 使用余额
useBalance = () => { useBalance = () => {
...@@ -81,32 +94,32 @@ class Order extends Component { ...@@ -81,32 +94,32 @@ class Order extends Component {
this.setState({ this.setState({
useBalance: !useBalanceFlag useBalance: !useBalanceFlag
}); });
if(!useBalanceFlag){ if (!useBalanceFlag) {
this.cacheObj = { this.cacheObj = {
...this.state ...this.state
} }
} }
// console.log(useBalance); // console.log(useBalance);
let totalSale = parseFloat(this.cacheObj.total_sale), let totalSale = parseFloat(this.cacheObj.total),
userAccount = parseFloat(this.cacheObj.user_account); userAccount = parseFloat(this.cacheObj.user_account);
if(!useBalanceFlag) { if (!useBalanceFlag) {
if(totalSale > userAccount) { if (totalSale > userAccount) {
this.setState({ this.setState({
offset: userAccount.toFixed(2), offset: userAccount.toFixed(2),
total_sale: (totalSale - userAccount).toFixed(2), total: (totalSale - userAccount).toFixed(2),
discount: userAccount.toFixed(2), discount: userAccount.toFixed(2),
}); });
}else{ } else {
this.setState({ this.setState({
offset: totalSale.toFixed(2), offset: totalSale.toFixed(2),
total_sale: 0, total: 0,
discount: totalSale.toFixed(2), discount: totalSale.toFixed(2),
}); });
} }
}else{ } else {
this.setState({ this.setState({
offset: this.cacheObj.offset, offset: this.cacheObj.offset,
total_sale: this.cacheObj.total_sale, total: this.cacheObj.total,
discount: this.cacheObj.discount, discount: this.cacheObj.discount,
}); });
} }
...@@ -118,24 +131,22 @@ class Order extends Component { ...@@ -118,24 +131,22 @@ class Order extends Component {
}; };
// 展示余额抵扣规则 // 展示余额抵扣规则
showInfo = () => { showInfo = () => {
this.setState((prevState)=>({ this.setState((prevState) => ({
info: !prevState.info info: !prevState.info
})); }));
}; };
componentDidMount() { componentDidMount() {
http.get(`${api.home}/m/order/preorder`).then((res) => { http.get(`${api.home}/m/order/preorder`).then((res) => {
console.log(res);
if (res.data.code !== 200) { if (res.data.code !== 200) {
return; return;
} }
const { course, total_sale, user_account, user_info, discount } = res.data.data; const { course, total, user_account, user_info, discount } = res.data.data;
this.dataCache = JSON.parse(JSON.stringify(res.data.data)); this.dataCache = JSON.parse(JSON.stringify(res.data.data));
console.log(course);
this.setState({ this.setState({
perfect: user_info, perfect: user_info,
orderList: course, orderList: course,
user_account, user_account,
total_sale, total,
discount, discount,
}); });
}) })
...@@ -150,7 +161,7 @@ class Order extends Component { ...@@ -150,7 +161,7 @@ class Order extends Component {
perfect, perfect,
orderList, orderList,
user_account, user_account,
total_sale, total,
discount, discount,
useBalance, useBalance,
info, info,
...@@ -204,7 +215,7 @@ class Order extends Component { ...@@ -204,7 +215,7 @@ class Order extends Component {
</div> </div>
} }
<div className="order-list"> <div className="order-list">
<OrderList list={orderList} compute={this.computedMoney}/> <OrderList list={orderList} compute={this.computedMoney} />
</div> </div>
<div className="order-balance"> <div className="order-balance">
<List> <List>
...@@ -217,16 +228,15 @@ class Order extends Component { ...@@ -217,16 +228,15 @@ class Order extends Component {
<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> <i className="iconfont iconiconfront-22" onClick={this.showInfo}></i>
</Flex> </Flex>
<div>
{ {
useBalance ? ( useBalance ? (
<div>
<span style={{ color: '#FF2121', fontSize: '15px', marginRight: "6px" }}>{`-${offset}`}</span> <span style={{ color: '#FF2121', fontSize: '15px', marginRight: "6px" }}>{`-${offset}`}</span>
<i className="iconfont icondanseshixintubiao-5" onClick={throttle(this.useBalance, 600)}></i> ) : null
</div>
) : (
<i className="iconfont iconiconfront-3" onClick={this.useBalance}></i>
)
} }
<i className={`iconfont ${useBalance ? 'icondanseshixintubiao-5' : 'iconiconfront-3'} `} onClick={throttle(this.useBalance, 600)}></i>
</div>
</Flex> </Flex>
</Item> </Item>
</List> </List>
...@@ -238,7 +248,7 @@ class Order extends Component { ...@@ -238,7 +248,7 @@ class Order extends Component {
<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_sale}`}</span> <span className="order-amount-price">{`￥${total}`}</span>
</div> </div>
<div className="order-preprice"> <div className="order-preprice">
<span className="order-preprice-title">已优惠:</span> <span className="order-preprice-title">已优惠:</span>
......
src/components/order/payOrder/PayOrder.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Flex, WingBlank, WhiteSpace, List, Radio } from 'antd-mobile'; import { Flex, WingBlank, WhiteSpace, List, Radio } from 'antd-mobile';
import {api, http} from '@/utils'; import {api, http} from '@/utils';
import { OrderItem } from '@/common/index'; import { OrderItem, HeaderBar } from '@/common/index';
import {Link} from 'react-router-dom';
import './PayOrder.scss'; import './PayOrder.scss';
import {VList} from '@/common';
const Item = List.Item; const Item = List.Item;
const Brief = Item.Brief; const Brief = Item.Brief;
...@@ -14,22 +16,51 @@ let mockData = [ ...@@ -14,22 +16,51 @@ let mockData = [
{ value: 2, label: '花呗分期', icon: 'iconhuabei'}, { value: 2, label: '花呗分期', icon: 'iconhuabei'},
]; ];
let mockList = [
{
"course_id":110,
"course_title":"机器学习 第九期 [加送CPU和GPU双云平台，继续实战作业考试]",
"simpledescription":"BAT工业实战，作业、考试1V1批改",
"image_name":"https://www.julyedu.com/Public/Image/8bd265fcd8.png",
"price0":"899.00",
"price1":"469.00",
"sale_price":"469.00",
"is_coupon":1,
"coupon_num":0
},
{
"course_id":101,
"course_title":"语音识别技术的前世今生 [CMU王赟博士主讲，双旦期间1元秒杀]",
"simpledescription":"解秘历代语音识别系统背后的工作原理",
"image_name":"https://www.julyedu.com/Public/Image/80706a4749.png",
"price0":"400.00",
"price1":"99.00",
"sale_price":"99.00",
"is_coupon":1,
"coupon_num":0
}
]
export default class PayOrder extends Component { export default class PayOrder extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
money: 1000.00, money: 1000.00,
payType: 0, payType: 0,
checkPeriod: false,
singleMoney: 0,
periodNumber: 0,
} }
} }
onChange = (value) => { onChange = (value) => {
console.log(value);
this.setState({ this.setState({
payType: value, payType: value,
}); });
}; };
componentDidMount() { componentDidMount() {
http.get(`${api.home}/m/order/preorder`).then((res) => { http.post(`${api.home}/m/order/detail`, {order_id: ''}).then((res) => {
console.log(res); console.log(res);
if (res.data.code !== 200) { if (res.data.code !== 200) {
return; return;
...@@ -45,9 +76,10 @@ export default class PayOrder extends Component { ...@@ -45,9 +76,10 @@ export default class PayOrder extends Component {
}) })
} }
render() { render() {
const { money, payType } = this.state; const { money, payType, checkPeriod, singleMoney, periodNumber } = this.state;
return ( return (
<div className='pay-order'> <div className='pay-order'>
<HeaderBar title='确认支付' arrow={true}></HeaderBar>
<WhiteSpace size='sm'></WhiteSpace> <WhiteSpace size='sm'></WhiteSpace>
<div className='order-number'> <div className='order-number'>
<WingBlank> <WingBlank>
...@@ -58,6 +90,28 @@ export default class PayOrder extends Component { ...@@ -58,6 +90,28 @@ export default class PayOrder extends Component {
</WingBlank> </WingBlank>
</div> </div>
<WhiteSpace size='md'></WhiteSpace> <WhiteSpace size='md'></WhiteSpace>
{
mockList.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title text-overflow-one'>
<Link to={`/detail?id=${item.course_id}`}>{item.course_title}</Link>
</p>
<p className='order-content text-overflow-2'>{item.simpledescription}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.price1}</span>
<span className='order-price'>¥{item.price0}</span>
</p>
</div>
)
return (
<VList key={index} img={item.image_name}
id={item.course_id}
info={Info}></VList>
)
})
}
<WhiteSpace size='md'></WhiteSpace>
<div className='order-number'> <div className='order-number'>
<WingBlank> <WingBlank>
<Flex justify='between' align='center' style={{ height: '44px' }}> <Flex justify='between' align='center' style={{ height: '44px' }}>
...@@ -75,7 +129,24 @@ export default class PayOrder extends Component { ...@@ -75,7 +129,24 @@ export default class PayOrder extends Component {
key={i.value} key={i.value}
checked={payType === i.value} checked={payType === i.value}
onChange={() => this.onChange(i.value)}> onChange={() => this.onChange(i.value)}>
{i.label} {/* {i.label} */}
{
i.value === 2 ? (
<Flex direction='column' align='start' style={{width: '100%', marginTop: '6px'}}>
<Flex direction='row' justify='between' style={{width: '100%', paddingRight: '30px'}}>
<span style={{color: '#555555', fontSize: '14px'}}>{i.label}</span>
{
checkPeriod ? (
<span style={{color: '#333333', fontSize: '12px'}}>{`${singleMoney}元 × ${periodNumber}期`}</span>
) : null
}
</Flex>
<Flex justify='start'>
<span style={{color: '#999999', fontSize: '12px'}}>支付上限受限于您的花呗额度</span>
</Flex>
</Flex>
) : (i.label)
}
</RadioItem> </RadioItem>
))} ))}
</List> </List>
......
src/components/order/payOrder/PayOrder.scss
.pay-order { .pay-order {
width: 100%; width: 100%;
height: 100vh;
background-color: #f5f5f5; background-color: #f5f5f5;
margin-bottom: 50px;
.order-number { .order-number {
background-color: #fff; background-color: #fff;
...@@ -86,5 +86,124 @@ ...@@ -86,5 +86,124 @@
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
background-color: #18b4ed; background-color: #18b4ed;
z-index: 9;
}
.order-info {
position: relative;
flex: 1;
.order-title {
font-size: 16px;
color: $color_333;
height: 16px;
line-height: 16px;
}
.order-content {
font-size: 14px;
color: $color_666;
margin-top: 14px;
line-height: 18px;
}
.order-des {
height: 24px;
line-height: 33px;
.order-newprice {
font-size: 16px;
color: $redprice;
}
.order-price {
font-size: 12px;
color: $color_999;
margin-left: 15px;
text-decoration: line-through;
}
}
}
.v-list-item {
padding: 10px 15px;
background-color: #FFF;
border-bottom: 1px solid #E7EAF1;
.content {
border: none;
.cover {
flex: inherit;
width: 42.2%;
img {
width: 100%;
}
.course-status {
background-color: rgba(224, 46, 36, 0.6);
}
}
}
.info {
width: 52.3%;
position: relative;
display: block;
.title {
font-size: 16px;
color: $color_333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 16px;
line-height: 16px;
}
.contact {
font-size: 14px;
color: $color_666;
margin-top: 14px;
}
.des {
position: absolute;
bottom: 0;
.course-price {
.price {
color: $red;
font-size: 12px;
}
.new {
color: $red;
font-size: 16px;
}
.old {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
width: 61px;
height: 18px;
background-color: $bg_active;
border-radius: 9px;
color: $white;
font-size: 12px;
text-align: center;
line-height: 18px;
}
}
}
} }
} }
src/components/scholarship/CategoryItem/CategoryItem.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import {Flex, WingBlank} from 'antd-mobile'; import {Flex, WingBlank} from 'antd-mobile';
import {Link} from 'react-router-dom'
import './CategoryItem.scss'; import './CategoryItem.scss';
export default class CategoryItem extends Component { export default class CategoryItem extends Component {
...@@ -7,10 +8,11 @@ export default class CategoryItem extends Component { ...@@ -7,10 +8,11 @@ export default class CategoryItem extends Component {
super(props); super(props);
} }
render() { render() {
const {course_title, price1, price0, first_level_tip, image_name, upgrade, upgradeImg} = this.props; const {course_title, price1, price0, first_level_tip, image_name, upgrade, upgradeImg, course_id, share} = this.props;
return ( return (
<WingBlank> <WingBlank>
<div className={'scholarship-category'}> <div className={'scholarship-category'}>
<Link to={`/detail?id=${course_id}`} >
<div className={'imageContainer'}> <div className={'imageContainer'}>
<img className={'image'} src={image_name}></img> <img className={'image'} src={image_name}></img>
{ {
...@@ -19,11 +21,12 @@ export default class CategoryItem extends Component { ...@@ -19,11 +21,12 @@ export default class CategoryItem extends Component {
) : (null) ) : (null)
} }
</div> </div>
</Link>
<div className={'content'}> <div className={'content'}>
<Flex direction='column' justify='around' align='start' style={{height: '90px'}}> <Flex direction='column' justify='around' align='start' style={{height: '90px'}}>
<p className={'text-overflow-one'}>{course_title}</p> <Link to={`/detail?id=${course_id}`} ><p className={'text-overflow-one'}>{course_title}</p></Link>
<p><span className={'priceNow'}>{`￥${price1}`}</span><span className={'pricePrimary'}>{`￥${price0}`}</span></p> <p><span className={'priceNow'}>{`￥${price1}`}</span><span className={'pricePrimary'}>{`￥${price0}`}</span></p>
<div className={'shareMoney'} >{`分享赚${first_level_tip}元`}</div> <div className={'shareMoney'} onClick={()=>{share(course_id, first_level_tip)}}>{`分享赚${first_level_tip}元`}</div>
</Flex> </Flex>
</div> </div>
</div> </div>
......
src/components/scholarship/index.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Tabs, WhiteSpace, List, Flex, WingBlank, Modal, ListView } from 'antd-mobile'; import { Tabs, WhiteSpace, List, Flex, WingBlank, Modal, ListView, Toast } from 'antd-mobile';
import './scholarship.scss'; import './scholarship.scss';
import { is_weixin, http, api } from "@/utils"; import { is_weixin, http, api } from "@/utils";
import CategoryItem from './CategoryItem/CategoryItem.js'; import CategoryItem from './CategoryItem/CategoryItem.js';
...@@ -76,7 +76,20 @@ class _Scholarship extends Component { ...@@ -76,7 +76,20 @@ class _Scholarship extends Component {
}; };
// 保存二维码 TODO 失败 // 保存二维码 TODO 失败
saveImage = () => { saveImage = () => {
this.downImage.current.click();
};
// 分销赚钱
shareCategory = (course_id, money) => {
const {hasError, data: {uid}} = this.props.user;
if(hasError) {
Toast.info("请登录后分享！", undefined, undefined, false);
return;
}
http.post(`${api.home}/dist/createCode`, {course_id}).then((res) => {
if (res.data.code === 200) {
this.props.history.push(`/shareposter?courseId=${course_id}&dist_first=${money}&uid=${uid}&dist_code=${res.data.data.code}`)
}
})
}; };
onEndReached = () => { onEndReached = () => {
if (this.state.isLoading || !this.state.hasMore) { if (this.state.isLoading || !this.state.hasMore) {
...@@ -147,7 +160,7 @@ class _Scholarship extends Component { ...@@ -147,7 +160,7 @@ class _Scholarship extends Component {
rowData, rowData,
rowID rowID
) => { ) => {
return <CategoryItem {...rowData} key={rowID} />; return <CategoryItem {...rowData} key={rowID} share={this.shareCategory}/>;
}; };
const row1 = ( const row1 = (
...@@ -314,7 +327,7 @@ class _Scholarship extends Component { ...@@ -314,7 +327,7 @@ class _Scholarship extends Component {
</Flex> </Flex>
</Modal> </Modal>
<Modal {/* <Modal
visible={drawCashHtml} visible={drawCashHtml}
transparent transparent
maskClosable={true} maskClosable={true}
...@@ -333,6 +346,26 @@ class _Scholarship extends Component { ...@@ -333,6 +346,26 @@ class _Scholarship extends Component {
<Flex justify='center'> <Flex justify='center'>
<img src={codeSrc} style={{ width: '90px', height: '90px' }} alt="二维码" /> <img src={codeSrc} style={{ width: '90px', height: '90px' }} alt="二维码" />
</Flex> </Flex>
</Modal> */}
<Modal
visible={drawCashHtml}
transparent
maskClosable={true}
onClose={this.closeModal}
style={{ width: '300px'}}
>
<p style={{color: '#333333', fontSize: '16px', textAlign: 'center'}}>提现</p>
<WhiteSpace size='lg'></WhiteSpace>
<p style={{ fontSize: '12px', color: '#666666', textAlign: 'left' }}>
提现金额将通过微信零钱转账给您，请微信扫码关注【七月在线】服务号后申请提现。
</p>
<WhiteSpace size='lg'></WhiteSpace>
<Flex justify='center'>
<img src={codeSrc} style={{ width: '90px', height: '90px' }} alt="二维码" />
</Flex>
<WhiteSpace size='sm'></WhiteSpace>
<Flex justify='center' style={{color: '#333333', fontSize: '12px'}}>长按二维码保存到相册</Flex>
<i onClick={this.closeModal} className='iconfont iconiconfront-2' style={{zIndex: 99, fontSize: '40px', color: '#fff', position: "fixed", top: '70%', left: '50%', transform: 'translateX(-50%)'}}></i>
</Modal> </Modal>
<Modal <Modal
......
src/components/scholarship/scholarship.scss
...@@ -30,7 +30,6 @@ ...@@ -30,7 +30,6 @@
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
list-style: 30px;
} }
.login-check { .login-check {
width: 90px; width: 90px;
......
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