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

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