广告屏react-native项目
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 
 
 

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