import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
ImageBackground,
} from 'react-native';
//引用插件
import Package from './package.json'
import HttpUtils from './HttpUtils.js';
import CodePush from "react-native-code-push";
import DeviceInfo from "react-native-device-info";
import * as Animatable from 'react-native-animatable';
contentItemDefault = {
coverImg:'',
qrcode:[],
target:{
title:'',
subTitle:'',
priceStr:'',
salePriceStr:'',
remark:'',
}
}
baseInfoDefault = {
imgUrlH:'',
imgQrcodeWeapp:'',
imgQrcodeWemp:''
}
export default class MyPage extends Component {
constructor(props) {
super(props);
this.state = {
baseInfo: baseInfoDefault,
adDataList:[],
contentItem1:contentItemDefault,
contentItem2:contentItemDefault,
contentItem3:contentItemDefault,
syncMessage: "INIT" ,
progress: {
receivedBytes:0,
totalBytes:0
},
macAddress: "NULL",
text:'',
versionInfo:'UNKNOWN'
};
DeviceInfo.getMACAddress().then(mac=>{this.setState({macAddress:mac})})
DeviceInfo.getIPAddress().then(mac=>{this.setState({macAddress:mac})})
}
// 监听更新状态
codePushStatusDidChange(syncStatus) {
switch(syncStatus) {
case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
this.setState({ syncMessage: "Checking for update." });
break;
case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
this.setState({ syncMessage: "Downloading package." });
break;
case CodePush.SyncStatus.AWAITING_USER_ACTION:
this.setState({ syncMessage: "Awaiting user action." });
break;
case CodePush.SyncStatus.INSTALLING_UPDATE:
this.setState({ syncMessage: "Installing update." });
break;
case CodePush.SyncStatus.UP_TO_DATE:
this.setState({ syncMessage: "App up to date.", progress: false });
break;
case CodePush.SyncStatus.UPDATE_IGNORED:
this.setState({ syncMessage: "Update cancelled by user.", progress: false });
break;
case CodePush.SyncStatus.UPDATE_INSTALLED:
this.setState({ syncMessage: "Update installed and will be applied on restart.", progress: false });
break;
case CodePush.SyncStatus.UNKNOWN_ERROR:
this.setState({ syncMessage: "An unknown error occurred.", progress: false });
break;
}
}
codePushDownloadDidProgress(progress) {
this.setState({ progress });
}
getAdDataList() {
HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/list?deviceId=11%3AAA%3A33%3ABB%3A44&pageNum=1&pageSize=5')
.then(result => {
this.setState({
adDataList : result.data.list});
if (this.state.adDataList.length > 0)
this.setState({
contentItem1 : this.state.adDataList[0]});
})
.catch(error => console.error(error))
}
getBaseInfo() {
HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/info?deviceId=11%3AAA%3A33%3ABB%3A44')
.then(result => {
this.setState({
baseInfo:result.data});
})
.catch(error => console.error(error))
}
componentDidMount() {
CodePush.allowRestart();
CodePush.sync(
{ installMode: CodePush.InstallMode.IMMEDIATE},
this.codePushStatusDidChange.bind(this),
this.codePushDownloadDidProgress.bind(this)
);
CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
.then((metadata: LocalPackage) => {
this.setState({ versionInfo: metadata ? metadata.appVersion + "-" + metadata.label : "Unknown"});
}, (error: any) => {
this.setState({ versionInfo: "Unknown"});
});
this.getBaseInfo()
this.getAdDataList()
}
render() {
if (this.state.progress) {
if (this.state.progress.totalBytes > 0)
return (
{this.state.syncMessage}{'\n'}
{this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received{'\n'}
{this.state.text}
);
return (
{this.state.syncMessage}{'\n'}
{this.state.text}
);
}
return (
{this.state.contentItem1.target.title}
{this.state.contentItem1.target.remark}
{this.state.contentItem1.target.priceStr}
元
{this.state.contentItem1.target.salePriceStr}元
肯德基
扫码领取
{this.state.contentItem1.target.title}
{this.state.contentItem1.target.remark}
{this.state.contentItem1.target.priceStr}
元
{this.state.contentItem1.target.salePriceStr}元
肯德基
扫码领取
{this.state.contentItem1.target.title}
{this.state.contentItem1.target.remark}
{this.state.contentItem1.target.priceStr}
元
{this.state.contentItem1.target.salePriceStr}元
肯德基
扫码领取
{this.state.versionInfo}
);
}
}
const styles = StyleSheet.create({
updatePage:{
flex: 2,
width:'100%',
height:'100%',
backgroundColor:'yellow',
textAlign :'center',
textAlignVertical:'center',
fontSize: 24,
color: 'green'
},
//layer background
background:{
flex: 1,
width:'100%',
height:'100%'
},
//layer top
title:{
flex: 6,
flexDirection: 'row',
alignItems: 'center',
paddingLeft:16,
paddingRight:16,
backgroundColor:'transparent'
},
content:{
flex: 18,
flexDirection: 'column',
alignItems: 'center',
backgroundColor:'transparent'
},
bottom:{
flex: 2,
flexDirection: 'row',
alignItems: 'center',
paddingLeft:16,
paddingRight:16,
backgroundColor:'transparent'
},
//layer title
titleImagePlace: {
flex: 2,
paddingTop: '20%',
paddingLeft: '15%',
alignItems: 'center',
backgroundColor:'transparent'
},
titleImage: {
width:'100%',
height:'100%',
flex: 1,
backgroundColor:'transparent'
},
titleQrcodeBonder: {
width:'100%',
height:'100%',
alignItems: 'center',
flexDirection: 'column',
flex: 1,
backgroundColor:'transparent'
},
titleQrcodePlacehold: {
flex: 5,
backgroundColor:'transparent'
},
titleQrcode: {
flex: 6,
width:'100%',
height:'100%',
backgroundColor:'transparent'
},
//layer bottom
bottomLogoBackground: {
flex: 3,
borderRadius:10,
marginTop: 12,
marginBottom: 12,
backgroundColor:'white'
},
bottomLogo: {
width:'100%',
height:'100%',
borderRadius:10,
backgroundColor:'transparent'
},
bottomQrcode1: {
flex: 1,
width:'100%',
height:'100%',
marginLeft: 8,
backgroundColor:'transparent'
},
bottomQrcode2: {
flex: 1,
width:'100%',
height:'100%',
marginLeft: 8,
backgroundColor:'transparent'
},
bottomPlacehold: {
flex: 8,
width:'100%',
height:'100%',
backgroundColor:'transparent',
textAlign :'right',
textAlignVertical:'bottom',
fontSize: 10,
color : 'gray'
},
//layer content item
contentItem:{
flex: 1,
width:'100%',
height:'100%',
flexDirection: 'column',
backgroundColor:'transparent'
},
contentItemDownLayer:{
position:'absolute',
width:'100%',
height:'100%',
flexDirection: 'column',
alignItems: 'center',
backgroundColor:'transparent'
},
contentItemUpLayer:{
width:80,
height:60,
position:'absolute',
backgroundColor:'transparent'
},
contentItemTop:{
flex: 3,
width:'100%',
height:'100%',
paddingLeft: 25,
paddingRight: 20,
paddingTop: 15,
flexDirection: 'row',
alignItems: 'center',
backgroundColor:'transparent'
},
contentItemBottom:{
flex: 1,
width:'100%',
height:'100%',
paddingLeft: 25,
paddingRight: 20,
paddingBottom: 15,
flexDirection: 'row',
alignItems: 'center',
backgroundColor:'transparent'
},
//layer content item top
contentItemTopCoverImg:{
flex: 5,
width:'100%',
height:'100%',
borderRadius:10,
backgroundColor:'transparent'
},
contentItemTopDetail:{
flex: 6,
width:'100%',
height:'100%',
paddingLeft: 10,
paddingRight: 30,
alignItems: 'center',
backgroundColor:'transparent'
},
contentItemTopQrcode:{
flex: 5,
width:'100%',
height:'100%',
backgroundColor:'transparent'
},
//layer content item bottom
contentItemBottomMerchantName:{
flex: 5,
width:'100%',
height:'100%',
alignItems: 'center',
backgroundColor:'transparent',
textAlign :'center',
textAlignVertical:'center',
fontSize: 10,
fontWeight : 'bold'
},
contentItemBottomPlacehold:{
flex: 6,
paddingLeft: 10,
paddingRight: 30,
width:'100%',
height:'100%',
backgroundColor:'transparent',
},
contentItemBottomAction:{
flex: 5,
width:'100%',
height:'100%',
backgroundColor:'transparent',
fontWeight : 'bold',
textAlign :'center',
textAlignVertical:'center',
},
//layer content item top detail
contentItemTopDetailTitle:{
flex: 2,
width:'100%',
height:'100%',
backgroundColor:'transparent',
textAlign :'left',
textAlignVertical:'center',
fontSize: 24,
color: 'darkgray'
},
contentItemTopDetailRemark:{
flex: 1,
width:'100%',
height:'100%',
backgroundColor:'transparent',
textAlign :'left',
textAlignVertical:'center',
fontSize: 10,
color : 'gray'
},
contentItemTopDetailPrice:{
flex: 2,
width:'100%',
height:'100%',
backgroundColor:'transparent',
flexDirection: 'row',
},
contentItemTopDetailCurPrice:{
flex: 3,
width:'100%',
height:'100%',
flexDirection: 'row',
backgroundColor:'transparent',
},
contentItemTopDetailCurPriceStr:{
backgroundColor:'transparent',
textAlign :'left',
textAlignVertical:'bottom',
fontSize: 32,
color : 'red'
},
contentItemTopDetailCurPriceStrUnit:{
backgroundColor:'transparent',
textAlign :'left',
textAlignVertical:'bottom',
fontSize: 10,
color : 'red'
},
contentItemTopDetailSalePrice:{
flex: 1,
width:'100%',
height:'100%',
backgroundColor:'transparent',
},
contentItemTopDetailSalePriceStr:{
width:'100%',
height:'100%',
backgroundColor:'transparent',
textAlign :'left',
textAlignVertical:'bottom',
fontSize: 10,
textDecorationLine: 'line-through',
color : 'gray'
},
});