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