289 lines
8.4 KiB
JavaScript
289 lines
8.4 KiB
JavaScript
import Taro, { Component } from '@tarojs/taro'
|
||
import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
|
||
import { AtActivityIndicator } from 'taro-ui'
|
||
import filteredShopComponent from '../../component/filteredShopComponent/filteredShopComponent'
|
||
import bottomNav from '../../component/bottomNav/bottomNav'
|
||
import URL from '../../serviceAPI.config'
|
||
import './home.scss'
|
||
|
||
class Home extends Component {
|
||
|
||
config = {
|
||
navigationBarTitleText: '首页'
|
||
}
|
||
constructor() {
|
||
super(...arguments);
|
||
|
||
this.state = {
|
||
shopsDetails: '',
|
||
ads: '',
|
||
categories: '',
|
||
subCate:[],
|
||
demanding: '',
|
||
otherData:''
|
||
}
|
||
}
|
||
componentWillMount(){
|
||
|
||
|
||
}
|
||
componentDidMount() {
|
||
|
||
this.getShops()
|
||
this.getHomeCategoriesInfo()
|
||
}
|
||
componentWillReceiveProps(nextProps) {
|
||
//console.log(this.props, nextProps)
|
||
}
|
||
|
||
componentWillUnmount() { }
|
||
|
||
componentDidShow() { }
|
||
|
||
componentDidHide() { }
|
||
|
||
// 得到首页的信息
|
||
getHomeCategoriesInfo() {
|
||
Taro.request({
|
||
url: URL.ShopWxStore,
|
||
})
|
||
.then(res => {
|
||
console.log(res)
|
||
this.setState({
|
||
ads: res.data.data.adsLb,
|
||
categories: res.data.data.supplyClass,
|
||
demanding: res.data.data.demand.supplys,
|
||
otherData:res.data.otherData
|
||
}, () => {
|
||
//console.log(this.state.demanding)
|
||
})
|
||
})
|
||
}
|
||
// 得到所有商店的信息
|
||
getShops(parent_supply_class = 0, supply_class = '-1', supply_level = 1) {
|
||
Taro.request({
|
||
url: URL.ShopSupplyShops,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: {
|
||
param: JSON.stringify({
|
||
curr_page: 1,
|
||
page_count: 20,
|
||
parent_supply_class: parent_supply_class, //父级class id
|
||
supply_class: supply_class,// 子级class id
|
||
supply_level: supply_level,// 层级
|
||
action: "2"
|
||
})
|
||
},
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
|
||
}
|
||
})
|
||
.then(res => {
|
||
this.setState({ shopsDetails: res.data.shops }, () => {
|
||
// console.log('-----',res)
|
||
})
|
||
}
|
||
)
|
||
}
|
||
onClickParentCate(item) {
|
||
this.setState({ subCate: item.children })
|
||
this.getShops(item.parent_class_id, item.class_id)
|
||
}
|
||
onClickChildCate(item) {
|
||
this.getShops(item.parent_class_id, item.class_id, 2)
|
||
}
|
||
goToAllDemandingPage(){
|
||
Taro.navigateTo({
|
||
url: '/pages/allDemanding/allDemanding'
|
||
})
|
||
}
|
||
|
||
render() {
|
||
const demandingElemensArray = this.state.demanding?this.state.demanding.map((item, index) => {
|
||
return < SwiperItem key={index} >
|
||
<View className='demanding-item'>
|
||
<View className='item-tag'>
|
||
<Text className='item-tag-text'> {item.class_name}</Text>
|
||
</View>
|
||
<View className='item-title'>
|
||
{item.sd_title}
|
||
</View>
|
||
<View className='item-address'>
|
||
{item.user_address||'无地址'}
|
||
</View>
|
||
<View className='item-name'>
|
||
业主：{item.user_name}
|
||
</View>
|
||
<View className='item-button-box'>
|
||
<Button className='item-button' >{item.state_name}</Button>
|
||
</View>
|
||
</View>
|
||
</SwiperItem >
|
||
}) :null
|
||
|
||
const adsImgElementsArray = this.state.ads?this.state.ads.map((item, index) => {
|
||
return <SwiperItem key={index}>
|
||
<Image className='banner-img' src={URL.Base + item.ads_pic} />
|
||
</SwiperItem>
|
||
}):null
|
||
|
||
// 这里应该代码可以优化-----
|
||
const categoriesElementsArray1 = this.state.categories?this.state.categories[0].map((item, index) => {
|
||
return <View className='category-item' key={index} onClick={this.onClickParentCate.bind(this, item)}>
|
||
<Image className='cate-img' src={URL.Base + item.icon} />
|
||
<View>{item.class_name}</View>
|
||
</View>
|
||
}):null
|
||
const categoriesElementsArray2 = this.state.categories?this.state.categories[1].map((item, index) => {
|
||
return <View className='category-item' key={index} onClick={this.onClickParentCate.bind(this, item)}>
|
||
<View> <Image className='cate-img' src={URL.Base + item.icon} /></View>
|
||
<View>{item.class_name}</View>
|
||
</View>
|
||
}):null
|
||
const shopCollectionElementsArray = this.state.shopsDetails?this.state.shopsDetails.map((item, index) => {
|
||
return <filteredShopComponent shop={item} key={index}></filteredShopComponent>
|
||
}):null
|
||
|
||
const subCateElementsArray = this.state.subCate.length?this.state.subCate.map((item, index) => {
|
||
return <SwiperItem key={index} onClick={this.onClickChildCate.bind(this, item)}>
|
||
<View className='text'>{item.class_name}</View>
|
||
</SwiperItem>
|
||
}):null
|
||
|
||
|
||
console.log(this.state.subCate)
|
||
return (
|
||
<View className='home'>
|
||
{/* 第一行图片滚动条 */}
|
||
|
||
<View className='first-banner'>
|
||
<Swiper
|
||
className='swipper'
|
||
style='height:120px;'
|
||
indicatorColor='#999'
|
||
indicatorActiveColor='#333'
|
||
hotizontal
|
||
circular
|
||
indicatorDots
|
||
autoplay>
|
||
{adsImgElementsArray}
|
||
|
||
</Swiper>
|
||
</View>
|
||
{/* 第二行图片滚动条 */}
|
||
<View className='second-banner'>
|
||
<Swiper
|
||
className='swipper'
|
||
indicatorColor='#999'
|
||
indicatorActiveColor='#333'
|
||
hotizontal
|
||
circular
|
||
indicatorDots
|
||
// autoplay
|
||
>
|
||
<SwiperItem>
|
||
<View className='categories'>
|
||
{categoriesElementsArray1}
|
||
</View>
|
||
</SwiperItem>
|
||
<SwiperItem>
|
||
<View className='categories'>
|
||
{categoriesElementsArray2}
|
||
</View>
|
||
</SwiperItem>
|
||
</Swiper>
|
||
</View>
|
||
{/* 第三行图片滚动条 */}
|
||
<View className='third-banner'>
|
||
<Swiper
|
||
style='height:100px;'
|
||
className='swipper'
|
||
indicatorColor='#999'
|
||
indicatorActiveColor='#333'
|
||
horizontal
|
||
circular
|
||
indicatorDots
|
||
autoplay>
|
||
<SwiperItem>
|
||
<Image className='banner-img' src={URL.Base +'Public/images/xgt.png'} />
|
||
</SwiperItem>
|
||
<SwiperItem>
|
||
<Image className='banner-img' src={URL.Base +'Public/images/xgt.png'} />
|
||
</SwiperItem>
|
||
|
||
</Swiper>
|
||
</View>
|
||
|
||
{/* 业主需求和行业推荐 */}
|
||
<View className='container'>
|
||
<View className='title'>
|
||
|
||
<Text className='title-block'></Text>
|
||
<Text className='title-text'>业主需求</Text>
|
||
|
||
<Text className='more-link' onClick={this.goToAllDemandingPage.bind(this)}>
|
||
更多>>
|
||
</Text>
|
||
</View>
|
||
<View className='customer-demanding'>
|
||
<Swiper
|
||
className='swipper swiper-sub'
|
||
indicatorColor='#999'
|
||
indicatorActiveColor='#333'
|
||
horizontal
|
||
circular
|
||
displayMultipleItems='2.5'
|
||
>
|
||
{demandingElemensArray}
|
||
</Swiper>
|
||
</View>
|
||
|
||
<View className='second-banner-level2'>
|
||
{this.state.subCate.length ? <Swiper
|
||
style='height:35px;'
|
||
className='swipper swiper-sub'
|
||
indicatorColor='#999'
|
||
indicatorActiveColor='#333'
|
||
horizontal
|
||
displayMultipleItems={this.state.subCate.length > 4.5 ? 4.5 : this.state.subCate.length}
|
||
>
|
||
{subCateElementsArray}
|
||
</Swiper>:null}
|
||
</View>
|
||
<View className='title'>
|
||
<Text className='title-block'></Text>
|
||
<Text className='title-text'>行业推荐</Text>
|
||
|
||
</View>
|
||
|
||
|
||
<View className='shop-box'>
|
||
{shopCollectionElementsArray}
|
||
{this.state.shopsDetails.length !== 0 ? <View className='title'>
|
||
沒有更多了...
|
||
</View>: < View className='title' >
|
||
没有找到...
|
||
</View > }
|
||
</View>
|
||
<View className='gap'>
|
||
|
||
</View>
|
||
|
||
</View>
|
||
|
||
|
||
|
||
<View className='bottom-nav-box'>
|
||
<bottomNav otherData={this.state.otherData}/>
|
||
</View>
|
||
|
||
|
||
</View>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default Home
|