广告屏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.
 
 
 
 
 

595 lines
18 KiB

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