index.js

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