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

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