import React, { Component } from "react" import { Flex, List, WingBlank, Toast } from "antd-mobile" import { OrderItem } from "src/common/index" import { Link } from "react-router-dom" import { http, getParam } from "src/utils" import { throttle } from "lodash" import { HeaderBar } from "../../common" import { connect } from "react-redux" import "./order.scss" const Item = List.Item function OrderList(props) { const listData = props.list return ( <div> {listData.map((item, index) => { const { course_id, image_name, price1, price0, simpledescription, course_title, coupon_num, coupon_desc, } = item let NewPrice = <span className="order-newprice">¥{price1}</span> if (props.locationState && props.locationState.group) { NewPrice = <span className="order-newprice">¥{props.groupPrice}</span> } const Info = ( <div className="order-info"> {/* <Link to={`/detail?id=${course_id}`}> */} <p className="order-title" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", }} onClick={() => props.toDetail(course_id)} > {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"> {/*// 这里根据类型判断 来显示什么价格 拼团还是砍价 还是特训营*/} {/*{*/} {/* props.courseId === undefined ? (<span className='order-newprice'>¥{price1}</span>) : (<span className='order-newprice'>¥{price0}</span>)*/} {/*}*/} {NewPrice} <span className="order-price">¥{price0}</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", }, }} > {/* <Link to='coupons' query={{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> ) } @connect() class Order extends Component { constructor(props) { super(props) this.state = { groupPrice: "", perfect: this.props.location.state, user_account: 0.0, // 账户余额 total: 0.0, // 需要支付总金额 discount: 0.0, // useBalance: false, orderList: [], info: false, offset: 0, full_amount: 0, // 满金额 cut_amount: 0, // 减金额 } } // 提交订单 submitOrder = () => { if (this.state.orderList.length === 0) { Toast.info("没有要提交的订单!") return } if (!this.state.perfect) { Toast.info("请完善报名信息!") } const { location: { state = {} }, } = this.props if (state.group === 1) { let params = state.pdd_order_id ? { course_id: getParam("id"), ischeck: this.state.useBalance, pdd_order_id: state.pdd_order_id, } : { course_id: getParam("id"), ischeck: this.state.useBalance, } http.post(`${API["base-api"]}/pdd/m`, params).then((res) => { if (Number(res.data.errno) === 200) { sessionStorage.removeItem("orderUseCacheObj") if (res.data.data.pay_jump === 1) { this.props.history.push(`/togroup?id=${res.data.data.oid}`) return } this.props.history.push(`/payorder?oid=${res.data.data.oid}`, { group: 1, }) } else if (Number(res.data.errno) === 0) { Toast.info(res.data.data.msg, 2) return } else { Toast.info(res.data.msg, 2) return } }) } else { let url = `${API["base-api"]}/m/v34/cart/order?ischeck=${this.state.useBalance}` if (this.props.location.state && this.props.location.state.type === 1) { url += "&type=1" } http.get(url).then((res) => { if (res.data.errno !== 0) { Toast.info(res.data.msg, 2) return } sessionStorage.removeItem("orderUseCacheObj") if (res.data.data.is_free === 1) { this.props.history.replace(`/purchased`) return } this.props.history.replace(`/payorder?oid=${res.data.data.order_id}`) }) } } // 勾选取消勾选 是否使用余额 useBalance = () => { let useBalanceFlag = this.state.useBalance this.setState({ useBalance: !useBalanceFlag, }) if (!useBalanceFlag) { this.cacheObj = { ...this.state, } sessionStorage.setItem("orderUseCacheObj", JSON.stringify(this.state)) } else { sessionStorage.removeItem("orderUseCacheObj") } this.computedMoney(useBalanceFlag) } // 勾选取消勾选时:计算金额、优惠金额、优惠券等 computedMoney = (useBalanceFlag) => { let totalSale = parseFloat(this.cacheObj.total), userAccount = parseFloat(this.cacheObj.user_account) const { discount } = this.state if (!useBalanceFlag) { if (totalSale > userAccount) { this.setState({ offset: userAccount.toFixed(2), total: (totalSale - userAccount).toFixed(2), discount: (userAccount + parseFloat(discount)).toFixed(2), }) } else { this.setState({ offset: totalSale.toFixed(2), total: 0, discount: (totalSale + parseFloat(discount)).toFixed(2), }) } } else { this.setState({ offset: this.cacheObj.offset, total: this.cacheObj.total, discount: this.cacheObj.discount, }) } } // 选择优惠券返回时根据是否勾选计算 computedMoneyByCache = () => { let totalSale = parseFloat(this.cacheObj.total), userAccount = parseFloat(this.cacheObj.user_account), discount = parseFloat(this.cacheObj.discount) if (totalSale > userAccount) { this.setState({ offset: userAccount.toFixed(2), total: (totalSale - userAccount).toFixed(2), discount: (discount + userAccount).toFixed(2), }) } else { this.setState({ offset: totalSale.toFixed(2), total: 0, discount: totalSale.toFixed(2), }) } } // 展示余额抵扣规则 showInfo = () => { this.setState((prevState) => ({ info: !prevState.info, })) } // 公共方法 存储数据 publicGetData = (res) => { let { course, total, user_account, user_info, discount } = res if (this.props.location.state && this.props.location.state.group === 1) { total = this.state.groupPrice } this.cacheObj = { perfect: user_info, orderList: course, user_account, total, discount, } this.setState({ perfect: user_info, orderList: course, user_account, total, discount, }) } fullRules = (data) => { this.setState({ full_amount: data.full_amount, cut_amount: data.cut_amount, }) } // 公共方法 本地存储 publicLocalStorage = () => { if (this.props.history.action === "PUSH") { sessionStorage.removeItem("orderUseCacheObj") this.setState({ discount: 0.0, }) } else { const cacheObj = sessionStorage.getItem("orderUseCacheObj") if (cacheObj !== null) { this.setState({ useBalance: true, }) this.computedMoneyByCache() } } } componentDidMount() { // type: 1,返现课程,simple: 1,正常购买 if (this.props.location.state && this.props.location.state.type === 1) { http.get(`${API["base-api"]}/m/order/preorder?type=1`).then((res) => { if (res.data.errno === 200) { this.publicGetData(res.data.data) this.publicLocalStorage() } else { Toast.info(res.data.msg, 2) } }) } else if ( this.props.location.state && (this.props.location.state.simple === 1 || this.props.location.state.bargain === 1) ) { // 普通课程立即报名 不带 type = 1 http.get(`${API["base-api"]}/m/order/preorder`).then((res) => { if (res.data.errno === 200) { console.log(res.data.data) this.publicGetData(res.data.data) this.publicLocalStorage() this.fullRules(res.data.data) } else { Toast.info(res.data.msg, 2) } }) } else if ( this.props.location.state && this.props.location.state.group === 1 ) { // 获取一键开团的课程 Promise.all([ http.get(`${API.home}/m/course/detail/${getParam("id")}`), http.get(`${API["base-api"]}/m/order/preorder`), ]).then((resList) => { let courseInfo = resList[0], orderInfo = resList[1] let newData = {} if (orderInfo.data.errno === 200) { newData = Object.assign({}, orderInfo.data.data, { course: [] }) } else { Toast.info(orderInfo.data.msg, 2) return } if (courseInfo.data.code === 200) { newData.course.push(courseInfo.data.data.course_info) this.setState({ groupPrice: courseInfo.data.data.course_info.pdd_group_info.price, }) } else { Toast.info(courseInfo.data.msg, 2) return } this.publicGetData(newData) this.publicLocalStorage() }) } else { http.get(`${API["base-api"]}/m/order/preorder`).then((res) => { console.log("为了验证什么条件下会走这段代码") if (res.data.errno !== 200) { Toast.info(res.data.msg, 2) return } this.publicGetData(res.data.data) this.publicLocalStorage() }) } } toCourseDetail = (id) => { const { history } = this.props history.push(`/detail?id=${id}`) } render() { const { perfect, orderList, user_account, total, discount, useBalance, info, offset, groupPrice, full_amount, cut_amount, } = this.state return ( <div className="order-wrapper"> <Flex> <Flex.Item> <HeaderBar title="课程报名" arrow={true} /> <div className="order-list"> <OrderList list={orderList} compute={this.computedMoney} 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={throttle(this.useBalance, 600)} ></i> </> ) : ( <i className="circle-icon" onClick={throttle(this.useBalance, 600)} ></i> )} </Flex> </Flex> </Item> </List> </div> {full_amount > 0 && cut_amount > 0 ? ( <> <div className="full__rules"> <WingBlank> <div className="money__off"> <span> 满{full_amount}减{cut_amount}: </span> <span className="money">{`-¥${cut_amount}`}</span> </div> </WingBlank> </div> </> ) : null} <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">{`¥${total}`}</span> </div> <div className="order-preprice"> <span className="order-preprice-title">已优惠:</span> <span className="order-preprice-price">{`¥${discount}`}</span> </div> </div> {perfect ? ( <button type="button" className="order-button has-info"> <span className="order-button-text" onClick={this.submitOrder} > 提交订单 </span> </button> ) : ( <button type="button" className="order-button"> <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