import React, {Component}from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
WebView,
FlatList
}from 'react-native';
import {IMG_URL}from '../../common/NetApi'
import FastImage from 'react-native-fast-image'
import ShopCarouselDetail from './ShopCarouselDetail'
import {
BIG,COMMON,SMAll,height,width,SIZE_12,
SIZE_13,
SIZE_14,
SIZE_15,
SIZE_16,
SIZE_11,
SIZE_10,
SIZE_9,
SIZE_8
}from '../../common/Global'
import Swiper from 'react-native-swiper'
let titleIndex =0;
let menuNames=['为你推荐','排行榜']
let showShop;//排行榜接口数据
let recommendData =[];//为你推荐接口数据
export default class ShopRanking extends Component {
constructor() {
super();
this.state = {
indexMenuSelect:[],
swiperShow:false,
pictureNum:0,
pageNum:0,
aa:[]
}
}
componentDidMount(){
//初始默认值
this._menuClick(0);
//设置延迟
this.timer =setTimeout(() => {
this.setState({
swiperShow:true,
});
},3000)
}
render() {
/**自定义菜单组件*/
const {shopRanking,recommend} =this.props;
let result =[];
if (recommend !=null){
//将数组拆分多个数组并循坏使用
this.state.aa=this.carouselData(recommend,6)
}
this.state.pageNum = Math.ceil(recommend &&recommend.length/6)
//取排行榜的数据
if (shopRanking &&shopRanking.length >6) {
showShop =shopRanking.filter((item,i)=>{return(i<6)})
}else {
showShop =shopRanking;
}
//取推荐列表的数据
if ( recommend &&recommend.length >6){
recommendData =recommend.filter((item,i)=>{return(i<6)})
}else {
recommendData =recommend;
}
let itemViews =[];
for (let i in menuNames &&menuNames) {
let itemView =(
this.state.indexMenuSelect[i] ==true ?
{menuNames[i]}
:
{menuNames[i]}
)
itemViews.push(itemView);
}
;
return (
{itemViews[0]}
{itemViews[1]}
{titleIndex ==0 ?{this.getRecommendData()}:null}
{titleIndex ==1 ?
{showShop &&showShop.map((item,i)=>
source={{uri:IMG_URL+item.goodsImage}}/>
{item.goodsName}
¥{item.goodsStorePrice}
)}
:null}
)
}
//拆分数组并建立新的数组
carouselData=(array,subGroupLength) =>{
var index =0;
var newArray =[];
while(index
newArray.push(array.slice(index,index +=subGroupLength));
}
return newArray;
}
//加载更多为你推荐 轮播图
getRecommendData =()=>{
return(
{this.state.swiperShow ?
width={width}
horizontal={true}index={this.state.pictureNum}
autoplay={true}autoplayTimeout={3}
paginationStyle={{bottom:20}}
bounces={true}loop={true}showsPagination={true}
autoplayDirection={true}>
{this.state.aa.map((item,index)=>
{this.state.aa[index].map((content,i)=>)}
)}
:
source={require('../../images/account/default.jpg')}/>}
)
}
/** 点击菜单事件*/
_menuClick(index) {
var menuSelectCopy =[];
for (var i in menuNames) {
if (i ==index) {
menuSelectCopy.push(true);
titleIndex =index;
}
else {
menuSelectCopy.push(false);
}
}
this.setState({
indexMenuSelect:menuSelectCopy,
})
};
}
const styles =StyleSheet.create({
imageType:{
width:(width-70)/3,
height:(width-70)/3,
borderColor:'#E5E5E5',
borderWidth:StyleSheet.hairlineWidth
},
updateView:{
flexDirection:'row',
alignItems:'center',
height:40,
justifyContent:'space-around'
},
borderView:{
borderColor:'#E5E5E5',
borderWidth:StyleSheet.hairlineWidth,
height:30
}
})
网友评论