广告屏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.
 
 
 
 
 

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