广告屏react-native项目
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

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