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

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