广告屏react-native项目
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
 
 

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