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

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