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

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