| @@ -17,9 +17,9 @@ import DeviceInfo from "react-native-device-info"; | |||||
| import * as Animatable from 'react-native-animatable'; | import * as Animatable from 'react-native-animatable'; | ||||
| contentItemDefault = { | contentItemDefault = { | ||||
| coverImg:'', | |||||
| qrcode:[], | qrcode:[], | ||||
| target:{ | target:{ | ||||
| coverImg:'', | |||||
| title:'', | title:'', | ||||
| subTitle:'', | subTitle:'', | ||||
| priceStr:'', | priceStr:'', | ||||
| @@ -34,6 +34,8 @@ baseInfoDefault = { | |||||
| imgQrcodeWemp:'' | imgQrcodeWemp:'' | ||||
| } | } | ||||
| curAdIndex = 0; | |||||
| export default class MyPage extends Component { | export default class MyPage extends Component { | ||||
| constructor(props) { | constructor(props) { | ||||
| @@ -41,9 +43,9 @@ export default class MyPage extends Component { | |||||
| this.state = { | this.state = { | ||||
| baseInfo: baseInfoDefault, | baseInfo: baseInfoDefault, | ||||
| adDataList:[], | adDataList:[], | ||||
| contentItem1:contentItemDefault, | |||||
| contentItem2:contentItemDefault, | |||||
| contentItem3:contentItemDefault, | |||||
| contentItem0:null, | |||||
| contentItem1:null, | |||||
| contentItem2:null, | |||||
| contentDisplayStatus:true, | contentDisplayStatus:true, | ||||
| @@ -96,14 +98,31 @@ codePushStatusDidChange(syncStatus) { | |||||
| this.setState({ progress }); | 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() { | 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 => { | .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)) | .catch(error => console.error(error)) | ||||
| } | } | ||||
| @@ -139,13 +158,96 @@ componentDidMount() { | |||||
| setInterval( | setInterval( | ||||
| ()=>{ | ()=>{ | ||||
| this.setState({ contentDisplayStatus: false}) | this.setState({ contentDisplayStatus: false}) | ||||
| this.updateContent(); | |||||
| this.setState({ contentDisplayStatus: true}) | 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() { | 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 ( | return ( | ||||
| <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}> | <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} /> | <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} /> | ||||
| </View> | </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> | <View style={styles.titleQrcodePlacehold}></View> | ||||
| <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} /> | <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} /> | ||||
| <View style={styles.titleQrcodePlacehold}></View> | <View style={styles.titleQrcodePlacehold}></View> | ||||
| </ImageBackground> | </ImageBackground> | ||||
| </View> | </View> | ||||
| {content} | |||||
| {this.getContentView()} | |||||
| <View style={styles.bottom}> | <View style={styles.bottom}> | ||||
| <View style={styles.bottomLogoBackground}> | <View style={styles.bottomLogoBackground}> | ||||
| <Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='center' style={styles.bottomLogo} /> | <Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='center' style={styles.bottomLogo} /> | ||||
| </View> | </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> | <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text> | ||||
| </View> | </View> | ||||
| </ImageBackground> | </ImageBackground> | ||||
| ); | |||||
| } | |||||
| ); | |||||
| } | |||||
| } | } | ||||
| const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||||
| @@ -390,8 +391,8 @@ render() { | |||||
| bottomLogoBackground: { | bottomLogoBackground: { | ||||
| flex: 3, | flex: 3, | ||||
| borderRadius:10, | borderRadius:10, | ||||
| marginTop: 12, | |||||
| marginBottom: 12, | |||||
| marginTop: 10, | |||||
| marginBottom: 10, | |||||
| backgroundColor:'white' | backgroundColor:'white' | ||||
| }, | }, | ||||
| bottomLogo: { | bottomLogo: { | ||||
| @@ -400,20 +401,60 @@ render() { | |||||
| borderRadius:10, | borderRadius:10, | ||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| bottomQrcode1: { | |||||
| bottomQrcode1Background : { | |||||
| flex: 1, | flex: 1, | ||||
| width:'100%', | width:'100%', | ||||
| height:'100%', | height:'100%', | ||||
| marginLeft: 8, | marginLeft: 8, | ||||
| paddingTop: 10, | |||||
| paddingBottom: 4, | |||||
| flexDirection: 'column', | |||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| bottomQrcode2: { | |||||
| bottomQrcode2Background : { | |||||
| flex: 1, | flex: 1, | ||||
| width:'100%', | width:'100%', | ||||
| height:'100%', | height:'100%', | ||||
| marginLeft: 8, | marginLeft: 8, | ||||
| paddingTop: 10, | |||||
| paddingBottom: 4, | |||||
| flexDirection: 'column', | |||||
| backgroundColor:'transparent' | |||||
| }, | |||||
| bottomQrcode1: { | |||||
| flex: 2, | |||||
| width:'100%', | |||||
| height:'100%', | |||||
| backgroundColor:'transparent' | 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: { | bottomPlacehold: { | ||||
| flex: 8, | flex: 8, | ||||
| width:'100%', | width:'100%', | ||||
| @@ -482,6 +523,7 @@ render() { | |||||
| borderRadius:10, | borderRadius:10, | ||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| contentItemTopDetail:{ | contentItemTopDetail:{ | ||||
| flex: 6, | flex: 6, | ||||
| width:'100%', | width:'100%', | ||||
| @@ -491,6 +533,7 @@ render() { | |||||
| alignItems: 'center', | alignItems: 'center', | ||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| contentItemTopQrcode:{ | contentItemTopQrcode:{ | ||||
| flex: 5, | flex: 5, | ||||
| width:'100%', | width:'100%', | ||||