广告屏react-native项目
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 
 

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