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

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