广告屏react-native项目
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
 
 

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