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

854 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: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. if (getAdDataCount<=0) {
  267. await this.getAdDataList()
  268. getAdDataCount = heartConfig.dataRefreshInterval
  269. } else if (hbRequestCount<=0) {
  270. await this.hbRequest()
  271. hbRequestCount = heartConfig.heartbeatInterval
  272. }
  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. await this.getBaseInfo()
  281. await this.getAdDataList()
  282. }
  283. pageChangeCount = heartConfig.pageChangeInterval
  284. }
  285. setTimeout(()=>{
  286. this.routine();
  287. },1000);
  288. }
  289. async startAd() {
  290. await this.getBaseInfo()
  291. await this.getAdDataList()
  292. await this.hbRequest()
  293. hbRequestCount = heartConfig.heartbeatInterval;
  294. getAdDataCount =heartConfig.dataRefreshInterval;
  295. pageChangeCount =heartConfig.pageChangeInterval;
  296. setTimeout(()=>{
  297. this.routine();
  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} 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}} resizeMethod='resize' 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. return 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. });