import React, { Component } from 'react' import { Flex, List, Toast } from 'antd-mobile' import { OrderItem } from '@common/index' import { Link } from 'react-router-dom' import { http, getParam } from "@/utils" import { HeaderBar } from '@common/index' import "./index.scss" const Item = List.Item function OrderList(props) { const listData = props.list return ( <div> { listData.map((item, index) => { 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>) if (props.locationState && props.locationState.group) { NewPrice = (<span className='order-newprice'>¥{props.groupPrice}</span>) } const Info = ( <div className="order-info"> <p className='order-title' style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} onClick={() => props.toDetail(course_id)} > {course_title} </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'> {NewPrice} <span className={'price-des'}>(预付定金)</span> </p> </div> ) return ( <OrderItem {...item} src={image_name} id={course_id} key={index} info={Info} isaist={props.isaist} toDetail={props.toDetail} > { (props.locationState && (props.locationState.type || props.locationState.simple)) ? ( <div className="order-prefer"> <List key={index}> <Item arrow="horizontal" onClick={() => { }} > <Link to={{ pathname: `/coupons`, search: `?id=${course_id}`, state: { from: '/order' } }}> <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> ) }) } </div> ) } class Order extends Component { constructor(props) { super(props) this.state = { groupPrice: '', total: 0.00, // 需要支付总金额 discount: 0.00, // useBalance: false, orderList: [], info: false, offset: 0, depositPrice: 0, course_id: getParam('oid'), user_account: '', finalStartTime: '', } } // 提交订单 submitOrder = () => { http.post(`${API["base-api"]}/m/deposit/create`, { plat_form: 5, source: getParam('source'), //来源 1-详情页 2-活动页, course_id: this.state.course_id, is_deduction: this.state.useBalance ? 1 : 0 }).then(res => { const {data} = res if (data.errno == 200) { if (data.data['pay_jump']) { this.props.history.replace(`/expand/callback?order_id=${data.data['order_id']}`) } else { this.props.history.replace({ pathname: '/deposit-pay-order', search: `?oid=${data.data['order_id']}` }) } } else { Toast.info(data.msg) } }) } showInfo = () => { this.setState((prevState) => ({ info: !prevState.info })) } componentDidMount() { http.post(`${API["base-api"]}/m/deposit/preorder`, { course_id: this.state.course_id }) .then(res => { const {data} = res if (data.errno == 200) { this.setState({ orderList: [data.data.course], depositPrice: data.data.course['sale_price'], user_account: data.data['user_account'], finalStartTime: data.data['final_start_time'] }) } else { Toast.info(data.msg) } }) }; toCourseDetail = (id) => { const {history} = this.props history.push(`/detail?id=${id}`) } useBalance = () => { let {user_account, depositPrice} = this.state if (parseFloat(user_account) === 0) { return } let offset = parseFloat(user_account) - parseFloat(depositPrice) offset = offset > 0 ? depositPrice : user_account this.setState(prevState => ({useBalance: !prevState.useBalance, offset})) } updateUserAccount = () => { } render() { const { orderList, discount, groupPrice, depositPrice, user_account, useBalance, info, offset, finalStartTime } = this.state return ( <div className="order-wrapper"> <Flex> <Flex.Item> <HeaderBar title='课程报名' arrow={true}/> <div className="order-list"> <OrderList list={orderList} courseId={getParam('id')} locationState={this.props.location.state} groupPrice={groupPrice} toDetail={this.toCourseDetail} /> </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 question-mark" onClick={this.showInfo}></i> </Flex> <Flex> { useBalance ? ( <> <span style={{ color: '#FF2121', fontSize: '15px', marginRight: "6px" }}>{`-¥${offset}`}</span> <i className={`iconfont icondanseshixintubiao-5 balance-used`} onClick={this.useBalance}></i> </> ) : ( <i className='circle-icon' onClick={this.useBalance}></i> ) } </Flex> </Flex> </Item> </List> </div> <ul className={'deposit-limit-time'}> <li>· {finalStartTime}开始支付尾款</li> <li>· 代金券只能在支付尾款时使用</li> </ul> <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">{`¥${depositPrice}`}</span> </div> <div className="order-preprice"> <span className="order-preprice-title">已优惠:</span> <span className="order-preprice-price">{`¥${discount}`}</span> </div> </div> <button type="button" className="order-button has-info"> <span className="order-button-text" onClick={this.submitOrder}>确定订单</span> </button> </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> ) } } export default Order