广告屏react-native项目
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

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