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

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