import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
ImageBackground,
PixelRatio,
NativeModules
} 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';
var testMac = 'FF:FF:FF:FF:FF:FF'
var contentItemDefault = {
type:0,
subType:0,
qrcode:[],
target:{
coverImg:'',
title:'',
subTitle:'',
priceStr:'',
salePriceStr:'',
remark:'',
}
}
var baseInfoDefault = {
imgUrlH:'',
imgQrcodeWeapp:'',
imgQrcodeWemp:''
}
var curAdIndex = 0;
var errorMsg = {
ERR_MAC_GET:'设备编号获取错误',
ERR_DATA_GET:'广告数据获取错误'
}
export default class MyPage extends Component {
constructor(props) {
super(props);
this.state = {
baseInfo: baseInfoDefault,
adDataList:[],
contentItem0:null,
contentItem1:null,
contentItem2:null,
contentDisplayStatus:false,
syncMessage: "初始化..." ,
errorMessage: '加载中...',
progress: {
receivedBytes:0,
totalBytes:0
},
macAddress: '',
versionInfo:'未知'
};
}
// 监听更新状态
codePushStatusDidChange(syncStatus) {
switch(syncStatus) {
case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
this.setState({ syncMessage: "检查更新" });
break;
case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
this.setState({ syncMessage: "下载更新" });
break;
case CodePush.SyncStatus.AWAITING_USER_ACTION:
this.setState({ syncMessage: "等待用户操作" });
break;
case CodePush.SyncStatus.INSTALLING_UPDATE:
this.setState({ syncMessage: "安装更新" });
break;
case CodePush.SyncStatus.UP_TO_DATE:
this.setState({ syncMessage: "已更新到最新程序", progress: false });
break;
case CodePush.SyncStatus.UPDATE_IGNORED:
this.setState({ syncMessage: "更新被取消", progress: false });
break;
case CodePush.SyncStatus.UPDATE_INSTALLED:
this.setState({ syncMessage: "更新已安装,重启应用后生效", progress: false });
break;
case CodePush.SyncStatus.UNKNOWN_ERROR:
this.setState({ syncMessage: "未知错误", progress: false });
break;
}
}
codePushDownloadDidProgress(progress) {
this.setState({ progress });
}
// 列表滚动
updateContent() {
if (this.state.adDataList.length <=0)
return false;
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
return true;
}
hbRequest() {
HttpUtils.post(NativeModules.BuildConfig.apiHost + 'api/wxDeviceScreenAd/heartbeat?deviceId='
+encodeURIComponent(this.state.macAddress),
{version:this.state.versionInfo})
.then(result => {
})
.catch(error => {
})
}
getAdDataList() {
HttpUtils.get(NativeModules.BuildConfig.apiHost + 'api/wxDeviceScreenAd/list?deviceId='+encodeURIComponent(this.state.macAddress)+'&pageNum=1&pageSize=1000')
.then((result) => {
if (result.code != 200) {
this.setState({contentDisplayStatus: false})
this.setState({errorMessage : result.message+'\n'+this.state.macAddress});
} else if (result.data.list) {
this.setState({adDataList : result.data.list});
if (this.updateContent()) {
this.setState({contentDisplayStatus: true})
}
} else {
this.setState({contentDisplayStatus: false})
this.setState({errorMessage : errorMsg.ERR_DATA_GET});
}
})
.catch(error => {
this.setState({contentDisplayStatus: false})
this.setState({errorMessage : error.message});
})
}
//
getBaseInfo() {
HttpUtils.get(NativeModules.BuildConfig.apiHost + 'api/wxDeviceScreenAd/info?deviceId='+encodeURIComponent(this.state.macAddress))
.then(result => {
if (result.code != 200) {
this.setState({contentDisplayStatus: false})
this.setState({errorMessage : result.message+'\n'+this.state.macAddress});
} else if (result.data) {
this.setState({baseInfo:result.data});
} else {
this.setState({contentDisplayStatus: false})
this.setState({errorMessage : errorMsg.ERR_DATA_GET});
}
})
.catch(error => {
this.setState({contentDisplayStatus: false})
this.setState({errorMessage : error.message});
})
}
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"});
});
DeviceInfo.getMACAddress().then((mac)=>{
if (mac=='') {
if (NativeModules.BuildConfig.buildType == 'debug') {
this.setState({macAddress : this.testMac})
this.startAd()
} else {
this.setState({ contentDisplayStatus: false})
this.setState({ errorMessage : errorMsg.ERR_MAC_GET});
}
} else {
this.setState({macAddress : mac})
this.startAd()
}
this.setState({ contentDisplayStatus: true})
}).catch(e => {
this.setState({ contentDisplayStatus: false})
this.setState({ errorMessage : errorMsg.ERR_MAC_GET});
})
}
startAd() {
this.getBaseInfo()
this.getAdDataList()
setInterval(
()=>{
if (this.state.contentDisplayStatus) {
this.setState({ contentDisplayStatus: false})
if (this.updateContent()) {
this.setState({ contentDisplayStatus: true})
}
} else {
this.getBaseInfo()
this.getAdDataList()
}
},
1000*10, //10秒更新一下页面
);
setInterval(
()=>{
this.getAdDataList()
},
1000*60*60, //1小时一次
);
setInterval(
()=>{
this.hbRequest()
},
1000*60*5, //5分钟一次
);
}
getContentViewItemUplayer(contentItem) {
if (contentItem.type == 0) {
if (contentItem.subType == 2)
return ( )
if (contentItem.subType == 6)
return ( )
if (contentItem.subType == 7)
return ( )
}
}
getContentViewItem(contentItem, annomation) {
if (!contentItem)
return (
)
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 (
{contentItem.target.title}
{/* {contentItem.target.remark} */}
¥
{contentItem.target.salePriceStr}
¥{contentItem.target.priceStr}
{merchantName}
{actionText}
{this.getContentViewItemUplayer(contentItem)}
)
}
getContentView() {
if (this.state.contentDisplayStatus) {
return (
{this.getContentViewItem(this.state.contentItem0,"slideInDown")}
{this.getContentViewItem(this.state.contentItem1,"slideInLeft")}
{this.getContentViewItem(this.state.contentItem2,"slideInRight")}
)
}else{
return (
{this.state.errorMessage}
)
}
}
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'}
);
return (
{this.state.syncMessage}
);
}
return (
{this.getContentView()}
小程序
公众号
{this.state.versionInfo}
);
}
}
const styles = StyleSheet.create({
updatePage:{
flex: 2,
width:'100%',
height:'100%',
backgroundColor:'transparent',
textAlign :'center',
textAlignVertical:'center',
fontSize: 63/PixelRatio.get(),
color: 'darkblue'
},
//layer background
background:{
flex: 1,
width:'100%',
height:'100%'
},
//layer top
title:{
flex: 6,
flexDirection: 'row',
alignItems: 'center',
paddingLeft:42/PixelRatio.get(),
paddingRight:42/PixelRatio.get(),
backgroundColor:'transparent'
},
content:{
flex: 18,
flexDirection: 'column',
alignItems: 'center',
backgroundColor:'transparent'
},
bottom:{
flex: 2,
flexDirection: 'row',
alignItems: 'center',
paddingLeft:42/PixelRatio.get(),
paddingRight:42/PixelRatio.get(),
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:16/PixelRatio.get(),
marginTop: 26/PixelRatio.get(),
marginBottom: 26/PixelRatio.get(),
backgroundColor:'transparent',//'rgba(255,255,255,0.5)',
},
bottomLogo: {
width:'100%',
height:'100%',
backgroundColor:'transparent'
},
bottomQrcode1Background : {
flex: 1,
width:'100%',
height:'100%',
marginLeft: 21/PixelRatio.get(),
paddingTop: 27/PixelRatio.get(),
paddingBottom: 11/PixelRatio.get(),
flexDirection: 'column',
backgroundColor:'transparent'
},
bottomQrcode2Background : {
flex: 1,
width:'100%',
height:'100%',
marginLeft: 21/PixelRatio.get(),
paddingTop: 26/PixelRatio.get(),
paddingBottom: 11/PixelRatio.get(),
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: 16/PixelRatio.get(),
color : 'white',
backgroundColor:'transparent'
},
bottomQrcode2Str: {
flex: 1,
textAlign :'center',
textAlignVertical:'center',
fontSize: 16/PixelRatio.get(),
color : 'white',
backgroundColor:'transparent'
},
bottomPlacehold: {
flex: 8,
width:'100%',
height:'100%',
backgroundColor:'transparent',
textAlign :'right',
textAlignVertical:'bottom',
fontSize: 27/PixelRatio.get(),
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:210/PixelRatio.get(),
height:153/PixelRatio.get(),
position:'absolute',
backgroundColor:'transparent'
},
contentItemTop:{
flex: 3,
width:'100%',
height:'100%',
paddingLeft: 66/PixelRatio.get(),
paddingRight: 53/PixelRatio.get(),
paddingTop: 40/PixelRatio.get(),
flexDirection: 'row',
alignItems: 'center',
backgroundColor:'transparent'
},
contentItemBottom:{
flex: 1,
width:'100%',
height:'100%',
paddingLeft: 66/PixelRatio.get(),
paddingRight: 53/PixelRatio.get(),
paddingBottom: 40/PixelRatio.get(),
flexDirection: 'row',
alignItems: 'center',
backgroundColor:'transparent'
},
//layer content item top
contentItemTopCoverImg:{
flex: 5,
width:'100%',
height:'100%',
borderRadius:27/PixelRatio.get(),
backgroundColor:'transparent'
},
contentItemTopDetail:{
flex: 6,
width:'100%',
height:'100%',
paddingLeft: 27/PixelRatio.get(),
paddingRight: 79/PixelRatio.get(),
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: 27/PixelRatio.get(),
fontWeight : 'bold'
},
contentItemBottomPlacehold:{
flex: 6,
paddingLeft: 27/PixelRatio.get(),
paddingRight: 79/PixelRatio.get(),
width:'100%',
height:'100%',
backgroundColor:'transparent',
},
contentItemBottomAction:{
flex: 5,
width:'100%',
height:'100%',
backgroundColor:'transparent',
fontWeight : 'bold',
textAlign :'center',
textAlignVertical:'center',
fontSize: 36/PixelRatio.get(),
color: 'darkgray'
},
//layer content item top detail
contentItemTopDetailTitle:{
flex: 2,
width:'100%',
height:'100%',
backgroundColor:'transparent',
textAlign :'left',
textAlignVertical:'center',
fontSize: 53/PixelRatio.get(),
},
/*
contentItemTopDetailRemark:{
flex: 1,
width:'100%',
height:'100%',
backgroundColor:'transparent',
textAlign :'left',
textAlignVertical:'center',
fontSize: 27/PixelRatio.get(),
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',
fontSize:96/PixelRatio.get(),
fontFamily:"PingFangSC-Bold",
fontWeight: "bold",
textAlign :'left',
textAlignVertical:'bottom',
color : 'red'
},
contentItemTopDetailCurPriceStrUnit:{
backgroundColor:'transparent',
textAlign :'left',
textAlignVertical:'bottom',
paddingBottom: 16/PixelRatio.get(),
fontSize: 48/PixelRatio.get(),
color : 'red'
},
contentItemTopDetailSalePrice:{
flex: 1,
width:'100%',
height:'100%',
backgroundColor:'transparent',
},
contentItemTopDetailSalePriceStr:{
width:'100%',
height:'100%',
backgroundColor:'transparent',
textAlign :'left',
textAlignVertical:'bottom',
fontSize: 27/PixelRatio.get(),
textDecorationLine: 'line-through',
color : 'gray'
},
});