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

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