Skip to content

M
mr-julyedu
Commit b15d5864 by wangshuo
Options

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

parent d68ca51e
Showing with 309 additions and 74 deletions
src/components/order/index.js
......@@ -3,7 +3,7 @@ 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 { throttle } from 'lodash';
import "./order.scss"
......@@ -15,34 +15,40 @@ function OrderList(props) {
<div>
{
listData.map((item, index) => {
const { is_coupon, course_id, image_name, price1, price0, simpledescription, course_title, coupon_num, coupon_desc } = item;
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>
<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' }}>{simpledescription}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.price1}</span>
<span className='order-price'>¥{item.price0}</span>
<span className='order-newprice'>¥{price1}</span>
<span className='order-price'>¥{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 {...item} src={image_name} id={course_id} key={index} info={Info}>
{
is_coupon === 1 ? (
<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' }}>{!coupon_desc ? (coupon_num === 0 ? '无' : `${coupon_num}张可用`) : (coupon_desc)}</span>
</Flex>
</Link>
</Item>
</List>
</div>
) : null
}
</OrderItem>
)
})
......@@ -57,7 +63,7 @@ class Order extends Component {
this.state = {
perfect: this.props.location.state,
user_account: 0.00, // 账户余额
total_sale: 0.00, // 需要支付总金额
total: 0.00, // 需要支付总金额
discount: 0.00, //
useBalance: false,
orderList: [],
......@@ -70,10 +76,17 @@ class Order extends Component {
if (!this.state.perfect) {
Toast.info('请完善报名信息！');
}
if(this.state.orderList.lengtjh === 0) {
if (this.state.orderList.lengtjh === 0) {
Toast.info('没有要提交的订单！');
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 = () => {
......@@ -81,32 +94,32 @@ class Order extends Component {
this.setState({
useBalance: !useBalanceFlag
});
if(!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) {
let totalSale = parseFloat(this.cacheObj.total),
userAccount = parseFloat(this.cacheObj.user_account);
if (!useBalanceFlag) {
if (totalSale > userAccount) {
this.setState({
offset: userAccount.toFixed(2),
total_sale: (totalSale - userAccount).toFixed(2),
total: (totalSale - userAccount).toFixed(2),
discount: userAccount.toFixed(2),
});
}else{
} else {
this.setState({
offset: totalSale.toFixed(2),
total_sale: 0,
total: 0,
discount: totalSale.toFixed(2),
});
}
}else{
} else {
this.setState({
offset: this.cacheObj.offset,
total_sale: this.cacheObj.total_sale,
total: this.cacheObj.total,
discount: this.cacheObj.discount,
});
}
......@@ -118,24 +131,22 @@ class Order extends Component {
};
// 展示余额抵扣规则
showInfo = () => {
this.setState((prevState)=>({
this.setState((prevState) => ({
info: !prevState.info
}));
};
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;
const { course, total, 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,
total,
discount,
});
})
......@@ -150,7 +161,7 @@ class Order extends Component {
perfect,
orderList,
user_account,
total_sale,
total,
discount,
useBalance,
info,
......@@ -186,25 +197,25 @@ class Order extends Component {
state: this.state.perfect
}
} >
<Flex align='center' justify='between' style={{ height: '80px' }}>
<i className="iconfont iconiconfront-20 user-icon"></i>
<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 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 align='start' className="order-cell">
<div>{`QQ：${perfect.qq}`}</div>
</Flex>
</Flex>
</Flex>
</Link>
</WingBlank>
</div>
}
<div className="order-list">
<OrderList list={orderList} compute={this.computedMoney}/>
<OrderList list={orderList} compute={this.computedMoney} />
</div>
<div className="order-balance">
<List>
......@@ -217,16 +228,15 @@ class Order extends Component {
<span className="order-balanceprice"> (余额: <i className="order-money">{`${user_account}元`}</i>)</span>
<i className="iconfont iconiconfront-22" onClick={this.showInfo}></i>
</Flex>
{
useBalance ? (
<div>
<div>
{
useBalance ? (
<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>
)
}
) : null
}
<i className={`iconfont ${useBalance ? 'icondanseshixintubiao-5' : 'iconiconfront-3'} `} onClick={throttle(this.useBalance, 600)}></i>
</div>
</Flex>
</Item>
</List>
......@@ -238,7 +248,7 @@ class Order extends Component {
<div className="order-bar-text">
<div className="order-amount">
<span className="order-amount-title">合计:</span>
<span className="order-amount-price">{`￥${total_sale}`}</span>
<span className="order-amount-price">{`￥${total}`}</span>
</div>
<div className="order-preprice">
<span className="order-preprice-title">已优惠:</span>
......
src/components/order/payOrder/PayOrder.js
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 { OrderItem, HeaderBar } from '@/common/index';
import {Link} from 'react-router-dom';
import './PayOrder.scss';
import {VList} from '@/common';
const Item = List.Item;
const Brief = Item.Brief;
......@@ -14,22 +16,51 @@ let mockData = [
{ 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 {
constructor(props) {
super(props);
this.state = {
money: 1000.00,
payType: 0,
checkPeriod: false,
singleMoney: 0,
periodNumber: 0,
}
}
onChange = (value) => {
console.log(value);
this.setState({
payType: value,
});
};
componentDidMount() {
http.get(`${api.home}/m/order/preorder`).then((res) => {
http.post(`${api.home}/m/order/detail`, {order_id: ''}).then((res) => {
console.log(res);
if (res.data.code !== 200) {
return;
......@@ -45,9 +76,10 @@ export default class PayOrder extends Component {
})
}
render() {
const { money, payType } = this.state;
const { money, payType, checkPeriod, singleMoney, periodNumber } = this.state;
return (
<div className='pay-order'>
<HeaderBar title='确认支付' arrow={true}></HeaderBar>
<WhiteSpace size='sm'></WhiteSpace>
<div className='order-number'>
<WingBlank>
......@@ -58,6 +90,28 @@ export default class PayOrder extends Component {
</WingBlank>
</div>
<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'>
<WingBlank>
<Flex justify='between' align='center' style={{ height: '44px' }}>
......@@ -75,7 +129,24 @@ export default class PayOrder extends Component {
key={i.value}
checked={payType === 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>
))}
</List>
......
src/components/order/payOrder/PayOrder.scss
.pay-order {
width: 100%;
height: 100vh;
background-color: #f5f5f5;
margin-bottom: 50px;
.order-number {
background-color: #fff;
......@@ -86,5 +86,124 @@
color: #fff;
font-size: 18px;
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 {Flex, WingBlank} from 'antd-mobile';
import {Link} from 'react-router-dom'
import './CategoryItem.scss';
export default class CategoryItem extends Component {
......@@ -7,10 +8,11 @@ export default class CategoryItem extends Component {
super(props);
}
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 (
<WingBlank>
<div className={'scholarship-category'}>
<Link to={`/detail?id=${course_id}`} >
<div className={'imageContainer'}>
<img className={'image'} src={image_name}></img>
{
......@@ -19,11 +21,12 @@ export default class CategoryItem extends Component {
) : (null)
}
</div>
</Link>
<div className={'content'}>
<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>
<div className={'shareMoney'} >{`分享赚${first_level_tip}元`}</div>
<div className={'shareMoney'} onClick={()=>{share(course_id, first_level_tip)}}>{`分享赚${first_level_tip}元`}</div>
</Flex>
</div>
</div>
......
src/components/scholarship/index.js
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 { is_weixin, http, api } from "@/utils";
import CategoryItem from './CategoryItem/CategoryItem.js';
......@@ -76,7 +76,20 @@ class _Scholarship extends Component {
};
// 保存二维码 TODO 失败
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 = () => {
if (this.state.isLoading || !this.state.hasMore) {
......@@ -147,7 +160,7 @@ class _Scholarship extends Component {
rowData,
rowID
) => {
return <CategoryItem {...rowData} key={rowID} />;
return <CategoryItem {...rowData} key={rowID} share={this.shareCategory}/>;
};
const row1 = (
......@@ -314,7 +327,7 @@ class _Scholarship extends Component {
</Flex>
</Modal>
<Modal
{/* <Modal
visible={drawCashHtml}
transparent
maskClosable={true}
......@@ -333,6 +346,26 @@ class _Scholarship extends Component {
<Flex justify='center'>
<img src={codeSrc} style={{ width: '90px', height: '90px' }} alt="二维码" />
</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
......
src/components/scholarship/scholarship.scss
......@@ -30,7 +30,6 @@
color: #fff;
font-size: 16px;
text-align: center;
list-style: 30px;
}
.login-check {
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