import Taro,{Component} from '@tarojs/taro';

import {View,Text,Image} from '@tarojs/components';

import './foodlist.less'

class FoodList extends Component{

constructor(){

super(...arguments);

this.state={};

}

render() {

let {selectCate, currentList} = this.props;

// console.log(selectCate.name)

// console.log(this.props.currentList)

return(<View className="foodlist">

<Text>{selectCate ? selectCate.name : ""}</Text>

<View className="foodlist_forlist">

{

currentList.map((item, index) => {

return (<View key={item.id} className="foodlist_item">

<Image className="foodlist_item_img" src={item.img == 2 ? require('../../assets/img/2.jpeg') : require('../../assets/img/1.jpeg')}></Image>

<View className="foodlist_item_info">

<Text>{item.title}</Text>

<Text>月售：{item.sole}</Text>

<Text className="price">￥{item.price}</Text>

</View>

</View>)

})

}

</View>

</View>)

}

}

export default FoodList;

import Taro,{Component} from '@tarojs/taro';

import {View,Text,Image} from '@tarojs/components';

import { AtTabs, AtTabsPane } from 'taro-ui'

import './food.less'

import Cate from './Cate'

import FoodList from './foodlist'

class Food extends Component{

constructor(){

super(...arguments);

this.state={

current:0,

tabList:[{title:"點(diǎn)菜"},{title:"評(píng)價(jià)"},{title:"商家"}],

foodlist:[],

currentList:[]

};

}

changeTab(value){

this.setState({current:value})

}

//切換分類

changeCate(selectCate){

if(this.state.foodlist.some(item => item.pid == selectCate.id)){

//如果foodlist中有，就不用加載數(shù)據(jù)。要把符合條件的數(shù)據(jù)篩選出來(lái)，扔給FoodList組件(通過(guò)state)

this.setState({currentList:this.state.foodlist.filter(item => item.pid == selectCate.id)})

}else{

//否則就加載數(shù)據(jù)，并更新到foodlist中，同樣把符合條件的數(shù)據(jù)篩選出來(lái)，扔給FoodList組件

this.setState({foodlist:this.state.foodlist.concat(this.getData(selectCate))}, () => {

this.setState({currentList:this.state.foodlist.filter(item => item.pid == selectCate.id)})

})

}

}

//模擬從后端獲取數(shù)據(jù)，通過(guò)隨機(jī)數(shù)

getData(selectCate){

let count = Math.round(Math.random()*2);

return Array.from(Array(Math.round(Math.random() * 20)), (v,k) => ({

price:Math.round(Math.random()*20),

sole:Math.round(Math.random()*50),

img:count,

pid: selectCate.id,

id: selectCate.id+"_"+k,

title: "分類"+selectCate.id+"菜品"+(k+1)}))

}

render() {

let {current, tabList, currentList, selectCate} = this.state;

return(<View>

<AtTabs

current={current}

tabList={tabList}

onClick={this.changeTab.bind(this)}

>

<AtTabsPane>

<View className="food_body">

<Cate onChangeCate={this.changeCate.bind(this)} />

<FoodList selectCate={selectCate} currentList={currentList}/>

</View>

</AtTabsPane>

<AtTabsPane>評(píng)價(jià)內(nèi)容</AtTabsPane>

<AtTabsPane>商家內(nèi)容</AtTabsPane>

</AtTabs>

</View>)

}

}

export default Food;

import Taro,{Component} from '@tarojs/taro';

import {View,Text,Image} from '@tarojs/components';

import './cate.less'

class Cate extends Component{

constructor(){

super(...arguments);

this.state={

selectCate:null,

cate:[

{name:"專場(chǎng)",id:1},

{name:"熱銷",id:2},

{name:"折扣",id:3},

{name:"主食",id:4},

{name:"熱炒",id:5},

{name:"涼菜",id:6},

{name:"小食特色",id:7}

]

};

}

clickHandle(item){

if(this.state.selectCate && this.state.selectCate.id != item.id){

this.setState({selectCate:item}, () => {

this.props.onChangeCate && this.props.onChangeCate(this.state.selectCate)

})

}else if(!this.state.selectCate){

this.setState({selectCate:item}, () => {

this.props.onChangeCate && this.props.onChangeCate(this.state.selectCate)

})

}

}

render() {

let {selectCate, cate} = this.state;

return(<View className="cate">{

this.state.cate.map((item, index) => {

return (<Text

className={"cate_name " + ((selectCate && selectCate.id == item.id) ? "select" : "")}

key={item.id}

onClick={this.clickHandle.bind(this,item)}

>{item.name}

</Text>)

})

}</View>)

}

}

export default Cate;