广告屏react-native项目
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 
 

1318 rader
37 KiB

  1. import React, { Component } from 'react';
  2. import {
  3. Platform,
  4. StyleSheet,
  5. Text,
  6. View,
  7. Image,
  8. ImageBackground,
  9. PixelRatio,
  10. NativeModules,
  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. import Swiper from 'react-native-swiper';
  19. import Carousel from 'react-native-snap-carousel';
  20. import {BoxShadow} from 'react-native-shadow';
  21. var testMac = 'FF:FF:FF:FF:FF:FF'
  22. var curAdIndex = 0;
  23. var errorMsg = {
  24. ERR_MAC_GET:'设备编号获取错误',
  25. ERR_START_AD:'广告播放系统错误',
  26. ERR_DATA_GET:'广告数据获取错误',
  27. ERR_HEARTBEAT:'设备心跳数据错误',
  28. ERR_NO_DATA:'暂无优惠信息'
  29. }
  30. var animationThemes = [
  31. // 滑入
  32. {
  33. first:"slideInDown",
  34. second:"slideInLeft",
  35. third:"slideInRight"
  36. },
  37. // 放大
  38. {
  39. first:"zoomInDown",
  40. second:"zoomInLeft",
  41. third:"zoomInRight"
  42. },
  43. // 翻转
  44. {
  45. first:"flipInX",
  46. second:"flipInY",
  47. third:"flipInX"
  48. },
  49. // 弹出
  50. {
  51. first:"bounceInDown",
  52. second:"bounceInLeft",
  53. third:"bounceInRight"
  54. }
  55. ]
  56. const shadowOpt = {
  57. width: 800/PixelRatio.get(),
  58. height: 240/PixelRatio.get(),
  59. color:"#000",
  60. border:2,
  61. radius:3,
  62. opacity:0.5,
  63. x:2,
  64. y:3,
  65. style:{marginVertical:5}
  66. }
  67. var curTimer = null;
  68. var hbRequestCount
  69. var getAdDataCount
  70. var pageChangeCount
  71. var adDataList = [];
  72. var adDataBgList = [];
  73. var heartConfig = {
  74. heartbeatInterval:300,
  75. dataRefreshInterval:3600,
  76. pageChangeInterval:10,
  77. }
  78. var requestFailedCount = 0;
  79. var versionInfo = '';
  80. let codePushOptions = {
  81. //设置检查更新的频率
  82. //ON_APP_RESUME APP恢复到前台的时候
  83. //ON_APP_START APP开启的时候
  84. //MANUAL 手动检查
  85. checkFrequency : CodePush.CheckFrequency.ON_APP_START
  86. };
  87. export default class MyPage extends Component {
  88. constructor(props) {
  89. super(props);
  90. this.state = {
  91. baseInfo: null,
  92. contentItem0:null,
  93. contentItem1:null,
  94. contentItem2:null,
  95. animationTheme:animationThemes[0],
  96. contentDisplayStatus:false,
  97. syncMessage: "初始化..." ,
  98. errorMessage: '加载中...',
  99. progress: {
  100. receivedBytes:0,
  101. totalBytes:0
  102. },
  103. updating:true,
  104. macAddress: '',
  105. versionInfo:'未知',
  106. adType: 0,
  107. curAdType02Index: 0, //广告图index
  108. // coverImgUrl: 'https://iformall-net.s3.cn-northwest-1.amazonaws.com.cn/456/37d833d7-263f-4f97-8588-e827c2f43db4.jpg',
  109. // previewImg: 'https://iformall-net.s3.cn-northwest-1.amazonaws.com.cn/456/37d833d7-263f-4f97-8588-e827c2f43db4.jpg',
  110. coverImgUrl: '',
  111. previewImg: '',
  112. curImgState: false,
  113. };
  114. /* this.codePushUpdate = this.codePushUpdate.bind(this);
  115. this.startAd = this.startAd.bind(this);
  116. this.showErrMsg = this.showErrMsg.bind(this); */
  117. }
  118. componentDidMount() {
  119. this.codePushUpdate();
  120. DeviceInfo.getMACAddress().then((mac)=>{
  121. if (mac=='' || mac==null ) {
  122. if (NativeModules.BuildConfig.buildType == 'debug') {
  123. this.setState({macAddress : this.testMac})
  124. this.startAd()
  125. } else {
  126. this.showErrMsg(errorMsg.ERR_MAC_GET);
  127. }
  128. } else {
  129. this.setState({macAddress : mac})
  130. this.startAd()
  131. }
  132. }).catch(e => {
  133. this.showErrMsg(errorMsg.ERR_START_AD);
  134. })
  135. }
  136. componentDidUpdate() {
  137. /* console.log(this.refs.scrollView)
  138. if (this.refs.scrollView != undefined) {
  139. var ScrollView = this.refs.scrollView;
  140. ScrollView.scrollBy(0, true);
  141. } */
  142. }
  143. //更新函数
  144. async codePushUpdate() {
  145. CodePush.allowRestart();
  146. await CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
  147. .then((metadata: LocalPackage) => {
  148. console.log(CodePush.UpdateState)
  149. console.log(metadata)
  150. this.setState({ versionInfo: metadata ? 'b'+NativeModules.BuildConfig.versionCode+"-" + metadata.label : 'b'+ NativeModules.BuildConfig.versionCode});
  151. versionInfo = this.state.versionInfo;
  152. }, (error: any) => {
  153. this.setState({ versionInfo: "Unknown"});
  154. versionInfo = this.state.versionInfo;
  155. });
  156. await CodePush.sync(
  157. { mandatoryInstallMode: CodePush.InstallMode.ON_NEXT_RESTART,
  158. installMode: CodePush.InstallMode.ON_NEXT_RESTART},
  159. this.codePushStatusDidChange.bind(this),
  160. this.codePushDownloadDidProgress.bind(this)
  161. ).then((status: SyncStatus) => {
  162. }, (error: any) => {
  163. CodePush.restartApp();
  164. });
  165. }
  166. // 监听更新状态
  167. codePushStatusDidChange(syncStatus) {
  168. switch(syncStatus) {
  169. case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
  170. this.setState({ syncMessage: "检查更新" });
  171. break;
  172. case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
  173. this.setState({ syncMessage: "下载更新" });
  174. break;
  175. case CodePush.SyncStatus.AWAITING_USER_ACTION:
  176. this.setState({ syncMessage: "等待用户操作" });
  177. break;
  178. case CodePush.SyncStatus.INSTALLING_UPDATE:
  179. this.setState({ syncMessage: "安装更新" });
  180. break;
  181. case CodePush.SyncStatus.UP_TO_DATE:
  182. this.setState({ syncMessage: "已更新到最新程序", updating: false });
  183. break;
  184. case CodePush.SyncStatus.UPDATE_IGNORED:
  185. this.setState({ syncMessage: "更新被取消", updating: false });
  186. break;
  187. case CodePush.SyncStatus.UPDATE_INSTALLED:
  188. this.setState({ syncMessage: "更新已安装,重启应用后生效", updating: false });
  189. break;
  190. case CodePush.SyncStatus.UNKNOWN_ERROR:
  191. this.setState({ syncMessage: "未知错误", updating: false });
  192. break;
  193. }
  194. }
  195. codePushDownloadDidProgress(progress) {
  196. this.setState({ progress });
  197. }
  198. // 列表滚动
  199. updateContent() {
  200. if (adDataList.length <=0)
  201. return false;
  202. if (curAdIndex >= adDataList.length) {
  203. curAdIndex = 0;
  204. }
  205. this.setState({contentItem0:adDataList[curAdIndex]});
  206. if (curAdIndex + 1 < adDataList.length)
  207. this.setState({contentItem1:adDataList[curAdIndex+1]});
  208. else
  209. this.setState({contentItem1:null});
  210. if (curAdIndex + 2 < adDataList.length)
  211. this.setState({contentItem2:adDataList[curAdIndex+2]});
  212. else
  213. this.setState({contentItem2:null});
  214. curAdIndex+=3
  215. return true;
  216. }
  217. hbRequest() {
  218. return HttpUtils.post(NativeModules.BuildConfig.apiHost
  219. + 'api/wxDeviceScreenAd/heartbeat?deviceId='
  220. + encodeURIComponent(this.state.macAddress),
  221. {version:this.state.versionInfo})
  222. .then(result => {
  223. if (result.code == 200) {
  224. let config = JSON.parse(result.data.config);
  225. heartConfig.heartbeatInterval = config.heartbeatInterval
  226. heartConfig.dataRefreshInterval=config.dataRefreshInterval
  227. heartConfig.pageChangeInterval=config.pageChangeInterval
  228. // 动画划入
  229. if(config.animationTheme == 0){
  230. this.setState({
  231. animationTheme:animationThemes[0]
  232. })
  233. }else if(config.animationTheme == 1){
  234. // 放大
  235. this.setState({
  236. animationTheme:animationThemes[1]
  237. })
  238. }else if(config.animationTheme == 2){
  239. // 淡入
  240. this.setState({
  241. animationTheme:animationThemes[2]
  242. })
  243. }else if(config.animationTheme == 3){
  244. // 弹入
  245. this.setState({
  246. animationTheme:animationThemes[3]
  247. })
  248. }
  249. } else {
  250. //do nothing
  251. }
  252. })
  253. .catch(error => {
  254. requestFailedCount++
  255. this.setState({ versionInfo: versionInfo+`[${requestFailedCount}]`});
  256. })
  257. }
  258.  showErrMsg(errMsg) {
  259. this.setState({contentDisplayStatus: false})
  260. this.setState({errorMessage : errMsg});
  261. }
  262. //判断播放类型adType
  263. dealLoopType(dataList) {
  264. adDataList = dataList.filter((item) => {
  265. return item.type == 0;
  266. })
  267. adDataBgList = dataList.filter((item) => {
  268. return item.type == 2;
  269. })
  270. //aaa
  271. let num = 0;
  272. if (adDataList.length > 0 && adDataBgList.length > 0) {
  273. num = 2;
  274. this.setState({
  275. coverImgUrl: adDataBgList[0].coverImg
  276. })
  277. } else if (adDataList.length > 0 && !adDataBgList.length) {
  278. num = 0;
  279. } else if (!adDataList.length && adDataBgList.length > 0) {
  280. num = 1;
  281. }
  282. this.setState({adType: num })
  283. }
  284. getAdDataList(first) {
  285. HttpUtils.get(NativeModules.BuildConfig.apiHost
  286. + 'api/wxDeviceScreenAd/list?deviceId='
  287. + encodeURIComponent(this.state.macAddress)
  288. + '&pageNum=1&pageSize=1000')
  289. .then(result => {
  290. if (result.code != 200) {
  291. this.showErrMsg(result.message+'\n'+this.state.macAddress);
  292. } else if (result.data.list) {
  293. //aaa
  294. console.log(result.data)
  295. //type==0的是券 1是? 2是广告大图
  296. let curData = result.data.list;
  297. this.dealLoopType(curData);
  298. if (this.updateContent()) {
  299. this.setState({contentDisplayStatus: true})
  300. } else {
  301. this.showErrMsg(errorMsg.ERR_NO_DATA);
  302. }
  303. } else {
  304.  this.showErrMsg(errorMsg.ERR_DATA_GET);
  305. }
  306. })
  307. .catch(error => {
  308. if (first) {
  309. this.showErrMsg(error.message);
  310. }
  311. else {
  312. requestFailedCount++
  313. this.setState({ versionInfo: versionInfo+`[${requestFailedCount}]`});
  314. }
  315. })
  316. }
  317. getBaseInfo() {
  318. HttpUtils.get(NativeModules.BuildConfig.apiHost
  319. + 'api/wxDeviceScreenAd/info?deviceId='
  320. + encodeURIComponent(this.state.macAddress))
  321. .then(result => {
  322. if (result.code != 200) {
  323. this.showErrMsg(result.message+'\n'+this.state.macAddress);
  324. } else if (result.data) {
  325. console.log(result.data)
  326. this.setState({baseInfo:result.data});
  327. } else {
  328. this.showErrMsg(errorMsg.ERR_DATA_GET);
  329. }
  330. })
  331. .catch(error => {
  332. this.showErrMsg(error.message);
  333. })
  334. }
  335. componentWillUnmount(){
  336. if (curTimer)
  337. clearTimeout(curTimer)
  338. }
  339. async routine() {
  340. hbRequestCount -=1;
  341. getAdDataCount -=1;
  342. if (this.state.adType == 2 && this.state.curImgState) {
  343. pageChangeCount -=1;
  344. }
  345. if (this.state.adType != 2) {
  346. pageChangeCount -=1;
  347. }
  348. try {
  349. if (getAdDataCount<=0) {
  350. this.getAdDataList(false)
  351. getAdDataCount = heartConfig.dataRefreshInterval
  352. } else if (hbRequestCount<=0) {
  353. this.hbRequest()
  354. hbRequestCount = heartConfig.heartbeatInterval
  355. }
  356. //如果是adType == 2时间间隔到了,
  357. if (this.state.adType == 2) {
  358. if (pageChangeCount<=0) {
  359. let curNum = this.state.curAdType02Index + 1;
  360. if (curNum >= adDataBgList.length) {
  361. curNum = 0;
  362. }
  363. this.setState({
  364. curAdType02Index: curNum,
  365. previewImg:adDataBgList[curNum].coverImg
  366. })
  367. pageChangeCount = heartConfig.pageChangeInterval
  368. }
  369. } else if (this.state.adType == 0) {
  370. if (pageChangeCount <= 0) { //页面切换间隔
  371. if (this.state.contentDisplayStatus && this.state.baseInfo) {
  372. this.setState({ contentDisplayStatus: false})
  373. if (this.updateContent()) {
  374. this.setState({ contentDisplayStatus: true})
  375. }
  376. } else {
  377. await this.getBaseInfo()
  378. await this.getAdDataList(true)
  379. getAdDataCount = heartConfig.dataRefreshInterval
  380. hbRequestCount = heartConfig.heartbeatInterval
  381. }
  382. pageChangeCount = heartConfig.pageChangeInterval
  383. }
  384. }
  385. } catch(e){
  386. this.setState({ versionInfo: versionInfo+'[E]'});
  387. }
  388. curTimer = setTimeout(()=>{
  389. this.routine();
  390. },1000);
  391. }
  392. startAd() {
  393. hbRequestCount = 0;
  394. getAdDataCount = 0;
  395. pageChangeCount = 0;
  396. this.routine();
  397. }
  398. getContentViewItemUplayer(contentItem) {
  399. if (contentItem.type == 0) {
  400. if (contentItem.subType == 2)
  401. return (<Image source={require('./image/timed.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  402. if (contentItem.subType == 6)
  403. return (<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  404. if (contentItem.subType == 7)
  405. return (<Image source={require('./image/groupbuy.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  406. return null;
  407. }
  408. }
  409. getContentViewItemActionStr(contentItem) {
  410. if (contentItem.type == 0) {
  411. if (contentItem.subType == 2)
  412. return '扫码秒杀';
  413. else if (contentItem.subType == 6)
  414. return '扫码砍价';
  415. else if (contentItem.subType == 7)
  416. return '扫码拼团';
  417. else
  418. return '扫码领取';
  419. }
  420. }
  421. getContentViewItemMerchantName(contentItem) {
  422. if (contentItem.type == 0) {
  423. if (contentItem.target.merchantVoList.length > 1)
  424. return '多商户通用';
  425. else
  426. return contentItem.target.merchantVoList[0].merchantName;
  427. }
  428. }
  429. getContentViewItem(contentItem, annomation) {
  430. console.log(contentItem)
  431. if (!contentItem)
  432. return (
  433. <View style={styles.contentItem}>
  434. </View>
  435. )
  436. actionText = this.getContentViewItemActionStr(contentItem);
  437. merchantName = this.getContentViewItemMerchantName(contentItem);
  438. // console.warn(annomation)
  439. return (
  440. <Animatable.View animation={annomation} style={styles.contentItem}>
  441. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  442. {/* 列表 */}
  443. <View style={styles.contentItemTop}>
  444. <Image source={{uri: contentItem.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
  445. <View style={styles.contentItemTopDetail}>
  446. {/* 券的title */}
  447. <Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text>
  448. <View style={styles.contentItemTopDetailPrice}>
  449. {/* 售价 */}
  450. <View style={styles.contentItemTopDetailCurPrice}>
  451. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>¥</Text>
  452. <Text style={styles.contentItemTopDetailCurPriceStr}>{contentItem.target.salePriceStr}</Text>
  453. </View>
  454. {/* 面额 */}
  455. <View style={styles.contentItemTopDetailSalePrice}>
  456. <Text style={styles.contentItemTopDetailSalePriceStr} >¥{contentItem.target.priceStr}</Text>
  457. </View>
  458. </View>
  459. </View>
  460. {/* <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> */}
  461. <Image source={{uri:contentItem.target.qrCode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  462. </View>
  463. {/* 优惠券底部商户名称 */}
  464. <View style={styles.contentItemBottom}>
  465. <Text style={styles.contentItemBottomMerchantName}>{merchantName}</Text>
  466. <Text style={styles.contentItemBottomPlacehold}>{contentItem.target.merchantVoList[0].buildingName}{contentItem.target.merchantVoList[0].floorName}</Text>
  467. <Text style={styles.contentItemBottomAction}>{actionText}</Text>
  468. </View>
  469. </ImageBackground>
  470. {this.getContentViewItemUplayer(contentItem)}
  471. </Animatable.View>
  472. )
  473. }
  474. getContentView() {
  475. if (this.state.contentDisplayStatus) {
  476. return (<View style={styles.content}>
  477. {this.getContentViewItem(this.state.contentItem0,this.state.animationTheme.first)}
  478. {this.getContentViewItem(this.state.contentItem1,this.state.animationTheme.second)}
  479. {this.getContentViewItem(this.state.contentItem2,this.state.animationTheme.third)}
  480. </View>)
  481. }else{
  482. return (
  483. <View style={styles.content}>
  484. <Text style={styles.updatePage}>{this.state.errorMessage}</Text>
  485. </View>)
  486. }
  487. }
  488. setAdSwiperItemDom(item) {
  489. let contentItem = item.item;
  490. return (
  491. <View style={styles.onlyAdSwiperItem}>
  492. <Image source={{uri: contentItem.coverImg}} resizeMode='stretch' style={styles.onlyAdTypeItemImg} />
  493. </View>
  494. )
  495. }
  496. setSwiperItemDom(item) {
  497. let contentItem = item.item;
  498. let index = item.index;
  499. let curLogo = null;
  500. if (contentItem.type == 0) {
  501. if (contentItem.subType == 2)
  502. curLogo = require('./image/timed.png');
  503. if (contentItem.subType == 6)
  504. curLogo = require('./image/discount.png');
  505. if (contentItem.subType == 7)
  506. curLogo = require('./image/groupbuy.png');
  507. }
  508. return (
  509. <View style={styles.carouselItemWrap}>
  510. <BoxShadow setting={shadowOpt}>
  511. <View style={styles.contentItemTopForAd} key={index}>
  512. <Image source={curLogo} resizeMode='center' style={styles.contentItemUpLayerLogo} />
  513. {/* <ImageBackground style={styles.adTypeSwiper02} resizeMode="stretch" source={require('./image/item-background.png')}></ImageBackground> */}
  514. <Image source={{uri: contentItem.coverImg}} resizeMode='cover' style={styles.adTypeItemImg} />
  515. <View style={styles.contentItemTopDetail}>
  516. {/* 券的title */}
  517. <Text style={styles.contentItemTopDetailTitle02} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text>
  518. <View style={styles.contentItemTopDetailPrice}>
  519. {/* 售价 */}
  520. <View style={styles.contentItemTopDetailCurPrice}>
  521. <Text style={styles.contentItemTopDetailCurPriceStrUnit02}>¥</Text>
  522. <Text style={styles.contentItemTopDetailCurPriceStr02}>{contentItem.target.salePriceStr}</Text>
  523. </View>
  524. {/* 面额 */}
  525. <View style={styles.contentItemTopDetailSalePrice02}>
  526. <Text style={styles.contentItemTopDetailSalePriceStr02} >¥{contentItem.target.priceStr}</Text>
  527. </View>
  528. </View>
  529. </View>
  530. {/* <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> */}
  531. <View style={styles.contentItemTopQrcodeBox}>
  532. <Image source={{uri:contentItem.target.qrCode}} resizeMode='contain' style={styles.contentItemTopQrcode02} />
  533. </View>
  534. </View>
  535. </BoxShadow>
  536. </View>
  537. )
  538. }
  539. renderAdTypeSwiper() {
  540. if (this.state.contentDisplayStatus) {
  541. let adSwiperDomStack = [];
  542. //aaa
  543. adDataList.map((item,index) => {
  544. item.target.qrCode = 'https://iformall-net.s3.cn-northwest-1.amazonaws.com.cn/null/73ddb1e4-8f19-4d5d-8387-742d3d5d2c77.png'
  545. adSwiperDomStack.push(this.setSwiperItemDom(item, index))
  546. })
  547. return adSwiperDomStack;
  548. }else{
  549. return (
  550. <View style={styles.content}>
  551. <Text style={styles.updatePage}>{this.state.errorMessage}</Text>
  552. </View>
  553. )
  554. }
  555. }
  556. getUpdateView() {
  557. if (this.state.progress.totalBytes > 0)
  558. return (
  559. <Text style={styles.updatePage}>{this.state.syncMessage}{'\n'}
  560. {this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received{'\n'}
  561. </Text>
  562. );
  563. return (
  564. <Text style={styles.updatePage}>{this.state.syncMessage}
  565. </Text>
  566. );
  567. }
  568. rendDefaultImg() {
  569. if (this.state.coverImgUrl) {
  570. return (
  571. <ImageBackground style={styles.adTypeBg} resizeMode="stretch" source={{uri: this.state.coverImgUrl}}></ImageBackground>
  572. )
  573. } else {
  574. return (
  575. <ImageBackground style={styles.adTypeBg} resizeMode="stretch" source={require('./image/background.png')}></ImageBackground>
  576. )
  577. }
  578. }
  579. getAdView(){
  580. if (this.state.baseInfo) {
  581. if (this.state.adType == 0) {
  582. return (
  583. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  584. {/* 头部title二维码开始 */}
  585. <View style={styles.title}>
  586. <View style={styles.titleImagePlace}>
  587. <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
  588. </View>
  589. <ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} >
  590. <View style={styles.titleQrcodePlacehold}></View>
  591. <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
  592. <View style={styles.titleQrcodePlacehold}></View>
  593. </ImageBackground>
  594. </View>
  595. {/* 券列表展示列表开始 */}
  596. {this.getContentView()}
  597. {/* 底部商场信息展示开始 */}
  598. <View style={styles.bottom}>
  599. <View style={styles.bottomLogoBackground}>
  600. <Image source={{ uri: this.state.baseInfo.imgUrlH}} resizeMode='contain' style={styles.bottomLogo} />
  601. </View>
  602. <View style={styles.bottomQrcode1Background}>
  603. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.bottomQrcode1} />
  604. <Text style={styles.bottomQrcode1Str}>小程序</Text>
  605. </View>
  606. <View style={styles.bottomQrcode2Background}>
  607. <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp}} resizeMode='center' style={styles.bottomQrcode2} />
  608. <Text style={styles.bottomQrcode1Str}>公众号</Text>
  609. </View>
  610. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  611. </View>
  612. </ImageBackground>
  613. );
  614. } else if (this.state.adType == 2) {
  615. let curWidthNum = 1080/(PixelRatio.get());
  616. return (
  617. // <ImageBackground style={styles.adTypeBg} source={require('./image/ad1.jpg')}> slideInDown zoomInDown
  618. <View style={styles.adWrapBox}>
  619. <Image style={styles.adWrapHideImg}
  620. onLoadStart={() => {
  621. this.setState({
  622. curImgState: false
  623. })
  624. }}
  625. onLoad={() => {
  626. this.setState({
  627. coverImgUrl: this.state.previewImg,
  628. curImgState: true
  629. })
  630. }}
  631. resizeMode="stretch" source={{uri: this.state.previewImg}}>
  632. </Image>
  633. <Animatable.View animation="slideInDown" style={styles.adWrap} key={this.state.coverImgUrl}>
  634. {this.rendDefaultImg()}
  635. </Animatable.View>
  636. <View style={styles.adTypeSwiper02}>
  637. <Carousel
  638. ref={'carousel02'}
  639. data={adDataList}
  640. renderItem={this.setSwiperItemDom}
  641. sliderWidth={curWidthNum}
  642. itemWidth={curWidthNum}
  643. layout={'stack'}
  644. activeSlideOffset={0}
  645. autoplay={true}
  646. loop={true}
  647. autoplayInterval={5000}
  648. />
  649. </View>
  650. </View>
  651. );
  652. } else if (this.state.adType == 1) {
  653. let curWidthNum = 1080/(PixelRatio.get())
  654. let timeSpace = parseInt(Number(heartConfig.pageChangeInterval)*1000);
  655. return(
  656. <Carousel
  657. ref={'carousel01'}
  658. data={adDataBgList}
  659. renderItem={this.setAdSwiperItemDom}
  660. sliderWidth={curWidthNum}
  661. itemWidth={curWidthNum}
  662. activeSlideOffset={0}
  663. autoplay={true}
  664. loop={true}
  665. autoplayInterval={timeSpace}
  666. />
  667. )
  668. }
  669. }
  670. else {
  671. return (
  672. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  673. {/* 头部title二维码开始 */}
  674. <View style={styles.title}>
  675. </View>
  676. {/* 券列表展示列表开始 */}
  677. {this.getContentView()}
  678. {/* 底部商场信息展示开始 */}
  679. <View style={styles.bottom}>
  680. <View style={styles.bottomLogoBackground}>
  681. </View>
  682. <View style={styles.bottomQrcode1Background}>
  683. </View>
  684. <View style={styles.bottomQrcode2Background}>
  685. </View>
  686. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  687. </View>
  688. </ImageBackground>
  689. );
  690. }
  691. }
  692. render() {
  693. if (this.state.updating) {
  694. return this.getUpdateView();
  695. }
  696. return this.getAdView();
  697. }
  698. }
  699. MyPage = CodePush(codePushOptions)(MyPage);
  700. const styles = StyleSheet.create({
  701. updatePage:{
  702. flex: 2,
  703. width:'100%',
  704. height:'100%',
  705. backgroundColor:'transparent',
  706. textAlign :'center',
  707. textAlignVertical:'center',
  708. fontSize: 63/PixelRatio.get(),
  709. color: 'darkblue'
  710. },
  711. //layer background
  712. background:{
  713. flex: 1,
  714. width:'100%',
  715. height:'100%'
  716. },
  717. //layer top
  718. title:{
  719. flex: 6,
  720. flexDirection: 'row',
  721. alignItems: 'center',
  722. paddingLeft:42/PixelRatio.get(),
  723. paddingRight:42/PixelRatio.get(),
  724. backgroundColor:'transparent'
  725. },
  726. content:{
  727. flex: 18,
  728. flexDirection: 'column',
  729. alignItems: 'center',
  730. backgroundColor:'transparent'
  731. },
  732. bottom:{
  733. flex: 2,
  734. flexDirection: 'row',
  735. alignItems: 'center',
  736. paddingLeft:42/PixelRatio.get(),
  737. paddingRight:42/PixelRatio.get(),
  738. backgroundColor:'transparent'
  739. },
  740. //layer title
  741. titleImagePlace: {
  742. flex: 2,
  743. paddingTop: '20%',
  744. paddingLeft: '15%',
  745. alignItems: 'center',
  746. backgroundColor:'transparent'
  747. },
  748. titleImage: {
  749. width:'100%',
  750. height:'100%',
  751. flex: 1,
  752. backgroundColor:'transparent'
  753. },
  754. titleQrcodeBonder: {
  755. width:'100%',
  756. height:'100%',
  757. alignItems: 'center',
  758. flexDirection: 'column',
  759. flex: 1,
  760. backgroundColor:'transparent'
  761. },
  762. titleQrcodePlacehold: {
  763. flex: 5,
  764. backgroundColor:'transparent'
  765. },
  766. titleQrcode: {
  767. flex: 6,
  768. width:'100%',
  769. height:'100%',
  770. backgroundColor:'transparent'
  771. },
  772. //layer bottom
  773. bottomLogoBackground: {
  774. flex: 3,
  775. borderRadius:16/PixelRatio.get(),
  776. marginTop: 26/PixelRatio.get(),
  777. marginBottom: 26/PixelRatio.get(),
  778. backgroundColor:'transparent',//'rgba(255,255,255,0.5)',
  779. },
  780. bottomLogo: {
  781. width:'100%',
  782. height:'100%',
  783. backgroundColor:'transparent'
  784. },
  785. bottomQrcode1Background : {
  786. flex: 1,
  787. width:'100%',
  788. height:'100%',
  789. marginLeft: 21/PixelRatio.get(),
  790. paddingTop: 27/PixelRatio.get(),
  791. paddingBottom: 11/PixelRatio.get(),
  792. flexDirection: 'column',
  793. backgroundColor:'transparent'
  794. },
  795. bottomQrcode2Background : {
  796. flex: 1,
  797. width:'100%',
  798. height:'100%',
  799. marginLeft: 21/PixelRatio.get(),
  800. paddingTop: 26/PixelRatio.get(),
  801. paddingBottom: 11/PixelRatio.get(),
  802. flexDirection: 'column',
  803. backgroundColor:'transparent'
  804. },
  805. bottomQrcode1: {
  806. flex: 2,
  807. width:'100%',
  808. height:'100%',
  809. backgroundColor:'transparent'
  810. },
  811. bottomQrcode2: {
  812. flex: 2,
  813. width:'100%',
  814. height:'100%',
  815. backgroundColor:'transparent'
  816. },
  817. bottomQrcode1Str: {
  818. flex: 1,
  819. textAlign :'center',
  820. textAlignVertical:'center',
  821. fontSize: 16/PixelRatio.get(),
  822. color : 'white',
  823. backgroundColor:'transparent'
  824. },
  825. bottomQrcode2Str: {
  826. flex: 1,
  827. textAlign :'center',
  828. textAlignVertical:'center',
  829. fontSize: 16/PixelRatio.get(),
  830. color : 'white',
  831. backgroundColor:'transparent'
  832. },
  833. bottomPlacehold: {
  834. flex: 8,
  835. width:'100%',
  836. height:'100%',
  837. backgroundColor:'transparent',
  838. textAlign :'right',
  839. textAlignVertical:'bottom',
  840. fontSize: 27/PixelRatio.get(),
  841. color : 'gray'
  842. },
  843. //layer content item
  844. contentItem:{
  845. flex: 1,
  846. width:'100%',
  847. height:'100%',
  848. flexDirection: 'column',
  849. backgroundColor:'transparent'
  850. },
  851. contentItemDownLayer:{
  852. position:'absolute',
  853. width:'100%',
  854. height:'100%',
  855. flexDirection: 'column',
  856. alignItems: 'center',
  857. backgroundColor:'transparent'
  858. },
  859. contentItemUpLayer:{
  860. width:210/PixelRatio.get(),
  861. height:153/PixelRatio.get(),
  862. position:'absolute',
  863. backgroundColor:'transparent'
  864. },
  865. contentItemUpLayerLogo: {
  866. width:160/PixelRatio.get(),
  867. height:83/PixelRatio.get(),
  868. position: 'absolute',
  869. left: -20/PixelRatio.get(),
  870. top: 20/PixelRatio.get(),
  871. zIndex:100,
  872. backgroundColor: 'transparent',
  873. },
  874. contentItemTop:{
  875. flex: 3,
  876. width:'100%',
  877. height:'100%',
  878. paddingLeft: 66/PixelRatio.get(),
  879. paddingRight: 53/PixelRatio.get(),
  880. paddingTop: 40/PixelRatio.get(),
  881. flexDirection: 'row',
  882. alignItems: 'center',
  883. backgroundColor:'transparent'
  884. },
  885. contentItemBottom:{
  886. flex: 1,
  887. width:'100%',
  888. height:'100%',
  889. paddingLeft: 66/PixelRatio.get(),
  890. paddingRight: 53/PixelRatio.get(),
  891. paddingBottom: 40/PixelRatio.get(),
  892. flexDirection: 'row',
  893. alignItems: 'center',
  894. backgroundColor:'transparent'
  895. },
  896. //layer content item top
  897. contentItemTopCoverImg:{
  898. flex: 5,
  899. width:'100%',
  900. height:'100%',
  901. borderRadius:27/PixelRatio.get(),
  902. backgroundColor:'transparent'
  903. },
  904. contentItemTopDetail:{
  905. flex: 6,
  906. width:'100%',
  907. height:'100%',
  908. paddingLeft: 20/PixelRatio.get(),
  909. paddingRight: 20/PixelRatio.get(),
  910. alignItems: 'center',
  911. backgroundColor:'transparent'
  912. },
  913. contentItemTopQrcode:{
  914. flex: 5,
  915. width:'100%',
  916. height:'100%',
  917. marginLeft:18/PixelRatio.get(),
  918. // backgroundColor:'transparent'
  919. },
  920. contentItemTopQrcodeBox:{
  921. flex: 5,
  922. width:'100%',
  923. height:'100%',
  924. flexDirection: 'column',
  925. alignItems: 'center',
  926. justifyContent: 'center',
  927. marginLeft: -28/PixelRatio.get(),
  928. // backgroundColor:'transparent'
  929. },
  930. contentItemTopQrcode02:{
  931. width:'90%',
  932. height:'90%',
  933. },
  934. //layer content item bottom
  935. contentItemBottomMerchantName:{
  936. flex: 5,
  937. width:'100%',
  938. height:'100%',
  939. alignItems: 'center',
  940. color:"black",
  941. backgroundColor:'transparent',
  942. textAlign :'center',
  943. textAlignVertical:'center',
  944. fontSize: 27/PixelRatio.get(),
  945. fontWeight : 'bold',
  946. },
  947. contentItemBottomPlacehold:{
  948. flex: 6,
  949. fontSize: 27/PixelRatio.get(),
  950. paddingLeft: 27/PixelRatio.get(),
  951. paddingRight: 79/PixelRatio.get(),
  952. width:'100%',
  953. height:'100%',
  954. color:"black",
  955. textAlignVertical:'center',
  956. backgroundColor:'transparent',
  957. },
  958. contentItemBottomAction:{
  959. flex: 5,
  960. width:'100%',
  961. height:'100%',
  962. backgroundColor:'transparent',
  963. textAlign :'center',
  964. textAlignVertical:'center',
  965. fontSize: 36/PixelRatio.get(),
  966. color: 'black',
  967. },
  968. contentItemBottomAction02:{
  969. width:'100%',
  970. height: 60/PixelRatio.get(),
  971. backgroundColor:'transparent',
  972. textAlign :'center',
  973. textAlignVertical:'center',
  974. fontSize: 36/PixelRatio.get(),
  975. color: 'black',
  976. },
  977. // 券的title
  978. contentItemTopDetailTitle:{
  979. flex: 2,
  980. // height:'100%',
  981. width:'100%',
  982. marginTop:"2%",
  983. backgroundColor:'transparent',
  984. textAlign :'left',
  985. color:"black",
  986. textAlignVertical:'center',
  987. fontSize: 53/PixelRatio.get(),
  988. },
  989. // 券的title
  990. contentItemTopDetailTitle02:{
  991. flex: 2,
  992. // height:'100%',
  993. width:'100%',
  994. marginTop:"2%",
  995. paddingRight: 14/PixelRatio.get(),
  996. backgroundColor:'transparent',
  997. textAlign :'left',
  998. color:"black",
  999. textAlignVertical:'center',
  1000. fontSize: 42/PixelRatio.get(),
  1001. },
  1002. /*
  1003. contentItemTopDetailRemark:{
  1004. flex: 1,
  1005. width:'100%',
  1006. height:'100%',
  1007. backgroundColor:'transparent',
  1008. textAlign :'left',
  1009. textAlignVertical:'center',
  1010. fontSize: 27/PixelRatio.get(),
  1011. color : 'gray'
  1012. },
  1013. */
  1014. contentItemTopDetailPrice:{
  1015. flex: 2,
  1016. width:'100%',
  1017. height:'100%',
  1018. backgroundColor:'transparent',
  1019. flexDirection: 'row',
  1020. },
  1021. // 售价的样式
  1022. contentItemTopDetailCurPrice:{
  1023. position:"absolute",
  1024. bottom:10,
  1025. left:0,
  1026. width:'100%',
  1027. height:'100%',
  1028. flexDirection: 'row',
  1029. backgroundColor:'transparent',
  1030. },
  1031. contentItemTopDetailCurPriceStr:{
  1032. backgroundColor:'transparent',
  1033. fontSize:96/PixelRatio.get(),
  1034. fontFamily:"PingFangSC-Bold",
  1035. fontWeight: "bold",
  1036. textAlign :'left',
  1037. textAlignVertical:'bottom',
  1038. color : 'red'
  1039. },
  1040. contentItemTopDetailCurPriceStr02:{
  1041. backgroundColor:'transparent',
  1042. fontSize:72/PixelRatio.get(),
  1043. fontFamily:"PingFangSC-Bold",
  1044. fontWeight: "bold",
  1045. textAlign :'left',
  1046. color : 'red'
  1047. },
  1048. contentItemTopDetailCurPriceStrUnit:{
  1049. backgroundColor:'transparent',
  1050. textAlign :'left',
  1051. textAlignVertical:'bottom',
  1052. paddingBottom: 16/PixelRatio.get(),
  1053. fontSize: 48/PixelRatio.get(),
  1054. color : 'red'
  1055. },
  1056. contentItemTopDetailCurPriceStrUnit02:{
  1057. backgroundColor:'transparent',
  1058. textAlign :'left',
  1059. textAlignVertical:'center',
  1060. paddingBottom: 16/PixelRatio.get(),
  1061. fontSize: 48/PixelRatio.get(),
  1062. color : 'red'
  1063. },
  1064. // 面额的样式
  1065. contentItemTopDetailSalePrice:{
  1066. position:"absolute",
  1067. bottom:2,
  1068. left:0,
  1069. // flex: 1,
  1070. paddingTop:138/PixelRatio.get(),
  1071. width:'100%',
  1072. // height:'100%',
  1073. backgroundColor:'transparent',
  1074. },
  1075. contentItemTopDetailSalePrice02:{
  1076. position:"absolute",
  1077. bottom:14/PixelRatio.get(),
  1078. left:0,
  1079. // flex: 1,
  1080. paddingTop:138/PixelRatio.get(),
  1081. width:'100%',
  1082. // height:'100%',
  1083. backgroundColor:'transparent',
  1084. },
  1085. contentItemTopDetailSalePriceStr:{
  1086. width:'100%',
  1087. height:'100%',
  1088. backgroundColor:'transparent',
  1089. textAlign :'left',
  1090. textAlignVertical:'bottom',
  1091. fontSize: 27/PixelRatio.get(),
  1092. textDecorationLine: 'line-through',
  1093. color : 'gray'
  1094. },
  1095. contentItemTopDetailSalePriceStr02:{
  1096. width:'100%',
  1097. height:'100%',
  1098. backgroundColor:'transparent',
  1099. textAlignVertical:'center',
  1100. textAlign :'left',
  1101. fontSize: 27/PixelRatio.get(),
  1102. textDecorationLine: 'line-through',
  1103. color : 'gray'
  1104. },
  1105. adTypeBg:{
  1106. flex: 1,
  1107. width: '100%',
  1108. height: '100%',
  1109. },
  1110. adWrapBox: {
  1111. width: '100%',
  1112. height: '100%',
  1113. position: 'relative',
  1114. },
  1115. adWrap: {
  1116. width: '100%',
  1117. height: '100%',
  1118. position: 'absolute',
  1119. left: 0,
  1120. top: 0,
  1121. zIndex: 10,
  1122. },
  1123. adWrapHideImg: {
  1124. width: '100%',
  1125. height: '100%',
  1126. position: 'absolute',
  1127. left: 0,
  1128. top: 0,
  1129. zIndex: -1,
  1130. opacity:0,
  1131. },
  1132. adTypeSwiper02:{
  1133. flex: 1,
  1134. alignItems: 'center',
  1135. position: 'absolute',
  1136. left: 0,
  1137. bottom: 60/PixelRatio.get(),
  1138. width: '100%',
  1139. height: 270/PixelRatio.get(),
  1140. },
  1141. adTypeItemImgWrap:{
  1142. flex: 1,
  1143. width: '100%',
  1144. height: 369/PixelRatio.get(),
  1145. flexDirection: 'row',
  1146. alignItems: 'center',
  1147. },
  1148. adTypeItemImg:{
  1149. width: 200/PixelRatio.get(),
  1150. height: 200/PixelRatio.get(),
  1151. marginLeft: 8/PixelRatio.get(),
  1152. marginTop: 20/PixelRatio.get(),
  1153. borderRadius:27/PixelRatio.get(),
  1154. backgroundColor:'transparent'
  1155. },
  1156. bottomBox:{
  1157. position: 'absolute',
  1158. bottom: 20/PixelRatio.get(),
  1159. left: 0,
  1160. width: '100%',
  1161. height: 130/PixelRatio.get(),
  1162. flexDirection: 'row',
  1163. alignItems: 'center',
  1164. backgroundColor:'transparent',
  1165. },
  1166. contentItemTopForAd:{
  1167. position: 'relative',
  1168. flex: 1,
  1169. width: 800/PixelRatio.get(),
  1170. // width: '100%',
  1171. height:'100%',
  1172. paddingLeft: 12/PixelRatio.get(),
  1173. paddingRight: 26/PixelRatio.get(),
  1174. flexDirection: 'row',
  1175. alignItems: 'flex-start',
  1176. borderRadius: 6,
  1177. backgroundColor:'rgba(255,255,255,.8)',
  1178. },
  1179. onlyAdSwiperItem:{
  1180. width: '100%',
  1181. height: '100%',
  1182. },
  1183. onlyAdTypeItemImg:{
  1184. width: '100%',
  1185. height: '100%',
  1186. },
  1187. carouselItemWrap: {
  1188. flex: 1,
  1189. width: '100%',
  1190. backgroundColor: 'transparent',
  1191. alignItems: 'center',
  1192. }
  1193. });