广告屏react-native项目
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 
 

1316 linhas
37 KiB

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