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 = { type:0, subType:0, qrcode:[], target:{ coverImg:'', title:'', subTitle:'', priceStr:'', salePriceStr:'', remark:'', } } baseInfoDefault = { imgUrlH:'', imgQrcodeWeapp:'', imgQrcodeWemp:'' } curAdIndex = 0; testMac = '11:AA:33:BB:44' errorMsg = { ERR_MAC_GET:'MAC地址获取错误', 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: "INIT" , errorMessage: 'Loading...', progress: { receivedBytes:0, totalBytes:0 }, macAddress: '', versionInfo:'UNKNOWN' }; } // 监听更新状态 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 }); } 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 } hbRequest() { HttpUtils.post('https://mall.youlane.cn/api/wxDeviceScreenAd/heartbeat?deviceId=' +encodeURIComponent(this.state.macAddress), {version:this.state.versionInfo}) .then(result => { }) .catch(error => { }) } getAdDataList() { HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/list?deviceId='+encodeURIComponent(this.state.macAddress)+'&pageNum=1&pageSize=1000') .then(result => { if (result.code != 200) { this.setState({errorMessage : result.message}); this.setState({contentDisplayStatus: false}) } if (result.data.list) { this.setState({adDataList : result.data.list}); this.updateContent(); } else { this.setState({errorMessage : errorMsg.ERR_DATA_GET}); this.setState({contentDisplayStatus: false}) } }) .catch(error => { console.error(error) this.setState({errorMessage : error}); this.setState({contentDisplayStatus: false}) }) } getBaseInfo() { HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/info?deviceId='+encodeURIComponent(this.state.macAddress)) .then(result => { if (result.code != 200) { this.setState({errorMessage : result.message}); this.setState({contentDisplayStatus: false}) } if (result.data) { this.setState({baseInfo:result.data}); } else { this.setState({errorMessage : errorMsg.ERR_DATA_GET}); this.setState({contentDisplayStatus: false}) } }) .catch(error => { console.error(error) this.setState({errorMessage : error}); this.setState({contentDisplayStatus: false}) }) } 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=='') { this.startAd(testMac) } else { this.startAd(mac) } this.setState({ contentDisplayStatus: true}) }).catch(e => { this.setState({errorMessage : errorMsg.ERR_MAC_GET}); }) } startAd(mac) { this.getBaseInfo() this.getAdDataList() setInterval( ()=>{ this.setState({ contentDisplayStatus: false}) this.updateContent(); this.setState({ contentDisplayStatus: true}) }, 1000*10, //10秒更新一下页面 ); setInterval( ()=>{ this.setState({ contentDisplayStatus: false}) this.getAdDataList() this.setState({ contentDisplayStatus: true}) }, 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.priceStr} {contentItem.target.salePriceStr}元 {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: 24, color: 'darkblue' }, //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:6, marginTop: 10, marginBottom: 10, backgroundColor:'white' }, bottomLogo: { width:'100%', height:'100%', borderRadius:10, backgroundColor:'transparent' }, bottomQrcode1Background : { flex: 1, width:'100%', height:'100%', marginLeft: 8, paddingTop: 10, paddingBottom: 4, flexDirection: 'column', backgroundColor:'transparent' }, 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%', 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:58, 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: 20, 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' }, });