Browse Source

[功能][新增]:完善更新逻辑和相关的代码

tags/jenkins-front-end-screenad-66^0
hupeng 6 years ago
parent
commit
b28e550338
2 changed files with 172 additions and 129 deletions
  1. +172
    -129
      App.js
  2. BIN
      image/groupbuy.png

+ 172
- 129
App.js View File

@@ -17,9 +17,9 @@ import DeviceInfo from "react-native-device-info";
import * as Animatable from 'react-native-animatable';

contentItemDefault = {
coverImg:'',
qrcode:[],
target:{
coverImg:'',
title:'',
subTitle:'',
priceStr:'',
@@ -34,6 +34,8 @@ baseInfoDefault = {
imgQrcodeWemp:''
}

curAdIndex = 0;

export default class MyPage extends Component {

constructor(props) {
@@ -41,9 +43,9 @@ export default class MyPage extends Component {
this.state = {
baseInfo: baseInfoDefault,
adDataList:[],
contentItem1:contentItemDefault,
contentItem2:contentItemDefault,
contentItem3:contentItemDefault,
contentItem0:null,
contentItem1:null,
contentItem2:null,

contentDisplayStatus:true,

@@ -96,14 +98,31 @@ codePushStatusDidChange(syncStatus) {
this.setState({ progress });
}

updateContent() {
if (curAdIndex >= this.state.adDataList.length) {
curAdIndex = 0
}

this.setState({contentItem0:this.state.adDataList[curAdIndex]});

if (curAdIndex + 1 < this.state.adDataList.length)
this.setState({contentItem1:this.state.adDataList[curAdIndex+1]});
else
this.setState({contentItem1:null});

if (curAdIndex + 2 < this.state.adDataList.length)
this.setState({contentItem2:this.state.adDataList[curAdIndex+2]});
else
this.setState({contentItem2:null});
curAdIndex+=3
}
getAdDataList() {
HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/list?deviceId=11%3AAA%3A33%3ABB%3A44&pageNum=1&pageSize=5')
HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/list?deviceId=11%3AAA%3A33%3ABB%3A44&pageNum=1&pageSize=30')
.then(result => {
this.setState({
adDataList : result.data.list});
if (this.state.adDataList.length > 0)
this.setState({
contentItem1 : this.state.adDataList[0]});
this.setState({adDataList : result.data.list});
this.updateContent();
})
.catch(error => console.error(error))
}
@@ -139,13 +158,96 @@ componentDidMount() {
setInterval(
()=>{
this.setState({ contentDisplayStatus: false})
this.updateContent();
this.setState({ contentDisplayStatus: true})
},
5000,
1000 * 10, //10秒更新一下页面
);
setInterval(
()=>{
this.setState({ contentDisplayStatus: false})
this.updateContent();
this.setState({ contentDisplayStatus: true})
},
1000*60*60, //1小时一次
);
}

getContentViewItemUplayer(contentItem) {
if (contentItem.target.type == 8)
return (<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
else if (contentItem.target.type == 9)
return (<Image source={require('./image/groupbuy.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
}

getContentViewItem(contentItem, annomation) {
if (!contentItem)
return (
<View style={styles.contentItem}>
</View>
)
actionText = '扫码领取';

if (contentItem.target.type == 8)
actionText = '扫码砍价';
else if (contentItem.target.type == 9)
actionText = '扫码拼团';

merchantName = "";
if (contentItem.target.merchantVoList.length > 1)
merchantName = '多商户通用';
else
merchantName = contentItem.target.merchantVoList[0].merchantName;

return (
<Animatable.View animation={annomation} style={styles.contentItem}>

<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
<View style={styles.contentItemTop}>
<Image source={{uri: contentItem.target.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}>
<Text style={styles.contentItemTopDetailTitle}>{contentItem.target.title}</Text>
<Text style={styles.contentItemTopDetailRemark}>{contentItem.target.remark}</Text>
<View style={styles.contentItemTopDetailPrice}>
<View style={styles.contentItemTopDetailCurPrice}>
<Text style={styles.contentItemTopDetailCurPriceStr}>{contentItem.target.priceStr}</Text>
<Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
</View>
<View style={styles.contentItemTopDetailSalePrice}>
<Text style={styles.contentItemTopDetailSalePriceStr} >{contentItem.target.salePriceStr}元</Text>
</View>
</View>
</View>
<Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
</View>

<View style={styles.contentItemBottom}>
<Text style={styles.contentItemBottomMerchantName}>{merchantName}</Text>
<View style={styles.contentItemBottomPlacehold}></View>
<Text style={styles.contentItemBottomAction}>{actionText}</Text>
</View>

</ImageBackground>

{this.getContentViewItemUplayer(contentItem)}

</Animatable.View>
)
}

getContentView() {
if (this.state.contentDisplayStatus) {
return (<View style={styles.content}>
{this.getContentViewItem(this.state.contentItem0,"slideInDown")}
{this.getContentViewItem(this.state.contentItem1,"slideInLeft")}
{this.getContentViewItem(this.state.contentItem2,"slideInRight")}
</View>)
}else{
return (<View style={styles.content}>
</View>)
}
}

render() {

@@ -164,112 +266,6 @@ render() {
);
}

if (this.state.contentDisplayStatus) {
var content = (<View style={styles.content}>

<Animatable.View animation="slideInDown" style={styles.contentItem}>

<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
<View style={styles.contentItemTop}>
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}>
<Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
<Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
<View style={styles.contentItemTopDetailPrice}>
<View style={styles.contentItemTopDetailCurPrice}>
<Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
<Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
</View>
<View style={styles.contentItemTopDetailSalePrice}>
<Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
</View>
</View>
</View>
<Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
</View>

<View style={styles.contentItemBottom}>
<Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
<View style={styles.contentItemBottomPlacehold}></View>
<Text style={styles.contentItemBottomAction}>扫码领取</Text>
</View>

</ImageBackground>

<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />

</Animatable.View>

<Animatable.View animation="slideInLeft" style={styles.contentItem}>
<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >

<View style={styles.contentItemTop}>
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}>
<Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
<Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
<View style={styles.contentItemTopDetailPrice}>
<View style={styles.contentItemTopDetailCurPrice}>
<Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
<Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
</View>
<View style={styles.contentItemTopDetailSalePrice}>
<Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
</View>
</View>
</View>
<Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
</View>

<View style={styles.contentItemBottom}>
<Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
<View style={styles.contentItemBottomPlacehold}></View>
<Text style={styles.contentItemBottomAction}>扫码领取</Text>
</View>

</ImageBackground>
<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
</Animatable.View>

<Animatable.View animation="slideInRight" style={styles.contentItem}>
<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >

<View style={styles.contentItemTop}>
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}>
<Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
<Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
<View style={styles.contentItemTopDetailPrice}>
<View style={styles.contentItemTopDetailCurPrice}>
<Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
<Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
</View>
<View style={styles.contentItemTopDetailSalePrice}>
<Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
</View>
</View>
</View>
<Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
</View>

<View style={styles.contentItemBottom}>
<Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
<View style={styles.contentItemBottomPlacehold}></View>
<Text style={styles.contentItemBottomAction}>扫码领取</Text>
</View>

</ImageBackground>
<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
</Animatable.View>
</View>)
}else{
var content = <View style={styles.content}></View>
}

return (
<ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
@@ -279,28 +275,33 @@ render() {
<Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
</View>

<ImageBackground source={require('./image/title-qrcode.png')} resizeMode='center' style={styles.titleQrcodeBonder} >
<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>

{content}
{this.getContentView()}

<View style={styles.bottom}>
<View style={styles.bottomLogoBackground}>
<Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='center' style={styles.bottomLogo} />
</View>
<Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode1} />
<Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} />
<View style={styles.bottomQrcode1Background}>
<Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode1} />
<Text style={styles.bottomQrcode1Str}>小程序</Text>
</View>
<View style={styles.bottomQrcode2Background}>
<Image source={{ uri: this.state.baseInfo.imgQrcodeWemp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} />
<Text style={styles.bottomQrcode1Str}>公众号</Text>
</View>
<Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
</View>

</ImageBackground>
);

}
);
}
}

const styles = StyleSheet.create({
@@ -390,8 +391,8 @@ render() {
bottomLogoBackground: {
flex: 3,
borderRadius:10,
marginTop: 12,
marginBottom: 12,
marginTop: 10,
marginBottom: 10,
backgroundColor:'white'
},
bottomLogo: {
@@ -400,20 +401,60 @@ render() {
borderRadius:10,
backgroundColor:'transparent'
},
bottomQrcode1: {
bottomQrcode1Background : {
flex: 1,
width:'100%',
height:'100%',
marginLeft: 8,
paddingTop: 10,
paddingBottom: 4,
flexDirection: 'column',
backgroundColor:'transparent'
},
bottomQrcode2: {

bottomQrcode2Background : {
flex: 1,
width:'100%',
height:'100%',
marginLeft: 8,
paddingTop: 10,
paddingBottom: 4,
flexDirection: 'column',
backgroundColor:'transparent'
},

bottomQrcode1: {
flex: 2,
width:'100%',
height:'100%',
backgroundColor:'transparent'
},

bottomQrcode2: {
flex: 2,
width:'100%',
height:'100%',
backgroundColor:'transparent'
},

bottomQrcode1Str: {
flex: 1,
textAlign :'center',
textAlignVertical:'center',
fontSize: 6,
color : 'black',
backgroundColor:'transparent'
},

bottomQrcode2Str: {
flex: 1,
textAlign :'center',
textAlignVertical:'center',
fontSize: 6,
color : 'black',
backgroundColor:'transparent'
},

bottomPlacehold: {
flex: 8,
width:'100%',
@@ -482,6 +523,7 @@ render() {
borderRadius:10,
backgroundColor:'transparent'
},

contentItemTopDetail:{
flex: 6,
width:'100%',
@@ -491,6 +533,7 @@ render() {
alignItems: 'center',
backgroundColor:'transparent'
},

contentItemTopQrcode:{
flex: 5,
width:'100%',


BIN
image/groupbuy.png View File

Before After
Width: 142  |  Height: 142  |  Size: 28 KiB

Loading…
Cancel
Save