广告屏react-native项目
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 
 
 

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