diff --git a/App.js b/App.js index 740845f..8a90d23 100644 --- a/App.js +++ b/App.js @@ -22,6 +22,7 @@ import * as Animatable from 'react-native-animatable'; import Swiper from 'react-native-swiper'; import Carousel from 'react-native-snap-carousel'; // import {BoxShadow} from 'react-native-shadow'; +import StarRatingBar from 'react-native-star-rating-view/StarRatingBar'; var testMac = 'FF:FF:FF:FF:FF:FF' var curAdIndex = 0; @@ -71,6 +72,7 @@ const shadowOpt = { } var curTimer = null; +var curRankTimer = null; var hbRequestCount var getAdDataCount @@ -122,8 +124,13 @@ export default class MyPage extends Component { coverImgUrl: '', previewImg: '', curImgState: false, + merchantRankList: [], + hasRankList: true,// 有排名列表 + openRankList: false,//开启播放排名 + }; - + + this.setAdSwiperItemDom = this.setAdSwiperItemDom.bind(this); /* this.codePushUpdate = this.codePushUpdate.bind(this); this.startAd = this.startAd.bind(this); this.showErrMsg = this.showErrMsg.bind(this); */ @@ -239,6 +246,7 @@ codePushStatusDidChange(syncStatus) { this.setState({contentItem2:null}); curAdIndex+=3 + return true; } @@ -253,7 +261,7 @@ codePushStatusDidChange(syncStatus) { heartConfig.heartbeatInterval = config.heartbeatInterval heartConfig.dataRefreshInterval=config.dataRefreshInterval heartConfig.pageChangeInterval=config.pageChangeInterval - + // 动画划入 if(config.animationTheme == 0){ this.setState({ @@ -290,8 +298,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; @@ -299,7 +321,15 @@ codePushStatusDidChange(syncStatus) { adDataBgList = dataList.filter((item) => { return item.type == 2; }) - //aaa + let merchantRankList = dataList.filter((item) => { + if (item.type == 3) { + item.extInfo = JSON.parse(item.extInfo); + item.extInfo.executionIndex = Number(item.extInfo.executionIndex); + item.extInfo.populationIndex = Number(item.extInfo.populationIndex); + } + return item.type == 3; + }) + // let num = 0; if (adDataList.length > 0 && adDataBgList.length > 0) { num = 2; @@ -309,7 +339,21 @@ codePushStatusDidChange(syncStatus) { } else if (!adDataList.length && adDataBgList.length > 0) { num = 1; } + //aaa this.setState({adType: num }) + this.setState({ + merchantRankList: merchantRankList, + hasRankList: merchantRankList.length > 0 ? true:false + }) + //aaa + if (this.state.adType == 1 && this.state.hasRankList) { + let obj = { + hasRank: true, + } + adDataBgList.push(obj) + } + + } getAdDataList(first) { @@ -321,7 +365,7 @@ codePushStatusDidChange(syncStatus) { if (result.code != 200) { this.showErrMsg(result.message+'\n'+this.state.macAddress); } else if (result.data.list) { - //aaa + // //type==0的是券 1是? 2是广告大图 let curData = result.data.list; this.dealLoopType(curData); @@ -375,13 +419,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) { @@ -395,10 +443,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 @@ -409,6 +468,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()) { @@ -475,7 +541,95 @@ getContentViewItemMerchantName(contentItem) { return contentItem.target.merchantVoList[0].merchantName; } } +//排名 rank dom +rankDom() { + let rankDomStack = []; + let {merchantRankList,} = this.state; + + if (merchantRankList.length > 0) { + merchantRankList.map((item,index) => { + let animation = ''; + 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 == 2) { + animation = 'fadeIn'; + } else if (this.state.adType == 1) { + animation = ''; + } + + rankDomStack.push(this.rankItemDom(item,index,animation)); + }) + } + return rankDomStack; +} +//每一条 rank +rankItemDom(item,index,animation) { + let fontSizeNum = 40/(PixelRatio.get()); + let fontSizeNum02 = 46/(PixelRatio.get()); + let curStyleObj = { + width: fontSizeNum, + height: fontSizeNum, + } + let curStyleObj02 = { + width: fontSizeNum02, + height: fontSizeNum02, + } + return ( + + + + {item.title} + + + 经营指数: {item.extInfo.executionIndex} 分 + + } + filledStarImage={} + scoreTextStyle={{color:'transparent'}} + /> + + + + + 人气指数: {item.extInfo.populationIndex} 分 + + } + filledStarImage={} + scoreTextStyle={{color:'transparent'}} + /> + + + + + + + + + + ) +} +//券列表content部分 getContentViewItem(contentItem, annomation) { if (!contentItem) return ( @@ -485,7 +639,7 @@ getContentViewItem(contentItem, annomation) { actionText = this.getContentViewItemActionStr(contentItem); merchantName = this.getContentViewItemMerchantName(contentItem); - //aaa + // // contentItem.target.salePriceStr = 234005.8; // console.warn(annomation) let curNumStr = contentItem.target.salePriceStr+''; @@ -536,25 +690,33 @@ getContentViewItem(contentItem, annomation) { getContentView() { if (this.state.contentDisplayStatus) { + //aaa 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 ( - - {this.state.errorMessage} ) - } + }else{ + return ( + + {this.state.errorMessage} + ) + } } setAdSwiperItemDom(item) { let contentItem = item.item; - return ( - - - - ) + if (this.state.hasRankList && contentItem.hasRank != undefined && contentItem.hasRank) { + return ( + this.renderRankDom() + ) + } else { + return ( + + + + ) + } + } setSwiperItemDom(item) { let contentItem = item.item; @@ -568,7 +730,7 @@ setSwiperItemDom(item) { if (contentItem.subType == 7) curLogo = require('./image/groupbuy.png'); } - //aaa + // // contentItem.target.salePriceStr = 24502228; let curNumStr = contentItem.target.salePriceStr+''; let curStyleObj = {}; @@ -580,7 +742,7 @@ setSwiperItemDom(item) { return ( {/* */} - + @@ -637,84 +799,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()) @@ -1335,6 +1555,69 @@ MyPage = CodePush(codePushOptions)(MyPage); backgroundColor: 'transparent', alignItems: 'center', + }, + //排名的列表样式 + rankItemBox: { + // flex: 1, + flexDirection: 'row', + alignItems: 'center', + width: '92%', + height: 250/PixelRatio.get(), + backgroundColor: '#fff', + borderRadius: 18/PixelRatio.get(), + marginTop: 30/PixelRatio.get(), + }, + + rankContent: { + flex: 1, + flexDirection: 'column', + marginLeft: 22/PixelRatio.get(), + }, + + rankItemBg: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + width: '100%', + height: 250/PixelRatio.get(), + }, + + RankLogo: { + width: 188/PixelRatio.get(), + height: 200/PixelRatio.get(), + marginLeft: 20/PixelRatio.get(), + }, + + rankQrcodeImg: { + width: 200/PixelRatio.get(), + height: 200/PixelRatio.get(), + marginRight: 20/PixelRatio.get(), + }, + + starTitle: { + fontSize: 32/PixelRatio.get(), + }, + + rankRun01: { + marginTop: 12/PixelRatio.get(), + }, + + rankRun02: { + marginTop: 12/PixelRatio.get(), + marginLeft: 10/PixelRatio.get(), + }, + + merchantText: { + fontSize: 40/PixelRatio.get(), + fontWeight : 'bold', + marginBottom: 10/PixelRatio.get(), + marginTop: 22/PixelRatio.get(), + }, + + rankRunBox: { + flex: 1, + flexDirection: 'row', + } }); diff --git a/image/background-yellow.png b/image/background-yellow.png new file mode 100644 index 0000000..88dbd34 Binary files /dev/null and b/image/background-yellow.png differ diff --git a/image/hot_gray.png b/image/hot_gray.png new file mode 100644 index 0000000..e68c6c4 Binary files /dev/null and b/image/hot_gray.png differ diff --git a/image/hot_yellow.png b/image/hot_yellow.png new file mode 100644 index 0000000..e269841 Binary files /dev/null and b/image/hot_yellow.png differ diff --git a/image/star_gray.png b/image/star_gray.png new file mode 100644 index 0000000..a054b41 Binary files /dev/null and b/image/star_gray.png differ diff --git a/image/star_yellow.png b/image/star_yellow.png new file mode 100644 index 0000000..1bde799 Binary files /dev/null and b/image/star_yellow.png differ diff --git a/image/title_yellow.png b/image/title_yellow.png new file mode 100644 index 0000000..b02a823 Binary files /dev/null and b/image/title_yellow.png differ diff --git a/package-lock.json b/package-lock.json index 93d703b..b18ac2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10108,6 +10108,14 @@ "react-addons-shallow-compare": "15.6.2" } }, + "react-native-star-rating-view": { + "version": "0.0.12", + "resolved": "https://registry.npm.taobao.org/react-native-star-rating-view/download/react-native-star-rating-view-0.0.12.tgz", + "integrity": "sha1-heW8pPARabHPkVD4LdMnvUGT6r4=", + "requires": { + "react-native-vector-icons": "^4.0.0" + } + }, "react-native-svg": { "version": "9.6.2", "resolved": "https://registry.npm.taobao.org/react-native-svg/download/react-native-svg-9.6.2.tgz", @@ -10121,6 +10129,38 @@ "prop-types": "^15.5.10" } }, + "react-native-vector-icons": { + "version": "4.6.0", + "resolved": "https://registry.npm.taobao.org/react-native-vector-icons/download/react-native-vector-icons-4.6.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-native-vector-icons%2Fdownload%2Freact-native-vector-icons-4.6.0.tgz", + "integrity": "sha1-5AFDEf+m3jl9kU/8MbcJeodMyNU=", + "requires": { + "lodash": "^4.0.0", + "prop-types": "^15.5.10", + "yargs": "^8.0.2" + }, + "dependencies": { + "yargs": { + "version": "8.0.2", + "resolved": "https://registry.npm.taobao.org/yargs/download/yargs-8.0.2.tgz?cache=0&sync_timestamp=1567812322754&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs%2Fdownload%2Fyargs-8.0.2.tgz", + "integrity": "sha1-YpmpBVsc78lp/355wdkY3Osiw2A=", + "requires": { + "camelcase": "^4.1.0", + "cliui": "^3.2.0", + "decamelize": "^1.1.1", + "get-caller-file": "^1.0.1", + "os-locale": "^2.0.0", + "read-pkg-up": "^2.0.0", + "require-directory": "^2.1.1", + "require-main-filename": "^1.0.1", + "set-blocking": "^2.0.0", + "string-width": "^2.0.0", + "which-module": "^2.0.0", + "y18n": "^3.2.1", + "yargs-parser": "^7.0.0" + } + } + } + }, "react-proxy": { "version": "1.1.8", "resolved": "https://registry.npm.taobao.org/react-proxy/download/react-proxy-1.1.8.tgz", diff --git a/package.json b/package.json index c36f812..0688267 100644 --- a/package.json +++ b/package.json @@ -7,15 +7,16 @@ "test": "jest" }, "dependencies": { + "code-push": "2.0.7", "react": "16.8.3", "react-native": "0.59.9", "react-native-animatable": "^1.3.2", "react-native-camera": "^1.12.0", - "code-push": "2.0.7", "react-native-code-push": "5.6.1", "react-native-device-info": "^2.1.2", "react-native-shadow": "^1.2.2", "react-native-snap-carousel": "^3.8.0", + "react-native-star-rating-view": "0.0.12", "react-native-svg": "^9.6.2", "react-native-swiper": "^1.5.14", "rn-fetch-blob": "^0.10.15"