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

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