index.js

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Checkbox, NavBar, Modal, Toast} from 'antd-mobile'

//组件
import ShopCart from './cartList.js'

//css
import './card.scss'
import classnames from 'classnames'
import {api, http} from "@/utils";

const alert = Modal.alert;

class Cart extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],
            deleteAll: false,
            checkedNum: 0,
            allPrice: 0,
            cartNmu: 0,
            courseIdarr: [] // 选中的课程id
        }

    }


    componentDidMount() {
        this.getList()
    }

    getList = () => {
        http.get(`${api.home}/m/cart/list`).then((res) => {
            if (res.data.code === 200) {
                this.setState({
                    data: res.data.data.courses
                })
            } else {
                Toast.info(res.data.msg, 2);
            }
        })
    }

    //全选
    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)

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

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

    }

    //点击
    checkChange(id, check) {
        let newData = this.state.data.map((item, i) => {
            if (item.course_id === id) {
                return {
                    ...item,
                    check: check
                }
            } else {
                return item;
            }
        })
        this.setState({
            data: newData
        })
        this.calc(newData)
        let arr = []
        newData.forEach((item, i) => {
            if (item.check) {
                arr.push(item.course_id)
                this.setState({
                    courseIdarr: arr
                })
            } else {
                this.setState({
                    courseIdarr: arr
                })
            }
        })
    }

    //计算总价
    calc(newData) {
        let allPrice = 0;
        let checkedNum = 0;
        let cartNmu = 0;
        newData.forEach((item, i) => {
            if (item.check) {
                i++;
                cartNmu += 1;
                checkedNum = i;
                allPrice += parseFloat(item.price1);
            }
        })
        this.setState({
            checkedNum,
            allPrice,
            cartNmu
        })
    }

    // 删除
    detail = () => {
        if (this.state.courseIdarr.length > 0) {
            alert('', '确定从购物车中删除？', [
                {text: '取消', onPress: () => console.log('cancel')},
                {
                    text: '确认',
                    onPress: () => {
                        console.log(this.state.courseIdarr)
                        let data = {
                            course_ids: this.state.courseIdarr
                        }
                        http.post(`${api.home}/m/cart/remove`, data).then((res) => {
                            if (res.data.code === 200) {
                                this.getList()
                            } else {
                                Toast.info(res.data.msg, 2);
                            }
                        })
                    }
                }
            ])
        }

    }


    render() {
        return (
            <div className="cart-page" style={{overflow: 'hidden'}}>
                <NavBar
                    style={{"height": "44px"}}
                    className="order-tab"
                    mode="light"
                    icon={<i style={{"fontSize": '24px'}} className="iconfont iconiconfront-68"></i>}
                    rightContent={[
                        <i key="0" style={{"fontSize": '24px'}} className="iconfont iconiconfront-56"
                           onClick={this.detail}></i>
                    ]}
                >
                    购物车
                </NavBar>

                <div className="cart-body">
                    <ShopCart checkChange={this.checkChange.bind(this)} data={this.state.data}/>

                    {
                        this.state.deleteAll ?
                            <div className="cart-footer">
                                <div>
                                    <Checkbox onChange={(e) => {
                                        this.allChange(e)
                                    }}/>
                                    <div>全选</div>
                                </div>
                                <div></div>
                                <div className={classnames({
                                    'active': this.state.cartNmu > 0
                                })}
                                     onClick={() => {
                                         if (this.state.cartNmu > 0) {
                                             this.delete()
                                         }
                                     }}>
                                    删除<span>({this.state.cartNmu})</span>
                                </div>
                            </div>
                            :
                            <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.buy()
                                    }
                                }}>
                                    结算<span> ( {this.state.checkedNum} ) </span>
                                </div>
                            </div>
                    }
                </div>


            </div>
        )
    }
}

export default connect()(Cart)