import React, { Component } from "react" import { Flex, List, Toast } from "antd-mobile" import { OrderItem } from "src/common/index" import { Link } from "react-router-dom" import { http, getParam } from "src/utils" import { HeaderBar } from "src/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.0, // 需要支付总金额 discount: 0.0, // 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