react/index5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/main.css">
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/babel">
    // 物品列表
    var goodsList = [
        {
            id: '1001',
            image: './imgs/1.jpg',
            title: '苏泊尔电热水壶家用官方旗舰店保温电热烧水壶304不锈钢自动断电',
            specifications: '颜色分类：米白色',
            original: '299.00',
            price: '79.00',
            num: '1',
            check: true
        },
        {
            id: '1002',
            image: './imgs/2.jpg',
            title: '衣柜简易儿童组装塑料布艺租房卧室家用挂仿实木单布衣橱收纳柜子',
            specifications: '颜色分类：1列8层白',
            original: '130.00',
            price: '58.00',
            num: '1',
            check: false
        },
        {
            id: '1003',
            image: './imgs/3.jpg',
            title: '简易塑料鞋柜防尘收纳组装家用经济宿舍鞋架简约现代省空间门厅柜',
            specifications: '颜色分类：【降价促销 仅限一天】14门2挂',
            original: '290.00',
            price: '139.00',
            num: '1',
            check: false
        },
        {
            id: '1004',
            image: './imgs/4.jpg',
            title: '拼装分层门口实用鞋子折叠鞋架多层伸缩结实高低学校调节拆装简易',
            specifications: '颜色分类：特价小尺寸北欧枫木',
            original: '38.90',
            price: '19.90',
            num: '1',
            check: true
        }
    ];
    class Main extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                goodsList: goodsList
            }
        }
        refresh() {
            this.forceUpdate();
        }
        render() {
            return(
                <div>
                    <h3><span>购物车</span></h3>
                    <div id='buyCarTitle'>
                        <ul className='car-list'>
                            <li className='li-checkbox'><input type='checkbox' id='allSelect'/>全选</li>
                            <li className='li-info'>商品信息</li>
                            <li className='li-operation'>操作</li>
                            <li className='li-amount'>金额</li>
                            <li className='li-num'>数量</li>
                            <li className='li-price'>单价</li>
                        </ul>
                    </div>
                    {
                        this.state.goodsList.map((item, index) => {
                            return (
                                <GoodList item={item} key={index} refresh={this.refresh.bind(this)}/>
                            )
                        })
                    }
                    <GoodTotal goodsList={this.goodsList} refresh={this.refresh.bind(this)}/>
                </div>
            )
        }
    }

    class GoodList extends React.Component {
        constructor(props) {
            super(props);
            this.state = {

            }
        }
        delGoods(id) {
            for(let i = 0; i < goodsList.length; i++) {
                if(goodsList[i].id === id) {
                    goodsList[i].splice(i, 1);
                    break;
                }
            }
            //this.refs.main.innerHTML= '';
            
            this.props.refresh();
        }

        minusNum(id) {
            for(let i = 0; i < goodsList.length; i++) {
                if(goodsList[i].id === id) {
                    goodsList[i].num--;
                    break;
                }
            }
            
            this.props.refresh();
        }
        addNum(id) {
            for(let i = 0; i < goodsList.length; i++) {
                if(goodsList[i].id === id) {
                    goodsList[i].num++;
                    break;
                }
            }
            
            this.props.refresh();
        }
        checkGoods(id){
            for(let i = 0; i < goodsList.length; i++) {
                if(goodsList[i].id === id) {
                    goodsList[i].check = !goodsList[i].check;
                    break;
                }
            }
            
            this.props.refresh();
        }
        render() {
            return(
                <div ref='main' className='goods-car'>
                    <ul className='goods-list'>
                        <li className='li-checkbox'><input type='checkbox' defaultChecked={this.props.item.check} onChange = {this.checkGoods.bind(this, this.props.item.id)}/></li>
                        <li className='li-info'>
                            <div className='goods-img'><img src={this.props.item.image} /></div>
                            <div className='goods-title'>{this.props.item.title}</div>
                            <div className='goods-specifications'>{this.props.item.specifications}</div>
                        </li>
                        <li className='li-operation'>
                            <div className='goods-oper' onClick={this.delGoods.bind(this, this.props.item.id)}>删除</div>    
                        </li>
                        <li className='li-amount'>
                            <div className='goods-amount' >{this.props.item.num*this.props.item.price}</div>
                        </li>
                        <li className='li-num'>
                            <span className='goods-num-btn goods-num-minus' onClick={this.minusNum.bind(this, this.props.item.id)}>-</span>
                            <input type='text' className='goods-num' readOnly='true' value={this.props.item.num}/>
                            <span className='goods-num-btn goods-num-add' onClick={this.addNum.bind(this, this.props.item.id)}>+</span>
                        </li>
                        <li className='li-price'>
                            <div className='goods-original'>{this.props.item.original}</div>
                            <div className='goods-price'>{this.props.item.price}</div>
                        </li>
                    </ul>
                </div>
            )
        }
    }

    class GoodTotal extends React.Component {
        constructor(props) {
            super(props);
            this.state={
                goodsTotal: 0,
                goodsAmounts: 0
            }
        }

        checkAllGoods(e) {
            const targetCheck = e.target.checked;
            goodsList.map(item=>{
                item.check = targetCheck;
                return item;
            })
            this.props.refresh();
        }
        componentDidMount() {
            
            const checkedList = goodsList.filter(item => item.check);
            let goodsAmounts = 0;
            checkedList.forEach(item => {
                goodsAmounts += item.num*item.price;
            });
            
            this.setState({
                goodsTotal: checkedList.length,
                goodsAmounts: goodsAmounts
            })
        }
        delGoods() {
            
        }
        render() {
            return(
                <div ref='goodsTotal' className='goods-bottom'>
                    <div className='total-check-all'><input type='checkbox' onChange = {this.checkAllGoods.bind(this)}/>全选</div>
                    <div className='total-del-all'><span onClick={this.delGoods.bind(this)}>删除</span></div>
                    <div className='total-nums'><span>合计：<span className='goods-nums'>{this.state.goodsAmounts}</span></span></div>
                    <div className='total-checked'><span>已选商品<span className='goods-checked-num'>{this.state.goodsTotal}</span>件</span></div>
                </div>
            )
        }
        
    }

    ReactDOM.render(
        <Main/>,
        document.querySelector('#app')
    )
    </script>
</body>
</html>