广告屏react-native项目
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 
 

1240 行
36 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 curTimer = null;
  56. var hbRequestCount
  57. var getAdDataCount
  58. var pageChangeCount
  59. var adDataList = [];
  60. var adDataBgList = [];
  61. var heartConfig = {
  62. heartbeatInterval:300,
  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 (curTimer)
  323. clearTimeout(curTimer)
  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. curTimer = 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. let curWidthNum = 1080/(PixelRatio.get())
  583. return (
  584. // <ImageBackground style={styles.adTypeBg} source={require('./image/ad1.jpg')}>
  585. <ImageBackground style={styles.adTypeBg} resizeMode="stretch" source={{ uri: this.state.curCoverImgUrl}}>
  586. {/* adType == 2 滚动轮播 */}
  587. {/* <Swiper ref='scrollView' style={styles.adTypeSwiper02} autoplay={true} autoplayTimeout={1} showPagination={false}
  588. dotColor="transparent" activeDotColor="transparent" horizontal={true} showsButtons={false}>
  589. {this.renderAdTypeSwiper()}
  590. </Swiper> */}
  591. <View style={styles.adTypeSwiper02}>
  592. <Carousel
  593. ref={'carousel02'}
  594. data={adDataList}
  595. renderItem={this.setSwiperItemDom}
  596. sliderWidth={curWidthNum}
  597. itemWidth={curWidthNum}
  598. itemHeight={134}
  599. sliderHeight={134}
  600. activeSlideOffset={0}
  601. autoplay={true}
  602. loop={true}
  603. autoplayInterval={3000}
  604. />
  605. </View>
  606. <View style={styles.bottomBox}>
  607. <View style={styles.bottomLogoBackground}>
  608. <Image source={{ uri: this.state.baseInfo.imgUrlH}} resizeMode='contain' style={styles.bottomLogo} />
  609. </View>
  610. <View style={styles.bottomQrcode1Background}>
  611. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.bottomQrcode1} />
  612. <Text style={styles.bottomQrcode1Str}>小程序</Text>
  613. </View>
  614. <View style={styles.bottomQrcode2Background}>
  615. <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp}} resizeMode='center' style={styles.bottomQrcode2} />
  616. <Text style={styles.bottomQrcode1Str}>公众号</Text>
  617. </View>
  618. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  619. </View>
  620. </ImageBackground>
  621. );
  622. } else if (this.state.adType == 1) {
  623. return(
  624. <Carousel
  625. ref={'carousel01'}
  626. data={adDataBgList}
  627. renderItem={this.setAdSwiperItemDom}
  628. sliderWidth={1080}
  629. itemWidth={1080}
  630. itemHeight={1920}
  631. sliderHeight={1920}
  632. activeSlideOffset={0}
  633. autoplay={true}
  634. loop={true}
  635. autoplayInterval={3000}
  636. />
  637. )
  638. }
  639. }
  640. else {
  641. return (
  642. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  643. {/* 头部title二维码开始 */}
  644. <View style={styles.title}>
  645. </View>
  646. {/* 券列表展示列表开始 */}
  647. {this.getContentView()}
  648. {/* 底部商场信息展示开始 */}
  649. <View style={styles.bottom}>
  650. <View style={styles.bottomLogoBackground}>
  651. </View>
  652. <View style={styles.bottomQrcode1Background}>
  653. </View>
  654. <View style={styles.bottomQrcode2Background}>
  655. </View>
  656. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  657. </View>
  658. </ImageBackground>
  659. );
  660. }
  661. }
  662. render() {
  663. if (this.state.updating) {
  664. return this.getUpdateView();
  665. }
  666. return this.getAdView();
  667. }
  668. }
  669. MyPage = CodePush(codePushOptions)(MyPage);
  670. const styles = StyleSheet.create({
  671. updatePage:{
  672. flex: 2,
  673. width:'100%',
  674. height:'100%',
  675. backgroundColor:'transparent',
  676. textAlign :'center',
  677. textAlignVertical:'center',
  678. fontSize: 63/PixelRatio.get(),
  679. color: 'darkblue'
  680. },
  681. //layer background
  682. background:{
  683. flex: 1,
  684. width:'100%',
  685. height:'100%'
  686. },
  687. //layer top
  688. title:{
  689. flex: 6,
  690. flexDirection: 'row',
  691. alignItems: 'center',
  692. paddingLeft:42/PixelRatio.get(),
  693. paddingRight:42/PixelRatio.get(),
  694. backgroundColor:'transparent'
  695. },
  696. content:{
  697. flex: 18,
  698. flexDirection: 'column',
  699. alignItems: 'center',
  700. backgroundColor:'transparent'
  701. },
  702. bottom:{
  703. flex: 2,
  704. flexDirection: 'row',
  705. alignItems: 'center',
  706. paddingLeft:42/PixelRatio.get(),
  707. paddingRight:42/PixelRatio.get(),
  708. backgroundColor:'transparent'
  709. },
  710. //layer title
  711. titleImagePlace: {
  712. flex: 2,
  713. paddingTop: '20%',
  714. paddingLeft: '15%',
  715. alignItems: 'center',
  716. backgroundColor:'transparent'
  717. },
  718. titleImage: {
  719. width:'100%',
  720. height:'100%',
  721. flex: 1,
  722. backgroundColor:'transparent'
  723. },
  724. titleQrcodeBonder: {
  725. width:'100%',
  726. height:'100%',
  727. alignItems: 'center',
  728. flexDirection: 'column',
  729. flex: 1,
  730. backgroundColor:'transparent'
  731. },
  732. titleQrcodePlacehold: {
  733. flex: 5,
  734. backgroundColor:'transparent'
  735. },
  736. titleQrcode: {
  737. flex: 6,
  738. width:'100%',
  739. height:'100%',
  740. backgroundColor:'transparent'
  741. },
  742. //layer bottom
  743. bottomLogoBackground: {
  744. flex: 3,
  745. borderRadius:16/PixelRatio.get(),
  746. marginTop: 26/PixelRatio.get(),
  747. marginBottom: 26/PixelRatio.get(),
  748. backgroundColor:'transparent',//'rgba(255,255,255,0.5)',
  749. },
  750. bottomLogo: {
  751. width:'100%',
  752. height:'100%',
  753. backgroundColor:'transparent'
  754. },
  755. bottomQrcode1Background : {
  756. flex: 1,
  757. width:'100%',
  758. height:'100%',
  759. marginLeft: 21/PixelRatio.get(),
  760. paddingTop: 27/PixelRatio.get(),
  761. paddingBottom: 11/PixelRatio.get(),
  762. flexDirection: 'column',
  763. backgroundColor:'transparent'
  764. },
  765. bottomQrcode2Background : {
  766. flex: 1,
  767. width:'100%',
  768. height:'100%',
  769. marginLeft: 21/PixelRatio.get(),
  770. paddingTop: 26/PixelRatio.get(),
  771. paddingBottom: 11/PixelRatio.get(),
  772. flexDirection: 'column',
  773. backgroundColor:'transparent'
  774. },
  775. bottomQrcode1: {
  776. flex: 2,
  777. width:'100%',
  778. height:'100%',
  779. backgroundColor:'transparent'
  780. },
  781. bottomQrcode2: {
  782. flex: 2,
  783. width:'100%',
  784. height:'100%',
  785. backgroundColor:'transparent'
  786. },
  787. bottomQrcode1Str: {
  788. flex: 1,
  789. textAlign :'center',
  790. textAlignVertical:'center',
  791. fontSize: 16/PixelRatio.get(),
  792. color : 'white',
  793. backgroundColor:'transparent'
  794. },
  795. bottomQrcode2Str: {
  796. flex: 1,
  797. textAlign :'center',
  798. textAlignVertical:'center',
  799. fontSize: 16/PixelRatio.get(),
  800. color : 'white',
  801. backgroundColor:'transparent'
  802. },
  803. bottomPlacehold: {
  804. flex: 8,
  805. width:'100%',
  806. height:'100%',
  807. backgroundColor:'transparent',
  808. textAlign :'right',
  809. textAlignVertical:'bottom',
  810. fontSize: 27/PixelRatio.get(),
  811. color : 'gray'
  812. },
  813. //layer content item
  814. contentItem:{
  815. flex: 1,
  816. width:'100%',
  817. height:'100%',
  818. flexDirection: 'column',
  819. backgroundColor:'transparent'
  820. },
  821. contentItemDownLayer:{
  822. position:'absolute',
  823. width:'100%',
  824. height:'100%',
  825. flexDirection: 'column',
  826. alignItems: 'center',
  827. backgroundColor:'transparent'
  828. },
  829. contentItemUpLayer:{
  830. width:210/PixelRatio.get(),
  831. height:153/PixelRatio.get(),
  832. position:'absolute',
  833. backgroundColor:'transparent'
  834. },
  835. contentItemTop:{
  836. flex: 3,
  837. width:'100%',
  838. height:'100%',
  839. paddingLeft: 66/PixelRatio.get(),
  840. paddingRight: 53/PixelRatio.get(),
  841. paddingTop: 40/PixelRatio.get(),
  842. flexDirection: 'row',
  843. alignItems: 'center',
  844. backgroundColor:'transparent'
  845. },
  846. contentItemBottom:{
  847. flex: 1,
  848. width:'100%',
  849. height:'100%',
  850. paddingLeft: 66/PixelRatio.get(),
  851. paddingRight: 53/PixelRatio.get(),
  852. paddingBottom: 40/PixelRatio.get(),
  853. flexDirection: 'row',
  854. alignItems: 'center',
  855. backgroundColor:'transparent'
  856. },
  857. //layer content item top
  858. contentItemTopCoverImg:{
  859. flex: 5,
  860. width:'100%',
  861. height:'100%',
  862. borderRadius:27/PixelRatio.get(),
  863. backgroundColor:'transparent'
  864. },
  865. contentItemTopDetail:{
  866. flex: 6,
  867. width:'100%',
  868. height:'100%',
  869. paddingLeft: 20/PixelRatio.get(),
  870. paddingRight: 20/PixelRatio.get(),
  871. alignItems: 'center',
  872. backgroundColor:'transparent'
  873. },
  874. contentItemTopQrcode:{
  875. flex: 5,
  876. width:'100%',
  877. height:'100%',
  878. marginLeft:18/PixelRatio.get(),
  879. // backgroundColor:'transparent'
  880. },
  881. contentItemTopQrcodeBox:{
  882. flex: 5,
  883. width:'100%',
  884. height:'100%',
  885. flexDirection: 'column',
  886. alignItems: 'center',
  887. justifyContent: 'center',
  888. marginLeft: -28/PixelRatio.get(),
  889. // backgroundColor:'transparent'
  890. },
  891. contentItemTopQrcode02:{
  892. width:'80%',
  893. height:'70%',
  894. },
  895. //layer content item bottom
  896. contentItemBottomMerchantName:{
  897. flex: 5,
  898. width:'100%',
  899. height:'100%',
  900. alignItems: 'center',
  901. color:"black",
  902. backgroundColor:'transparent',
  903. textAlign :'center',
  904. textAlignVertical:'center',
  905. fontSize: 27/PixelRatio.get(),
  906. fontWeight : 'bold',
  907. },
  908. contentItemBottomPlacehold:{
  909. flex: 6,
  910. fontSize: 27/PixelRatio.get(),
  911. paddingLeft: 27/PixelRatio.get(),
  912. paddingRight: 79/PixelRatio.get(),
  913. width:'100%',
  914. height:'100%',
  915. color:"black",
  916. textAlignVertical:'center',
  917. backgroundColor:'transparent',
  918. },
  919. contentItemBottomAction:{
  920. flex: 5,
  921. width:'100%',
  922. height:'100%',
  923. backgroundColor:'transparent',
  924. textAlign :'center',
  925. textAlignVertical:'center',
  926. fontSize: 36/PixelRatio.get(),
  927. color: 'black',
  928. },
  929. contentItemBottomAction02:{
  930. width:'100%',
  931. height: 60/PixelRatio.get(),
  932. backgroundColor:'transparent',
  933. textAlign :'center',
  934. textAlignVertical:'center',
  935. fontSize: 36/PixelRatio.get(),
  936. color: 'black',
  937. },
  938. // 券的title
  939. contentItemTopDetailTitle:{
  940. flex: 2,
  941. // height:'100%',
  942. width:'100%',
  943. marginTop:"2%",
  944. backgroundColor:'transparent',
  945. textAlign :'left',
  946. color:"black",
  947. textAlignVertical:'center',
  948. fontSize: 53/PixelRatio.get(),
  949. },
  950. // 券的title
  951. contentItemTopDetailTitle02:{
  952. flex: 2,
  953. // height:'100%',
  954. width:'100%',
  955. marginTop:"2%",
  956. paddingRight: 14/PixelRatio.get(),
  957. backgroundColor:'transparent',
  958. textAlign :'left',
  959. color:"black",
  960. textAlignVertical:'center',
  961. fontSize: 53/PixelRatio.get(),
  962. },
  963. /*
  964. contentItemTopDetailRemark:{
  965. flex: 1,
  966. width:'100%',
  967. height:'100%',
  968. backgroundColor:'transparent',
  969. textAlign :'left',
  970. textAlignVertical:'center',
  971. fontSize: 27/PixelRatio.get(),
  972. color : 'gray'
  973. },
  974. */
  975. contentItemTopDetailPrice:{
  976. flex: 2,
  977. width:'100%',
  978. height:'100%',
  979. backgroundColor:'transparent',
  980. flexDirection: 'row',
  981. },
  982. // 售价的样式
  983. contentItemTopDetailCurPrice:{
  984. position:"absolute",
  985. bottom:10,
  986. left:0,
  987. width:'100%',
  988. height:'100%',
  989. flexDirection: 'row',
  990. backgroundColor:'transparent',
  991. },
  992. contentItemTopDetailCurPriceStr:{
  993. backgroundColor:'transparent',
  994. fontSize:96/PixelRatio.get(),
  995. fontFamily:"PingFangSC-Bold",
  996. fontWeight: "bold",
  997. textAlign :'left',
  998. textAlignVertical:'bottom',
  999. color : 'red'
  1000. },
  1001. contentItemTopDetailCurPriceStr02:{
  1002. backgroundColor:'transparent',
  1003. fontSize:96/PixelRatio.get(),
  1004. fontFamily:"PingFangSC-Bold",
  1005. fontWeight: "bold",
  1006. textAlign :'left',
  1007. color : 'red'
  1008. },
  1009. contentItemTopDetailCurPriceStrUnit:{
  1010. backgroundColor:'transparent',
  1011. textAlign :'left',
  1012. textAlignVertical:'bottom',
  1013. paddingBottom: 16/PixelRatio.get(),
  1014. fontSize: 48/PixelRatio.get(),
  1015. color : 'red'
  1016. },
  1017. contentItemTopDetailCurPriceStrUnit02:{
  1018. backgroundColor:'transparent',
  1019. textAlign :'left',
  1020. textAlignVertical:'center',
  1021. paddingBottom: 16/PixelRatio.get(),
  1022. fontSize: 48/PixelRatio.get(),
  1023. color : 'red'
  1024. },
  1025. // 面额的样式
  1026. contentItemTopDetailSalePrice:{
  1027. position:"absolute",
  1028. bottom:2,
  1029. left:0,
  1030. // flex: 1,
  1031. paddingTop:138/PixelRatio.get(),
  1032. width:'100%',
  1033. // height:'100%',
  1034. backgroundColor:'transparent',
  1035. },
  1036. contentItemTopDetailSalePrice02:{
  1037. position:"absolute",
  1038. bottom:38/PixelRatio.get(),
  1039. left:0,
  1040. // flex: 1,
  1041. paddingTop:138/PixelRatio.get(),
  1042. width:'100%',
  1043. // height:'100%',
  1044. backgroundColor:'transparent',
  1045. },
  1046. contentItemTopDetailSalePriceStr:{
  1047. width:'100%',
  1048. height:'100%',
  1049. backgroundColor:'transparent',
  1050. textAlign :'left',
  1051. textAlignVertical:'bottom',
  1052. fontSize: 27/PixelRatio.get(),
  1053. textDecorationLine: 'line-through',
  1054. color : 'gray'
  1055. },
  1056. contentItemTopDetailSalePriceStr02:{
  1057. width:'100%',
  1058. height:'100%',
  1059. backgroundColor:'transparent',
  1060. textAlignVertical:'center',
  1061. textAlign :'left',
  1062. fontSize: 27/PixelRatio.get(),
  1063. textDecorationLine: 'line-through',
  1064. color : 'gray'
  1065. },
  1066. adTypeBg:{
  1067. flex: 1,
  1068. width: '100%',
  1069. height: '100%',
  1070. },
  1071. adTypeSwiper02:{
  1072. position: 'absolute',
  1073. left: 0,
  1074. bottom: 165/PixelRatio.get(),
  1075. width: '100%',
  1076. height: 369/PixelRatio.get(),
  1077. },
  1078. adTypeItemImgWrap:{
  1079. flex: 1,
  1080. width: '100%',
  1081. height: 369/PixelRatio.get(),
  1082. flexDirection: 'row',
  1083. alignItems: 'center',
  1084. },
  1085. adTypeItemImg:{
  1086. width: 275/PixelRatio.get(),
  1087. height: 275/PixelRatio.get(),
  1088. marginLeft: 50/PixelRatio.get(),
  1089. marginTop: 30/PixelRatio.get(),
  1090. borderRadius:27/PixelRatio.get(),
  1091. backgroundColor:'transparent'
  1092. },
  1093. bottomBox:{
  1094. position: 'absolute',
  1095. bottom: 20/PixelRatio.get(),
  1096. left: 0,
  1097. width: '100%',
  1098. height: 130/PixelRatio.get(),
  1099. flexDirection: 'row',
  1100. alignItems: 'center',
  1101. backgroundColor:'transparent',
  1102. },
  1103. contentItemTopForAd:{
  1104. flex: 1,
  1105. width: 1080/PixelRatio.get(),
  1106. // width: '100%',
  1107. height:'100%',
  1108. paddingLeft: 22/PixelRatio.get(),
  1109. paddingRight: 26/PixelRatio.get(),
  1110. flexDirection: 'row',
  1111. alignItems: 'flex-start',
  1112. borderRadius: 6,
  1113. backgroundColor:'transparent',
  1114. },
  1115. onlyAdSwiperItem:{
  1116. width: '100%',
  1117. height: '100%',
  1118. },
  1119. onlyAdTypeItemImg:{
  1120. width: '100%',
  1121. height: '100%',
  1122. }
  1123. });