index.js 6.74 KB
Newer Older
xuzhenghua committed
1
import React, {Component} from 'react';
xuzhenghua committed
2
import {http, getParam, SendMessageToApp} from '@/utils';
xuzhenghua committed
3 4
import listFrame from './../listFrame/index';
import './index.scss';
xuzhenghua committed
5 6 7 8
import {Toast} from "antd-mobile"
import {connect} from "react-redux";
import {Link, withRouter} from "react-router-dom"

xuzhenghua committed
9 10

class ReserveCourse extends Component {
xuzhenghua committed
11 12 13
    constructor(props) {
        super(props);
        this.state = {
xuzhenghua committed
14 15
            courseData: [],
            isShowMore: false
xuzhenghua committed
16 17
        };
    }
xuzhenghua committed
18

xuzhenghua committed
19 20 21 22
    componentDidMount() {
        this.fetchAICourse();
    }

FE committed
23 24 25 26 27 28 29 30 31

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        if(this.props.isApp !== nextProps.isApp) {
            this.fetchAICourse();
            return false;
        }
        return true;
    }

xuzhenghua committed
32 33 34 35 36
    fetchAICourse = () => {
        http.get(`${API.home}/sys/pre_coursee`).then(res => {
            const {code, data, msg} = res.data;
            if (code === 200) {
                this.setState({
xuzhenghua committed
37
                    courseData: JSON.stringify(data) == '{}' ? []:data.filter((item, index) => index < 4),
xuzhenghua committed
38
                    courseDataAll: data
xuzhenghua committed
39 40 41 42 43 44 45
                })
            } else {
                Toast.info(msg, 2);
            }
        });
    }

xuzhenghua committed
46

xuzhenghua committed
47 48 49 50 51
    // 立即付定金
    expandPaydj = (courseId) => {
        const {user, history} = this.props;
        const uid = user && user.data && user.data.uid;
        if (!uid) {
xuzhenghua committed
52 53 54 55 56 57
            if (!getParam('version')) {
                this.props.history.push('/passport/login')
            } else {
                SendMessageToApp("toLogin");
            }

xuzhenghua committed
58
        } else {
xuzhenghua committed
59 60 61 62 63 64 65 66 67 68 69 70
            if (!getParam('version')) {
                this.props.history.push(
                    `/deposit-order?oid=${courseId}&source=${2}`,
                    {
                        id: courseId,
                        isexpand: 1,
                        sourcenum: 2
                    }
                )
            } else {
                SendMessageToApp("earnestMoney", courseId);
            }
xuzhenghua committed
71 72 73
        }
    }
    // 立即付尾款
FE committed
74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
    expandPaywk = (courseId, time,day) => {
        const {user, history} = this.props;
        const uid = user && user.data && user.data.uid;
        if (!uid) {
            if (!getParam('version')) {
                this.props.history.push('/passport/login')
            } else {
                SendMessageToApp("toLogin");
            }

        } else {
            let timeStamp = Date.parse(new Date()) / 1000;
            if (timeStamp >= time) {
                if (!getParam('version')) {
                    this.props.history.push(
                        '/final-deposit-order?source=1',
                        {
                            id: courseId,
                            sourcenum: 1
                        }
                    )
                } else {
                    SendMessageToApp("TailMoney");
                }
            } else {
                Toast.info("付尾款时间将在" + day + "开启", 2);
            }
        }
xuzhenghua committed
102 103 104
    }
    // 去学习
    tostudy = (courseId) => {
xuzhenghua committed
105 106 107
        if (!getParam('version')) {
            this.props.history.push(`/getDetail?id=${courseId}`)
        } else {
xuzhenghua committed
108
            SendMessageToApp("toCourse", courseId);
xuzhenghua committed
109
        }
xuzhenghua committed
110
    }
xuzhenghua committed
111 112 113
    // 查看更多
    showMoreData = () => {
        this.setState({
xuzhenghua committed
114
            isShowMore: !this.state.isShowMore,
xuzhenghua committed
115 116 117
            courseData: this.state.isShowMore ? this.state.courseDataAll.filter((item, index) => index < 4) : this.state.courseDataAll,
        })
    }
xuzhenghua committed
118 119

    render() {
xuzhenghua committed
120
        const {courseData, isShowMore} = this.state;
xuzhenghua committed
121 122 123 124 125 126
        return (
            <div className='reserve-course-module'>
                <CourseList courseData={courseData}
                            expandPaydj={this.expandPaydj}
                            expandPaywk={this.expandPaywk}
                            tostudy={this.tostudy}/>
xuzhenghua committed
127 128 129 130 131

                <button className="more-button" onClick={this.showMoreData}>
                    {isShowMore ? '收起' : '展开更多'}
                </button>

xuzhenghua committed
132 133 134
            </div>
        )
    }
xuzhenghua committed
135 136
}

xuzhenghua committed
137 138 139 140 141 142 143 144 145
function CourseList(props) {
    const {courseData, expandPaydj, expandPaywk, tostudy} = props
    return (
        <div className="course-list">
            <ul>
                {
                    courseData.map((item, index) => {
                        return (
                            <li className="course-item-box" key={index}>
xuzhenghua committed
146
                                <a onClick={() => tostudy(item.course_id)}>
xuzhenghua committed
147 148 149 150 151 152 153 154
                                    <div className="top">
                                        <div className="square">
                                            <p className="circular">
                                                到手最低¥<span>{Number(item.price) - Number(item.deduction_amount) - Number(item.limit_amount)}</span>
                                            </p>
                                        </div>
                                        <img className="course-img" src={item.image_name} alt=""/>
                                    </div>
xuzhenghua committed
155
                                </a>
xuzhenghua committed
156 157 158 159 160 161

                                <p className="count-price">
                                    =原价¥{item.price}
                                    <span>-抵扣¥<i>{item.deduction_amount}</i></span>
                                    <span>-膨胀券¥<i>{item.limit_amount}</i></span>
                                </p>
xuzhenghua committed
162

xuzhenghua committed
163 164 165 166 167 168 169 170
                                <div className="btn">
                                    {
                                        item.is_buy === 0 &&
                                        <button className="to-expand-buy1"
                                                onClick={() => expandPaydj(item.course_id)}>立即付定金</button>
                                    }
                                    {
                                        item.is_buy === 1 &&
xuzhenghua committed
171
                                        <button
FE committed
172 173 174
                                        className="to-expand-buy2"
                                         onClick={() => expandPaywk(item.course_id, item.start_timestamp,item.final_start_time)}
                                         >立即付尾款</button>
xuzhenghua committed
175 176 177 178 179 180 181 182 183 184 185 186 187 188 189
                                    }
                                    {
                                        item.is_buy === 2 &&
                                        <button className="to-study"
                                                onClick={() => tostudy(item.course_id)}>开始学习</button>
                                    }

                                </div>
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    )
xuzhenghua committed
190 191
}

xuzhenghua committed
192 193 194 195
export default listFrame(connect(
    state => ({
        user: state.user
    }),
zhanghaozhe committed
196
)(withRouter(ReserveCourse)))