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

1341 lines
37 KiB

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