index.js 6.42 KB
Newer Older
xuzhenghua committed
1 2
import React, {Component} from 'react'
import {connect} from 'react-redux'
xuzhenghua committed
3 4
import {Checkbox, Modal, Toast} from 'antd-mobile'
import {HeaderBar} from '../../common'
xuzhenghua committed
5
import Loading from '@/common/Loading'
xuzhenghua committed
6
import ShopCart from './cartList.js'
baiguangyao committed
7 8
import './card.scss'
import classnames from 'classnames'
FE committed
9
import {http} from "@/utils";
10
import {getCourses} from './../detail/actions';
baiguangyao committed
11

xuzhenghua committed
12
const alert = Modal.alert;
baiguangyao committed
13 14 15 16 17

class Cart extends Component {
    constructor(props) {
        super(props)
        this.state = {
xuzhenghua committed
18
            data: [],
baiguangyao committed
19 20 21
            checkedNum: 0,
            allPrice: 0,
            cartNmu: 0,
xuzhenghua committed
22 23
            courseIdarr: [], // 选中的课程id
            isLoading: true
baiguangyao committed
24 25 26
        }

    }
xuzhenghua committed
27 28 29 30


    componentDidMount() {
        this.getList()
baiguangyao committed
31
    }
xuzhenghua committed
32

xuzhenghua committed
33
    // 获取课程列表
xuzhenghua committed
34
    getList = () => {
zhanghaozhe committed
35
        http.get(`${API.home}/m/cart/list`).then((res) => {
xuzhenghua committed
36 37
            if (res.data.code === 200) {
                this.setState({
xuzhenghua committed
38 39
                    data: res.data.data.courses,
                    isLoading: false
xuzhenghua committed
40 41 42 43 44
                })
            } else {
                Toast.info(res.data.msg, 2);
            }
        })
.  
baiguangyao committed
45
    }
xuzhenghua committed
46

baiguangyao committed
47 48 49 50 51 52 53 54 55 56 57 58 59
    //全选
    allChange(e) {
        let checked = e.target.checked
        let newData = this.state.data.map((item, i) => {
            return {
                ...item,
                check: checked
            }
        })
        this.setState({
            data: newData
        })
        this.calc(newData)
xuzhenghua committed
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

        if (checked) {
            let arr = []
            newData.map((item, i) => {
                arr.push(item.course_id)
            })
            this.setState({
                courseIdarr: arr
            })

        } else {
            this.setState({
                courseIdarr: []
            })
        }

baiguangyao committed
76 77 78 79 80
    }

    //点击
    checkChange(id, check) {
        let newData = this.state.data.map((item, i) => {
xuzhenghua committed
81
            if (item.course_id === id) {
baiguangyao committed
82 83 84 85 86 87 88 89 90 91 92 93
                return {
                    ...item,
                    check: check
                }
            } else {
                return item;
            }
        })
        this.setState({
            data: newData
        })
        this.calc(newData)
xuzhenghua committed
94 95 96 97 98 99 100 101 102 103 104 105 106
        let arr = []
        newData.forEach((item, i) => {
            if (item.check) {
                arr.push(item.course_id)
                this.setState({
                    courseIdarr: arr
                })
            } else {
                this.setState({
                    courseIdarr: arr
                })
            }
        })
baiguangyao committed
107
    }
xuzhenghua committed
108

baiguangyao committed
109 110 111 112 113
    //计算总价
    calc(newData) {
        let allPrice = 0;
        let checkedNum = 0;
        let cartNmu = 0;
xuzhenghua committed
114
        let arr = []
baiguangyao committed
115 116
        newData.forEach((item, i) => {
            if (item.check) {
xuzhenghua committed
117
                arr.push(item)
baiguangyao committed
118
                cartNmu += 1;
xuzhenghua committed
119
                checkedNum = arr.length;
xuzhenghua committed
120
                allPrice += parseFloat(item.price1);
baiguangyao committed
121 122 123 124 125 126 127 128
            }
        })
        this.setState({
            checkedNum,
            allPrice,
            cartNmu
        })
    }
xuzhenghua committed
129

xuzhenghua committed
130 131
    // 去结算
    tobuy = () => {
132
        // console.log(this.state.courseIdarr);
zhanghaozhe committed
133
        http.get(`${API['base-api']}/m/cart/addtopreorder/[${this.state.courseIdarr}]`).then((res) => {
xuzhenghua committed
134
            if (res.data.errno == 0) {
xuzhenghua committed
135
                this.props.history.push(`/order?id=[${this.state.courseIdarr}]`,{simple: 1})
xuzhenghua committed
136 137 138 139 140 141 142
            } else {
                Toast.info(res.data.msg, 2);
            }
        })
    }


xuzhenghua committed
143
    // 删除
xuzhenghua committed
144
    todelete = () => {
xuzhenghua committed
145 146 147 148 149 150 151
        if (this.state.courseIdarr.length > 0) {
            alert('', '确定从购物车中删除?', [
                {text: '取消', onPress: () => console.log('cancel')},
                {
                    text: '确认',
                    onPress: () => {
                        let data = {
xuzhenghua committed
152
                            course_ids: this.state.courseIdarr
xuzhenghua committed
153
                        }
zhanghaozhe committed
154
                        http.post(`${API.home}/m/cart/remove`, data).then((res) => {
xuzhenghua committed
155 156
                            if (res.data.code === 200) {
                                this.getList()
xuzhenghua committed
157 158 159 160
                                this.setState({
                                    checkedNum: 0,
                                    allPrice:0
                                })
xuzhenghua committed
161 162 163 164 165 166 167 168 169
                            } else {
                                Toast.info(res.data.msg, 2);
                            }
                        })
                    }
                }
            ])
        }

baiguangyao committed
170
    }
xuzhenghua committed
171

172
    toCourseDetail = (id) => {
173
        // console.log(id);
174
        const { dispatch, history } = this.props;
175
        // dispatch(getCourses(id, () => {
176
            history.push(`/detail?id=${id}`)
177
        // }));
178 179
    }

xuzhenghua committed
180

baiguangyao committed
181 182
    render() {
        return (
xuzhenghua committed
183
            <div className="cart-page" style={{overflow: 'hidden'}}>
xuzhenghua committed
184
                <HeaderBar title='购物车' arrow={true} cart={false} delete={true} toDelete={this.todelete}></HeaderBar>
baiguangyao committed
185

xuzhenghua committed
186 187
                <Loading isLoading={this.state.isLoading}>
                    <div className="cart-body">
188
                        <ShopCart
xuzhenghua committed
189
                            checkChange={this.checkChange.bind(this)}
190 191 192
                            data={this.state.data}
                            toDetail={this.toCourseDetail}
                        />
xuzhenghua committed
193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215

                        <div className="cart-footer">
                            <div className="cart-label">
                                <Checkbox onChange={(e) => {
                                    this.allChange(e)
                                }}/>
                                <div>全选</div>
                            </div>
                            <div className="all-pirce">
                                <p>
                                    <span>合计:</span>
                                    <span>{this.state.allPrice}</span>
                                </p>
                            </div>
                            <div className={classnames({
                                'active': this.state.checkedNum > 0
                            })} onClick={() => {
                                if (this.state.checkedNum > 0) {
                                    this.tobuy()
                                }
                            }}>
                                结算<span> ( {this.state.checkedNum} ) </span>
                            </div>
xuzhenghua committed
216 217
                        </div>

xuzhenghua committed
218 219
                    </div>
                </Loading>
xuzhenghua committed
220

baiguangyao committed
221 222 223 224 225 226 227

            </div>
        )
    }
}

export default connect()(Cart)