import React, { Component } from "react" import { Flex, WingBlank, WhiteSpace, List, Radio, Toast, Checkbox, } from "antd-mobile" import { http, getParam, browser } from "src/utils" import { HeaderBar } from "src/common/index" import { Link } from "react-router-dom" import "./index.scss" import { VList } from "src/common" import { WithFullSize } from "src/HOCs" import classnames from "classnames" 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" }, ] } 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: [], agree: false, } } onChange = (value) => { this.setState({ payType: value, checkPeriod: false, }) if (value === 2) { this.setState({ huabei: true, }) } } // 确定购买 pay = () => { const { payType, orderId } = this.state if (!this.state.agree) { return } if (payType === 0) { this.alipayPay(orderId) } else if (payType === 1) { this.weixinPay(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" } else { // 微信外部-支付 http .get(`${API["base-api"]}/pay/wxpay/wap_charge/oid/${orderId}`) .then((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 _this.props.history.replace( `/expand/callback?order_id=${getParam("oid")}` ) } }) }, 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 window.location.href = "/expand/callback?order_id=" + getParam("oid") } }) }, 1000) } onBridgeReady1 = (data) => { let _this = this data = data || _this.BridgeData /* eslint-disable-next-line no-undef */ 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) } }) } componentDidMount() { if (getParam("weixinpay")) { this.payCallback() } if (browser.isWeixin) { this.isweixinPay(getParam("oid")) } http .post(`${API["base-api"]}/m/deposit/detail`, { order_id: this.state.orderId, }) .then((res) => { const { data } = res // eslint-disable-next-line eqeqeq if (data.errno == 200) { this.setState({ categoryList: [data.data.course_info], salePrice: data.data.course_info.sale_price, }) } else { Toast.info(data.msg) } }) } changeAgreement = () => { this.setState((prevState) => ({ agree: !prevState.agree })) } render() { const { orderId, salePrice, payType, checkPeriod, singleMoney, periodNumber, categoryList, agree, } = 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.sale_price}</span> <span className={"price-des"}>(预付定金)</span> </p> </div> ) return ( <VList 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">{`¥${salePrice}`}</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.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> <Flex> <Flex.Item className={"agreement"}> <Checkbox.AgreeItem onChange={this.changeAgreement}> 我已同意定金不退 </Checkbox.AgreeItem> </Flex.Item> </Flex> {/*<div className='pay-tip'>请在15分钟内完成支付,否则届时系统将关闭该订单。</div>*/} <div className={classnames(["pay-button", !agree && "invalid"])} onClick={this.pay} > 确认支付 </div> </div> ) } } export default WithFullSize(PayOrder)