index.js 15.6 KB
Newer Older
zhanghaozhe committed
1
import React, { Component } from 'react'
xuzhenghua committed
2
import './index.scss'
zhanghaozhe committed
3 4 5 6 7 8
import { getParam, http, browser } from "@/utils";
import { Toast } from 'antd-mobile';
import { Link, withRouter } from "react-router-dom";
import { compose } from "redux";
import { connect } from "react-redux";
import { differenceInHours, differenceInMinutes, differenceInSeconds } from "date-fns";
xuzhenghua committed
9

xuzhenghua committed
10 11

class Single extends Component {
xuzhenghua committed
12 13 14
    constructor(props) {
        super(props)
        this.state = {
FE committed
15
            // status: 1,
xuzhenghua committed
16 17 18
            orderId: '',
            nowPrice: '',
            laterPrice: '',
xuzhenghua committed
19 20 21
            hour: '',
            min: '',
            sec: '',
xuzhenghua committed
22 23
            endTime: '',
            groupOrderId: '',
xuzhenghua committed
24
            payType: '0',  // 1支付宝 0微信
FE committed
25
            // singleBox: false,
wangshuo committed
26
            showSingleBox: false,
xuzhenghua committed
27
        }
xuzhenghua committed
28
    }
xuzhenghua committed
29

xuzhenghua committed
30
    componentDidMount() {
FE committed
31 32 33 34 35 36 37
        // if (getParam('is_class') === 1 || getParam('weixinpay')) {
        //     console.log(0);
        //     this.payCallback()
        // }
        // if (browser.isWeixin) {
        //     this.isweixinPay()
        // }
xuzhenghua committed
38 39
    }

wangshuo committed
40
    componentWillReceiveProps(nextProps, nextContext) {
FE committed
41 42 43 44
        // console.log(nextProps);
        // this.setState({
        //     singleBox: nextProps.singleBox
        // })
xuzhenghua committed
45 46 47 48 49 50 51 52 53
    }

    // 选择支付方式
    check = (type) => {
        this.setState({
            payType: type
        })
    }

xuzhenghua committed
54 55
    // 确定购买
    toBuy = () => {
xuzhenghua committed
56
        const { courseId } = this.props;
xuzhenghua committed
57 58
        const videoID = this.props.data.video_id || this.props.data.id;
        http.get(`${API.home}/sys/createClassOrder/${videoID}`).then((res) => {
xuzhenghua committed
59
            if (res.data.code === 200) {
xuzhenghua committed
60 61 62
                this.setState({
                    orderId: res.data.data.order_id
                })
xuzhenghua committed
63
                this.state.payType === '1' ? this.alipayPay(res.data.data.order_id, courseId) : this.weixinPay(res.data.data.order_id)
xuzhenghua committed
64
            } else {
xuzhenghua committed
65
                Toast.info(res.data.msg, 2)
xuzhenghua committed
66 67 68 69 70 71
            }
        })
    }
    // 微信支付
    weixinPay = (orderId) => {
        // 微信内部-支付
xuzhenghua committed
72
        if (browser.isWeixin) {
wangshuo committed
73
            window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb&oid=" + orderId).toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
xuzhenghua committed
74 75
        } else {
            // 微信外部-支付
zhanghaozhe committed
76
            http.get(`${API['base-api']}/pay/wxpay/wap_charge/oid/${orderId}`).then((res) => {
xuzhenghua committed
77
                if (res.data.errno === 0) {
wangshuo committed
78
                    window.location.href = res.data.data.url + "&redirect_url=" + encodeURIComponent(window.location.href + "&weixinpay=1&oid=" + orderId).toLowerCase();
xuzhenghua committed
79
                } else {
xuzhenghua committed
80
                    Toast.info(res.data.msg, 2)
xuzhenghua committed
81 82 83 84 85
                }
            })
        }
    }
    // 支付宝支付
xuzhenghua committed
86
    alipayPay = (orderId, courseId) => {
FE committed
87
        http.get(`${API['base-api']}/pay/alipay/wap_charge_new/oid/${orderId}`).then((res) => {
xuzhenghua committed
88 89
            if (res.data.errno === 0) {
                window.location = res.data.data.url;
FE committed
90
                courseId && window.localStorage.setItem('payCourse', courseId);
xuzhenghua committed
91
            } else {
xuzhenghua committed
92
                Toast.info(res.data.msg, 2)
xuzhenghua committed
93 94 95
            }
        })
    }
wangshuo committed
96

xuzhenghua committed
97 98
    // 微信内部支付
    isweixinPay = () => {
wangshuo committed
99
        let _this = this;
xuzhenghua committed
100 101
        let weixin_code = getParam('code')
        if (weixin_code) {
wangshuo committed
102
            if (!getParam('oid')) {
xuzhenghua committed
103 104
                return
            } else {
zhanghaozhe committed
105
                http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
xuzhenghua committed
106
                    if (res.data.errno === 0) {
wangshuo committed
107
                        const data = res.data.data;
108

wangshuo committed
109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
                        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) {
                                    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;
                                                    // 获取课程类型
wangshuo committed
128
                                                    http.get(`${API['base-api']}/class_order_status/${getParam('oid')}`).then((res) => {
wangshuo committed
129
                                                        if (Number(res.data.data.errno) === 200) {
wangshuo committed
130 131
                                                            // 正常购买单集成功
                                                            this.setState({
wangshuo committed
132 133
                                                                status: 6,
                                                                showSingleBox: true,
wangshuo committed
134
                                                            })
wangshuo committed
135
                                                        } else if (Number(res.data.data.errno) === 201) {
wangshuo committed
136 137
                                                            // 0元参团
                                                            this.setState({
wangshuo committed
138 139
                                                                status: 4,
                                                                showSingleBox: true,
wangshuo committed
140
                                                            })
wangshuo committed
141
                                                        } else if (Number(res.data.data.errno) === 202) {
wangshuo committed
142 143
                                                            // 0元购
                                                            this.setState({
wangshuo committed
144 145
                                                                status: 3,
                                                                showSingleBox: true,
wangshuo committed
146
                                                            })
wangshuo committed
147
                                                        } else if (Number(res.data.data.errno) === 203) {
wangshuo committed
148 149 150 151
                                                            // 三天内特价
                                                            this.setState({
                                                                nowPrice: res.data.data.data.now_price,
                                                                laterPrice: res.data.data.data.three_day_later_price,
wangshuo committed
152 153
                                                                status: 2,
                                                                showSingleBox: true,
wangshuo committed
154 155 156 157 158 159 160 161 162 163 164 165 166 167
                                                            })
                                                        } else {
                                                            Toast.info(res.data.data.msg, 2)
                                                        }
                                                    })
                                                }
                                            })
                                        }, 1000)
                                    } else {
                                        alert('支付失败')
                                    }
                                }
                            )
                        }
