广告屏react-native项目
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 
 

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