|
|
@@ -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%', |
|
|
|