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

857 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. 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:10,
  77. dataRefreshInterval:3600,
  78. pageChangeInterval: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. return 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. return 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. return 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. async routine() {
  263. hbRequestCount -=1;
  264. getAdDataCount -=1;
  265. pageChangeCount -=1;
  266. try {
  267. if (getAdDataCount<=0) {
  268. await this.getAdDataList()
  269. getAdDataCount = heartConfig.dataRefreshInterval
  270. } else if (hbRequestCount<=0) {
  271. await this.hbRequest()
  272. hbRequestCount = heartConfig.heartbeatInterval
  273. }
  274. if (pageChangeCount <= 0) { //页面切换间隔
  275. if (this.state.contentDisplayStatus) {
  276. this.setState({ contentDisplayStatus: false})
  277. if (this.updateContent()) {
  278. this.setState({ contentDisplayStatus: true})
  279. }
  280. } else {
  281. await this.getBaseInfo()
  282. await this.getAdDataList()
  283. }
  284. pageChangeCount = heartConfig.pageChangeInterval
  285. }
  286. } catch(e){
  287. this.setState({ versionInfo: this.state.versionInfo+'[E]'});
  288. }
  289. setTimeout(()=>{
  290. this.routine();
  291. },1000);
  292. }
  293. async startAd() {
  294. await this.getBaseInfo()
  295. await this.getAdDataList()
  296. await this.hbRequest()
  297. hbRequestCount = heartConfig.heartbeatInterval;
  298. getAdDataCount =heartConfig.dataRefreshInterval;
  299. pageChangeCount =heartConfig.pageChangeInterval;
  300. setTimeout(()=>{
  301. this.routine();
  302. },1000);
  303. }
  304. getContentViewItemUplayer(contentItem) {
  305. if (contentItem.type == 0) {
  306. if (contentItem.subType == 2)
  307. return (<Image source={require('./image/timed.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  308. if (contentItem.subType == 6)
  309. return (<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  310. if (contentItem.subType == 7)
  311. return (<Image source={require('./image/groupbuy.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  312. return null;
  313. }
  314. }
  315. getContentViewItemActionStr(contentItem) {
  316. if (contentItem.type == 0) {
  317. if (contentItem.subType == 2)
  318. return '扫码秒杀';
  319. else if (contentItem.subType == 6)
  320. return '扫码砍价';
  321. else if (contentItem.subType == 7)
  322. return '扫码拼团';
  323. else
  324. return '扫码领取';
  325. }
  326. }
  327. getContentViewItemMerchantName(contentItem) {
  328. if (contentItem.type == 0) {
  329. if (contentItem.target.merchantVoList.length > 1)
  330. return '多商户通用';
  331. else
  332. return contentItem.target.merchantVoList[0].merchantName;
  333. }
  334. }
  335. getContentViewItem(contentItem, annomation) {
  336. if (!contentItem)
  337. return (
  338. <View style={styles.contentItem}>
  339. </View>
  340. )
  341. actionText = this.getContentViewItemActionStr(contentItem);
  342. merchantName = this.getContentViewItemMerchantName(contentItem);
  343. // console.warn(annomation)
  344. return (
  345. <Animatable.View animation={annomation} style={styles.contentItem}>
  346. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  347. {/* 列表 */}
  348. <View style={styles.contentItemTop}>
  349. <Image source={{uri: contentItem.target.coverImg}} resizeMethod='resize' resizeMode='cover' style={styles.contentItemTopCoverImg} />
  350. <View style={styles.contentItemTopDetail}>
  351. {/* 券的title */}
  352. <Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text>
  353. <View style={styles.contentItemTopDetailPrice}>
  354. {/* 售价 */}
  355. <View style={styles.contentItemTopDetailCurPrice}>
  356. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>¥</Text>
  357. <Text style={styles.contentItemTopDetailCurPriceStr}>{contentItem.target.salePriceStr}</Text>
  358. </View>
  359. {/* 面额 */}
  360. <View style={styles.contentItemTopDetailSalePrice}>
  361. <Text style={styles.contentItemTopDetailSalePriceStr} >¥{contentItem.target.priceStr}</Text>
  362. </View>
  363. </View>
  364. </View>
  365. <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  366. </View>
  367. {/* 优惠券底部商户名称 */}
  368. <View style={styles.contentItemBottom}>
  369. <Text style={styles.contentItemBottomMerchantName}>{merchantName}</Text>
  370. <Text style={styles.contentItemBottomPlacehold}>{contentItem.target.merchantVoList[0].buildingName}{contentItem.target.merchantVoList[0].floorName}</Text>
  371. <Text style={styles.contentItemBottomAction}>{actionText}</Text>
  372. </View>
  373. </ImageBackground>
  374. {this.getContentViewItemUplayer(contentItem)}
  375. </Animatable.View>
  376. )
  377. }
  378. getContentView() {
  379. if (this.state.contentDisplayStatus) {
  380. return (<View style={styles.content}>
  381. {this.getContentViewItem(this.state.contentItem0,this.state.animationTheme.first)}
  382. {this.getContentViewItem(this.state.contentItem1,this.state.animationTheme.second)}
  383. {this.getContentViewItem(this.state.contentItem2,this.state.animationTheme.third)}
  384. </View>)
  385. }else{
  386. return (
  387. <View style={styles.content}>
  388. <Text style={styles.updatePage}>{this.state.errorMessage}</Text>
  389. </View>)
  390. }
  391. }
  392. getUpdateView() {
  393. if (this.state.progress.totalBytes > 0)
  394. return (
  395. <Text style={styles.updatePage}>{this.state.syncMessage}{'\n'}
  396. {this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received{'\n'}
  397. </Text>
  398. );
  399. return (
  400. <Text style={styles.updatePage}>{this.state.syncMessage}
  401. </Text>
  402. );
  403. }
  404. render() {
  405. if (this.state.progress) {
  406. return this.getUpdateView();
  407. }
  408. return (
  409. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  410. {/* 头部title二维码开始 */}
  411. <View style={styles.title}>
  412. <View style={styles.titleImagePlace}>
  413. <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
  414. </View>
  415. <ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} >
  416. <View style={styles.titleQrcodePlacehold}></View>
  417. <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
  418. <View style={styles.titleQrcodePlacehold}></View>
  419. </ImageBackground>
  420. </View>
  421. {/* 券列表展示列表开始 */}
  422. {this.getContentView()}
  423. {/* 底部商场信息展示开始 */}
  424. <View style={styles.bottom}>
  425. <View style={styles.bottomLogoBackground}>
  426. <Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='contain' style={styles.bottomLogo} />
  427. </View>
  428. <View style={styles.bottomQrcode1Background}>
  429. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode1} />
  430. <Text style={styles.bottomQrcode1Str}>小程序</Text>
  431. </View>
  432. <View style={styles.bottomQrcode2Background}>
  433. <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} />
  434. <Text style={styles.bottomQrcode1Str}>公众号</Text>
  435. </View>
  436. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  437. </View>
  438. </ImageBackground>
  439. );
  440. }
  441. }
  442. const styles = StyleSheet.create({
  443. updatePage:{
  444. flex: 2,
  445. width:'100%',
  446. height:'100%',
  447. backgroundColor:'transparent',
  448. textAlign :'center',
  449. textAlignVertical:'center',
  450. fontSize: 63/PixelRatio.get(),
  451. color: 'darkblue'
  452. },
  453. //layer background
  454. background:{
  455. flex: 1,
  456. width:'100%',
  457. height:'100%'
  458. },
  459. //layer top
  460. title:{
  461. flex: 6,
  462. flexDirection: 'row',
  463. alignItems: 'center',
  464. paddingLeft:42/PixelRatio.get(),
  465. paddingRight:42/PixelRatio.get(),
  466. backgroundColor:'transparent'
  467. },
  468. content:{
  469. flex: 18,
  470. flexDirection: 'column',
  471. alignItems: 'center',
  472. backgroundColor:'transparent'
  473. },
  474. bottom:{
  475. flex: 2,
  476. flexDirection: 'row',
  477. alignItems: 'center',
  478. paddingLeft:42/PixelRatio.get(),
  479. paddingRight:42/PixelRatio.get(),
  480. backgroundColor:'transparent'
  481. },
  482. //layer title
  483. titleImagePlace: {
  484. flex: 2,
  485. paddingTop: '20%',
  486. paddingLeft: '15%',
  487. alignItems: 'center',
  488. backgroundColor:'transparent'
  489. },
  490. titleImage: {
  491. width:'100%',
  492. height:'100%',
  493. flex: 1,
  494. backgroundColor:'transparent'
  495. },
  496. titleQrcodeBonder: {
  497. width:'100%',
  498. height:'100%',
  499. alignItems: 'center',
  500. flexDirection: 'column',
  501. flex: 1,
  502. backgroundColor:'transparent'
  503. },
  504. titleQrcodePlacehold: {
  505. flex: 5,
  506. backgroundColor:'transparent'
  507. },
  508. titleQrcode: {
  509. flex: 6,
  510. width:'100%',
  511. height:'100%',
  512. backgroundColor:'transparent'
  513. },
  514. //layer bottom
  515. bottomLogoBackground: {
  516. flex: 3,
  517. borderRadius:16/PixelRatio.get(),
  518. marginTop: 26/PixelRatio.get(),
  519. marginBottom: 26/PixelRatio.get(),
  520. backgroundColor:'transparent',//'rgba(255,255,255,0.5)',
  521. },
  522. bottomLogo: {
  523. width:'100%',
  524. height:'100%',
  525. backgroundColor:'transparent'
  526. },
  527. bottomQrcode1Background : {
  528. flex: 1,
  529. width:'100%',
  530. height:'100%',
  531. marginLeft: 21/PixelRatio.get(),
  532. paddingTop: 27/PixelRatio.get(),
  533. paddingBottom: 11/PixelRatio.get(),
  534. flexDirection: 'column',
  535. backgroundColor:'transparent'
  536. },
  537. bottomQrcode2Background : {
  538. flex: 1,
  539. width:'100%',
  540. height:'100%',
  541. marginLeft: 21/PixelRatio.get(),
  542. paddingTop: 26/PixelRatio.get(),
  543. paddingBottom: 11/PixelRatio.get(),
  544. flexDirection: 'column',
  545. backgroundColor:'transparent'
  546. },
  547. bottomQrcode1: {
  548. flex: 2,
  549. width:'100%',
  550. height:'100%',
  551. backgroundColor:'transparent'
  552. },
  553. bottomQrcode2: {
  554. flex: 2,
  555. width:'100%',
  556. height:'100%',
  557. backgroundColor:'transparent'
  558. },
  559. bottomQrcode1Str: {
  560. flex: 1,
  561. textAlign :'center',
  562. textAlignVertical:'center',
  563. fontSize: 16/PixelRatio.get(),
  564. color : 'white',
  565. backgroundColor:'transparent'
  566. },
  567. bottomQrcode2Str: {
  568. flex: 1,
  569. textAlign :'center',
  570. textAlignVertical:'center',
  571. fontSize: 16/PixelRatio.get(),
  572. color : 'white',
  573. backgroundColor:'transparent'
  574. },
  575. bottomPlacehold: {
  576. flex: 8,
  577. width:'100%',
  578. height:'100%',
  579. backgroundColor:'transparent',
  580. textAlign :'right',
  581. textAlignVertical:'bottom',
  582. fontSize: 27/PixelRatio.get(),
  583. color : 'gray'
  584. },
  585. //layer content item
  586. contentItem:{
  587. flex: 1,
  588. width:'100%',
  589. height:'100%',
  590. flexDirection: 'column',
  591. backgroundColor:'transparent'
  592. },
  593. contentItemDownLayer:{
  594. position:'absolute',
  595. width:'100%',
  596. height:'100%',
  597. flexDirection: 'column',
  598. alignItems: 'center',
  599. backgroundColor:'transparent'
  600. },
  601. contentItemUpLayer:{
  602. width:210/PixelRatio.get(),
  603. height:153/PixelRatio.get(),
  604. position:'absolute',
  605. backgroundColor:'transparent'
  606. },
  607. contentItemTop:{
  608. flex: 3,
  609. width:'100%',
  610. height:'100%',
  611. paddingLeft: 66/PixelRatio.get(),
  612. paddingRight: 53/PixelRatio.get(),
  613. paddingTop: 40/PixelRatio.get(),
  614. flexDirection: 'row',
  615. alignItems: 'center',
  616. backgroundColor:'transparent'
  617. },
  618. contentItemBottom:{
  619. flex: 1,
  620. width:'100%',
  621. height:'100%',
  622. paddingLeft: 66/PixelRatio.get(),
  623. paddingRight: 53/PixelRatio.get(),
  624. paddingBottom: 40/PixelRatio.get(),
  625. flexDirection: 'row',
  626. alignItems: 'center',
  627. backgroundColor:'transparent'
  628. },
  629. //layer content item top
  630. contentItemTopCoverImg:{
  631. flex: 5,
  632. width:'100%',
  633. height:'100%',
  634. borderRadius:27/PixelRatio.get(),
  635. backgroundColor:'transparent'
  636. },
  637. contentItemTopDetail:{
  638. flex: 6,
  639. width:'100%',
  640. height:'100%',
  641. paddingLeft: 20/PixelRatio.get(),
  642. paddingRight: 20/PixelRatio.get(),
  643. alignItems: 'center',
  644. backgroundColor:'transparent'
  645. },
  646. contentItemTopQrcode:{
  647. flex: 5,
  648. width:'100%',
  649. height:'100%',
  650. // borderStyle:"solid",
  651. // borderWidth:1,
  652. // borderColor:"red",
  653. marginLeft:18/PixelRatio.get(),
  654. backgroundColor:'transparent'
  655. },
  656. //layer content item bottom
  657. contentItemBottomMerchantName:{
  658. flex: 5,
  659. width:'100%',
  660. height:'100%',
  661. alignItems: 'center',
  662. color:"black",
  663. backgroundColor:'transparent',
  664. textAlign :'center',
  665. textAlignVertical:'center',
  666. fontSize: 27/PixelRatio.get(),
  667. fontWeight : 'bold'
  668. },
  669. contentItemBottomPlacehold:{
  670. flex: 6,
  671. fontSize: 27/PixelRatio.get(),
  672. paddingLeft: 27/PixelRatio.get(),
  673. paddingRight: 79/PixelRatio.get(),
  674. width:'100%',
  675. height:'100%',
  676. color:"black",
  677. textAlignVertical:'center',
  678. backgroundColor:'transparent',
  679. },
  680. contentItemBottomAction:{
  681. flex: 5,
  682. width:'100%',
  683. height:'100%',
  684. backgroundColor:'transparent',
  685. textAlign :'center',
  686. textAlignVertical:'center',
  687. fontSize: 36/PixelRatio.get(),
  688. color: 'black',
  689. // borderStyle:"solid",
  690. // borderWidth:1,
  691. // borderColor:"red"
  692. },
  693. // 券的title
  694. contentItemTopDetailTitle:{
  695. flex: 2,
  696. // height:'100%',
  697. width:'100%',
  698. marginTop:"2%",
  699. // borderStyle:"solid",
  700. // borderWidth:1,
  701. // borderColor:"red",
  702. backgroundColor:'transparent',
  703. textAlign :'left',
  704. color:"black",
  705. textAlignVertical:'center',
  706. fontSize: 53/PixelRatio.get(),
  707. },
  708. /*
  709. contentItemTopDetailRemark:{
  710. flex: 1,
  711. width:'100%',
  712. height:'100%',
  713. backgroundColor:'transparent',
  714. textAlign :'left',
  715. textAlignVertical:'center',
  716. fontSize: 27/PixelRatio.get(),
  717. color : 'gray'
  718. },
  719. */
  720. contentItemTopDetailPrice:{
  721. flex: 2,
  722. width:'100%',
  723. height:'100%',
  724. backgroundColor:'transparent',
  725. flexDirection: 'row',
  726. },
  727. // 售价的样式
  728. contentItemTopDetailCurPrice:{
  729. position:"absolute",
  730. bottom:10,
  731. left:0,
  732. width:'100%',
  733. height:'100%',
  734. flexDirection: 'row',
  735. backgroundColor:'transparent',
  736. },
  737. contentItemTopDetailCurPriceStr:{
  738. backgroundColor:'transparent',
  739. fontSize:96/PixelRatio.get(),
  740. fontFamily:"PingFangSC-Bold",
  741. fontWeight: "bold",
  742. textAlign :'left',
  743. textAlignVertical:'bottom',
  744. color : 'red'
  745. },
  746. contentItemTopDetailCurPriceStrUnit:{
  747. backgroundColor:'transparent',
  748. textAlign :'left',
  749. textAlignVertical:'bottom',
  750. paddingBottom: 16/PixelRatio.get(),
  751. fontSize: 48/PixelRatio.get(),
  752. color : 'red'
  753. },
  754. // 面额的样式
  755. contentItemTopDetailSalePrice:{
  756. position:"absolute",
  757. bottom:2,
  758. left:0,
  759. // flex: 1,
  760. paddingTop:50,
  761. width:'100%',
  762. // height:'100%',
  763. backgroundColor:'transparent',
  764. },
  765. contentItemTopDetailSalePriceStr:{
  766. width:'100%',
  767. height:'100%',
  768. backgroundColor:'transparent',
  769. textAlign :'left',
  770. textAlignVertical:'bottom',
  771. fontSize: 27/PixelRatio.get(),
  772. textDecorationLine: 'line-through',
  773. color : 'gray'
  774. },
  775. });