Ver código fonte

切换轮播模式

tags/jenkins-front-end-screenad-211-v114^0
caserKing 5 anos atrás
pai
commit
434bf3b8e2
3 arquivos alterados com 203 adições e 74 exclusões
  1. +163
    -74
      App.js
  2. +39
    -0
      package-lock.json
  3. +1
    -0
      package.json

+ 163
- 74
App.js Ver arquivo

@@ -19,9 +19,9 @@ import CodePush from "react-native-code-push";
import DeviceInfo from "react-native-device-info";
import * as Animatable from 'react-native-animatable';
import Swiper from 'react-native-swiper';
import Carousel from 'react-native-snap-carousel';
var testMac = 'FF:FF:FF:FF:FF:FF'
var curAdIndex = 0;
var curAdType02Index =0;
var errorMsg = {
ERR_MAC_GET:'设备编号获取错误',
ERR_START_AD:'广告播放系统错误',
@@ -104,7 +104,7 @@ export default class MyPage extends Component {
macAddress: '',
versionInfo:'未知',
adType: 0,
curAdType02Index: 0,

};

@@ -201,28 +201,16 @@ codePushStatusDidChange(syncStatus) {

// 列表滚动
updateContent() {
console.log(curAdIndex)
if (adDataList.length <=0)
return false;
if (curAdIndex >= adDataList.length) {
curAdIndex = 0;

if (this.state.adType == 0) {
this.setState({
adType: 2,
curAdType02Index: 0,
});
} else if (this.state.adType == 2) {
if (curAdType02Index+1 < adDataBgList.length) {
curAdType02Index++;
} else {
this.setState({
adType: 0,
curAdType02Index: 0,
});
}
}
this.setState({
adType: 2,
curAdType02Index: 0
});
}

@@ -253,9 +241,6 @@ codePushStatusDidChange(syncStatus) {
heartConfig.heartbeatInterval = config.heartbeatInterval
heartConfig.dataRefreshInterval=config.dataRefreshInterval
heartConfig.pageChangeInterval=config.pageChangeInterval
/* heartConfig.heartbeatInterval = 20
heartConfig.dataRefreshInterval=20
heartConfig.pageChangeInterval=2 */
// 动画划入
if(config.animationTheme == 0){
@@ -305,9 +290,7 @@ codePushStatusDidChange(syncStatus) {
} else if (result.data.list) {
//aaa
result.data.list[4].type = 2;
// result.data.list[4].coverImg = './image/ad1.jpg';
result.data.list[5].type = 2;
// result.data.list[5].coverImg = './image/ad2.jpg';
console.log(result.data)
//type==0的是券 1是? 2是广告大图
adDataList = result.data.list.filter((item) => {
@@ -316,9 +299,6 @@ codePushStatusDidChange(syncStatus) {
adDataBgList = result.data.list.filter((item) => {
return item.type == 2;
})
console.log(adDataList)
console.log(adDataBgList)
console.log(adDataBgList[curAdType02Index].coverImg)
//aaa
// this.setState({adType: 2 })

@@ -380,27 +360,47 @@ async routine() {
hbRequestCount = heartConfig.heartbeatInterval
}

if (pageChangeCount <= 0) { //页面切换间隔
if (this.state.contentDisplayStatus && this.state.baseInfo) {
this.setState({ contentDisplayStatus: false})
if (this.updateContent()) {
this.setState({ contentDisplayStatus: true})
//如果是adType == 2时间间隔到了,要检验轮播是否走完在决定切换
if (this.state.adType == 2) {
if (this.refs.carousel != undefined && (this.refs.carousel.currentIndex == adDataList.length-1)) {
if (this.state.curAdType02Index+1 < adDataBgList.length) {
let curNum = this.state.curAdType02Index+1;
this.setState({curAdType02Index: curNum});
} else {
this.setState({
adType: 0,
curAdType02Index: 0
});
curAdIndex = 0;
pageChangeCount = heartConfig.pageChangeInterval;
this.updateContent();
}
}
} else if (this.state.adType == 0) {
if (pageChangeCount <= 0) { //页面切换间隔
if (this.state.contentDisplayStatus && this.state.baseInfo) {
this.setState({ contentDisplayStatus: false})
if (this.updateContent()) {
this.setState({ contentDisplayStatus: true})
}
} else {
await this.getBaseInfo()
await this.getAdDataList(true)
getAdDataCount = heartConfig.dataRefreshInterval
hbRequestCount = heartConfig.heartbeatInterval
}
} else {
await this.getBaseInfo()
await this.getAdDataList(true)
getAdDataCount = heartConfig.dataRefreshInterval
hbRequestCount = heartConfig.heartbeatInterval
pageChangeCount = heartConfig.pageChangeInterval
}
pageChangeCount = heartConfig.pageChangeInterval
}

} catch(e){
this.setState({ versionInfo: versionInfo+'[E]'});
}

timer = setTimeout(()=>{
this.routine();
},1000);
},200);
}

startAd() {
@@ -506,9 +506,23 @@ getContentView() {
</View>)
}
}
setSwiperItemDom(contentItem, index) {
setSwiperItemDom(item) {
let contentItem = item.item;
let index = item.index;
actionText = '扫码秒杀';
if (contentItem.type == 0) {
if (contentItem.subType == 2)
actionText = '扫码秒杀';
else if (contentItem.subType == 6)
actionText = '扫码砍价';
else if (contentItem.subType == 7)
actionText = '扫码拼团';
else
actionText = '扫码领取';
}
return (
<View style={styles.contentItemTopForAd} key={index}>
<ImageBackground style={styles.contentItemTopForAd} resizeMode="stretch" key={index} source={require('./image/item-background.png')}>
{/* <ImageBackground style={styles.adTypeSwiper02} resizeMode="stretch" source={require('./image/item-background.png')}></ImageBackground> */}
<Image source={{uri: contentItem.coverImg}} resizeMode='cover' style={styles.adTypeItemImg} />
<View style={styles.contentItemTopDetail}>
{/* 券的title */}
@@ -516,18 +530,23 @@ setSwiperItemDom(contentItem, index) {
<View style={styles.contentItemTopDetailPrice}>
{/* 售价 */}
<View style={styles.contentItemTopDetailCurPrice}>
<Text style={styles.contentItemTopDetailCurPriceStrUnit}>¥</Text>
<Text style={styles.contentItemTopDetailCurPriceStr}>{contentItem.target.salePriceStr}</Text>
<Text style={styles.contentItemTopDetailCurPriceStrUnit02}>¥</Text>
<Text style={styles.contentItemTopDetailCurPriceStr02}>{contentItem.target.salePriceStr}</Text>
</View>
{/* 面额 */}
<View style={styles.contentItemTopDetailSalePrice}>
<Text style={styles.contentItemTopDetailSalePriceStr} >¥{contentItem.target.priceStr}</Text>
<View style={styles.contentItemTopDetailSalePrice02}>
<Text style={styles.contentItemTopDetailSalePriceStr02} >¥{contentItem.target.priceStr}</Text>
</View>
</View>
</View>
{/* <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> */}
<Image source={{uri:contentItem.target.qrCode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
</View>
<View style={styles.contentItemTopQrcodeBox}>
<Image source={{uri:contentItem.target.qrCode}} resizeMode='contain' style={styles.contentItemTopQrcode02} />
<Text style={styles.contentItemBottomAction02}>{actionText}</Text>
</View>
</ImageBackground>
)
}
renderAdTypeSwiper() {
@@ -600,12 +619,28 @@ getAdView(){
} else if (this.state.adType == 2) {
return (
// <ImageBackground style={styles.adTypeBg} source={require('./image/ad1.jpg')}>
<ImageBackground style={styles.adTypeBg} source={{ uri: adDataBgList[curAdType02Index].coverImg}}>
<ImageBackground style={styles.adTypeBg} resizeMode="stretch" source={{ uri: adDataBgList[this.state.curAdType02Index].coverImg}}>
{/* adType == 2 滚动轮播 */}
<Swiper ref='scrollView' style={styles.adTypeSwiper02} autoplay={true} autoplayTimeout={1} showPagination={false}
{/* <Swiper ref='scrollView' style={styles.adTypeSwiper02} autoplay={true} autoplayTimeout={1} showPagination={false}
dotColor="transparent" activeDotColor="transparent" horizontal={true} showsButtons={false}>
{this.renderAdTypeSwiper()}
</Swiper>
</Swiper> */}
<View style={styles.adTypeSwiper02}>
<Carousel
ref={'carousel'}
data={adDataList}
renderItem={this.setSwiperItemDom}
sliderWidth={394}
itemWidth={394}
itemHeight={134}
sliderHeight={134}
activeSlideOffset={0}
autoplay={true}
loop={true}
autoplayInterval={2000}
/>
</View>

<View style={styles.bottomBox}>
<View style={styles.bottomLogoBackground}>
@@ -889,12 +924,26 @@ MyPage = CodePush(codePushOptions)(MyPage);
flex: 5,
width:'100%',
height:'100%',
borderWidth:1,
borderColor:"blue",
marginLeft:18/PixelRatio.get(),
// backgroundColor:'transparent'
},

contentItemTopQrcodeBox:{
flex: 5,
width:'100%',
height:'100%',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
marginLeft: -28/PixelRatio.get(),
// backgroundColor:'transparent'
},

contentItemTopQrcode02:{
width:'80%',
height:'70%',
},

//layer content item bottom
contentItemBottomMerchantName:{
flex: 5,
@@ -906,7 +955,8 @@ MyPage = CodePush(codePushOptions)(MyPage);
textAlign :'center',
textAlignVertical:'center',
fontSize: 27/PixelRatio.get(),
fontWeight : 'bold'
fontWeight : 'bold',

},

contentItemBottomPlacehold:{
@@ -930,9 +980,16 @@ MyPage = CodePush(codePushOptions)(MyPage);
textAlignVertical:'center',
fontSize: 36/PixelRatio.get(),
color: 'black',
// borderStyle:"solid",
// borderWidth:1,
// borderColor:"red"
},

contentItemBottomAction02:{
width:'100%',
height: 60/PixelRatio.get(),
backgroundColor:'transparent',
textAlign :'center',
textAlignVertical:'center',
fontSize: 36/PixelRatio.get(),
color: 'black',
},

// 券的title
@@ -941,9 +998,6 @@ MyPage = CodePush(codePushOptions)(MyPage);
// height:'100%',
width:'100%',
marginTop:"2%",
// borderStyle:"solid",
// borderWidth:1,
// borderColor:"red",
backgroundColor:'transparent',
textAlign :'left',
color:"black",
@@ -991,6 +1045,15 @@ MyPage = CodePush(codePushOptions)(MyPage);
color : 'red'
},

contentItemTopDetailCurPriceStr02:{
backgroundColor:'transparent',
fontSize:96/PixelRatio.get(),
fontFamily:"PingFangSC-Bold",
fontWeight: "bold",
textAlign :'left',
color : 'red'
},

contentItemTopDetailCurPriceStrUnit:{
backgroundColor:'transparent',
textAlign :'left',
@@ -999,6 +1062,15 @@ MyPage = CodePush(codePushOptions)(MyPage);
fontSize: 48/PixelRatio.get(),
color : 'red'
},

contentItemTopDetailCurPriceStrUnit02:{
backgroundColor:'transparent',
textAlign :'left',
textAlignVertical:'center',
paddingBottom: 16/PixelRatio.get(),
fontSize: 48/PixelRatio.get(),
color : 'red'
},
// 面额的样式
contentItemTopDetailSalePrice:{
position:"absolute",
@@ -1011,6 +1083,17 @@ MyPage = CodePush(codePushOptions)(MyPage);
backgroundColor:'transparent',
},

contentItemTopDetailSalePrice02:{
position:"absolute",
bottom:14,
left:0,
// flex: 1,
paddingTop:50,
width:'100%',
// height:'100%',
backgroundColor:'transparent',
},

contentItemTopDetailSalePriceStr:{
width:'100%',
height:'100%',
@@ -1022,6 +1105,18 @@ MyPage = CodePush(codePushOptions)(MyPage);
color : 'gray'
},

contentItemTopDetailSalePriceStr02:{
width:'100%',
height:'100%',
backgroundColor:'transparent',
textAlignVertical:'center',
textAlign :'left',
fontSize: 27/PixelRatio.get(),
textDecorationLine: 'line-through',
color : 'gray'
},


adTypeBg:{
flex: 1,
width: '100%',
@@ -1031,12 +1126,9 @@ MyPage = CodePush(codePushOptions)(MyPage);
adTypeSwiper02:{
position: 'absolute',
left: 0,
bottom: 120,
bottom: 59,
width: '100%',
height: 134,
marginLeft: 10,
borderColor: 'red',
borderWidth: 10
},

adTypeItemImgWrap:{
@@ -1048,8 +1140,10 @@ MyPage = CodePush(codePushOptions)(MyPage);
},

adTypeItemImg:{
width: 90,
height: 90,
width: 100,
height: 100,
marginLeft: 18,
marginTop: 11,
borderRadius:27/PixelRatio.get(),
backgroundColor:'transparent'
},
@@ -1063,23 +1157,18 @@ MyPage = CodePush(codePushOptions)(MyPage);
flexDirection: 'row',
alignItems: 'center',
backgroundColor:'transparent',
borderColor: 'red',
borderWidth: 1
},

contentItemTopForAd:{
flex: 1,
width:'100%',
width: 410,
height:'100%',
paddingLeft: 30/PixelRatio.get(),
paddingLeft: 22/PixelRatio.get(),
paddingRight: 26/PixelRatio.get(),
paddingTop: 10/PixelRatio.get(),
flexDirection: 'row',
alignItems: 'center',
backgroundColor:'#fff',
borderColor: 'red',
borderWidth: 1,
alignItems: 'flex-start',
borderRadius: 6,
backgroundColor:'transparent',
},

});

+ 39
- 0
package-lock.json Ver arquivo

@@ -9760,6 +9760,36 @@
"scheduler": "^0.13.3"
}
},
"react-addons-shallow-compare": {
"version": "15.6.2",
"resolved": "https://registry.npm.taobao.org/react-addons-shallow-compare/download/react-addons-shallow-compare-15.6.2.tgz",
"integrity": "sha1-GYoAuR/DdiPbZKKP0XtZa6NicC8=",
"requires": {
"fbjs": "^0.8.4",
"object-assign": "^4.1.0"
},
"dependencies": {
"core-js": {
"version": "1.2.7",
"resolved": "https://registry.npm.taobao.org/core-js/download/core-js-1.2.7.tgz",
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
},
"fbjs": {
"version": "0.8.17",
"resolved": "https://registry.npm.taobao.org/fbjs/download/fbjs-0.8.17.tgz",
"integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
"requires": {
"core-js": "^1.0.0",
"isomorphic-fetch": "^2.1.1",
"loose-envify": "^1.0.0",
"object-assign": "^4.1.0",
"promise": "^7.1.1",
"setimmediate": "^1.0.5",
"ua-parser-js": "^0.7.18"
}
}
}
},
"react-clone-referenced-element": {
"version": "1.1.0",
"resolved": "https://registry.npm.taobao.org/react-clone-referenced-element/download/react-clone-referenced-element-1.1.0.tgz",
@@ -10064,6 +10094,15 @@
"resolved": "https://registry.npm.taobao.org/react-native-device-info/download/react-native-device-info-2.3.2.tgz",
"integrity": "sha1-2yuPE1qvJRVYPjZ6t5Hcx9Lw0Uw="
},
"react-native-snap-carousel": {
"version": "3.8.0",
"resolved": "https://registry.npm.taobao.org/react-native-snap-carousel/download/react-native-snap-carousel-3.8.0.tgz",
"integrity": "sha1-k3IiLWHTfQqKO+xCPRNdDKobdZU=",
"requires": {
"prop-types": "^15.6.1",
"react-addons-shallow-compare": "15.6.2"
}
},
"react-native-swiper": {
"version": "1.5.14",
"resolved": "https://registry.npm.taobao.org/react-native-swiper/download/react-native-swiper-1.5.14.tgz",


+ 1
- 0
package.json Ver arquivo

@@ -13,6 +13,7 @@
"react-native-camera": "^1.12.0",
"react-native-code-push": "^5.6.0",
"react-native-device-info": "^2.1.2",
"react-native-snap-carousel": "^3.8.0",
"react-native-swiper": "^1.5.14",
"rn-fetch-blob": "^0.10.15"
},


Carregando…
Cancelar
Salvar