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