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

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