168

xuzhenghua committed
169 170
                        if (typeof WeixinJSBridge == "undefined") {
                            if (document.addEventListener) {
wangshuo committed
171
                                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
xuzhenghua committed
172
                            } else if (document.attachEvent) {
wangshuo committed
173 174
                                document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
                                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
xuzhenghua committed
175 176
                            }
                        } else {
wangshuo committed
177
                            onBridgeReady()
xuzhenghua committed
178 179
                        }
                    } else {
xuzhenghua committed
180
                        Toast.info(res.data.msg, 2)
xuzhenghua committed
181 182 183 184 185
                    }
                })
            }
        }
    }
xuzhenghua committed
186

xuzhenghua committed
187 188
    // 支付完成之后获取状态
    payCallback = () => {
wangshuo committed
189
        const _this = this;
190
        if (!getParam('oid')) {
wangshuo committed
191
            return;
192
        } else {
wangshuo committed
193 194 195 196 197 198 199 200 201 202
            _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']}/class_order_status/${getParam('oid')}`).then((res) => {
                            if (Number(res.data.data.errno) === 200) {
                                // 正常购买单集成功
                                this.setState({
wangshuo committed
203 204
                                    status: 6,
                                    showSingleBox: true,
wangshuo committed
205 206 207 208
                                })
                            } else if (Number(res.data.data.errno) === 201) {
                                // 0元参团
                                this.setState({
wangshuo committed
209 210
                                    status: 4,
                                    showSingleBox: true,
wangshuo committed
211 212 213 214
                                })
                            } else if (Number(res.data.data.errno) === 202) {
                                // 0元购
                                this.setState({
wangshuo committed
215 216
                                    status: 3,
                                    showSingleBox: true,
wangshuo committed
217 218 219 220 221 222
                                })
                            } else if (Number(res.data.data.errno) === 203) {
                                // 三天内特价
                                this.setState({
                                    nowPrice: res.data.data.data.now_price,
                                    laterPrice: res.data.data.data.three_day_later_price,
wangshuo committed
223 224
                                    status: 2,
                                    showSingleBox: true,
wangshuo committed
225 226 227 228 229 230 231 232 233 234
                                })
                            } else {
                                Toast.info(res.data.data.msg, 2)
                            }
                        })
                    }
                })
            }, 1000)
        }

