online/src/case/ShopApp/src/components/HomePage/Cards.jsx

import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
//import { Item } from 'antd-mobile/lib/tab-bar';
import './Cards.css'




class Cards extends Component{
    constructor(props){
        //console.log('111',props)
        super(props)
        this.stae={
            product_id:''
        }
    }
    //点击后跳转到商品详情页面
    onClickChange(id){
        console.log('product_id',id)
        this.props.changePage('detail',id)
    }
    
    render(){
        //console.log(this.props.products)
        const Cardss=this.props.products.map((item,index)=>{
            //console.log(item)
            return (
                <WingBlank size="lg" key={index} className="Card">
                    <WhiteSpace size="lg" />
                        {/*<Link to={"/detail?product_id="+item.id}>*/}
                            <Card onClick={(e)=>{this.onClickChange(item.id)}}>
                                <Card.Header
                                    title={<span className="title">{item.name}</span>}
                                    extra={<span className="hot">热门</span>} 
                                />
                                <Card.Body>
                                    <div className="bodyWrap">
                                        <div className="imgWrap">
                                            <img src={item.img} alt="xxx" height="100px" width="100px"/>
                                        </div>
                                        <div className="sidebar">
                                            <p className="p1">{item.intro}</p>
                                        </div>
                                        <div className="rightsidebar">
                                            <p className="p2">{item.price}/斤</p>
                                            <p className="p3">库存:{item.stock}</p>
                                        </div>
                                    </div>
                                </Card.Body>
                                <Card.Footer content="" extra={<div></div>} />
                            </Card>
                        {/*</Link>*/}
                    <WhiteSpace size="lg" />
                </WingBlank>
            )
        })

        return (
            <div>
               {Cardss}
            </div>
        )
    }
}
export default Cards