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

1067 行
30 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. var testMac = 'FF:FF:FF:FF:FF:FF'
  20. var curAdIndex = 0;
  21. var errorMsg = {
  22. ERR_MAC_GET:'设备编号获取错误',
  23. ERR_START_AD:'广告播放系统错误',
  24. ERR_DATA_GET:'广告数据获取错误',
  25. ERR_HEARTBEAT:'设备心跳数据错误',
  26. ERR_NO_DATA:'暂无优惠信息'
  27. }
  28. var animationThemes = [
  29. // 滑入
  30. {
  31. first:"slideInDown",
  32. second:"slideInLeft",
  33. third:"slideInRight"
  34. },
  35. // 放大
  36. {
  37. first:"zoomInDown",
  38. second:"zoomInLeft",
  39. third:"zoomInRight"
  40. },
  41. // 翻转
  42. {
  43. first:"flipInX",
  44. second:"flipInY",
  45. third:"flipInX"
  46. },
  47. // 弹出
  48. {
  49. first:"bounceInDown",
  50. second:"bounceInLeft",
  51. third:"bounceInRight"
  52. }
  53. ]
  54. var timer = null;
  55. var hbRequestCount
  56. var getAdDataCount
  57. var pageChangeCount
  58. var adDataList = [];
  59. var adDataBgList = [];
  60. var heartConfig = {
  61. heartbeatInterval:10,
  62. dataRefreshInterval:3600,
  63. pageChangeInterval:10,
  64. }
  65. var requestFailedCount = 0;
  66. var versionInfo = '';
  67. let codePushOptions = {
  68. //设置检查更新的频率
  69. //ON_APP_RESUME APP恢复到前台的时候
  70. //ON_APP_START APP开启的时候
  71. //MANUAL 手动检查
  72. checkFrequency : CodePush.CheckFrequency.ON_APP_START
  73. };
  74. export default class MyPage extends Component {
  75. constructor(props) {
  76. super(props);
  77. this.state = {
  78. baseInfo: null,
  79. contentItem0:null,
  80. contentItem1:null,
  81. contentItem2:null,
  82. animationTheme:animationThemes[0],
  83. contentDisplayStatus:false,
  84. syncMessage: "初始化..." ,
  85. errorMessage: '加载中...',
  86. progress: {
  87. receivedBytes:0,
  88. totalBytes:0
  89. },
  90. updating:true,
  91. macAddress: '',
  92. versionInfo:'未知',
  93. adType: 0,
  94. };
  95. /* this.codePushUpdate = this.codePushUpdate.bind(this);
  96. this.startAd = this.startAd.bind(this);
  97. this.showErrMsg = this.showErrMsg.bind(this); */
  98. }
  99. componentDidMount() {
  100. this.codePushUpdate();
  101. DeviceInfo.getMACAddress().then((mac)=>{
  102. if (mac=='' || mac==null ) {
  103. if (NativeModules.BuildConfig.buildType == 'debug') {
  104. this.setState({macAddress : this.testMac})
  105. this.startAd()
  106. } else {
  107. this.showErrMsg(errorMsg.ERR_MAC_GET);
  108. }
  109. } else {
  110. this.setState({macAddress : mac})
  111. this.startAd()
  112. }
  113. }).catch(e => {
  114. this.showErrMsg(errorMsg.ERR_START_AD);
  115. })
  116. }
  117. componentDidUpdate() {
  118. console.log(this.refs.scrollView)
  119. if (this.refs.scrollView != undefined) {
  120. var ScrollView = this.refs.scrollView;
  121. ScrollView.scrollBy(0.1, false);
  122. }
  123. }
  124. //更新函数
  125. async codePushUpdate() {
  126. CodePush.allowRestart();
  127. await CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
  128. .then((metadata: LocalPackage) => {
  129. this.setState({ versionInfo: metadata ? 'b'+NativeModules.BuildConfig.versionCode+"-" + metadata.label : 'b'+ NativeModules.BuildConfig.versionCode});
  130. versionInfo = this.state.versionInfo;
  131. }, (error: any) => {
  132. this.setState({ versionInfo: "Unknown"});
  133. versionInfo = this.state.versionInfo;
  134. });
  135. await CodePush.sync(
  136. { mandatoryInstallMode: CodePush.InstallMode.ON_NEXT_RESTART,
  137. installMode: CodePush.InstallMode.ON_NEXT_RESTART},
  138. this.codePushStatusDidChange.bind(this),
  139. this.codePushDownloadDidProgress.bind(this)
  140. ).then((status: SyncStatus) => {
  141. }, (error: any) => {
  142. CodePush.restartApp();
  143. });
  144. }
  145. // 监听更新状态
  146. codePushStatusDidChange(syncStatus) {
  147. switch(syncStatus) {
  148. case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
  149. this.setState({ syncMessage: "检查更新" });
  150. break;
  151. case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
  152. this.setState({ syncMessage: "下载更新" });
  153. break;
  154. case CodePush.SyncStatus.AWAITING_USER_ACTION:
  155. this.setState({ syncMessage: "等待用户操作" });
  156. break;
  157. case CodePush.SyncStatus.INSTALLING_UPDATE:
  158. this.setState({ syncMessage: "安装更新" });
  159. break;
  160. case CodePush.SyncStatus.UP_TO_DATE:
  161. this.setState({ syncMessage: "已更新到最新程序", updating: false });
  162. break;
  163. case CodePush.SyncStatus.UPDATE_IGNORED:
  164. this.setState({ syncMessage: "更新被取消", updating: false });
  165. break;
  166. case CodePush.SyncStatus.UPDATE_INSTALLED:
  167. this.setState({ syncMessage: "更新已安装,重启应用后生效", updating: false });
  168. break;
  169. case CodePush.SyncStatus.UNKNOWN_ERROR:
  170. this.setState({ syncMessage: "未知错误", updating: false });
  171. break;
  172. }
  173. }
  174. codePushDownloadDidProgress(progress) {
  175. this.setState({ progress });
  176. }
  177. // 列表滚动
  178. updateContent() {
  179. if (adDataList.length <=0)
  180. return false;
  181. if (curAdIndex >= adDataList.length) {
  182. curAdIndex = 0;
  183. if (this.state.adType == 0) {
  184. this.setState({adType: 2});
  185. } else if (this.state.adType == 2) {
  186. this.setState({adType: 0});
  187. }
  188. }
  189. this.setState({contentItem0:adDataList[curAdIndex]});
  190. if (curAdIndex + 1 < adDataList.length)
  191. this.setState({contentItem1:adDataList[curAdIndex+1]});
  192. else
  193. this.setState({contentItem1:null});
  194. if (curAdIndex + 2 < adDataList.length)
  195. this.setState({contentItem2:adDataList[curAdIndex+2]});
  196. else
  197. this.setState({contentItem2:null});
  198. curAdIndex+=3
  199. return true;
  200. }
  201. hbRequest() {
  202. return HttpUtils.post(NativeModules.BuildConfig.apiHost
  203. + 'api/wxDeviceScreenAd/heartbeat?deviceId='
  204. + encodeURIComponent(this.state.macAddress),
  205. {version:this.state.versionInfo})
  206. .then(result => {
  207. if (result.code == 200) {
  208. let config = JSON.parse(result.data.config);
  209. console.log(config)
  210. // heartConfig.heartbeatInterval = config.heartbeatInterval
  211. // heartConfig.dataRefreshInterval=config.dataRefreshInterval
  212. // heartConfig.pageChangeInterval=config.pageChangeInterval
  213. heartConfig.heartbeatInterval = 20
  214. heartConfig.dataRefreshInterval=20
  215. heartConfig.pageChangeInterval=2
  216. // 动画划入
  217. if(config.animationTheme == 0){
  218. this.setState({
  219. animationTheme:animationThemes[0]
  220. })
  221. }else if(config.animationTheme == 1){
  222. // 放大
  223. this.setState({
  224. animationTheme:animationThemes[1]
  225. })
  226. }else if(config.animationTheme == 2){
  227. // 淡入
  228. this.setState({
  229. animationTheme:animationThemes[2]
  230. })
  231. }else if(config.animationTheme == 3){
  232. // 弹入
  233. this.setState({
  234. animationTheme:animationThemes[3]
  235. })
  236. }
  237. } else {
  238. //do nothing
  239. }
  240. })
  241. .catch(error => {
  242. requestFailedCount++
  243. this.setState({ versionInfo: versionInfo+`[${requestFailedCount}]`});
  244. })
  245. }
  246.  showErrMsg(errMsg) {
  247. this.setState({contentDisplayStatus: false})
  248. this.setState({errorMessage : errMsg});
  249. }
  250. getAdDataList(first) {
  251. HttpUtils.get(NativeModules.BuildConfig.apiHost
  252. + 'api/wxDeviceScreenAd/list?deviceId='
  253. + encodeURIComponent(this.state.macAddress)
  254. + '&pageNum=1&pageSize=1000')
  255. .then(result => {
  256. if (result.code != 200) {
  257. this.showErrMsg(result.message+'\n'+this.state.macAddress);
  258. } else if (result.data.list) {
  259. //aaa
  260. result.data.list[5].type = 2;
  261. console.log(result.data)
  262. //type==0的是券 1是? 2是广告大图
  263. adDataList = result.data.list.filter((item) => {
  264. return item.type == 0;
  265. })
  266. adDataBgList = result.data.list.filter((item) => {
  267. return item.type == 2;
  268. })
  269. console.log(adDataList)
  270. console.log(adDataBgList)
  271. //aaa
  272. // this.setState({adType: 2 })
  273. if (this.updateContent()) {
  274. this.setState({contentDisplayStatus: true})
  275. } else {
  276. this.showErrMsg(errorMsg.ERR_NO_DATA);
  277. }
  278. } else {
  279.  this.showErrMsg(errorMsg.ERR_DATA_GET);
  280. }
  281. })
  282. .catch(error => {
  283. if (first) {
  284. this.showErrMsg(error.message);
  285. }
  286. else {
  287. requestFailedCount++
  288. this.setState({ versionInfo: versionInfo+`[${requestFailedCount}]`});
  289. }
  290. })
  291. }
  292. getBaseInfo() {
  293. HttpUtils.get(NativeModules.BuildConfig.apiHost
  294. + 'api/wxDeviceScreenAd/info?deviceId='
  295. + encodeURIComponent(this.state.macAddress))
  296. .then(result => {
  297. if (result.code != 200) {
  298. this.showErrMsg(result.message+'\n'+this.state.macAddress);
  299. } else if (result.data) {
  300. this.setState({baseInfo:result.data});
  301. } else {
  302. this.showErrMsg(errorMsg.ERR_DATA_GET);
  303. }
  304. })
  305. .catch(error => {
  306. this.showErrMsg(error.message);
  307. })
  308. }
  309. componentWillUnmount(){
  310. if (timer)
  311. clearTimeout(timer)
  312. }
  313. async routine() {
  314. hbRequestCount -=1;
  315. getAdDataCount -=1;
  316. pageChangeCount -=1;
  317. try {
  318. if (getAdDataCount<=0) {
  319. this.getAdDataList(false)
  320. getAdDataCount = heartConfig.dataRefreshInterval
  321. } else if (hbRequestCount<=0) {
  322. this.hbRequest()
  323. hbRequestCount = heartConfig.heartbeatInterval
  324. }
  325. if (pageChangeCount <= 0) { //页面切换间隔
  326. if (this.state.contentDisplayStatus && this.state.baseInfo) {
  327. this.setState({ contentDisplayStatus: false})
  328. if (this.updateContent()) {
  329. this.setState({ contentDisplayStatus: true})
  330. }
  331. } else {
  332. await this.getBaseInfo()
  333. await this.getAdDataList(true)
  334. getAdDataCount = heartConfig.dataRefreshInterval
  335. hbRequestCount = heartConfig.heartbeatInterval
  336. }
  337. pageChangeCount = heartConfig.pageChangeInterval
  338. }
  339. } catch(e){
  340. this.setState({ versionInfo: versionInfo+'[E]'});
  341. }
  342. timer = setTimeout(()=>{
  343. this.routine();
  344. },1000);
  345. }
  346. startAd() {
  347. hbRequestCount = 0;
  348. getAdDataCount = 0;
  349. pageChangeCount = 0;
  350. this.routine();
  351. }
  352. getContentViewItemUplayer(contentItem) {
  353. if (contentItem.type == 0) {
  354. if (contentItem.subType == 2)
  355. return (<Image source={require('./image/timed.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  356. if (contentItem.subType == 6)
  357. return (<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  358. if (contentItem.subType == 7)
  359. return (<Image source={require('./image/groupbuy.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  360. return null;
  361. }
  362. }
  363. getContentViewItemActionStr(contentItem) {
  364. if (contentItem.type == 0) {
  365. if (contentItem.subType == 2)
  366. return '扫码秒杀';
  367. else if (contentItem.subType == 6)
  368. return '扫码砍价';
  369. else if (contentItem.subType == 7)
  370. return '扫码拼团';
  371. else
  372. return '扫码领取';
  373. }
  374. }
  375. getContentViewItemMerchantName(contentItem) {
  376. if (contentItem.type == 0) {
  377. if (contentItem.target.merchantVoList.length > 1)
  378. return '多商户通用';
  379. else
  380. return contentItem.target.merchantVoList[0].merchantName;
  381. }
  382. }
  383. getContentViewItem(contentItem, annomation) {
  384. if (!contentItem)
  385. return (
  386. <View style={styles.contentItem}>
  387. </View>
  388. )
  389. actionText = this.getContentViewItemActionStr(contentItem);
  390. merchantName = this.getContentViewItemMerchantName(contentItem);
  391. // console.warn(annomation)
  392. return (
  393. <Animatable.View animation={annomation} style={styles.contentItem}>
  394. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  395. {/* 列表 */}
  396. <View style={styles.contentItemTop}>
  397. <Image source={{uri: contentItem.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
  398. <View style={styles.contentItemTopDetail}>
  399. {/* 券的title */}
  400. <Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text>
  401. <View style={styles.contentItemTopDetailPrice}>
  402. {/* 售价 */}
  403. <View style={styles.contentItemTopDetailCurPrice}>
  404. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>¥</Text>
  405. <Text style={styles.contentItemTopDetailCurPriceStr}>{contentItem.target.salePriceStr}</Text>
  406. </View>
  407. {/* 面额 */}
  408. <View style={styles.contentItemTopDetailSalePrice}>
  409. <Text style={styles.contentItemTopDetailSalePriceStr} >¥{contentItem.target.priceStr}</Text>
  410. </View>
  411. </View>
  412. </View>
  413. {/* <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> */}
  414. <Image source={{uri:contentItem.target.qrCode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  415. </View>
  416. {/* 优惠券底部商户名称 */}
  417. <View style={styles.contentItemBottom}>
  418. <Text style={styles.contentItemBottomMerchantName}>{merchantName}</Text>
  419. <Text style={styles.contentItemBottomPlacehold}>{contentItem.target.merchantVoList[0].buildingName}{contentItem.target.merchantVoList[0].floorName}</Text>
  420. <Text style={styles.contentItemBottomAction}>{actionText}</Text>
  421. </View>
  422. </ImageBackground>
  423. {this.getContentViewItemUplayer(contentItem)}
  424. </Animatable.View>
  425. )
  426. }
  427. getContentView() {
  428. if (this.state.contentDisplayStatus) {
  429. return (<View style={styles.content}>
  430. {this.getContentViewItem(this.state.contentItem0,this.state.animationTheme.first)}
  431. {this.getContentViewItem(this.state.contentItem1,this.state.animationTheme.second)}
  432. {this.getContentViewItem(this.state.contentItem2,this.state.animationTheme.third)}
  433. </View>)
  434. }else{
  435. return (
  436. <View style={styles.content}>
  437. <Text style={styles.updatePage}>{this.state.errorMessage}</Text>
  438. </View>)
  439. }
  440. }
  441. setSwiperItemDom(contentItem, index) {
  442. return (
  443. <View style={styles.contentItemTopForAd} key={index}>
  444. <Image source={{uri: contentItem.coverImg}} resizeMode='cover' style={styles.adTypeItemImg} />
  445. <View style={styles.contentItemTopDetail}>
  446. {/* 券的title */}
  447. <Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text>
  448. <View style={styles.contentItemTopDetailPrice}>
  449. {/* 售价 */}
  450. <View style={styles.contentItemTopDetailCurPrice}>
  451. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>¥</Text>
  452. <Text style={styles.contentItemTopDetailCurPriceStr}>{contentItem.target.salePriceStr}</Text>
  453. </View>
  454. {/* 面额 */}
  455. <View style={styles.contentItemTopDetailSalePrice}>
  456. <Text style={styles.contentItemTopDetailSalePriceStr} >¥{contentItem.target.priceStr}</Text>
  457. </View>
  458. </View>
  459. </View>
  460. {/* <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> */}
  461. <Image source={{uri:contentItem.target.qrCode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  462. </View>
  463. )
  464. }
  465. renderAdTypeSwiper() {
  466. if (this.state.contentDisplayStatus) {
  467. let adSwiperDomStack = [];
  468. //aaa
  469. adDataList.map((item,index) => {
  470. item.target.qrCode = 'https://iformall-net.s3.cn-northwest-1.amazonaws.com.cn/null/73ddb1e4-8f19-4d5d-8387-742d3d5d2c77.png'
  471. adSwiperDomStack.push(this.setSwiperItemDom(item, index))
  472. })
  473. return adSwiperDomStack;
  474. }else{
  475. return (
  476. <View style={styles.content}>
  477. <Text style={styles.updatePage}>{this.state.errorMessage}</Text>
  478. </View>
  479. )
  480. }
  481. }
  482. getUpdateView() {
  483. if (this.state.progress.totalBytes > 0)
  484. return (
  485. <Text style={styles.updatePage}>{this.state.syncMessage}{'\n'}
  486. {this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received{'\n'}
  487. </Text>
  488. );
  489. return (
  490. <Text style={styles.updatePage}>{this.state.syncMessage}
  491. </Text>
  492. );
  493. }
  494. getAdView(){
  495. if (this.state.baseInfo) {
  496. if (this.state.adType == 0) {
  497. return (
  498. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  499. {/* 头部title二维码开始 */}
  500. <View style={styles.title}>
  501. <View style={styles.titleImagePlace}>
  502. <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
  503. </View>
  504. <ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} >
  505. <View style={styles.titleQrcodePlacehold}></View>
  506. <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
  507. <View style={styles.titleQrcodePlacehold}></View>
  508. </ImageBackground>
  509. </View>
  510. {/* 券列表展示列表开始 */}
  511. {this.getContentView()}
  512. {/* 底部商场信息展示开始 */}
  513. <View style={styles.bottom}>
  514. <View style={styles.bottomLogoBackground}>
  515. <Image source={{ uri: this.state.baseInfo.imgUrlH}} resizeMode='contain' style={styles.bottomLogo} />
  516. </View>
  517. <View style={styles.bottomQrcode1Background}>
  518. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.bottomQrcode1} />
  519. <Text style={styles.bottomQrcode1Str}>小程序</Text>
  520. </View>
  521. <View style={styles.bottomQrcode2Background}>
  522. <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp}} resizeMode='center' style={styles.bottomQrcode2} />
  523. <Text style={styles.bottomQrcode1Str}>公众号</Text>
  524. </View>
  525. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  526. </View>
  527. </ImageBackground>
  528. );
  529. } else if (this.state.adType == 2) {
  530. return (
  531. <ImageBackground style={styles.adTypeBg} source={require('./image/ad1.jpg')}>
  532. {/* adType == 2 滚动轮播 */}
  533. <Swiper ref='scrollView' style={styles.adTypeSwiper02} autoplay={true} autoplayTimeout={0.5} showPagination={false}
  534. dotColor="gray" activeDotColor="#fff" horizontal={true} loop={true} index={0} showsButtons={false}>
  535. {this.renderAdTypeSwiper()}
  536. </Swiper>
  537. <View style={styles.bottomBox}>
  538. <View style={styles.bottomLogoBackground}>
  539. <Image source={{ uri: this.state.baseInfo.imgUrlH}} resizeMode='contain' style={styles.bottomLogo} />
  540. </View>
  541. <View style={styles.bottomQrcode1Background}>
  542. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.bottomQrcode1} />
  543. <Text style={styles.bottomQrcode1Str}>小程序</Text>
  544. </View>
  545. <View style={styles.bottomQrcode2Background}>
  546. <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp}} resizeMode='center' style={styles.bottomQrcode2} />
  547. <Text style={styles.bottomQrcode1Str}>公众号</Text>
  548. </View>
  549. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  550. </View>
  551. </ImageBackground>
  552. );
  553. }
  554. }
  555. else {
  556. return (
  557. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  558. {/* 头部title二维码开始 */}
  559. <View style={styles.title}>
  560. </View>
  561. {/* 券列表展示列表开始 */}
  562. {this.getContentView()}
  563. {/* 底部商场信息展示开始 */}
  564. <View style={styles.bottom}>
  565. <View style={styles.bottomLogoBackground}>
  566. </View>
  567. <View style={styles.bottomQrcode1Background}>
  568. </View>
  569. <View style={styles.bottomQrcode2Background}>
  570. </View>
  571. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  572. </View>
  573. </ImageBackground>
  574. );
  575. }
  576. }
  577. render() {
  578. if (this.state.updating) {
  579. return this.getUpdateView();
  580. }
  581. return this.getAdView();
  582. }
  583. }
  584. MyPage = CodePush(codePushOptions)(MyPage);
  585. const styles = StyleSheet.create({
  586. updatePage:{
  587. flex: 2,
  588. width:'100%',
  589. height:'100%',
  590. backgroundColor:'transparent',
  591. textAlign :'center',
  592. textAlignVertical:'center',
  593. fontSize: 63/PixelRatio.get(),
  594. color: 'darkblue'
  595. },
  596. //layer background
  597. background:{
  598. flex: 1,
  599. width:'100%',
  600. height:'100%'
  601. },
  602. //layer top
  603. title:{
  604. flex: 6,
  605. flexDirection: 'row',
  606. alignItems: 'center',
  607. paddingLeft:42/PixelRatio.get(),
  608. paddingRight:42/PixelRatio.get(),
  609. backgroundColor:'transparent'
  610. },
  611. content:{
  612. flex: 18,
  613. flexDirection: 'column',
  614. alignItems: 'center',
  615. backgroundColor:'transparent'
  616. },
  617. bottom:{
  618. flex: 2,
  619. flexDirection: 'row',
  620. alignItems: 'center',
  621. paddingLeft:42/PixelRatio.get(),
  622. paddingRight:42/PixelRatio.get(),
  623. backgroundColor:'transparent'
  624. },
  625. //layer title
  626. titleImagePlace: {
  627. flex: 2,
  628. paddingTop: '20%',
  629. paddingLeft: '15%',
  630. alignItems: 'center',
  631. backgroundColor:'transparent'
  632. },
  633. titleImage: {
  634. width:'100%',
  635. height:'100%',
  636. flex: 1,
  637. backgroundColor:'transparent'
  638. },
  639. titleQrcodeBonder: {
  640. width:'100%',
  641. height:'100%',
  642. alignItems: 'center',
  643. flexDirection: 'column',
  644. flex: 1,
  645. backgroundColor:'transparent'
  646. },
  647. titleQrcodePlacehold: {
  648. flex: 5,
  649. backgroundColor:'transparent'
  650. },
  651. titleQrcode: {
  652. flex: 6,
  653. width:'100%',
  654. height:'100%',
  655. backgroundColor:'transparent'
  656. },
  657. //layer bottom
  658. bottomLogoBackground: {
  659. flex: 3,
  660. borderRadius:16/PixelRatio.get(),
  661. marginTop: 26/PixelRatio.get(),
  662. marginBottom: 26/PixelRatio.get(),
  663. backgroundColor:'transparent',//'rgba(255,255,255,0.5)',
  664. },
  665. bottomLogo: {
  666. width:'100%',
  667. height:'100%',
  668. backgroundColor:'transparent'
  669. },
  670. bottomQrcode1Background : {
  671. flex: 1,
  672. width:'100%',
  673. height:'100%',
  674. marginLeft: 21/PixelRatio.get(),
  675. paddingTop: 27/PixelRatio.get(),
  676. paddingBottom: 11/PixelRatio.get(),
  677. flexDirection: 'column',
  678. backgroundColor:'transparent'
  679. },
  680. bottomQrcode2Background : {
  681. flex: 1,
  682. width:'100%',
  683. height:'100%',
  684. marginLeft: 21/PixelRatio.get(),
  685. paddingTop: 26/PixelRatio.get(),
  686. paddingBottom: 11/PixelRatio.get(),
  687. flexDirection: 'column',
  688. backgroundColor:'transparent'
  689. },
  690. bottomQrcode1: {
  691. flex: 2,
  692. width:'100%',
  693. height:'100%',
  694. backgroundColor:'transparent'
  695. },
  696. bottomQrcode2: {
  697. flex: 2,
  698. width:'100%',
  699. height:'100%',
  700. backgroundColor:'transparent'
  701. },
  702. bottomQrcode1Str: {
  703. flex: 1,
  704. textAlign :'center',
  705. textAlignVertical:'center',
  706. fontSize: 16/PixelRatio.get(),
  707. color : 'white',
  708. backgroundColor:'transparent'
  709. },
  710. bottomQrcode2Str: {
  711. flex: 1,
  712. textAlign :'center',
  713. textAlignVertical:'center',
  714. fontSize: 16/PixelRatio.get(),
  715. color : 'white',
  716. backgroundColor:'transparent'
  717. },
  718. bottomPlacehold: {
  719. flex: 8,
  720. width:'100%',
  721. height:'100%',
  722. backgroundColor:'transparent',
  723. textAlign :'right',
  724. textAlignVertical:'bottom',
  725. fontSize: 27/PixelRatio.get(),
  726. color : 'gray'
  727. },
  728. //layer content item
  729. contentItem:{
  730. flex: 1,
  731. width:'100%',
  732. height:'100%',
  733. flexDirection: 'column',
  734. backgroundColor:'transparent'
  735. },
  736. contentItemDownLayer:{
  737. position:'absolute',
  738. width:'100%',
  739. height:'100%',
  740. flexDirection: 'column',
  741. alignItems: 'center',
  742. backgroundColor:'transparent'
  743. },
  744. contentItemUpLayer:{
  745. width:210/PixelRatio.get(),
  746. height:153/PixelRatio.get(),
  747. position:'absolute',
  748. backgroundColor:'transparent'
  749. },
  750. contentItemTop:{
  751. flex: 3,
  752. width:'100%',
  753. height:'100%',
  754. paddingLeft: 66/PixelRatio.get(),
  755. paddingRight: 53/PixelRatio.get(),
  756. paddingTop: 40/PixelRatio.get(),
  757. flexDirection: 'row',
  758. alignItems: 'center',
  759. backgroundColor:'transparent'
  760. },
  761. contentItemBottom:{
  762. flex: 1,
  763. width:'100%',
  764. height:'100%',
  765. paddingLeft: 66/PixelRatio.get(),
  766. paddingRight: 53/PixelRatio.get(),
  767. paddingBottom: 40/PixelRatio.get(),
  768. flexDirection: 'row',
  769. alignItems: 'center',
  770. backgroundColor:'transparent'
  771. },
  772. //layer content item top
  773. contentItemTopCoverImg:{
  774. flex: 5,
  775. width:'100%',
  776. height:'100%',
  777. borderRadius:27/PixelRatio.get(),
  778. backgroundColor:'transparent'
  779. },
  780. contentItemTopDetail:{
  781. flex: 6,
  782. width:'100%',
  783. height:'100%',
  784. paddingLeft: 20/PixelRatio.get(),
  785. paddingRight: 20/PixelRatio.get(),
  786. alignItems: 'center',
  787. backgroundColor:'transparent'
  788. },
  789. contentItemTopQrcode:{
  790. flex: 5,
  791. width:'100%',
  792. height:'100%',
  793. borderWidth:1,
  794. borderColor:"blue",
  795. marginLeft:18/PixelRatio.get(),
  796. // backgroundColor:'transparent'
  797. },
  798. //layer content item bottom
  799. contentItemBottomMerchantName:{
  800. flex: 5,
  801. width:'100%',
  802. height:'100%',
  803. alignItems: 'center',
  804. color:"black",
  805. backgroundColor:'transparent',
  806. textAlign :'center',
  807. textAlignVertical:'center',
  808. fontSize: 27/PixelRatio.get(),
  809. fontWeight : 'bold'
  810. },
  811. contentItemBottomPlacehold:{
  812. flex: 6,
  813. fontSize: 27/PixelRatio.get(),
  814. paddingLeft: 27/PixelRatio.get(),
  815. paddingRight: 79/PixelRatio.get(),
  816. width:'100%',
  817. height:'100%',
  818. color:"black",
  819. textAlignVertical:'center',
  820. backgroundColor:'transparent',
  821. },
  822. contentItemBottomAction:{
  823. flex: 5,
  824. width:'100%',
  825. height:'100%',
  826. backgroundColor:'transparent',
  827. textAlign :'center',
  828. textAlignVertical:'center',
  829. fontSize: 36/PixelRatio.get(),
  830. color: 'black',
  831. // borderStyle:"solid",
  832. // borderWidth:1,
  833. // borderColor:"red"
  834. },
  835. // 券的title
  836. contentItemTopDetailTitle:{
  837. flex: 2,
  838. // height:'100%',
  839. width:'100%',
  840. marginTop:"2%",
  841. // borderStyle:"solid",
  842. // borderWidth:1,
  843. // borderColor:"red",
  844. backgroundColor:'transparent',
  845. textAlign :'left',
  846. color:"black",
  847. textAlignVertical:'center',
  848. fontSize: 53/PixelRatio.get(),
  849. },
  850. /*
  851. contentItemTopDetailRemark:{
  852. flex: 1,
  853. width:'100%',
  854. height:'100%',
  855. backgroundColor:'transparent',
  856. textAlign :'left',
  857. textAlignVertical:'center',
  858. fontSize: 27/PixelRatio.get(),
  859. color : 'gray'
  860. },
  861. */
  862. contentItemTopDetailPrice:{
  863. flex: 2,
  864. width:'100%',
  865. height:'100%',
  866. backgroundColor:'transparent',
  867. flexDirection: 'row',
  868. },
  869. // 售价的样式
  870. contentItemTopDetailCurPrice:{
  871. position:"absolute",
  872. bottom:10,
  873. left:0,
  874. width:'100%',
  875. height:'100%',
  876. flexDirection: 'row',
  877. backgroundColor:'transparent',
  878. },
  879. contentItemTopDetailCurPriceStr:{
  880. backgroundColor:'transparent',
  881. fontSize:96/PixelRatio.get(),
  882. fontFamily:"PingFangSC-Bold",
  883. fontWeight: "bold",
  884. textAlign :'left',
  885. textAlignVertical:'bottom',
  886. color : 'red'
  887. },
  888. contentItemTopDetailCurPriceStrUnit:{
  889. backgroundColor:'transparent',
  890. textAlign :'left',
  891. textAlignVertical:'bottom',
  892. paddingBottom: 16/PixelRatio.get(),
  893. fontSize: 48/PixelRatio.get(),
  894. color : 'red'
  895. },
  896. // 面额的样式
  897. contentItemTopDetailSalePrice:{
  898. position:"absolute",
  899. bottom:2,
  900. left:0,
  901. // flex: 1,
  902. paddingTop:50,
  903. width:'100%',
  904. // height:'100%',
  905. backgroundColor:'transparent',
  906. },
  907. contentItemTopDetailSalePriceStr:{
  908. width:'100%',
  909. height:'100%',
  910. backgroundColor:'transparent',
  911. textAlign :'left',
  912. textAlignVertical:'bottom',
  913. fontSize: 27/PixelRatio.get(),
  914. textDecorationLine: 'line-through',
  915. color : 'gray'
  916. },
  917. adTypeBg:{
  918. flex: 1,
  919. width: '100%',
  920. height: '100%'
  921. },
  922. adTypeSwiper02:{
  923. position: 'absolute',
  924. left: 0,
  925. bottom: 120,
  926. width: '100%',
  927. height: 134,
  928. marginLeft: 10,
  929. borderColor: 'red',
  930. borderWidth: 10
  931. },
  932. adTypeItemImgWrap:{
  933. flex: 1,
  934. width: '100%',
  935. height: 134,
  936. flexDirection: 'row',
  937. alignItems: 'center',
  938. },
  939. adTypeItemImg:{
  940. width: 90,
  941. height: 90,
  942. borderRadius:27/PixelRatio.get(),
  943. backgroundColor:'transparent'
  944. },
  945. bottomBox:{
  946. position: 'absolute',
  947. bottom: 0,
  948. left: 0,
  949. flex: 2,
  950. flexDirection: 'row',
  951. alignItems: 'center',
  952. backgroundColor:'transparent',
  953. borderColor: 'red',
  954. borderWidth: 1
  955. },
  956. contentItemTopForAd:{
  957. flex: 1,
  958. width:'100%',
  959. height:'100%',
  960. paddingLeft: 30/PixelRatio.get(),
  961. paddingRight: 26/PixelRatio.get(),
  962. paddingTop: 10/PixelRatio.get(),
  963. flexDirection: 'row',
  964. alignItems: 'center',
  965. backgroundColor:'#fff',
  966. borderColor: 'red',
  967. borderWidth: 1,
  968. borderRadius: 6,
  969. },
  970. });