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

591 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. // 取得屏幕的宽高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. <View style={styles.contentItem}>
  160. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  161. <View style={styles.contentItemTop}>
  162. <Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCover} />
  163. <View style={styles.contentItemTopDetail}>
  164. <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
  165. <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
  166. <View style={styles.contentItemTopDetailPrice}>
  167. <View style={styles.contentItemTopDetailCurPrice}>
  168. <Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
  169. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
  170. </View>
  171. <View style={styles.contentItemTopDetailSalePrice}>
  172. <Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
  173. </View>
  174. </View>
  175. </View>
  176. <Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  177. </View>
  178. <View style={styles.contentItemBottom}>
  179. <Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
  180. <View style={styles.contentItemBottomPlacehold}></View>
  181. <Text style={styles.contentItemBottomAction}>扫码领取</Text>
  182. </View>
  183. </ImageBackground>
  184. <Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
  185. </View>
  186. <View style={styles.contentItem}>
  187. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  188. <View style={styles.contentItemTop}>
  189. <Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCover} />
  190. <View style={styles.contentItemTopDetail}>
  191. <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
  192. <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
  193. <View style={styles.contentItemTopDetailPrice}>
  194. <View style={styles.contentItemTopDetailCurPrice}>
  195. <Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
  196. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
  197. </View>
  198. <View style={styles.contentItemTopDetailSalePrice}>
  199. <Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
  200. </View>
  201. </View>
  202. </View>
  203. <Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  204. </View>
  205. <View style={styles.contentItemBottom}>
  206. <Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
  207. <View style={styles.contentItemBottomPlacehold}></View>
  208. <Text style={styles.contentItemBottomAction}>扫码领取</Text>
  209. </View>
  210. </ImageBackground>
  211. <Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
  212. </View>
  213. <View style={styles.contentItem}>
  214. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  215. <View style={styles.contentItemTop}>
  216. <Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCover} />
  217. <View style={styles.contentItemTopDetail}>
  218. <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
  219. <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
  220. <View style={styles.contentItemTopDetailPrice}>
  221. <View style={styles.contentItemTopDetailCurPrice}>
  222. <Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
  223. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
  224. </View>
  225. <View style={styles.contentItemTopDetailSalePrice}>
  226. <Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
  227. </View>
  228. </View>
  229. </View>
  230. <Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  231. </View>
  232. <View style={styles.contentItemBottom}>
  233. <Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
  234. <View style={styles.contentItemBottomPlacehold}></View>
  235. <Text style={styles.contentItemBottomAction}>扫码领取</Text>
  236. </View>
  237. </ImageBackground>
  238. <Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
  239. </View>
  240. </View>
  241. <View style={styles.bottom}>
  242. <View style={styles.bottomLogoBackground}>
  243. <Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='center' style={styles.bottomLogo} />
  244. </View>
  245. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode1} />
  246. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} />
  247. <Text style={styles.bottomPlacehold}>{this.state.text}</Text>
  248. </View>
  249. </ImageBackground>
  250. );
  251. }
  252. }
  253. const styles = StyleSheet.create({
  254. //layer background
  255. background:{
  256. flex: 1,
  257. width:'100%',
  258. height:'100%'
  259. },
  260. //layer top
  261. title:{
  262. flex: 6,
  263. flexDirection: 'row',
  264. alignItems: 'center',
  265. paddingLeft:16,
  266. paddingRight:16,
  267. backgroundColor:'transparent'
  268. },
  269. content:{
  270. flex: 18,
  271. flexDirection: 'column',
  272. alignItems: 'center',
  273. backgroundColor:'transparent'
  274. },
  275. bottom:{
  276. flex: 2,
  277. flexDirection: 'row',
  278. alignItems: 'center',
  279. paddingLeft:16,
  280. paddingRight:16,
  281. backgroundColor:'transparent'
  282. },
  283. //layer title
  284. titleImagePlace: {
  285. flex: 2,
  286. paddingTop: '20%',
  287. paddingLeft: '15%',
  288. alignItems: 'center',
  289. backgroundColor:'transparent'
  290. },
  291. titleImage: {
  292. width:'100%',
  293. height:'100%',
  294. flex: 1,
  295. backgroundColor:'transparent'
  296. },
  297. titleQrcodeBonder: {
  298. width:'100%',
  299. height:'100%',
  300. alignItems: 'center',
  301. flexDirection: 'column',
  302. flex: 1,
  303. backgroundColor:'transparent'
  304. },
  305. titleQrcodePlacehold: {
  306. flex: 5,
  307. backgroundColor:'transparent'
  308. },
  309. titleQrcode: {
  310. flex: 6,
  311. width:'100%',
  312. height:'100%',
  313. backgroundColor:'transparent'
  314. },
  315. //layer bottom
  316. bottomLogoBackground: {
  317. flex: 3,
  318. borderRadius:10,
  319. marginTop: 12,
  320. marginBottom: 12,
  321. backgroundColor:'white'
  322. },
  323. bottomLogo: {
  324. width:'100%',
  325. height:'100%',
  326. borderRadius:10,
  327. backgroundColor:'transparent'
  328. },
  329. bottomQrcode1: {
  330. flex: 1,
  331. width:'100%',
  332. height:'100%',
  333. marginLeft: 8,
  334. backgroundColor:'transparent'
  335. },
  336. bottomQrcode2: {
  337. flex: 1,
  338. width:'100%',
  339. height:'100%',
  340. marginLeft: 8,
  341. backgroundColor:'transparent'
  342. },
  343. bottomPlacehold: {
  344. flex: 8,
  345. width:'100%',
  346. height:'100%',
  347. backgroundColor:'transparent'
  348. },
  349. //layer content item
  350. contentItem:{
  351. flex: 1,
  352. width:'100%',
  353. height:'100%',
  354. flexDirection: 'column',
  355. backgroundColor:'transparent'
  356. },
  357. contentItemDownLayer:{
  358. position:'absolute',
  359. width:'100%',
  360. height:'100%',
  361. flexDirection: 'column',
  362. alignItems: 'center',
  363. backgroundColor:'transparent'
  364. },
  365. contentItemUpLayer:{
  366. width:80,
  367. height:60,
  368. position:'absolute',
  369. backgroundColor:'transparent'
  370. },
  371. contentItemTop:{
  372. flex: 3,
  373. width:'100%',
  374. height:'100%',
  375. paddingLeft: 25,
  376. paddingRight: 20,
  377. paddingTop: 15,
  378. flexDirection: 'row',
  379. alignItems: 'center',
  380. backgroundColor:'transparent'
  381. },
  382. contentItemBottom:{
  383. flex: 1,
  384. width:'100%',
  385. height:'100%',
  386. paddingLeft: 25,
  387. paddingRight: 20,
  388. paddingBottom: 15,
  389. flexDirection: 'row',
  390. alignItems: 'center',
  391. backgroundColor:'transparent'
  392. },
  393. //layer content item top
  394. contentItemTopCover:{
  395. flex: 5,
  396. width:'100%',
  397. height:'100%',
  398. borderRadius:10,
  399. backgroundColor:'blue'
  400. },
  401. contentItemTopDetail:{
  402. flex: 6,
  403. width:'100%',
  404. height:'100%',
  405. paddingLeft: 10,
  406. paddingRight: 30,
  407. alignItems: 'center',
  408. backgroundColor:'transparent'
  409. },
  410. contentItemTopQrcode:{
  411. flex: 5,
  412. width:'100%',
  413. height:'100%',
  414. backgroundColor:'transparent'
  415. },
  416. //layer content item bottom
  417. contentItemBottomMerchantName:{
  418. flex: 5,
  419. width:'100%',
  420. height:'100%',
  421. alignItems: 'center',
  422. backgroundColor:'transparent',
  423. textAlign :'center',
  424. textAlignVertical:'center',
  425. fontSize: 10,
  426. fontWeight : 'bold'
  427. },
  428. contentItemBottomPlacehold:{
  429. flex: 6,
  430. paddingLeft: 10,
  431. paddingRight: 30,
  432. width:'100%',
  433. height:'100%',
  434. backgroundColor:'transparent',
  435. },
  436. contentItemBottomAction:{
  437. flex: 5,
  438. width:'100%',
  439. height:'100%',
  440. backgroundColor:'transparent',
  441. fontWeight : 'bold',
  442. textAlign :'center',
  443. textAlignVertical:'center',
  444. },
  445. //layer content item top detail
  446. contentItemTopDetailTitle:{
  447. flex: 2,
  448. width:'100%',
  449. height:'100%',
  450. backgroundColor:'transparent',
  451. textAlign :'left',
  452. textAlignVertical:'center',
  453. fontSize: 24,
  454. color: 'darkgray'
  455. },
  456. contentItemTopDetailRemark:{
  457. flex: 1,
  458. width:'100%',
  459. height:'100%',
  460. backgroundColor:'transparent',
  461. textAlign :'left',
  462. textAlignVertical:'center',
  463. fontSize: 10,
  464. color : 'gray'
  465. },
  466. contentItemTopDetailPrice:{
  467. flex: 2,
  468. width:'100%',
  469. height:'100%',
  470. backgroundColor:'transparent',
  471. flexDirection: 'row',
  472. },
  473. contentItemTopDetailCurPrice:{
  474. flex: 3,
  475. width:'100%',
  476. height:'100%',
  477. flexDirection: 'row',
  478. backgroundColor:'transparent',
  479. },
  480. contentItemTopDetailCurPriceStr:{
  481. backgroundColor:'transparent',
  482. textAlign :'left',
  483. textAlignVertical:'bottom',
  484. fontSize: 32,
  485. color : 'red'
  486. },
  487. contentItemTopDetailCurPriceStrUnit:{
  488. backgroundColor:'transparent',
  489. textAlign :'left',
  490. textAlignVertical:'bottom',
  491. fontSize: 10,
  492. color : 'red'
  493. },
  494. contentItemTopDetailSalePrice:{
  495. flex: 1,
  496. width:'100%',
  497. height:'100%',
  498. backgroundColor:'transparent',
  499. },
  500. contentItemTopDetailSalePriceStr:{
  501. width:'100%',
  502. height:'100%',
  503. backgroundColor:'transparent',
  504. textAlign :'left',
  505. textAlignVertical:'bottom',
  506. fontSize: 10,
  507. textDecorationLine: 'line-through',
  508. color : 'gray'
  509. },
  510. });