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

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