Sfoglia il codice sorgente

【大屏】【添加】【融合券和广告的动画】

tags/jenkins-front-end-screenad-313-v169^0
caserKing 5 anni fa
parent
commit
9af572f291
1 ha cambiato i file con 237 aggiunte e 116 eliminazioni
  1. +237
    -116
      App.js

+ 237
- 116
App.js Vedi File

@@ -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: {


Caricamento…
Annulla
Salva