Skip to content

M
mr-julyedu
Commit c42220e1 by zhanghaozhe
Options

定金支付页面余额为0

parent 8347ddd6
Showing with 292 additions and 289 deletions
src/components/order/deposit/deposit-order/index.js
...@@ -11,321 +11,324 @@ import "./index.scss" ...@@ -11,321 +11,324 @@ import "./index.scss"
const Item = List.Item const Item = List.Item
function OrderList(props) { function OrderList(props) {
const listData = props.list const listData = props.list
return ( return (
<div> <div>
{ {
listData.map((item, index) => { listData.map((item, index) => {
const {is_coupon, course_id, image_name, sale_price, simpledescription, course_title, coupon_num, coupon_desc} = item const {is_coupon, course_id, image_name, sale_price, simpledescription, course_title, coupon_num, coupon_desc} = item
let NewPrice = (<span className='order-newprice'>¥{sale_price}</span>) let NewPrice = (<span className='order-newprice'>¥{sale_price}</span>)
if (props.locationState && props.locationState.group) { if (props.locationState && props.locationState.group) {
NewPrice = (<span className='order-newprice'>¥{props.groupPrice}</span>) NewPrice = (<span className='order-newprice'>¥{props.groupPrice}</span>)
} }
const Info = ( const Info = (
<div className="order-info"> <div className="order-info">
<p <p
className='order-title' className='order-title'
style={{ style={{
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
whiteSpace: 'nowrap' whiteSpace: 'nowrap'
}} }}
onClick={() => props.toDetail(course_id)} onClick={() => props.toDetail(course_id)}
> >
{course_title} {course_title}
</p> </p>
<p className='order-content' style={{ <p className='order-content' style={{
WebkitBoxOrient: 'vertical', WebkitBoxOrient: 'vertical',
WebkitLineClamp: '2', WebkitLineClamp: '2',
wordBreak: 'break-all', wordBreak: 'break-all',
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
display: '-webkit-box' display: '-webkit-box'
}}>{simpledescription}</p> }}>{simpledescription}</p>
<p className='order-des'> <p className='order-des'>
{NewPrice} {NewPrice}
<span className={'price-des'}>（预付定金）</span> <span className={'price-des'}>（预付定金）</span>
</p> </p>
</div> </div>
) )
return ( return (
<OrderItem <OrderItem
{...item} {...item}
src={image_name} src={image_name}
id={course_id} id={course_id}
key={index} key={index}
info={Info} info={Info}
isaist={props.isaist} isaist={props.isaist}
toDetail={props.toDetail} toDetail={props.toDetail}
> >
{ {
(props.locationState && (props.locationState.type || props.locationState.simple)) ? ( (props.locationState && (props.locationState.type || props.locationState.simple)) ? (
<div className="order-prefer"> <div className="order-prefer">
<List key={index}> <List key={index}>
<Item <Item
arrow="horizontal" arrow="horizontal"
onClick={() => { onClick={() => {
}} }}
> >
<Link to={{ <Link to={{
pathname: `/coupons`, pathname: `/coupons`,
search: `?id=${course_id}`, search: `?id=${course_id}`,
state: { state: {
from: '/order' from: '/order'
} }
}}> }}>
<Flex justify='between'> <Flex justify='between'>
<span <span
style={{ style={{
color: '#333', color: '#333',
fontSize: '15px' fontSize: '15px'
}} }}
>优惠券</span> >优惠券</span>
<span <span
style={{ style={{
fontSize: '14px', fontSize: '14px',
color: '#999999' color: '#999999'
}} }}
> >
{!coupon_desc ? (coupon_num === 0 ? '无' : `${coupon_num}张可用`) : (coupon_desc)} {!coupon_desc ? (coupon_num === 0 ? '无' : `${coupon_num}张可用`) : (coupon_desc)}
</span> </span>
</Flex> </Flex>
</Link> </Link>
</Item> </Item>
</List> </List>
</div> </div>
) : null ) : null
} }
</OrderItem> </OrderItem>
) )
}) })
} }
</div> </div>
) )
} }
class Order extends Component { class Order extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
groupPrice: '', groupPrice: '',
total: 0.00, // 需要支付总金额 total: 0.00, // 需要支付总金额
discount: 0.00, // discount: 0.00, //
useBalance: false, useBalance: false,
orderList: [], orderList: [],
info: false, info: false,
offset: 0, offset: 0,
depositPrice: 0, depositPrice: 0,
course_id: getParam('oid'), course_id: getParam('oid'),
user_account: '', user_account: '',
finalStartTime: '', finalStartTime: '',
}
} }
}
// 提交订单 // 提交订单
submitOrder = () => { submitOrder = () => {
http.post(`${API["base-api"]}/m/deposit/create`, { http.post(`${API["base-api"]}/m/deposit/create`, {
plat_form: 5, plat_form: 5,
source: getParam('source'), //来源 1-详情页 2-活动页, source: getParam('source'), //来源 1-详情页 2-活动页,
course_id: this.state.course_id, course_id: this.state.course_id,
is_deduction: this.state.useBalance ? 1 : 0 is_deduction: this.state.useBalance ? 1 : 0
}).then(res => { }).then(res => {
const {data} = res const {data} = res
if (data.errno == 200) { if (data.errno == 200) {
if (data.data['pay_jump']) { if (data.data['pay_jump']) {
this.props.history.replace(`/expand/callback?order_id=${data.data['order_id']}`) this.props.history.replace(`/expand/callback?order_id=${data.data['order_id']}`)
} else { } else {
this.props.history.replace({ this.props.history.replace({
pathname: '/deposit-pay-order', pathname: '/deposit-pay-order',
search: `?oid=${data.data['order_id']}` search: `?oid=${data.data['order_id']}`
}) })
} }
} else { } else {
Toast.info(data.msg) Toast.info(data.msg)
} }
}) })
} }
showInfo = () => { showInfo = () => {
this.setState((prevState) => ({ this.setState((prevState) => ({
info: !prevState.info info: !prevState.info
})) }))
} }
componentDidMount() { componentDidMount() {
http.post(`${API["base-api"]}/m/deposit/preorder`, { http.post(`${API["base-api"]}/m/deposit/preorder`, {
course_id: this.state.course_id course_id: this.state.course_id
}) })
.then(res => { .then(res => {
const {data} = res const {data} = res
if (data.errno == 200) { if (data.errno == 200) {
this.setState({ this.setState({
orderList: [data.data.course], orderList: [data.data.course],
depositPrice: data.data.course['sale_price'], depositPrice: data.data.course['sale_price'],
user_account: data.data['user_account'], user_account: data.data['user_account'],
finalStartTime: data.data['final_start_time'] finalStartTime: data.data['final_start_time']
}) })
} else { } else {
Toast.info(data.msg) Toast.info(data.msg)
} }
}) })
}; };
toCourseDetail = (id) => { toCourseDetail = (id) => {
const {history} = this.props const {history} = this.props
history.push(`/detail?id=${id}`) history.push(`/detail?id=${id}`)
} }
useBalance = () => { useBalance = () => {
let {user_account, depositPrice} = this.state let {user_account, depositPrice} = this.state
let offset = parseFloat(user_account) - parseFloat(depositPrice) if (parseFloat(user_account) === 0) {
offset = offset > 0 ? depositPrice : user_account return
this.setState(prevState => ({useBalance: !prevState.useBalance, offset}))
} }
let offset = parseFloat(user_account) - parseFloat(depositPrice)
offset = offset > 0 ? depositPrice : user_account
this.setState(prevState => ({useBalance: !prevState.useBalance, offset}))
}
updateUserAccount = () => { updateUserAccount = () => {
} }
render() { render() {
const { const {
orderList, orderList,
discount, discount,
groupPrice, groupPrice,
depositPrice, depositPrice,
user_account, user_account,
useBalance, useBalance,
info, info,
offset, offset,
finalStartTime finalStartTime
} = this.state } = this.state
return ( return (
<div className="order-wrapper"> <div className="order-wrapper">
<Flex> <Flex>
<Flex.Item> <Flex.Item>
<HeaderBar title='课程报名' arrow={true}/> <HeaderBar title='课程报名' arrow={true}/>
<div className="order-list"> <div className="order-list">
<OrderList <OrderList
list={orderList} list={orderList}
courseId={getParam('id')} courseId={getParam('id')}
locationState={this.props.location.state} locationState={this.props.location.state}
groupPrice={groupPrice} groupPrice={groupPrice}
toDetail={this.toCourseDetail} toDetail={this.toCourseDetail}
/> />
</div> </div>
<div className="order-balance"> <div className="order-balance">
<List> <List>
<Item <Item
className="order-prefer-text" className="order-prefer-text"
> >
<Flex justify='between'> <Flex justify='between'>
<Flex align='center'> <Flex align='center'>
<span>余额抵扣</span> <span>余额抵扣</span>
<span className="order-balanceprice"> (余额: <i <span className="order-balanceprice"> (余额: <i
className="order-money">{`${user_account}元`}</i>)</span> className="order-money">{`${user_account}元`}</i>)</span>
<i className="iconfont iconiconfront-22 question-mark" <i className="iconfont iconiconfront-22 question-mark"
onClick={this.showInfo}></i> onClick={this.showInfo}></i>
</Flex> </Flex>
<Flex> <Flex>
{ {
useBalance ? ( useBalance ? (
<> <>
<span style={{ <span style={{
color: '#FF2121', color: '#FF2121',
fontSize: '15px', fontSize: '15px',
marginRight: "6px" marginRight: "6px"
}}>{`-¥${offset}`}</span> }}>{`-¥${offset}`}</span>
<i className={`iconfont icondanseshixintubiao-5 balance-used`} <i className={`iconfont icondanseshixintubiao-5 balance-used`}
onClick={this.useBalance}></i> onClick={this.useBalance}></i>
</> </>
) : ( ) : (
<i className='circle-icon' onClick={this.useBalance}></i> <i className='circle-icon' onClick={this.useBalance}></i>
) )
} }
</Flex> </Flex>
</Flex> </Flex>
</Item> </Item>
</List> </List>
</div> </div>
<ul className={'deposit-limit-time'}> <ul className={'deposit-limit-time'}>
<li>· {finalStartTime}开始支付尾款</li> <li>· {finalStartTime}开始支付尾款</li>
<li>· 代金券只能在支付尾款时使用</li> <li>· 代金券只能在支付尾款时使用</li>
</ul> </ul>
<div className="order-bar"> <div className="order-bar">
<div className="order-course"> <div className="order-course">
<span className="order-course-text">{`${orderList.length}门课程`}</span> <span className="order-course-text">{`${orderList.length}门课程`}</span>
</div> </div>
<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">{`￥${depositPrice}`}</span> <span className="order-amount-price">{`￥${depositPrice}`}</span>
</div> </div>
<div className="order-preprice"> <div className="order-preprice">
<span className="order-preprice-title">已优惠:</span> <span className="order-preprice-title">已优惠:</span>
<span className="order-preprice-price">{`¥${discount}`}</span> <span className="order-preprice-price">{`¥${discount}`}</span>
</div> </div>
</div> </div>
<button type="button" className="order-button has-info"> <button type="button" className="order-button has-info">
<span className="order-button-text" onClick={this.submitOrder}>确定订单</span> <span className="order-button-text" onClick={this.submitOrder}>确定订单</span>
</button> </button>
</div> </div>
</Flex.Item> </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> </Flex>
{ </div>
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> </div>
) : null
}
</div>
) )
} }
} }
......
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