广告屏react-native项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

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