import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
Dimensions,
TouchableOpacity,
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';
// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');
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,
text:'',
restartAllowed: true ,
syncMessage: "syncMessage" ,
progress: false,
macAddress: "NULL"
};
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 });
}
// 允许重启后更新
toggleAllowRestart() {
this.state.restartAllowed
? CodePush.disallowRestart()
: CodePush.allowRestart();
this.setState({ restartAllowed: !this.state.restartAllowed });
}
// 获取更新数据
getUpdateMetadata() {
CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
.then((metadata: LocalPackage) => {
this.setState({ syncMessage: metadata ? JSON.stringify(metadata) : "Running binary version", progress: false });
}, (error: any) => {
this.setState({ syncMessage: "Error: " + error, progress: false });
});
}
/** Update is downloaded silently, and applied on restart (recommended) 自动更新,一键操作 */
sync() {
CodePush.sync(
{},
this.codePushStatusDidChange.bind(this),
this.codePushDownloadDidProgress.bind(this)
);
}
/** Update pops a confirmation dialog, and then immediately reboots the app 一键更新,加入的配置项 */
syncImmediate() {
CodePush.sync(
{ installMode: CodePush.InstallMode.IMMEDIATE, updateDialog: true },
this.codePushStatusDidChange.bind(this),
this.codePushDownloadDidProgress.bind(this)
);
}
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() {
this.getBaseInfo()
this.getAdDataList()
}
render() {
let progressView;
if (this.state.progress) {
progressView = (
{this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received
);
}
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.text}
);
}
}
const styles = StyleSheet.create({
//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'
},
//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'
},
});