xuzhenghua committed
235 236 237 238 239 240 241 242 243 244 245 246 247 248
    }


    // 特价购买全集
    toBuyAll = () => {

    }
    // 0元购买全集
    zerobuyReceive = () => {
        Toast.success('购买全集成功', 3)
        this.colse()
    }
    // 0元参团
    zerogroupBuy = () => {
xuzhenghua committed
249 250 251 252 253 254 255 256
        this.getOrderId()
    }

    // 获取订单号-0元参团
    getOrderId = () => {
        let data = {
            course_id: getParam('id')
        }
zhanghaozhe committed
257
        http.post(`${API['base-api']}/pdd/sys`, data).then((res) => {
xuzhenghua committed
258 259 260 261 262 263 264 265 266 267 268 269 270
            if (res.data.errno === 0) {
                this.setState({
                    groupOrderId: res.data.data.order_id
                })
                this.getOrderStatus(res.data.data.order_id)
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }

    // 获取订单状态-0元参团
    getOrderStatus = (id) => {
zhanghaozhe committed
271
        http.get(`${API.home}/m/pdd/order_status/${id}`).then((res) => {
xuzhenghua committed
272 273 274 275 276 277 278 279 280
            if (res.data.code === 200) {
                this.getTime(res.data.data.pdd_order_id)
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }
    // 获取倒计时-0元参团
    getTime = (id) => {
zhanghaozhe committed
281
        http.get(`${API.home}/m/pdd_order_end_time/${id}`).then((res) => {
xuzhenghua committed
282 283 284 285 286 287 288 289
            if (res.data.code === 200) {
                this.setState({
                    endTime: res.data.data.end_time,
                    status: 7
                })
            } else {
                Toast.info(res.data.msg, 2)
            }
xuzhenghua committed
290
        })
xuzhenghua committed
291 292
    }

xuzhenghua committed
293 294 295 296 297
    // 邀请好友参团
    toGroup = () => {
        this.props.history.push(`/togroup?id=${this.state.groupOrderId}`)
    }

xuzhenghua committed
298
    // 关闭弹窗
xuzhenghua committed
299 300
    colse = () => {
        this.props.boxHide(false);
xuzhenghua committed
301 302 303
        this.setState({
            status: 1
        })
xuzhenghua committed
304
    }
xuzhenghua committed
305

xuzhenghua committed
306
    render() {
307
        const {showSingleBox} = this.state;
xuzhenghua committed
308 309 310 311 312 313 314 315 316 317 318 319 320 321 322
        if (this.state.endTime) {
            let date = this.state.endTime * 1000
            let now = Date.now()
            setInterval(() => {
                date -= 1000
                let s = differenceInSeconds(new Date(date), now) % 60,
                    m = differenceInMinutes(new Date(date), now) % 60,
                    h = differenceInHours(new Date(date), now) % 24
                this.setState({
                    hour: h,
                    min: m,
                    sec: s,
                })
            }, 1000)
        }
323
        const {singleType} = this.props;
xuzhenghua committed
324
        return (
325
            singleType === 1 &&
xuzhenghua committed
326
            <div>
327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350
                <div className='popup-box'>
                    <div className='content singleset-payment'>
                        <div className='price-box'>
                            <span>实付款:</span>
                            <p>{this.props.data.class_price}</p>
                        </div>
                        <div className='course-info'>
                            <p className='text-overflow-1'><span>课程:</span>
                                {this.props.title}
                            </p>
                            <p className='text-overflow-1'><span>课时:</span>
                                {this.props.data.name}
                            </p>
                        </div>
                        <div className='payment-type'>
                            <label>支付方式:</label>
                            {
                                !browser.isWeixin &&
                                <p onClick={this.check.bind(this, '1')}>
                                    <i className='iconfont iconalipay'></i>
                                    <span>支付宝</span>
                                    <i className={`iconfont icondanseshixintubiao-5 redio ${this.state.payType === '1' ? 'redioed' : ''}`}></i>
                                </p>
                            }
xuzhenghua committed
351

352 353 354 355 356 357 358
                            <p onClick={this.check.bind(this, '0')}>
                                <i className='iconfont iconweixinzhifu buy'></i>
                                <span>微信支付</span>
                                <i className={`iconfont icondanseshixintubiao-5 redio ${this.state.payType === '0' ? 'redioed' : ''}`}></i>
                            </p>
                        </div>
                        <div className='btn btn-18B4ED' onClick={this.toBuy}>确认购买</div>
xuzhenghua committed
359
                    </div>
360 361 362
                    <i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
                </div>

xuzhenghua committed
363 364 365 366 367 368 369
            </div>

        );
    }

}

xuzhenghua committed
370 371 372 373 374 375 376
export default compose(
    connect(
        state => ({user: state.user}),
        null
    ),
    withRouter
)(Single)