广告屏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.
 
 
 
 
 

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