广告屏react-native项目
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 
 
 

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