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

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