广告屏react-native项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

1194 line
34 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. }
  261. this.setState({adType: num })
  262. }
  263. getAdDataList(first) {
  264. HttpUtils.get(NativeModules.BuildConfig.apiHost
  265. + 'api/wxDeviceScreenAd/list?deviceId='
  266. + encodeURIComponent(this.state.macAddress)
  267. + '&pageNum=1&pageSize=1000')
  268. .then(result => {
  269. if (result.code != 200) {
  270. this.showErrMsg(result.message+'\n'+this.state.macAddress);
  271. } else if (result.data.list) {
  272. //aaa
  273. result.data.list[4].type = 2;
  274. result.data.list[5].type = 2;
  275. console.log(result.data)
  276. //type==0的是券 1是? 2是广告大图
  277. let curData = result.data.list;
  278. this.dealLoopType(curData);
  279. if (this.updateContent()) {
  280. this.setState({contentDisplayStatus: true})
  281. } else {
  282. this.showErrMsg(errorMsg.ERR_NO_DATA);
  283. }
  284. } else {
  285.  this.showErrMsg(errorMsg.ERR_DATA_GET);
  286. }
  287. })
  288. .catch(error => {
  289. if (first) {
  290. this.showErrMsg(error.message);
  291. }
  292. else {
  293. requestFailedCount++
  294. this.setState({ versionInfo: versionInfo+`[${requestFailedCount}]`});
  295. }
  296. })
  297. }
  298. getBaseInfo() {
  299. HttpUtils.get(NativeModules.BuildConfig.apiHost
  300. + 'api/wxDeviceScreenAd/info?deviceId='
  301. + encodeURIComponent(this.state.macAddress))
  302. .then(result => {
  303. if (result.code != 200) {
  304. this.showErrMsg(result.message+'\n'+this.state.macAddress);
  305. } else if (result.data) {
  306. this.setState({baseInfo:result.data});
  307. } else {
  308. this.showErrMsg(errorMsg.ERR_DATA_GET);
  309. }
  310. })
  311. .catch(error => {
  312. this.showErrMsg(error.message);
  313. })
  314. }
  315. componentWillUnmount(){
  316. if (timer)
  317. clearTimeout(timer)
  318. }
  319. async routine() {
  320. hbRequestCount -=1;
  321. getAdDataCount -=1;
  322. pageChangeCount -=1;
  323. try {
  324. if (getAdDataCount<=0) {
  325. this.getAdDataList(false)
  326. getAdDataCount = heartConfig.dataRefreshInterval
  327. } else if (hbRequestCount<=0) {
  328. this.hbRequest()
  329. hbRequestCount = heartConfig.heartbeatInterval
  330. }
  331. //如果是adType == 2时间间隔到了,要检验轮播是否走完在决定切换
  332. if (this.state.adType == 2) {
  333. if (pageChangeCount<=0) {
  334. let curNum = this.state.curAdType02Index + 1;
  335. if (curNum >= adDataList.length) {
  336. curNum = 0;
  337. }
  338. this.setState({
  339. curAdType02Index: curNum,
  340. curCoverImgUrl:adDataBgList[curNum].coverImg
  341. })
  342. pageChangeCount = heartConfig.pageChangeInterval
  343. }
  344. } else if (this.state.adType == 0) {
  345. if (pageChangeCount <= 0) { //页面切换间隔
  346. if (this.state.contentDisplayStatus && this.state.baseInfo) {
  347. this.setState({ contentDisplayStatus: false})
  348. if (this.updateContent()) {
  349. this.setState({ contentDisplayStatus: true})
  350. }
  351. } else {
  352. await this.getBaseInfo()
  353. await this.getAdDataList(true)
  354. getAdDataCount = heartConfig.dataRefreshInterval
  355. hbRequestCount = heartConfig.heartbeatInterval
  356. }
  357. pageChangeCount = heartConfig.pageChangeInterval
  358. }
  359. }
  360. } catch(e){
  361. this.setState({ versionInfo: versionInfo+'[E]'});
  362. }
  363. timer = setTimeout(()=>{
  364. this.routine();
  365. },1000);
  366. }
  367. startAd() {
  368. hbRequestCount = 0;
  369. getAdDataCount = 0;
  370. pageChangeCount = 0;
  371. this.routine();
  372. }
  373. getContentViewItemUplayer(contentItem) {
  374. if (contentItem.type == 0) {
  375. if (contentItem.subType == 2)
  376. return (<Image source={require('./image/timed.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  377. if (contentItem.subType == 6)
  378. return (<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  379. if (contentItem.subType == 7)
  380. return (<Image source={require('./image/groupbuy.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  381. return null;
  382. }
  383. }
  384. getContentViewItemActionStr(contentItem) {
  385. if (contentItem.type == 0) {
  386. if (contentItem.subType == 2)
  387. return '扫码秒杀';
  388. else if (contentItem.subType == 6)
  389. return '扫码砍价';
  390. else if (contentItem.subType == 7)
  391. return '扫码拼团';
  392. else
  393. return '扫码领取';
  394. }
  395. }
  396. getContentViewItemMerchantName(contentItem) {
  397. if (contentItem.type == 0) {
  398. if (contentItem.target.merchantVoList.length > 1)
  399. return '多商户通用';
  400. else
  401. return contentItem.target.merchantVoList[0].merchantName;
  402. }
  403. }
  404. getContentViewItem(contentItem, annomation) {
  405. if (!contentItem)
  406. return (
  407. <View style={styles.contentItem}>
  408. </View>
  409. )
  410. actionText = this.getContentViewItemActionStr(contentItem);
  411. merchantName = this.getContentViewItemMerchantName(contentItem);
  412. // console.warn(annomation)
  413. return (
  414. <Animatable.View animation={annomation} style={styles.contentItem}>
  415. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  416. {/* 列表 */}
  417. <View style={styles.contentItemTop}>
  418. <Image source={{uri: contentItem.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
  419. <View style={styles.contentItemTopDetail}>
  420. {/* 券的title */}
  421. <Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text>
  422. <View style={styles.contentItemTopDetailPrice}>
  423. {/* 售价 */}
  424. <View style={styles.contentItemTopDetailCurPrice}>
  425. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>¥</Text>
  426. <Text style={styles.contentItemTopDetailCurPriceStr}>{contentItem.target.salePriceStr}</Text>
  427. </View>
  428. {/* 面额 */}
  429. <View style={styles.contentItemTopDetailSalePrice}>
  430. <Text style={styles.contentItemTopDetailSalePriceStr} >¥{contentItem.target.priceStr}</Text>
  431. </View>
  432. </View>
  433. </View>
  434. {/* <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> */}
  435. <Image source={{uri:contentItem.target.qrCode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  436. </View>
  437. {/* 优惠券底部商户名称 */}
  438. <View style={styles.contentItemBottom}>
  439. <Text style={styles.contentItemBottomMerchantName}>{merchantName}</Text>
  440. <Text style={styles.contentItemBottomPlacehold}>{contentItem.target.merchantVoList[0].buildingName}{contentItem.target.merchantVoList[0].floorName}</Text>
  441. <Text style={styles.contentItemBottomAction}>{actionText}</Text>
  442. </View>
  443. </ImageBackground>
  444. {this.getContentViewItemUplayer(contentItem)}
  445. </Animatable.View>
  446. )
  447. }
  448. getContentView() {
  449. if (this.state.contentDisplayStatus) {
  450. return (<View style={styles.content}>
  451. {this.getContentViewItem(this.state.contentItem0,this.state.animationTheme.first)}
  452. {this.getContentViewItem(this.state.contentItem1,this.state.animationTheme.second)}
  453. {this.getContentViewItem(this.state.contentItem2,this.state.animationTheme.third)}
  454. </View>)
  455. }else{
  456. return (
  457. <View style={styles.content}>
  458. <Text style={styles.updatePage}>{this.state.errorMessage}</Text>
  459. </View>)
  460. }
  461. }
  462. setSwiperItemDom(item) {
  463. let contentItem = item.item;
  464. let index = item.index;
  465. actionText = '扫码秒杀';
  466. if (contentItem.type == 0) {
  467. if (contentItem.subType == 2)
  468. actionText = '扫码秒杀';
  469. else if (contentItem.subType == 6)
  470. actionText = '扫码砍价';
  471. else if (contentItem.subType == 7)
  472. actionText = '扫码拼团';
  473. else
  474. actionText = '扫码领取';
  475. }
  476. return (
  477. <ImageBackground style={styles.contentItemTopForAd} resizeMode="stretch" key={index} source={require('./image/item-background.png')}>
  478. {/* <ImageBackground style={styles.adTypeSwiper02} resizeMode="stretch" source={require('./image/item-background.png')}></ImageBackground> */}
  479. <Image source={{uri: contentItem.coverImg}} resizeMode='cover' style={styles.adTypeItemImg} />
  480. <View style={styles.contentItemTopDetail}>
  481. {/* 券的title */}
  482. <Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text>
  483. <View style={styles.contentItemTopDetailPrice}>
  484. {/* 售价 */}
  485. <View style={styles.contentItemTopDetailCurPrice}>
  486. <Text style={styles.contentItemTopDetailCurPriceStrUnit02}>¥</Text>
  487. <Text style={styles.contentItemTopDetailCurPriceStr02}>{contentItem.target.salePriceStr}</Text>
  488. </View>
  489. {/* 面额 */}
  490. <View style={styles.contentItemTopDetailSalePrice02}>
  491. <Text style={styles.contentItemTopDetailSalePriceStr02} >¥{contentItem.target.priceStr}</Text>
  492. </View>
  493. </View>
  494. </View>
  495. {/* <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> */}
  496. <View style={styles.contentItemTopQrcodeBox}>
  497. <Image source={{uri:contentItem.target.qrCode}} resizeMode='contain' style={styles.contentItemTopQrcode02} />
  498. <Text style={styles.contentItemBottomAction02}>{actionText}</Text>
  499. </View>
  500. </ImageBackground>
  501. )
  502. }
  503. renderAdTypeSwiper() {
  504. if (this.state.contentDisplayStatus) {
  505. let adSwiperDomStack = [];
  506. //aaa
  507. adDataList.map((item,index) => {
  508. item.target.qrCode = 'https://iformall-net.s3.cn-northwest-1.amazonaws.com.cn/null/73ddb1e4-8f19-4d5d-8387-742d3d5d2c77.png'
  509. adSwiperDomStack.push(this.setSwiperItemDom(item, index))
  510. })
  511. return adSwiperDomStack;
  512. }else{
  513. return (
  514. <View style={styles.content}>
  515. <Text style={styles.updatePage}>{this.state.errorMessage}</Text>
  516. </View>
  517. )
  518. }
  519. }
  520. getUpdateView() {
  521. if (this.state.progress.totalBytes > 0)
  522. return (
  523. <Text style={styles.updatePage}>{this.state.syncMessage}{'\n'}
  524. {this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received{'\n'}
  525. </Text>
  526. );
  527. return (
  528. <Text style={styles.updatePage}>{this.state.syncMessage}
  529. </Text>
  530. );
  531. }
  532. getAdView(){
  533. if (this.state.baseInfo) {
  534. if (this.state.adType == 0) {
  535. return (
  536. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  537. {/* 头部title二维码开始 */}
  538. <View style={styles.title}>
  539. <View style={styles.titleImagePlace}>
  540. <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
  541. </View>
  542. <ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} >
  543. <View style={styles.titleQrcodePlacehold}></View>
  544. <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
  545. <View style={styles.titleQrcodePlacehold}></View>
  546. </ImageBackground>
  547. </View>
  548. {/* 券列表展示列表开始 */}
  549. {this.getContentView()}
  550. {/* 底部商场信息展示开始 */}
  551. <View style={styles.bottom}>
  552. <View style={styles.bottomLogoBackground}>
  553. <Image source={{ uri: this.state.baseInfo.imgUrlH}} resizeMode='contain' style={styles.bottomLogo} />
  554. </View>
  555. <View style={styles.bottomQrcode1Background}>
  556. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.bottomQrcode1} />
  557. <Text style={styles.bottomQrcode1Str}>小程序</Text>
  558. </View>
  559. <View style={styles.bottomQrcode2Background}>
  560. <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp}} resizeMode='center' style={styles.bottomQrcode2} />
  561. <Text style={styles.bottomQrcode1Str}>公众号</Text>
  562. </View>
  563. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  564. </View>
  565. </ImageBackground>
  566. );
  567. } else if (this.state.adType == 2) {
  568. let curWidthNum = 394*PixelRatio.get();
  569. return (
  570. // <ImageBackground style={styles.adTypeBg} source={require('./image/ad1.jpg')}>
  571. <ImageBackground style={styles.adTypeBg} resizeMode="stretch" source={{ uri: this.state.curCoverImgUrl}}>
  572. {/* adType == 2 滚动轮播 */}
  573. {/* <Swiper ref='scrollView' style={styles.adTypeSwiper02} autoplay={true} autoplayTimeout={1} showPagination={false}
  574. dotColor="transparent" activeDotColor="transparent" horizontal={true} showsButtons={false}>
  575. {this.renderAdTypeSwiper()}
  576. </Swiper> */}
  577. <View style={styles.adTypeSwiper02}>
  578. <Carousel
  579. ref={'carousel'}
  580. data={adDataList}
  581. renderItem={this.setSwiperItemDom}
  582. sliderWidth={curWidthNum}
  583. itemWidth={curWidthNum}
  584. itemHeight={134}
  585. sliderHeight={134}
  586. activeSlideOffset={0}
  587. autoplay={true}
  588. loop={true}
  589. autoplayInterval={2500}
  590. />
  591. </View>
  592. <View style={styles.bottomBox}>
  593. <View style={styles.bottomLogoBackground}>
  594. <Image source={{ uri: this.state.baseInfo.imgUrlH}} resizeMode='contain' style={styles.bottomLogo} />
  595. </View>
  596. <View style={styles.bottomQrcode1Background}>
  597. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.bottomQrcode1} />
  598. <Text style={styles.bottomQrcode1Str}>小程序</Text>
  599. </View>
  600. <View style={styles.bottomQrcode2Background}>
  601. <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp}} resizeMode='center' style={styles.bottomQrcode2} />
  602. <Text style={styles.bottomQrcode1Str}>公众号</Text>
  603. </View>
  604. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  605. </View>
  606. </ImageBackground>
  607. );
  608. }
  609. }
  610. else {
  611. return (
  612. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  613. {/* 头部title二维码开始 */}
  614. <View style={styles.title}>
  615. </View>
  616. {/* 券列表展示列表开始 */}
  617. {this.getContentView()}
  618. {/* 底部商场信息展示开始 */}
  619. <View style={styles.bottom}>
  620. <View style={styles.bottomLogoBackground}>
  621. </View>
  622. <View style={styles.bottomQrcode1Background}>
  623. </View>
  624. <View style={styles.bottomQrcode2Background}>
  625. </View>
  626. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  627. </View>
  628. </ImageBackground>
  629. );
  630. }
  631. }
  632. render() {
  633. if (this.state.updating) {
  634. return this.getUpdateView();
  635. }
  636. return this.getAdView();
  637. }
  638. }
  639. MyPage = CodePush(codePushOptions)(MyPage);
  640. const styles = StyleSheet.create({
  641. updatePage:{
  642. flex: 2,
  643. width:'100%',
  644. height:'100%',
  645. backgroundColor:'transparent',
  646. textAlign :'center',
  647. textAlignVertical:'center',
  648. fontSize: 63/PixelRatio.get(),
  649. color: 'darkblue'
  650. },
  651. //layer background
  652. background:{
  653. flex: 1,
  654. width:'100%',
  655. height:'100%'
  656. },
  657. //layer top
  658. title:{
  659. flex: 6,
  660. flexDirection: 'row',
  661. alignItems: 'center',
  662. paddingLeft:42/PixelRatio.get(),
  663. paddingRight:42/PixelRatio.get(),
  664. backgroundColor:'transparent'
  665. },
  666. content:{
  667. flex: 18,
  668. flexDirection: 'column',
  669. alignItems: 'center',
  670. backgroundColor:'transparent'
  671. },
  672. bottom:{
  673. flex: 2,
  674. flexDirection: 'row',
  675. alignItems: 'center',
  676. paddingLeft:42/PixelRatio.get(),
  677. paddingRight:42/PixelRatio.get(),
  678. backgroundColor:'transparent'
  679. },
  680. //layer title
  681. titleImagePlace: {
  682. flex: 2,
  683. paddingTop: '20%',
  684. paddingLeft: '15%',
  685. alignItems: 'center',
  686. backgroundColor:'transparent'
  687. },
  688. titleImage: {
  689. width:'100%',
  690. height:'100%',
  691. flex: 1,
  692. backgroundColor:'transparent'
  693. },
  694. titleQrcodeBonder: {
  695. width:'100%',
  696. height:'100%',
  697. alignItems: 'center',
  698. flexDirection: 'column',
  699. flex: 1,
  700. backgroundColor:'transparent'
  701. },
  702. titleQrcodePlacehold: {
  703. flex: 5,
  704. backgroundColor:'transparent'
  705. },
  706. titleQrcode: {
  707. flex: 6,
  708. width:'100%',
  709. height:'100%',
  710. backgroundColor:'transparent'
  711. },
  712. //layer bottom
  713. bottomLogoBackground: {
  714. flex: 3,
  715. borderRadius:16/PixelRatio.get(),
  716. marginTop: 26/PixelRatio.get(),
  717. marginBottom: 26/PixelRatio.get(),
  718. backgroundColor:'transparent',//'rgba(255,255,255,0.5)',
  719. },
  720. bottomLogo: {
  721. width:'100%',
  722. height:'100%',
  723. backgroundColor:'transparent'
  724. },
  725. bottomQrcode1Background : {
  726. flex: 1,
  727. width:'100%',
  728. height:'100%',
  729. marginLeft: 21/PixelRatio.get(),
  730. paddingTop: 27/PixelRatio.get(),
  731. paddingBottom: 11/PixelRatio.get(),
  732. flexDirection: 'column',
  733. backgroundColor:'transparent'
  734. },
  735. bottomQrcode2Background : {
  736. flex: 1,
  737. width:'100%',
  738. height:'100%',
  739. marginLeft: 21/PixelRatio.get(),
  740. paddingTop: 26/PixelRatio.get(),
  741. paddingBottom: 11/PixelRatio.get(),
  742. flexDirection: 'column',
  743. backgroundColor:'transparent'
  744. },
  745. bottomQrcode1: {
  746. flex: 2,
  747. width:'100%',
  748. height:'100%',
  749. backgroundColor:'transparent'
  750. },
  751. bottomQrcode2: {
  752. flex: 2,
  753. width:'100%',
  754. height:'100%',
  755. backgroundColor:'transparent'
  756. },
  757. bottomQrcode1Str: {
  758. flex: 1,
  759. textAlign :'center',
  760. textAlignVertical:'center',
  761. fontSize: 16/PixelRatio.get(),
  762. color : 'white',
  763. backgroundColor:'transparent'
  764. },
  765. bottomQrcode2Str: {
  766. flex: 1,
  767. textAlign :'center',
  768. textAlignVertical:'center',
  769. fontSize: 16/PixelRatio.get(),
  770. color : 'white',
  771. backgroundColor:'transparent'
  772. },
  773. bottomPlacehold: {
  774. flex: 8,
  775. width:'100%',
  776. height:'100%',
  777. backgroundColor:'transparent',
  778. textAlign :'right',
  779. textAlignVertical:'bottom',
  780. fontSize: 27/PixelRatio.get(),
  781. color : 'gray'
  782. },
  783. //layer content item
  784. contentItem:{
  785. flex: 1,
  786. width:'100%',
  787. height:'100%',
  788. flexDirection: 'column',
  789. backgroundColor:'transparent'
  790. },
  791. contentItemDownLayer:{
  792. position:'absolute',
  793. width:'100%',
  794. height:'100%',
  795. flexDirection: 'column',
  796. alignItems: 'center',
  797. backgroundColor:'transparent'
  798. },
  799. contentItemUpLayer:{
  800. width:210/PixelRatio.get(),
  801. height:153/PixelRatio.get(),
  802. position:'absolute',
  803. backgroundColor:'transparent'
  804. },
  805. contentItemTop:{
  806. flex: 3,
  807. width:'100%',
  808. height:'100%',
  809. paddingLeft: 66/PixelRatio.get(),
  810. paddingRight: 53/PixelRatio.get(),
  811. paddingTop: 40/PixelRatio.get(),
  812. flexDirection: 'row',
  813. alignItems: 'center',
  814. backgroundColor:'transparent'
  815. },
  816. contentItemBottom:{
  817. flex: 1,
  818. width:'100%',
  819. height:'100%',
  820. paddingLeft: 66/PixelRatio.get(),
  821. paddingRight: 53/PixelRatio.get(),
  822. paddingBottom: 40/PixelRatio.get(),
  823. flexDirection: 'row',
  824. alignItems: 'center',
  825. backgroundColor:'transparent'
  826. },
  827. //layer content item top
  828. contentItemTopCoverImg:{
  829. flex: 5,
  830. width:'100%',
  831. height:'100%',
  832. borderRadius:27/PixelRatio.get(),
  833. backgroundColor:'transparent'
  834. },
  835. contentItemTopDetail:{
  836. flex: 6,
  837. width:'100%',
  838. height:'100%',
  839. paddingLeft: 20/PixelRatio.get(),
  840. paddingRight: 20/PixelRatio.get(),
  841. alignItems: 'center',
  842. backgroundColor:'transparent'
  843. },
  844. contentItemTopQrcode:{
  845. flex: 5,
  846. width:'100%',
  847. height:'100%',
  848. marginLeft:18/PixelRatio.get(),
  849. // backgroundColor:'transparent'
  850. },
  851. contentItemTopQrcodeBox:{
  852. flex: 5,
  853. width:'100%',
  854. height:'100%',
  855. flexDirection: 'column',
  856. alignItems: 'center',
  857. justifyContent: 'center',
  858. marginLeft: -28/PixelRatio.get(),
  859. // backgroundColor:'transparent'
  860. },
  861. contentItemTopQrcode02:{
  862. width:'80%',
  863. height:'70%',
  864. },
  865. //layer content item bottom
  866. contentItemBottomMerchantName:{
  867. flex: 5,
  868. width:'100%',
  869. height:'100%',
  870. alignItems: 'center',
  871. color:"black",
  872. backgroundColor:'transparent',
  873. textAlign :'center',
  874. textAlignVertical:'center',
  875. fontSize: 27/PixelRatio.get(),
  876. fontWeight : 'bold',
  877. },
  878. contentItemBottomPlacehold:{
  879. flex: 6,
  880. fontSize: 27/PixelRatio.get(),
  881. paddingLeft: 27/PixelRatio.get(),
  882. paddingRight: 79/PixelRatio.get(),
  883. width:'100%',
  884. height:'100%',
  885. color:"black",
  886. textAlignVertical:'center',
  887. backgroundColor:'transparent',
  888. },
  889. contentItemBottomAction:{
  890. flex: 5,
  891. width:'100%',
  892. height:'100%',
  893. backgroundColor:'transparent',
  894. textAlign :'center',
  895. textAlignVertical:'center',
  896. fontSize: 36/PixelRatio.get(),
  897. color: 'black',
  898. },
  899. contentItemBottomAction02:{
  900. width:'100%',
  901. height: 60/PixelRatio.get(),
  902. backgroundColor:'transparent',
  903. textAlign :'center',
  904. textAlignVertical:'center',
  905. fontSize: 36/PixelRatio.get(),
  906. color: 'black',
  907. },
  908. // 券的title
  909. contentItemTopDetailTitle:{
  910. flex: 2,
  911. // height:'100%',
  912. width:'100%',
  913. marginTop:"2%",
  914. backgroundColor:'transparent',
  915. textAlign :'left',
  916. color:"black",
  917. textAlignVertical:'center',
  918. fontSize: 53/PixelRatio.get(),
  919. },
  920. /*
  921. contentItemTopDetailRemark:{
  922. flex: 1,
  923. width:'100%',
  924. height:'100%',
  925. backgroundColor:'transparent',
  926. textAlign :'left',
  927. textAlignVertical:'center',
  928. fontSize: 27/PixelRatio.get(),
  929. color : 'gray'
  930. },
  931. */
  932. contentItemTopDetailPrice:{
  933. flex: 2,
  934. width:'100%',
  935. height:'100%',
  936. backgroundColor:'transparent',
  937. flexDirection: 'row',
  938. },
  939. // 售价的样式
  940. contentItemTopDetailCurPrice:{
  941. position:"absolute",
  942. bottom:10,
  943. left:0,
  944. width:'100%',
  945. height:'100%',
  946. flexDirection: 'row',
  947. backgroundColor:'transparent',
  948. },
  949. contentItemTopDetailCurPriceStr:{
  950. backgroundColor:'transparent',
  951. fontSize:96/PixelRatio.get(),
  952. fontFamily:"PingFangSC-Bold",
  953. fontWeight: "bold",
  954. textAlign :'left',
  955. textAlignVertical:'bottom',
  956. color : 'red'
  957. },
  958. contentItemTopDetailCurPriceStr02:{
  959. backgroundColor:'transparent',
  960. fontSize:96/PixelRatio.get(),
  961. fontFamily:"PingFangSC-Bold",
  962. fontWeight: "bold",
  963. textAlign :'left',
  964. color : 'red'
  965. },
  966. contentItemTopDetailCurPriceStrUnit:{
  967. backgroundColor:'transparent',
  968. textAlign :'left',
  969. textAlignVertical:'bottom',
  970. paddingBottom: 16/PixelRatio.get(),
  971. fontSize: 48/PixelRatio.get(),
  972. color : 'red'
  973. },
  974. contentItemTopDetailCurPriceStrUnit02:{
  975. backgroundColor:'transparent',
  976. textAlign :'left',
  977. textAlignVertical:'center',
  978. paddingBottom: 16/PixelRatio.get(),
  979. fontSize: 48/PixelRatio.get(),
  980. color : 'red'
  981. },
  982. // 面额的样式
  983. contentItemTopDetailSalePrice:{
  984. position:"absolute",
  985. bottom:2,
  986. left:0,
  987. // flex: 1,
  988. paddingTop:138/PixelRatio.get(),
  989. width:'100%',
  990. // height:'100%',
  991. backgroundColor:'transparent',
  992. },
  993. contentItemTopDetailSalePrice02:{
  994. position:"absolute",
  995. bottom:38/PixelRatio.get(),
  996. left:0,
  997. // flex: 1,
  998. paddingTop:138/PixelRatio.get(),
  999. width:'100%',
  1000. // height:'100%',
  1001. backgroundColor:'transparent',
  1002. },
  1003. contentItemTopDetailSalePriceStr:{
  1004. width:'100%',
  1005. height:'100%',
  1006. backgroundColor:'transparent',
  1007. textAlign :'left',
  1008. textAlignVertical:'bottom',
  1009. fontSize: 27/PixelRatio.get(),
  1010. textDecorationLine: 'line-through',
  1011. color : 'gray'
  1012. },
  1013. contentItemTopDetailSalePriceStr02:{
  1014. width:'100%',
  1015. height:'100%',
  1016. backgroundColor:'transparent',
  1017. textAlignVertical:'center',
  1018. textAlign :'left',
  1019. fontSize: 27/PixelRatio.get(),
  1020. textDecorationLine: 'line-through',
  1021. color : 'gray'
  1022. },
  1023. adTypeBg:{
  1024. flex: 1,
  1025. width: '100%',
  1026. height: '100%',
  1027. borderColor:'green',
  1028. borderWidth:1,
  1029. },
  1030. adTypeSwiper02:{
  1031. position: 'absolute',
  1032. left: 0,
  1033. bottom: 165/PixelRatio.get(),
  1034. width: '100%',
  1035. height: 369/PixelRatio.get(),
  1036. borderColor:'blue',
  1037. borderWidth:1,
  1038. },
  1039. adTypeItemImgWrap:{
  1040. flex: 1,
  1041. width: '100%',
  1042. height: 369/PixelRatio.get(),
  1043. flexDirection: 'row',
  1044. alignItems: 'center',
  1045. },
  1046. adTypeItemImg:{
  1047. width: 275/PixelRatio.get(),
  1048. height: 275/PixelRatio.get(),
  1049. marginLeft: 50/PixelRatio.get(),
  1050. marginTop: 30/PixelRatio.get(),
  1051. borderRadius:27/PixelRatio.get(),
  1052. backgroundColor:'transparent'
  1053. },
  1054. bottomBox:{
  1055. position: 'absolute',
  1056. bottom: 20/PixelRatio.get(),
  1057. left: 0,
  1058. width: '100%',
  1059. height: 130/PixelRatio.get(),
  1060. flexDirection: 'row',
  1061. alignItems: 'center',
  1062. backgroundColor:'transparent',
  1063. },
  1064. contentItemTopForAd:{
  1065. flex: 1,
  1066. // width: 1127/PixelRatio.get(),
  1067. width: '100%',
  1068. height:'100%',
  1069. paddingLeft: 22/PixelRatio.get(),
  1070. paddingRight: 26/PixelRatio.get(),
  1071. flexDirection: 'row',
  1072. alignItems: 'flex-start',
  1073. borderRadius: 6,
  1074. backgroundColor:'transparent',
  1075. borderColor:'red',
  1076. borderWidth:1,
  1077. },
  1078. });