| @@ -72,6 +72,7 @@ const shadowOpt = { | |||
| } | |||
| var curTimer = null; | |||
| var curRankTimer = null; | |||
| var hbRequestCount | |||
| var getAdDataCount | |||
| @@ -123,6 +124,10 @@ export default class MyPage extends Component { | |||
| coverImgUrl: '', | |||
| previewImg: '', | |||
| curImgState: false, | |||
| merchantRankList: [], | |||
| hasRankList: true,// 有排名列表 | |||
| openRankList: false,//开启播放排名 | |||
| }; | |||
| /* this.codePushUpdate = this.codePushUpdate.bind(this); | |||
| @@ -240,6 +245,7 @@ codePushStatusDidChange(syncStatus) { | |||
| this.setState({contentItem2:null}); | |||
| curAdIndex+=3 | |||
| return true; | |||
| } | |||
| @@ -254,7 +260,7 @@ codePushStatusDidChange(syncStatus) { | |||
| heartConfig.heartbeatInterval = config.heartbeatInterval | |||
| heartConfig.dataRefreshInterval=config.dataRefreshInterval | |||
| heartConfig.pageChangeInterval=config.pageChangeInterval | |||
| // 动画划入 | |||
| if(config.animationTheme == 0){ | |||
| this.setState({ | |||
| @@ -291,8 +297,22 @@ codePushStatusDidChange(syncStatus) { | |||
| this.setState({contentDisplayStatus: false}) | |||
| this.setState({errorMessage : errMsg}); | |||
| } | |||
| //开启 排名页播放的计时器 | |||
| dealRankTimer(type) { | |||
| if (type) { | |||
| let num = Number(heartConfig.pageChangeInterval) * 1000; | |||
| curRankTimer = setInterval(() => { | |||
| this.setState({ | |||
| openRankList: false | |||
| }) | |||
| clearInterval(curRankTimer); | |||
| },num) | |||
| } else { | |||
| clearInterval(curRankTimer); | |||
| } | |||
| } | |||
| //判断播放类型adType | |||
| //判断播放类型adType 0 纯券 1纯广告图 2 广告图+券 | |||
| dealLoopType(dataList) { | |||
| adDataList = dataList.filter((item) => { | |||
| return item.type == 0; | |||
| @@ -319,8 +339,11 @@ codePushStatusDidChange(syncStatus) { | |||
| item.merchantName = '小米之家'; | |||
| }) | |||
| adDataList = [...adDataList,...adDataList]; | |||
| adDataList = adDataList.slice(0,5); | |||
| let arr = [...adDataList,...adDataList]; | |||
| arr = arr.slice(0,5); | |||
| this.setState({ | |||
| merchantRankList: arr | |||
| }) | |||
| } | |||
| @@ -387,13 +410,17 @@ componentWillUnmount(){ | |||
| async routine() { | |||
| hbRequestCount -=1; | |||
| getAdDataCount -=1; | |||
| if (this.state.adType == 2 && this.state.curImgState) { | |||
| pageChangeCount -=1; | |||
| } | |||
| if (this.state.adType != 2) { | |||
| pageChangeCount -=1; | |||
| //等待第一次图片加载完成再倒计时 | |||
| if (!this.state.openRankList) { | |||
| if (this.state.adType == 2 && this.state.curImgState) { | |||
| pageChangeCount -=1; | |||
| } | |||
| if (this.state.adType != 2) { | |||
| pageChangeCount -=1; | |||
| } | |||
| } | |||
| try { | |||
| if (getAdDataCount<=0) { | |||
| @@ -407,10 +434,21 @@ async routine() { | |||
| //如果是adType == 2时间间隔到了,要检验轮播是否走完在决定切换 | |||
| if (this.state.adType == 2) { | |||
| if (pageChangeCount<=0) { | |||
| let curNum = this.state.curAdType02Index + 1; | |||
| if (curNum >= adDataBgList.length) { | |||
| //如果播放到了最后一页,接下来暂停计时器,可能播放商户排名页 | |||
| if (!this.state.openRankList) { | |||
| this.dealRankTimer(true); | |||
| this.setState({ | |||
| openRankList: true, | |||
| }) | |||
| } | |||
| curNum = 0; | |||
| } | |||
| this.setState({ | |||
| curAdType02Index: curNum, | |||
| previewImg:adDataBgList[curNum].coverImg | |||
| @@ -421,6 +459,13 @@ async routine() { | |||
| } else if (this.state.adType == 0) { | |||
| if (pageChangeCount <= 0) { //页面切换间隔 | |||
| //如果播放到了最后一页,接下来暂停计时器,可能播放商户排名页 | |||
| if (curAdIndex > adDataList.length) { | |||
| this.dealRankTimer(true); | |||
| this.setState({ | |||
| openRankList: true, | |||
| }) | |||
| } | |||
| if (this.state.contentDisplayStatus && this.state.baseInfo) { | |||
| this.setState({ contentDisplayStatus: false}) | |||
| if (this.updateContent()) { | |||
| @@ -488,29 +533,49 @@ getContentViewItemMerchantName(contentItem) { | |||
| } | |||
| } | |||
| //排名 rank dom | |||
| renderRankDom() { | |||
| rankDom() { | |||
| let rankDomStack = []; | |||
| adDataList.map((item,index) => { | |||
| rankDomStack.push(this.rankItemDom(item,index)); | |||
| }) | |||
| let {merchantRankList,} = this.state; | |||
| let animation = ''; | |||
| if (merchantRankList.length > 0) { | |||
| merchantRankList.map((item,index) => { | |||
| if (this.state.adType == 0) { | |||
| if (index == 0) { | |||
| animation = this.state.animationTheme.first; | |||
| } else if (index == 1) { | |||
| animation = this.state.animationTheme.second; | |||
| } else if (index == 2) { | |||
| animation = this.state.animationTheme.third; | |||
| } else if (index == 3) { | |||
| animation = this.state.animationTheme.second; | |||
| } else if (index == 4) { | |||
| animation = this.state.animationTheme.third; | |||
| } | |||
| } else if (this.state.adType == 1) { | |||
| animation = 'fadeIn'; | |||
| } | |||
| rankDomStack.push(this.rankItemDom(item,index,animation)); | |||
| }) | |||
| } | |||
| return rankDomStack; | |||
| } | |||
| //每一条 rank | |||
| rankItemDom(item,index) { | |||
| let fontSizeNum = 44/(PixelRatio.get()); | |||
| rankItemDom(item,index,animation) { | |||
| let fontSizeNum = 48/(PixelRatio.get()); | |||
| let curStyleObj = { | |||
| width: fontSizeNum, | |||
| height: fontSizeNum, | |||
| } | |||
| return ( | |||
| <View style={styles.rankItemBox} key={index}> | |||
| <Animatable.View animation={animation} style={styles.rankItemBox} key={index}> | |||
| <Image style={styles.RankLogo} resizeMode="stretch" source={{uri:item.logoUrl}}></Image> | |||
| <View style={styles.rankContent}> | |||
| <Text style={styles.merchantText} numberOfLines={1} ellipsizeMode="tail">{item.merchantName}</Text> | |||
| <View style={styles.rankRunBox}> | |||
| <View style={styles.rankRun}> | |||
| <View style={styles.rankRun01}> | |||
| <Text style={styles.starTitle}>经营指数: {item.starNum} 分</Text> | |||
| <View style={{height: fontSizeNum,flexDirection: 'row', alignItems: 'center',marginTop:20/PixelRatio.get()}}> | |||
| <View style={{height: fontSizeNum,flexDirection: 'row', alignItems: 'center',marginTop:18/PixelRatio.get()}}> | |||
| <StarRatingBar | |||
| score={item.starNum} | |||
| allowsHalfStars={true} | |||
| @@ -518,15 +583,15 @@ rankItemDom(item,index) { | |||
| starStyle={curStyleObj} | |||
| emptyStarImage={<Image style={curStyleObj} resizeMode="stretch" source={require('./image/star_gray.png')} />} | |||
| filledStarImage={<Image style={curStyleObj} resizeMode="stretch" source={require('./image/star_red.png')} />} | |||
| scoreTextStyle={{color:'#fff'}} | |||
| scoreTextStyle={{color:'transparent'}} | |||
| /> | |||
| </View> | |||
| </View> | |||
| <View style={styles.rankRun}> | |||
| <View style={styles.rankRun02}> | |||
| <Text style={styles.starTitle}>人气指数: {item.starNum} 分</Text> | |||
| <View style={{height: fontSizeNum,flexDirection: 'row', alignItems: 'center',marginTop:20/PixelRatio.get()}}> | |||
| <View style={{height: fontSizeNum,flexDirection: 'row', alignItems: 'center',marginTop:18/PixelRatio.get()}}> | |||
| <StarRatingBar | |||
| score={item.starNum} | |||
| allowsHalfStars={true} | |||
| @@ -534,7 +599,7 @@ rankItemDom(item,index) { | |||
| starStyle={curStyleObj} | |||
| emptyStarImage={<Image style={curStyleObj} resizeMode="stretch" source={require('./image/hot_gray.png')} />} | |||
| filledStarImage={<Image style={curStyleObj} resizeMode="stretch" source={require('./image/hot_red.png')} />} | |||
| scoreTextStyle={{color:'#fff'}} | |||
| scoreTextStyle={{color:'transparent'}} | |||
| /> | |||
| </View> | |||
| </View> | |||
| @@ -544,7 +609,7 @@ rankItemDom(item,index) { | |||
| <Image source={{uri:item.target.qrCode}} resizeMode="stretch" style={styles.rankQrcodeImg}></Image> | |||
| </View> | |||
| </Animatable.View> | |||
| ) | |||
| } | |||
| //券列表content部分 | |||
| @@ -609,18 +674,11 @@ getContentViewItem(contentItem, annomation) { | |||
| getContentView() { | |||
| if (this.state.contentDisplayStatus) { | |||
| //aaa | |||
| if (true) { | |||
| return (<View style={styles.content}> | |||
| {this.renderRankDom()} | |||
| </View>) | |||
| } else { | |||
| return (<View style={styles.content}> | |||
| {this.getContentViewItem(this.state.contentItem0,this.state.animationTheme.first)} | |||
| {this.getContentViewItem(this.state.contentItem1,this.state.animationTheme.second)} | |||
| {this.getContentViewItem(this.state.contentItem2,this.state.animationTheme.third)} | |||
| </View>) | |||
| } | |||
| return (<View style={styles.content}> | |||
| {this.getContentViewItem(this.state.contentItem0,this.state.animationTheme.first)} | |||
| {this.getContentViewItem(this.state.contentItem1,this.state.animationTheme.second)} | |||
| {this.getContentViewItem(this.state.contentItem2,this.state.animationTheme.third)} | |||
| </View>) | |||
| }else{ | |||
| return ( | |||
| <View style={styles.content}> | |||
| @@ -717,84 +775,142 @@ rendDefaultImg() { | |||
| ) | |||
| } | |||
| } | |||
| renderTicketDom() { | |||
| return ( | |||
| <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}> | |||
| {/* 头部title二维码开始 */} | |||
| <View style={styles.title}> | |||
| <View style={styles.titleImagePlace}> | |||
| <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} /> | |||
| </View> | |||
| <ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} > | |||
| <View style={styles.titleQrcodePlacehold}></View> | |||
| <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} /> | |||
| <View style={styles.titleQrcodePlacehold}></View> | |||
| </ImageBackground> | |||
| </View> | |||
| {/* 券列表展示列表开始 */} | |||
| {this.getContentView()} | |||
| {/* 底部商场信息展示开始 */} | |||
| <View style={styles.bottom}> | |||
| <View style={styles.bottomLogoBackground}> | |||
| <Image source={{ uri: this.state.baseInfo.imgUrlH}} resizeMode='contain' style={styles.bottomLogo} /> | |||
| </View> | |||
| <View style={styles.bottomQrcode1Background}> | |||
| <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.bottomQrcode1} /> | |||
| <Text style={styles.bottomQrcode1Str}>小程序</Text> | |||
| </View> | |||
| <View style={styles.bottomQrcode2Background}> | |||
| <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp}} resizeMode='center' style={styles.bottomQrcode2} /> | |||
| <Text style={styles.bottomQrcode1Str}>公众号</Text> | |||
| </View> | |||
| <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text> | |||
| </View> | |||
| </ImageBackground> | |||
| ); | |||
| } | |||
| //rank page aaa | |||
| renderRankDom() { | |||
| return ( | |||
| <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}> | |||
| {/* 头部title二维码开始 */} | |||
| <View style={styles.title}> | |||
| <View style={styles.titleImagePlace}> | |||
| <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} /> | |||
| </View> | |||
| <ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} > | |||
| <View style={styles.titleQrcodePlacehold}></View> | |||
| <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} /> | |||
| <View style={styles.titleQrcodePlacehold}></View> | |||
| </ImageBackground> | |||
| </View> | |||
| {/* 券列表展示列表开始 */} | |||
| <View style={styles.content}> | |||
| {this.rankDom()} | |||
| </View> | |||
| {/* 底部商场信息展示开始 */} | |||
| <View style={styles.bottom}> | |||
| <View style={styles.bottomLogoBackground}> | |||
| <Image source={{ uri: this.state.baseInfo.imgUrlH}} resizeMode='contain' style={styles.bottomLogo} /> | |||
| </View> | |||
| <View style={styles.bottomQrcode1Background}> | |||
| <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.bottomQrcode1} /> | |||
| <Text style={styles.bottomQrcode1Str}>小程序</Text> | |||
| </View> | |||
| <View style={styles.bottomQrcode2Background}> | |||
| <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp}} resizeMode='center' style={styles.bottomQrcode2} /> | |||
| <Text style={styles.bottomQrcode1Str}>公众号</Text> | |||
| </View> | |||
| <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text> | |||
| </View> | |||
| </ImageBackground> | |||
| ); | |||
| } | |||
| renderAdDom() { | |||
| let curWidthNum = 1080/(PixelRatio.get()); | |||
| return ( | |||
| // <ImageBackground style={styles.adTypeBg} source={require('./image/ad1.jpg')}> slideInDown zoomInDown | |||
| <View style={styles.adWrapBox}> | |||
| <Image style={styles.adWrapHideImg} | |||
| onLoadStart={() => { | |||
| this.setState({ | |||
| curImgState: false | |||
| }) | |||
| }} | |||
| onLoad={() => { | |||
| this.setState({ | |||
| coverImgUrl: this.state.previewImg, | |||
| curImgState: true | |||
| }) | |||
| }} | |||
| resizeMode="stretch" source={{uri: this.state.previewImg}}> | |||
| </Image> | |||
| <Animatable.View animation="fadeIn" style={styles.adWrap} key={this.state.coverImgUrl}> | |||
| {this.rendDefaultImg()} | |||
| </Animatable.View> | |||
| <View style={styles.adTypeSwiper02}> | |||
| <Carousel | |||
| style={styles.adTypeSwiper02Content} | |||
| ref={'carousel02'} | |||
| data={adDataList} | |||
| renderItem={this.setSwiperItemDom} | |||
| sliderWidth={curWidthNum} | |||
| itemWidth={curWidthNum} | |||
| layout={'stack'} | |||
| activeSlideOffset={0} | |||
| autoplay={true} | |||
| loop={true} | |||
| autoplayInterval={5000} | |||
| /> | |||
| </View> | |||
| </View> | |||
| ); | |||
| } | |||
| getAdView(){ | |||
| if (this.state.baseInfo) { | |||
| if (this.state.adType == 0) { | |||
| return ( | |||
| <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}> | |||
| {/* 头部title二维码开始 */} | |||
| <View style={styles.title}> | |||
| <View style={styles.titleImagePlace}> | |||
| <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} /> | |||
| </View> | |||
| <ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} > | |||
| <View style={styles.titleQrcodePlacehold}></View> | |||
| <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} /> | |||
| <View style={styles.titleQrcodePlacehold}></View> | |||
| </ImageBackground> | |||
| </View> | |||
| {/* 券列表展示列表开始 */} | |||
| {this.getContentView()} | |||
| {/* 底部商场信息展示开始 */} | |||
| <View style={styles.bottom}> | |||
| <View style={styles.bottomLogoBackground}> | |||
| <Image source={{ uri: this.state.baseInfo.imgUrlH}} resizeMode='contain' style={styles.bottomLogo} /> | |||
| </View> | |||
| <View style={styles.bottomQrcode1Background}> | |||
| <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.bottomQrcode1} /> | |||
| <Text style={styles.bottomQrcode1Str}>小程序</Text> | |||
| </View> | |||
| <View style={styles.bottomQrcode2Background}> | |||
| <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp}} resizeMode='center' style={styles.bottomQrcode2} /> | |||
| <Text style={styles.bottomQrcode1Str}>公众号</Text> | |||
| </View> | |||
| <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text> | |||
| </View> | |||
| </ImageBackground> | |||
| ); | |||
| if (this.state.hasRankList && this.state.openRankList) { | |||
| return ( | |||
| this.renderRankDom() | |||
| ) | |||
| } else { | |||
| return ( | |||
| this.renderTicketDom() | |||
| ) | |||
| } | |||
| } else if (this.state.adType == 2) { | |||
| let curWidthNum = 1080/(PixelRatio.get()); | |||
| return ( | |||
| // <ImageBackground style={styles.adTypeBg} source={require('./image/ad1.jpg')}> slideInDown zoomInDown | |||
| <View style={styles.adWrapBox}> | |||
| <Image style={styles.adWrapHideImg} | |||
| onLoadStart={() => { | |||
| this.setState({ | |||
| curImgState: false | |||
| }) | |||
| }} | |||
| onLoad={() => { | |||
| this.setState({ | |||
| coverImgUrl: this.state.previewImg, | |||
| curImgState: true | |||
| }) | |||
| }} | |||
| resizeMode="stretch" source={{uri: this.state.previewImg}}> | |||
| </Image> | |||
| <Animatable.View animation="fadeIn" style={styles.adWrap} key={this.state.coverImgUrl}> | |||
| {this.rendDefaultImg()} | |||
| </Animatable.View> | |||
| <View style={styles.adTypeSwiper02}> | |||
| <Carousel | |||
| style={styles.adTypeSwiper02Content} | |||
| ref={'carousel02'} | |||
| data={adDataList} | |||
| renderItem={this.setSwiperItemDom} | |||
| sliderWidth={curWidthNum} | |||
| itemWidth={curWidthNum} | |||
| layout={'stack'} | |||
| activeSlideOffset={0} | |||
| autoplay={true} | |||
| loop={true} | |||
| autoplayInterval={5000} | |||
| /> | |||
| </View> | |||
| </View> | |||
| ); | |||
| if (this.state.hasRankList && this.state.openRankList) { | |||
| return ( | |||
| this.renderRankDom() | |||
| ) | |||
| } else { | |||
| return ( | |||
| this.renderAdDom() | |||
| ) | |||
| } | |||
| } else if (this.state.adType == 1) { | |||
| let curWidthNum = 1080/(PixelRatio.get()) | |||
| @@ -1431,7 +1547,7 @@ MyPage = CodePush(codePushOptions)(MyPage); | |||
| rankContent: { | |||
| flex: 1, | |||
| flexDirection: 'column', | |||
| marginLeft: 30/PixelRatio.get(), | |||
| marginLeft: 22/PixelRatio.get(), | |||
| }, | |||
| rankItemBg: { | |||
| @@ -1451,22 +1567,27 @@ MyPage = CodePush(codePushOptions)(MyPage); | |||
| rankQrcodeImg: { | |||
| width: 200/PixelRatio.get(), | |||
| height: 200/PixelRatio.get(), | |||
| marginLeft: 10/PixelRatio.get(), | |||
| marginLeft: 8/PixelRatio.get(), | |||
| }, | |||
| starTitle: { | |||
| fontSize: 28/PixelRatio.get(), | |||
| fontSize: 32/PixelRatio.get(), | |||
| }, | |||
| rankRun: { | |||
| marginTop: 16/PixelRatio.get(), | |||
| rankRun01: { | |||
| marginTop: 12/PixelRatio.get(), | |||
| }, | |||
| rankRun02: { | |||
| marginTop: 12/PixelRatio.get(), | |||
| marginLeft: -12/PixelRatio.get(), | |||
| }, | |||
| merchantText: { | |||
| fontSize: 34/PixelRatio.get(), | |||
| fontSize: 40/PixelRatio.get(), | |||
| fontWeight : 'bold', | |||
| marginBottom: 10/PixelRatio.get(), | |||
| marginTop: 30/PixelRatio.get(), | |||
| marginTop: 22/PixelRatio.get(), | |||
| }, | |||
| rankRunBox: { | |||