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

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