PayOrder.js

import React, { Component } from 'react';
import { Flex, WingBlank, WhiteSpace, List, Radio, Toast } from 'antd-mobile';
import { http, getParam, browser } from 'src/utils';
import { HeaderBar } from 'src/common/index';
import { Link } from 'react-router-dom';
import './PayOrder.scss';
import { VList } from 'src/common';


const RadioItem = Radio.RadioItem;

let mockData
if (browser.isWeixin) {
  mockData = [
    {value: 1, label: '微信支付', icon: 'iconweixinzhifu'},
  ];
} else {
  mockData = [
    {value: 1, label: '微信支付', icon: 'iconweixinzhifu'},
    {value: 0, label: '支付宝', icon: 'iconalipay'},
    // { value: 2, label: '花呗分期', icon: 'iconhuabei' },
  ];
}


export default class PayOrder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pay_amount: 0,
      payType: 1,
      stageNumber: 0,
      checkPeriod: false,
      singleMoney: 0,
      periodNumber: 0,
      orderId: getParam('oid'),
      huabei: false,
      fenqiList: [
        {value: 'zhifubao', qishu: '3', lilv: '2.30%', everyMoney: 300, feiyong: 2.3},
        {value: 'weixin', qishu: '6', lilv: '4.50%', everyMoney: 150, feiyong: 4.5},
        {value: 'huabei', qishu: '9', lilv: '7.50%', everyMoney: 100, feiyong: 7.5},
      ],
      categoryList: [],
    }
  }

  // 支付成功后，判断并重定向
  redirectAfterPay = () => {
    // status:0成功，1失败
    const status = getParam('status');
    const type = getParam('type');
    const oid = getParam('oid');
    const {history} = this.props;
    if (status || type) {
      if (parseInt(status, 10) === 0) {
        // type订单类型 0普通订单 1团购 2小团 3砍价 4单集购买 5定金课定金 6定金课尾款
        if (parseInt(type, 10) === 2) {
          history.push(`/togroup?id=${oid}`);
        } else if (parseInt(type, 10) === 4) {
          const courseId = window.localStorage.getItem('payCourse')
          courseId && window.localStorage.setItem('payCourse', courseId);
          courseId && history.push(`/detail?id=${courseId}`, {oid});
        } else {
          history.push('/purchased');
        }
      } else {
        Toast.info('支付异常', 2);
      }
    }
  }

  onChange = (value) => {
    this.setState({
      payType: value,
      checkPeriod: false,
    });
    if (value === 2) {
      this.setState({
        huabei: true,
      });
    }
  };
  checkStaging = (item) => {
    // console.log(item);
    this.setState({
      huabei: false,
      stageNumber: item.value,
      singleMoney: item.everyTotal,
      periodNumber: item.stage,
      checkPeriod: true,
    });
  }
  print = (...e) => {
    console.log(e);
  };
  // 确定购买
  pay = () => {
    const {payType, orderId} = this.state;
    if (payType === 0) {
      this.alipayPay(orderId);
    } else if (payType === 1) {
      this.weixinPay(orderId)
    }
    // else { // 花呗分期暂时不做
    //     this.huabeiPay(orderId)
    // }
  }
  // 微信支付
  weixinPay = (orderId) => {
    // 微信内部-支付
    if (browser.isWeixin) {
      window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
      // if(window.location.href.indexOf('aa=bb') === -1){
      //     localStorage.setItem('a', '第一次');
      //     window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
      // }
      // if(window.location.href.indexOf('aa=bb') > 0) {
      //     localStorage.setItem('a', '多次');
      //     let newHref = window.location.href.slice(0, window.location.href.indexOf('aa=bb')-1);
      //     window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(newHref + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
      // }
    } else {
      // 微信外部-支付
      http.get(`${API['base-api']}/pay/wxpay/wap_charge/oid/${orderId}`).then((res) => {
        // console.log(res);
        if (res.data.errno === 0) {
          window.location.href = res.data.data.url + "&redirect_url=" + encodeURIComponent(window.location.href + "&weixinpay=1").toLowerCase();
        } else {
          Toast.info(res.data.msg, 2)
        }
      })
    }
  }
  // 微信内部支付
  isweixinPay = () => {
    let _this = this;
    let weixin_code = getParam('code');
    if (weixin_code) {
      if (getParam('oid') !== undefined) {
        http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
          if (res.data.errno === 0) {
            let data = res.data.data;

            function onBridgeReady() {
              WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                  appId: data.appId,                //公众号名称，由商户传入
                  timeStamp: data.timeStamp,        //时间戳，自1970年以来的秒数
                  nonceStr: data.nonceStr,          //随机串
                  package: data.package,
                  signType: data.signType,          //微信签名方式：
                  paySign: data.paySign,             //微信签名
                },
                function (res) {
                    // eslint-disable-next-line eqeqeq
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    Toast.info('支付成功', 2);
                    _this.intervalPayStatus = setInterval(function () {
                      http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
                        if (res.data.errno === 401) {
                          clearInterval(_this.intervalPayStatus);
                          _this.intervalPayStatus = null;
                          // 获取课程类型
                          http.get(`${API['base-api']}/m/app_order/detail/${getParam('oid')}`).then(res => {
                            if (Number(res.data.data.course_type) === 2) {
                              _this.props.history.replace(`/togroup?id=${getParam('oid')}`);
                            } else {
                              // 跳转到已购课程  /purchased 不需要传递任何参数
                              _this.props.history.replace(`/purchased`);
                            }
                          });
                        }
                      })
                    }, 1000)
                  } else {
                    alert('支付失败')
                  }
                },
              )
            }

            if (typeof WeixinJSBridge == "undefined") {
              if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
              } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
              }
            } else {
              onBridgeReady();
            }
          } else {
            Toast.info(res.data.msg, 2)
          }
        })
      }
    }
  }
  // 支付完成之后获取状态
  payCallback = () => {
    const _this = this;
    // 支付回调
    // 定时器轮训获取订单状态
    _this.intervalPayStatus = setInterval(function () {
      http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
        if (res.data.errno === 401) {
          clearInterval(_this.intervalPayStatus);
          _this.intervalPayStatus = null;
          // 获取课程类型
          http.get(`${API['base-api']}/m/app_order/detail/${getParam('oid')}`).then(res => {
            if (Number(res.data.data.course_type) === 2) {
              _this.props.history.replace(`/togroup?id=${getParam('oid')}`);
            } else {
              // 跳转到已购课程  /purchased 不需要传递任何参数
              _this.props.history.replace(`/purchased`);
            }

          });
        }
      })
    }, 1000)
  }

  onBridgeReady1 = (data) => {
    let _this = this;
    data = data || _this.BridgeData;

    WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
        "appId": "wx23dac6775ac82877",                //公众号名称，由商户传入
        "timeStamp": data.timeStamp,        //时间戳，自1970年以来的秒数
        "nonceStr": data.nonceStr,          //随机串
        "package": data.package,
        "signType": data.signType,          //微信签名方式：
        "paySign": data.paySign,             //微信签名
      },
      function (res) {
        // eslint-disable-next-line eqeqeq
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          Toast.info('支付成功', 2);
          _this.payCallback();
        } else {
          alert('支付失败')
        }
      },
    )
  }
  // 支付宝支付
  alipayPay = (orderId) => {
    http.get(`${API['base-api']}/pay/alipay/wap_charge_new/oid/${orderId}`).then((res) => {
      if (res.data.errno === 0) {
        this.payCallback();
        window.location = res.data.data.url;
      } else {
        Toast.info(res.data.msg, 2)
      }
    })
  }
  // 花呗分期 暂时不做
  huabeiPay = (orderId) => {
    const {periodNumber} = this.state;

    // console.log('花呗分期支付');
    http.get(`/pay/alipay/wap_charge/oid/${orderId}/plat/{plat} /hb_num/${periodNumber}`).then(res => {
      // console.log(res);
      if (res.data.errno === 0) {
        window.location = res.data.data.url;
      } else {
        Toast.info(res.data.msg, 2)
      }
    });
  }

  componentDidMount() {
    this.redirectAfterPay()
    let data
    if (this.props.location.state && this.props.location.state.group) {
      data = {
        order_id: this.state.orderId,
        type: 2,
      }
    } else {
      data = {
        order_id: this.state.orderId,
      }
    }
    http.post(`${API['base-api']}/m/order/detail`, data).then((res) => {
      if (res.data.errno !== 200) {
        Toast.info(res.data.msg, 2);
        return;
      }
      const {course, pay_amount} = res.data.data;
      const fenqiList = [];
      [1, 2, 3].forEach((item) => {
        let obj = {};
        obj.value = item;
        if (item === 1) {
          obj.stage = 3; //期数
          obj.moneyRate = '2.30%'; // 分期费率展示
          obj.rate = 0.023; // 分期费率计算
          obj.periodic = (pay_amount / 3).toFixed(2); // 每期本金
        } else if (item === 2) {
          obj.stage = 6; //期数
          obj.moneyRate = '4.50%'; // 分期费率展示
          obj.rate = 0.045; // 分期费率计算
          obj.periodic = (pay_amount / 6).toFixed(2); // 每期本金
        } else {
          obj.stage = 12; //期数
          obj.moneyRate = '7.50%'; // 分期费率展示
          obj.rate = 0.075; // 分期费率计算
          obj.periodic = (pay_amount / 9).toFixed(2); // 每期本金
        }
        obj.serviceFee = ((pay_amount * obj.rate) / obj.stage).toFixed(2); // 每期的手续费 = 总金额 * 费率 / 期数
        obj.everyTotal = (parseFloat(obj.periodic) + parseFloat(obj.serviceFee)).toFixed(2);// 每期总费用 = 每期本金 + 每期手续费
        fenqiList.push(obj);
      });
      // console.log(fenqiList);
      // { value: 'zhifubao',  qishu: '3', lilv: '2.30%', everyMoney: 300, feiyong: 2.3 },
      // { value: 'weixin',  qishu: '6', lilv: '4.50%', everyMoney: 150, feiyong: 4.5 },
      // { value: 'huabei',  qishu: '9', lilv: '7.50%', everyMoney: 100, feiyong: 7.5 },
      this.setState({
        pay_amount,
        categoryList: course,
        fenqiList,
      });
    });
    if (getParam('is_class') === 1 || getParam('weixinpay')) {
      this.payCallback()
    }
    if (browser.isWeixin) {
      this.setState({
        payType: 1,
      })
      this.isweixinPay()
    }
  }

  render() {
    const {orderId, pay_amount, payType, checkPeriod, singleMoney, periodNumber, huabei, fenqiList, categoryList, stageNumber} = this.state;
    return (
      <div className='pay-order'>
        <HeaderBar title='确认支付' arrow={true}></HeaderBar>
        <WhiteSpace size='sm'></WhiteSpace>
        <div className='order-number'>
          <WingBlank>
            <Flex justify='between' align='center' style={{height: '44px'}}>
              <span>订单号</span>
              <span className='number'>{orderId}</span>
            </Flex>
          </WingBlank>
        </div>
        <WhiteSpace size='md'></WhiteSpace>
        {
          categoryList.map((item, index) => {
            const Info = (
              <div className="order-info">
                <p className='order-title text-overflow-one'>
                  <Link to={`/detail?id=${item.course_id}`}>{item.course_title}</Link>
                </p>
                <p className='order-content text-overflow-2'>{item.simpledescription}</p>
                <p className='order-des'>
                  <span className='order-newprice'>¥{item.price1}</span>
                  <span className='order-price'>¥{item.price0}</span>
                </p>
              </div>
            )
            return (
              <VList handleClick={this.print} key={index} img={item.image_name}
                     id={item.course_id}
                     info={Info}></VList>
            )
          })
        }
        <WhiteSpace size='md'></WhiteSpace>
        <div className='order-number'>
          <WingBlank>
            <Flex justify='between' align='center' style={{height: '44px'}}>
              <span>支付金额</span>
              <span className='money'>{`￥${pay_amount}`}</span>
            </Flex>
          </WingBlank>
        </div>

        <WhiteSpace size='md'></WhiteSpace>
        <List renderHeader={() => '支付方式'} className='pay-type-list'>
          {mockData.map(i => (
            <RadioItem
              thumb={<i className={`iconfont ${i.icon} ${payType === i.value ? 'checked' : ''}`}></i>}
              key={i.value}
              checked={payType === i.value}
              onChange={() => this.onChange(i.value)}>
              {/* {i.label} */}
              {
                i.value === 2 ? (
                  <Flex direction='column' align='start' style={{width: '100%', marginTop: '6px'}}>
                    <Flex direction='row' justify='between'
                          style={{width: '100%', paddingRight: '30px'}}>
                      <span style={{color: '#555555', fontSize: '14px'}}>{i.label}</span>
                      {
                        checkPeriod ? (
                          <span style={{
                            color: '#333333',
                            fontSize: '12px',
                          }}>{`${singleMoney}元 × ${periodNumber}期`}</span>
                        ) : null
                      }
                    </Flex>
                    <Flex justify='start'>
                      <span style={{color: '#999999', fontSize: '12px'}}>支付上限受限于您的花呗额度</span>
                    </Flex>
                  </Flex>
                ) : (i.label)
              }
            </RadioItem>
          ))}
        </List>
        <div className='pay-tip'>请在15分钟内完成支付，否则届时系统将关闭该订单。</div>

        <div className='pay-button' onClick={this.pay}>确认支付</div>

        {
          huabei ? (
            <div className='check-staging'>
              <div className='container'>
                <p className='check-title'>请选择分期</p>
                {fenqiList.map(i => (
                  <RadioItem
                    key={i.value}
                    checked={stageNumber === i.value}
                    onChange={() => this.checkStaging(i)}>
                    {`${i.everyTotal}元 × ${i.stage}期`}
                    <List.Item.Brief>{`手续费${i.serviceFee}元/期，费率${i.moneyRate}`}</List.Item.Brief>
                  </RadioItem>
                ))}
              </div>
            </div>
          ) : null
        }
      </div>
    )
  }
}