广告屏react-native项目
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 
 
 

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