index.js

import React, { Component } from 'react'
import { getParam, http } from "@/utils"
import { Toast } from 'antd-mobile'
import { Link } from 'react-router-dom'
import { getCourses } from "@/components/detail/actions"
import { connect } from "react-redux"
import './index.scss'
import Overlay from '../overlay'
import BindPhone from './../bindPhone/index';
import BargainConfirmBind from './../bindPhone/confirm';
import Mask from '@/common/Mask/index';

class BtnStatus extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isbuy: 1,
      is_baoming: 0,
      group_status: 3,
      in_cart: false,
      countdown: 0,
      barInfo: {},
      bindPhone: false,
      bindConfrm: false,
      bindInfo: {}, // 冲突信息
      formInfo: {},
    }
  }

  componentDidMount() {
    // this.getBargainInfo()
    this.group = false;
  }


  // componentDidUpdate(prevProps) {
  //     let {courseInfo} = this.props
  //     let {courseInfo: prevCourseInfo} = prevProps
  //     if (courseInfo && courseInfo.is_bargain) {
  //         if (prevCourseInfo && courseInfo.is_bargain !== prevCourseInfo.is_bargain) {
  //             this.getBargainInfo()
  //         }
  //     }
  // }

  componentWillReceiveProps(nextProps) {
    const {data = {}, user = {}} = nextProps;
    if (data.is_bargain && user.data && user.data.uid) {
      this.getBargainInfo();
    }
    // if(nextProps.data && nextProps.data.is_bargain) {
    //     this.getBargainInfo()
    // }
    this.setState({
      courseInfo: data,
      countdown: nextProps.countdown,
    });
  }

  // // 加入购物车 type：1 加入购物车，2加入购物车并跳转到购物车页面去支付
  // toCart = (type) => {
  //     const { history, addCourseToCart } = this.props;
  //     let data = {
  //         course_id: getParam('id')
  //     };
  //     http.post(`${API.home}/m/cart/add`, data).then((res) => {
  //         if (res.data.code === 200) {
  //             if (type === 1) {
  //                 Toast.info('已加入购物车', 2)
  //                 // this.props.getCourses()
  //                 // document.location.reload()
  //                 addCourseToCart();
  //             } else {
  //                 history.replace('/shopcart');ß
  //             }
  //         } else if (res.data.code === 15001) {
  //             history.replace('/shopcart');
  //         } else if (res.data.code === 4030) {
  //             history.replace('/passport');
  //         } else {
  //             Toast.info(res.data.msg, 2);
  //         }
  //     })
  // };

  // 返现课程的立即购买
  signUpNow = () => {
    if (this.props.user.hasError) {
      // 未登录 去登陆
      this.props.history.push('/passport');
    } else {
      let cidArr = JSON.stringify([Number(getParam('id'))]);
      http.get(`${API['base-api']}/m/cart/addtopreorder/${cidArr}?type=1`).then((res) => {
        if (res.data.errno === 0) {
          this.props.history.push("/order?id=" + res.data.data[0], {type: 1});
        } else {
          Toast.info(res.data.msg, 2);
        }
      })
    }
  };

  // 普通课程的立即报名 要模拟结算过程
  simpleCourse = () => {
    if (this.props.user.hasError) {
      // 未登录 去登陆
      this.props.history.push('/passport');
    } else {
      http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => {
        if (res.data.errno === 0) {
          this.props.history.push(`/order?id=${getParam('id')}`, {simple: 1})
        } else {
          Toast.info(res.data.msg, 2);
        }
      })
    }
  };

  // 格式化开课时间
  formatDate = (date) => {
    let ary = date.split('-');
    return `${ary[1]}月${ary[2]}日开课`;
  };

  // 直接购买
  tobuy = () => {
    const {user} = this.props;
    const {barInfo} = this.state;
    const uid = user && user.data && user.data.uid
    if (!uid) {
      this.props.history.push('/passport/login')
    } else {
      if (barInfo.bargain_status === 2) {
        // this.toCart(2)
        // 新需求 不需要加入购物车 直接走普通课程的立即报名流程 跳到订单页
        this.simpleCourse();
      } else {
        // 取消砍价记录
        this.setState({
          isShowOverlay: true,
          bargainStatus: 1,
        })
      }
    }
  };

  // 一键开团
  keyToGroup = () => {
    if (this.props.user.hasError) {
      // 未登录 去登陆
      this.props.history.push('/passport');
      return;
    }
    this.props.history.push(`/order?id=${getParam('id')}`, {group: 1})
  };

  // 砍完价去支付
  bargainToOrder = () => {
    if (this.props.user.hasError) {
      // 未登录 去登陆
      this.props.history.push('/passport');
    } else {
      http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => {
        if (res.data.errno === 0) {
          this.props.history.push(`/order?id=[${getParam('id')}]`, {bargain: 1});
        } else {
          Toast.info(res.data.msg, 2);
        }
      })
    }
  };

  // 取消砍价
  cancel = () => {
    let data = {
      courseId: getParam('id')
    }
    http.post(`${API.home}/m/bargain/cancel`, data).then((res) => {
      if (res.data.code === 200) {
        this.setState({
          isShowOverlay: false,
          bargainStatus: '',
        })
        http.get(`${API['base-api']}/m/cart/addtopreorder/[${getParam('id')}]`).then((res) => {
          if (res.data.errno === 0) {
            this.props.history.push(`/order?id=[${getParam('id')}]`, {simple: 1});
          } else {
            Toast.info(res.data.msg, 2);
          }
        })
        // window.location.href = '/shopcart'
        // this.props.history.push(`/order?id=[${getParam('id')}]`, {simple: 1})
      } else {
        Toast.info(res.data.msg, 2)
      }
    })
  }

  close = () => {
    this.setState({
      isShowOverlay: false,
      bargainStatus: '',
    })
  }
  // 砍价接口
  toKanjia = () => {
    const {user, history} = this.props;
    const uid = user && user.data && user.data.uid;
    const course_id = getParam('id');
    if (!uid) {
      this.props.history.push('/passport/login')
    } else {
      let data = {
        course_id,
        type: 1,  // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
        parent_uid: 0 // 被助力人id 【自己本人操作传0】
      }
      http.post(`${API.home}/m/bargain/toBargain`, data).then((res) => {
        const {data, code, msg} = res.data;
        if (code === 200) {
          // user_status 用户状态 1-关注公众号，2-绑定手机号 3-再砍一刀 （是发起人没有这个字段）
          if (data.user_status === 2) {
            this.setState({
              bindPhone: true
            })
          } else {
            history.push(`/bargain-middle-page?id=${course_id}&bargaincode=${data.bargain_code}&is_originator=1`)
          }
        } else {
          Toast.info(msg, 2)
        }
      })
    }
  }

  // 开始学习
  toStudy = (vCourseId, isHaveVideo) => {
    const {history} = this.props;
    if (isHaveVideo == 0) {
      Toast.info('尚未开课，开课后立即上传课程～', 2)
    } else {
      history.push(`/play/video?id=${vCourseId}`)
    }
  }

  //获取砍价信息
  getBargainInfo = () => {
    const {user} = this.props
    const uid = user && user.data && user.data.uid
    let data = {
      courseId: getParam('id')
    }
    http.post(`${API.home}/m/bargain/courseDetail`, data).then((res) => {
      if (res.data.code === 200) {
        this.setState({
          barInfo: res.data.data
        })
      } else {
        Toast.info(res.data.msg, 2)
      }
    })
  }

  // 付定金 付尾款
  expandPay = (info, type) => {
    // type 等于1是定金 等于2是尾款
    const {user, history} = this.props;
    const uid = user && user.data && user.data.uid;
    if (!uid) {
      this.props.history.push('/passport/login')
    } else {
      if (type == 1) {
        this.props.history.push(
          `/deposit-order?oid=${getParam('id')}&source=${1}`,
          {
            id: getParam('id'),
            isexpand: 1,
            sourcenum: 1
          }
        )
      } else {
        let timeStamp = Date.parse(new Date()) / 1000;
        if (timeStamp >= info.start_timestamp) {
          this.props.history.push(
            '/final-deposit-order?source=1',
            {
              id: getParam('id'),
              sourcenum: 1

            }
          )
        } else {
          Toast.info("付尾款时间将在" + info.final_start_time + "开启", 2);
        }
      }
    }
  }

  // 隐藏弹窗
  handleToHide = (key) => {
    this.setState({
      [key]: false
    });
  }

  // 绑定手机号 -- 确认
  confirmBindPhone = (params, bindInfo) => {
    this.setState({
      bindPhone: false,
      bindConfrm: true,
      formInfo: params,
      bindInfo
    });
  }

  render() {
    // data 课程信息；barInfo 砍价信息
    const {user = {}, toCart, country} = this.props;
    const {
      countdown,
      barInfo,
      courseInfo: info = {},
      bindPhone,
      bindConfrm,
      bindInfo,
      formInfo,
    } = this.state;
    const uid = user.data && user.data.uid;
    return (
      <div>
        {/* 绑定手机号 */}
        <Mask visible={bindPhone} handleToHide={() => this.handleToHide('bindPhone')}>
          <BindPhone
            country={country}
            handleToBargain={this.toKanjia}
            confirmBindPhone={this.confirmBindPhone}
          />
        </Mask>

        {/* 绑定手机号--确认 */}
        <Mask visible={bindConfrm} handleToHide={() => this.handleToHide('bindConfrm')}>
          <BargainConfirmBind
            data={formInfo}
            bindInfo={bindInfo}
            handleToHide={() => this.handleToHide('bindConfrm')}
            handleToBargain={this.toKanjia}
          />
        </Mask>

        {/*正常购买*/}
        {
          info.is_baoming === 0 && info.group_status !== 3 &&
          <div className='btns-box'>
            <a className='consult consult-s' href='http://q.url.cn/s/Vbkup6m?_type=wpa'>
              <i className='iconfont iconerji'></i>
              <span>课程咨询</span>
            </a>
            {
              info.in_cart &&
              <Link to='/shopcart' className='btn btn-s bg-FCCD05'>去购物车结算</Link>
            }
            {
              !info.in_cart &&
              <button className='btn btn-s bg-FCCD05' onClick={e => toCart(1)}>加入购物车</button>

            }
            <span className='btn btn-s bg-FD7700' onClick={e => this.simpleCourse()}>立即报名</span>
          </div>
        }

        {/* 定金课程 is_deposit 是否定金课程 0-否 1-付定金 2-付尾款*/}
        {
          info.is_baoming === 0 && info.is_deposit != 0 &&
          <div className='btns-box'>
            <a className='consult consult-m' href='http://q.url.cn/s/Vbkup6m?_type=wpa'>
              <i className='iconfont iconerji'/>
              <span>课程咨询</span>
            </a>
            <div className='btn btn-m bg-FD7700' onClick={() => this.expandPay(info.deposit_info, info.is_deposit)}>
              {info.is_deposit == 1 ? '立即付定金' : '立即付尾款'}
            </div>
          </div>
        }

        {/*已购买*/}
        {
          info.is_baoming === 1 &&
          <div className='btns-box'>
            <a className='consult consult-m' href='http://q.url.cn/s/Vbkup6m?_type=wpa'>
              <i className='iconfont iconerji'/>
              <span>课程咨询</span>
            </a>
            <a className='btn btn-m bg-09f' onClick={() => this.toStudy(info.v_course_id, info.is_have_video)}>
              开始学习
            </a>
          </div>
        }
        {/*拼团 未开团*/}
        {
          info.is_baoming === 0 && info.group_status === 3 &&
          <div className='btns-box'>
            <a className='consult consult-s' href='http://q.url.cn/s/Vbkup6m?_type=wpa'>
              <i className='iconfont iconerji'></i>
              <span>课程咨询</span>
            </a>
            <button className='btn btn-s bg-F4AAA7' onClick={this.simpleCourse}>
              <span>{`¥ ${info.price1}`}</span>
              <span>直接购买</span>
            </button>
            <button className='btn btn-s bg-E02E24'>
                            <span onClick={this.keyToGroup}>
                                <span>{`¥ ${info.pdd_group_info.price}`}</span>
                                <span>一键开团</span>
                            </span>
            </button>
          </div>

        }
        {/*拼团 已开团*/}
        {
          info.is_baoming === 0 && info.group_status === 4 &&
          <div className='btns-box'>
            <a className='consult consult-s' href='http://q.url.cn/s/Vbkup6m?_type=wpa'>
              <i className='iconfont iconerji'></i>
              <span>课程咨询</span>
            </a>
            <div className='btn btn-l bg-E02E24' onClick={this.props.invitedFriends}>
              邀请好友参团 {countdown} 后结束
            </div>
          </div>
        }

        {/*砍价*/}
        {
          info.is_baoming === 0 && this.props.data && this.props.data.is_bargain &&
          <div className='btns-box'>
            <a className='consult consult-s' href='http://q.url.cn/s/Vbkup6m?_type=wpa'>
              <i className='iconfont iconerji'></i>
              <span>课程咨询</span>
            </a>
            <button className='btn btn-s bg-F4AAA7'>
              <span>¥{info.price1}</span>
              <span onClick={this.tobuy}>直接购买</span>
            </button>
            {
              (barInfo.bargain_status === 2 || (getParam('id') === '139' && barInfo.bargain_status === 3) || !uid) &&
              <button className='btn btn-s bg-E02E24' onClick={this.toKanjia}>
                我要砍价
              </button>
            }
            {
              (barInfo.bargain_status === 0 || barInfo.bargain_status === 1) && (uid) &&
              <button className='btn btn-s bg-E02E24'>
                <span>¥{barInfo.amount}</span>
                <span onClick={this.bargainToOrder}>去支付</span>
              </button>
            }
          </div>
        }

        {/*特殊课程*/}
        {
          this.state.isbuy === 20 &&
          <div className='btns-box'>
            <a className='consult-l' href='http://q.url.cn/s/Vbkup6m?_type=wpa'>
              <i className='iconfont iconerji'></i>
              <span>课程咨询</span>
            </a>
          </div>
        }

        {/*特训营课程 未登录 未报名*/}
        {
          (info.is_aist && (this.props.user.hasError || info.is_baoming === 0)) &&
          <div className='btns-box'>
            <a className='consult consult-m' href='http://q.url.cn/s/Vbkup6m?_type=wpa'>
              <i className='iconfont iconerji'></i>
              <span>课程咨询</span>
            </a>

            <button className='btn sign-up-now' onClick={e => this.signUpNow()}>
              <span>立即报名</span>
            </button>
          </div>
        }
        {/*特训营课程 登陆且已报名*/}
        {
          info.is_aist && !this.props.user.hasError && info.is_baoming === 1 &&
          <div className='btns-box'>
            <a className='consult consult-m' href='http://q.url.cn/s/Vbkup6m?_type=wpa'>
              <i className='iconfont iconerji'></i>
              <span>课程咨询</span>
            </a>

            {
              info.aist_start_time === "" ?
                (
                  <a className='btn btn-m bg-09f'
                     onClick={() => this.toStudy(info.v_course_id, info.is_have_video)}>开始学习</a>
                ) : (
                  <button className='btn btn-m wait-open'>
                    <span>{this.formatDate(info.aist_start_time)}</span>
                  </button>
                )
            }
          </div>
        }


        {
          this.state.isShowOverlay &&
          <Overlay>
            {/*引导关注公众号*/}
            {
              this.state.bargainStatus === 1 &&
              <CancelBargain close={this.close} cancel={this.cancel}/>
            }

            <i onClick={this.close} className={'iconfont iconiconfront-2 bargain-close'}></i>
          </Overlay>

        }

        {
          /*
          *
          * limit_free_status: 0 未领取 1已领取未过期   2已过期
          * */
          info.is_baoming === 0 && info.is_limit_free && info.limit_free_status == 0 && <div className='btns-box'>
            <a className='consult consult-m' href='http://q.url.cn/s/Vbkup6m?_type=wpa'>
              <i className='iconfont iconerji'></i>
              <span>课程咨询</span>
            </a>

            <button className={'get-course btn'} onClick={() => {
              const {history, user, getCourse} = this.props
              if (user.hasError) {
                history.push('/passport')
              } else {
                getCourse(info.course_id, info.v_course_id)
              }
            }}>立即领取
            </button>
          </div>
        }

      </div>
    )
  }
}


function CancelBargain(props) {
  return (
    <div className='cancel-bargain'>
      <p className='top-img'><i className='iconfont icondanseshixintubiao-8'></i></p>
      <p className='tip-mess'>您已发起砍价，直接购买将清除已砍金额。直接购买可使用优惠券~</p>
      <div className="btns">
        <button onClick={props.close}>取消</button>
        <button onClick={props.cancel}>确定</button>
      </div>
    </div>
  )
}

export default connect(
  state => ({
    user: state.user
  }),
  {getCourses}
)(BtnStatus)