广告屏react-native项目
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 
 

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