import React, { Component } from 'react'
export default class Item extends Component {
    constructor(props) {
        super()
        this.state = {
            baseImgUrl: "http://yzs.can.com/img/"
        }
    }
    render() {
        let { image_path, name, recent_order_num, float_minimum_order_amount, piecewise_agent_fee, distance, order_lead_time } = this.props.item
        return (
                <li>
                    <div className="search-left">
                        <img src={this.state.baseImgUrl + image_path} alt={name}/>
                    </div>
                    <div className="search-right">
                        <p className="title"><strong>品牌</strong> {name}</p>
                        <p>月售{recent_order_num} 单</p>
                        <p>
                            ¥{float_minimum_order_amount}起送/{
                                piecewise_agent_fee.tips
                            }
                            <span>{distance}/ </span>
                            <i>{order_lead_time}</i>
                        </p>
                    </div>
                </li>
        )
    }
}

import React, { Component } from 'react'
import Item from './Item'
export default class List extends Component {
    render() {
        return (
            <div>
                <ul className="list">
                    {
                        this.props.list.map(item=>{
                            return(
                                <Item  item={item} key={item.id}/>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

import React, { Component } from 'react'
import List from './List';
import axios from 'axios';
import { NavBar } from "antd-mobile"
export default class TakeOutComponent extends Component {
    constructor() {
        super()
        this.state = {
            list: [],
            pageNum: 0,
            pageSize: 6
        }
    }
    render() {
        return (
            <div>
                <NavBar> 懂得都懂 </NavBar>
                <List list={this.state.list} />
          </div>
        )
    }
}

componentDidMount() {
        this.getData()       
    }
    //**********************************  自定义函数
    getData() {
        const shopsUrl = "/shopping/restaurants"
        let params = {
            latitude: 31.22967,
            longitude: 121.4762,
            offset:this.state.pageSize*this.state.pageNum
            limit: this.state.pageSize
        }
        axios.get(shopsUrl, { params }).then(res => {
            // console.log("商铺列表数据",res)
            this.setState({
                list: res.data,
                pageNum: this.state.pageNum + 1
            })
        }).catch(err => {
            console.log("商铺列表失败:", err)
        })
    }