diff --git a/App.js b/App.js index 651b7e5..b7bb0d1 100644 --- a/App.js +++ b/App.js @@ -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 ( - + {item.merchantName} - + 经营指数: {item.starNum} 分 - + } filledStarImage={} - scoreTextStyle={{color:'#fff'}} + scoreTextStyle={{color:'transparent'}} /> - + 人气指数: {item.starNum} 分 - + } filledStarImage={} - scoreTextStyle={{color:'#fff'}} + scoreTextStyle={{color:'transparent'}} /> @@ -544,7 +609,7 @@ rankItemDom(item,index) { - + ) } //券列表content部分 @@ -609,18 +674,11 @@ getContentViewItem(contentItem, annomation) { getContentView() { if (this.state.contentDisplayStatus) { //aaa - if (true) { - return ( - {this.renderRankDom()} - ) - } else { - return ( - {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)} - ) - } - + return ( + {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)} + ) }else{ return ( @@ -717,84 +775,142 @@ rendDefaultImg() { ) } } - +renderTicketDom() { + return ( + + {/* 头部title二维码开始 */} + + + + + + + + + + + {/* 券列表展示列表开始 */} + {this.getContentView()} + {/* 底部商场信息展示开始 */} + + + + + + + 小程序 + + + + 公众号 + + {this.state.versionInfo} + + + ); +} +//rank page aaa +renderRankDom() { + return ( + + {/* 头部title二维码开始 */} + + + + + + + + + + + {/* 券列表展示列表开始 */} + + {this.rankDom()} + + {/* 底部商场信息展示开始 */} + + + + + + + 小程序 + + + + 公众号 + + {this.state.versionInfo} + + + ); +} +renderAdDom() { + let curWidthNum = 1080/(PixelRatio.get()); + return ( + // slideInDown zoomInDown + + { + this.setState({ + curImgState: false + }) + }} + onLoad={() => { + this.setState({ + coverImgUrl: this.state.previewImg, + curImgState: true + }) + }} + resizeMode="stretch" source={{uri: this.state.previewImg}}> + + + + {this.rendDefaultImg()} + + + + + + + + ); +} getAdView(){ if (this.state.baseInfo) { if (this.state.adType == 0) { - return ( - - {/* 头部title二维码开始 */} - - - - - - - - - - - {/* 券列表展示列表开始 */} - {this.getContentView()} - {/* 底部商场信息展示开始 */} - - - - - - - 小程序 - - - - 公众号 - - {this.state.versionInfo} - - - ); + 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 ( - // slideInDown zoomInDown - - { - this.setState({ - curImgState: false - }) - }} - onLoad={() => { - this.setState({ - coverImgUrl: this.state.previewImg, - curImgState: true - }) - }} - resizeMode="stretch" source={{uri: this.state.previewImg}}> - - - - {this.rendDefaultImg()} - - - - - - - - ); + 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: {