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' }, });