广告屏react-native项目
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 
 
 

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