广告屏react-native项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

590 line
18 KiB

  1. import React, { Component } from 'react';
  2. import {
  3. StyleSheet,
  4. Text,
  5. View,
  6. Image,
  7. ImageBackground,
  8. } from 'react-native';
  9. //引用插件
  10. import Package from './package.json'
  11. import HttpUtils from './HttpUtils.js';
  12. import CodePush from "react-native-code-push";
  13. import DeviceInfo from "react-native-device-info";
  14. import * as Animatable from 'react-native-animatable';
  15. contentItemDefault = {
  16. coverImg:'',
  17. qrcode:[],
  18. target:{
  19. title:'',
  20. subTitle:'',
  21. priceStr:'',
  22. salePriceStr:'',
  23. remark:'',
  24. }
  25. }
  26. baseInfoDefault = {
  27. imgUrlH:'',
  28. imgQrcodeWeapp:'',
  29. imgQrcodeWemp:''
  30. }
  31. export default class MyPage extends Component {
  32. constructor(props) {
  33. super(props);
  34. this.state = {
  35. baseInfo: baseInfoDefault,
  36. adDataList:[],
  37. contentItem1:contentItemDefault,
  38. contentItem2:contentItemDefault,
  39. contentItem3:contentItemDefault,
  40. syncMessage: "INIT" ,
  41. progress: {
  42. receivedBytes:0,
  43. totalBytes:0
  44. },
  45. macAddress: "NULL",
  46. text:'',
  47. versionInfo:'UNKNOWN'
  48. };
  49. DeviceInfo.getMACAddress().then(mac=>{this.setState({macAddress:mac})})
  50. DeviceInfo.getIPAddress().then(mac=>{this.setState({macAddress:mac})})
  51. }
  52. // 监听更新状态
  53. codePushStatusDidChange(syncStatus) {
  54. switch(syncStatus) {
  55. case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
  56. this.setState({ syncMessage: "Checking for update." });
  57. break;
  58. case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
  59. this.setState({ syncMessage: "Downloading package." });
  60. break;
  61. case CodePush.SyncStatus.AWAITING_USER_ACTION:
  62. this.setState({ syncMessage: "Awaiting user action." });
  63. break;
  64. case CodePush.SyncStatus.INSTALLING_UPDATE:
  65. this.setState({ syncMessage: "Installing update." });
  66. break;
  67. case CodePush.SyncStatus.UP_TO_DATE:
  68. this.setState({ syncMessage: "App up to date.", progress: false });
  69. break;
  70. case CodePush.SyncStatus.UPDATE_IGNORED:
  71. this.setState({ syncMessage: "Update cancelled by user.", progress: false });
  72. break;
  73. case CodePush.SyncStatus.UPDATE_INSTALLED:
  74. this.setState({ syncMessage: "Update installed and will be applied on restart.", progress: false });
  75. break;
  76. case CodePush.SyncStatus.UNKNOWN_ERROR:
  77. this.setState({ syncMessage: "An unknown error occurred.", progress: false });
  78. break;
  79. }
  80. }
  81. codePushDownloadDidProgress(progress) {
  82. this.setState({ progress });
  83. }
  84. getAdDataList() {
  85. HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/list?deviceId=11%3AAA%3A33%3ABB%3A44&pageNum=1&pageSize=5')
  86. .then(result => {
  87. this.setState({
  88. adDataList : result.data.list});
  89. if (this.state.adDataList.length > 0)
  90. this.setState({
  91. contentItem1 : this.state.adDataList[0]});
  92. })
  93. .catch(error => console.error(error))
  94. }
  95. getBaseInfo() {
  96. HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/info?deviceId=11%3AAA%3A33%3ABB%3A44')
  97. .then(result => {
  98. this.setState({
  99. baseInfo:result.data});
  100. })
  101. .catch(error => console.error(error))
  102. }
  103. componentDidMount() {
  104. CodePush.allowRestart();
  105. CodePush.sync(
  106. { installMode: CodePush.InstallMode.IMMEDIATE,
  107. dialog:{} },
  108. this.codePushStatusDidChange.bind(this),
  109. this.codePushDownloadDidProgress.bind(this)
  110. );
  111. CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
  112. .then((metadata: LocalPackage) => {
  113. this.setState({ versionInfo: metadata ? metadata.appVersion + "-" + metadata.label : "Unknown"});
  114. }, (error: any) => {
  115. this.setState({ versionInfo: "Unknown"});
  116. });
  117. this.getBaseInfo()
  118. this.getAdDataList()
  119. }
  120. render() {
  121. if (this.state.progress) {
  122. if (this.state.progress.totalBytes > 0)
  123. return (
  124. <Text style={styles.updatePage}>{this.state.syncMessage}{'\n'}
  125. {this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received{'\n'}
  126. {this.state.text}
  127. </Text>
  128. );
  129. return (
  130. <Text style={styles.updatePage}>{this.state.syncMessage}{'\n'}
  131. {this.state.text}
  132. </Text>
  133. );
  134. }
  135. return (
  136. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  137. <View style={styles.title}>
  138. <View style={styles.titleImagePlace}>
  139. <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
  140. </View>
  141. <ImageBackground source={require('./image/title-qrcode.png')} resizeMode='center' style={styles.titleQrcodeBonder} >
  142. <View style={styles.titleQrcodePlacehold}></View>
  143. <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
  144. <View style={styles.titleQrcodePlacehold}></View>
  145. </ImageBackground>
  146. </View>
  147. <View style={styles.content}>
  148. <Animatable.View animation="slideInDown" style={styles.contentItem}>
  149. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  150. <View style={styles.contentItemTop}>
  151. <Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
  152. <View style={styles.contentItemTopDetail}>
  153. <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
  154. <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
  155. <View style={styles.contentItemTopDetailPrice}>
  156. <View style={styles.contentItemTopDetailCurPrice}>
  157. <Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
  158. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
  159. </View>
  160. <View style={styles.contentItemTopDetailSalePrice}>
  161. <Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
  162. </View>
  163. </View>
  164. </View>
  165. <Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  166. </View>
  167. <View style={styles.contentItemBottom}>
  168. <Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
  169. <View style={styles.contentItemBottomPlacehold}></View>
  170. <Text style={styles.contentItemBottomAction}>扫码领取</Text>
  171. </View>
  172. </ImageBackground>
  173. <Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
  174. </Animatable.View>
  175. <Animatable.View animation="slideInLeft" style={styles.contentItem}>
  176. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  177. <View style={styles.contentItemTop}>
  178. <Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
  179. <View style={styles.contentItemTopDetail}>
  180. <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
  181. <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
  182. <View style={styles.contentItemTopDetailPrice}>
  183. <View style={styles.contentItemTopDetailCurPrice}>
  184. <Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
  185. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
  186. </View>
  187. <View style={styles.contentItemTopDetailSalePrice}>
  188. <Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
  189. </View>
  190. </View>
  191. </View>
  192. <Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  193. </View>
  194. <View style={styles.contentItemBottom}>
  195. <Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
  196. <View style={styles.contentItemBottomPlacehold}></View>
  197. <Text style={styles.contentItemBottomAction}>扫码领取</Text>
  198. </View>
  199. </ImageBackground>
  200. <Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
  201. </Animatable.View>
  202. <Animatable.View animation="slideInRight" style={styles.contentItem}>
  203. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  204. <View style={styles.contentItemTop}>
  205. <Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
  206. <View style={styles.contentItemTopDetail}>
  207. <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
  208. <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
  209. <View style={styles.contentItemTopDetailPrice}>
  210. <View style={styles.contentItemTopDetailCurPrice}>
  211. <Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
  212. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
  213. </View>
  214. <View style={styles.contentItemTopDetailSalePrice}>
  215. <Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
  216. </View>
  217. </View>
  218. </View>
  219. <Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  220. </View>
  221. <View style={styles.contentItemBottom}>
  222. <Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
  223. <View style={styles.contentItemBottomPlacehold}></View>
  224. <Text style={styles.contentItemBottomAction}>扫码领取</Text>
  225. </View>
  226. </ImageBackground>
  227. <Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
  228. </Animatable.View>
  229. </View>
  230. <View style={styles.bottom}>
  231. <View style={styles.bottomLogoBackground}>
  232. <Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='center' style={styles.bottomLogo} />
  233. </View>
  234. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode1} />
  235. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} />
  236. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  237. </View>
  238. </ImageBackground>
  239. );
  240. }
  241. }
  242. const styles = StyleSheet.create({
  243. updatePage:{
  244. flex: 2,
  245. width:'100%',
  246. height:'100%',
  247. backgroundColor:'yellow',
  248. textAlign :'center',
  249. textAlignVertical:'center',
  250. fontSize: 24,
  251. color: 'green'
  252. },
  253. //layer background
  254. background:{
  255. flex: 1,
  256. width:'100%',
  257. height:'100%'
  258. },
  259. //layer top
  260. title:{
  261. flex: 6,
  262. flexDirection: 'row',
  263. alignItems: 'center',
  264. paddingLeft:16,
  265. paddingRight:16,
  266. backgroundColor:'transparent'
  267. },
  268. content:{
  269. flex: 18,
  270. flexDirection: 'column',
  271. alignItems: 'center',
  272. backgroundColor:'transparent'
  273. },
  274. bottom:{
  275. flex: 2,
  276. flexDirection: 'row',
  277. alignItems: 'center',
  278. paddingLeft:16,
  279. paddingRight:16,
  280. backgroundColor:'transparent'
  281. },
  282. //layer title
  283. titleImagePlace: {
  284. flex: 2,
  285. paddingTop: '20%',
  286. paddingLeft: '15%',
  287. alignItems: 'center',
  288. backgroundColor:'transparent'
  289. },
  290. titleImage: {
  291. width:'100%',
  292. height:'100%',
  293. flex: 1,
  294. backgroundColor:'transparent'
  295. },
  296. titleQrcodeBonder: {
  297. width:'100%',
  298. height:'100%',
  299. alignItems: 'center',
  300. flexDirection: 'column',
  301. flex: 1,
  302. backgroundColor:'transparent'
  303. },
  304. titleQrcodePlacehold: {
  305. flex: 5,
  306. backgroundColor:'transparent'
  307. },
  308. titleQrcode: {
  309. flex: 6,
  310. width:'100%',
  311. height:'100%',
  312. backgroundColor:'transparent'
  313. },
  314. //layer bottom
  315. bottomLogoBackground: {
  316. flex: 3,
  317. borderRadius:10,
  318. marginTop: 12,
  319. marginBottom: 12,
  320. backgroundColor:'white'
  321. },
  322. bottomLogo: {
  323. width:'100%',
  324. height:'100%',
  325. borderRadius:10,
  326. backgroundColor:'transparent'
  327. },
  328. bottomQrcode1: {
  329. flex: 1,
  330. width:'100%',
  331. height:'100%',
  332. marginLeft: 8,
  333. backgroundColor:'transparent'
  334. },
  335. bottomQrcode2: {
  336. flex: 1,
  337. width:'100%',
  338. height:'100%',
  339. marginLeft: 8,
  340. backgroundColor:'transparent'
  341. },
  342. bottomPlacehold: {
  343. flex: 8,
  344. width:'100%',
  345. height:'100%',
  346. backgroundColor:'transparent',
  347. textAlign :'right',
  348. textAlignVertical:'bottom',
  349. fontSize: 10,
  350. color : 'gray'
  351. },
  352. //layer content item
  353. contentItem:{
  354. flex: 1,
  355. width:'100%',
  356. height:'100%',
  357. flexDirection: 'column',
  358. backgroundColor:'transparent'
  359. },
  360. contentItemDownLayer:{
  361. position:'absolute',
  362. width:'100%',
  363. height:'100%',
  364. flexDirection: 'column',
  365. alignItems: 'center',
  366. backgroundColor:'transparent'
  367. },
  368. contentItemUpLayer:{
  369. width:80,
  370. height:60,
  371. position:'absolute',
  372. backgroundColor:'transparent'
  373. },
  374. contentItemTop:{
  375. flex: 3,
  376. width:'100%',
  377. height:'100%',
  378. paddingLeft: 25,
  379. paddingRight: 20,
  380. paddingTop: 15,
  381. flexDirection: 'row',
  382. alignItems: 'center',
  383. backgroundColor:'transparent'
  384. },
  385. contentItemBottom:{
  386. flex: 1,
  387. width:'100%',
  388. height:'100%',
  389. paddingLeft: 25,
  390. paddingRight: 20,
  391. paddingBottom: 15,
  392. flexDirection: 'row',
  393. alignItems: 'center',
  394. backgroundColor:'transparent'
  395. },
  396. //layer content item top
  397. contentItemTopCoverImg:{
  398. flex: 5,
  399. width:'100%',
  400. height:'100%',
  401. borderRadius:10,
  402. backgroundColor:'transparent'
  403. },
  404. contentItemTopDetail:{
  405. flex: 6,
  406. width:'100%',
  407. height:'100%',
  408. paddingLeft: 10,
  409. paddingRight: 30,
  410. alignItems: 'center',
  411. backgroundColor:'transparent'
  412. },
  413. contentItemTopQrcode:{
  414. flex: 5,
  415. width:'100%',
  416. height:'100%',
  417. backgroundColor:'transparent'
  418. },
  419. //layer content item bottom
  420. contentItemBottomMerchantName:{
  421. flex: 5,
  422. width:'100%',
  423. height:'100%',
  424. alignItems: 'center',
  425. backgroundColor:'transparent',
  426. textAlign :'center',
  427. textAlignVertical:'center',
  428. fontSize: 10,
  429. fontWeight : 'bold'
  430. },
  431. contentItemBottomPlacehold:{
  432. flex: 6,
  433. paddingLeft: 10,
  434. paddingRight: 30,
  435. width:'100%',
  436. height:'100%',
  437. backgroundColor:'transparent',
  438. },
  439. contentItemBottomAction:{
  440. flex: 5,
  441. width:'100%',
  442. height:'100%',
  443. backgroundColor:'transparent',
  444. fontWeight : 'bold',
  445. textAlign :'center',
  446. textAlignVertical:'center',
  447. },
  448. //layer content item top detail
  449. contentItemTopDetailTitle:{
  450. flex: 2,
  451. width:'100%',
  452. height:'100%',
  453. backgroundColor:'transparent',
  454. textAlign :'left',
  455. textAlignVertical:'center',
  456. fontSize: 24,
  457. color: 'darkgray'
  458. },
  459. contentItemTopDetailRemark:{
  460. flex: 1,
  461. width:'100%',
  462. height:'100%',
  463. backgroundColor:'transparent',
  464. textAlign :'left',
  465. textAlignVertical:'center',
  466. fontSize: 10,
  467. color : 'gray'
  468. },
  469. contentItemTopDetailPrice:{
  470. flex: 2,
  471. width:'100%',
  472. height:'100%',
  473. backgroundColor:'transparent',
  474. flexDirection: 'row',
  475. },
  476. contentItemTopDetailCurPrice:{
  477. flex: 3,
  478. width:'100%',
  479. height:'100%',
  480. flexDirection: 'row',
  481. backgroundColor:'transparent',
  482. },
  483. contentItemTopDetailCurPriceStr:{
  484. backgroundColor:'transparent',
  485. textAlign :'left',
  486. textAlignVertical:'bottom',
  487. fontSize: 32,
  488. color : 'red'
  489. },
  490. contentItemTopDetailCurPriceStrUnit:{
  491. backgroundColor:'transparent',
  492. textAlign :'left',
  493. textAlignVertical:'bottom',
  494. fontSize: 10,
  495. color : 'red'
  496. },
  497. contentItemTopDetailSalePrice:{
  498. flex: 1,
  499. width:'100%',
  500. height:'100%',
  501. backgroundColor:'transparent',
  502. },
  503. contentItemTopDetailSalePriceStr:{
  504. width:'100%',
  505. height:'100%',
  506. backgroundColor:'transparent',
  507. textAlign :'left',
  508. textAlignVertical:'bottom',
  509. fontSize: 10,
  510. textDecorationLine: 'line-through',
  511. color : 'gray'
  512. },
  513. });