广告屏react-native项目
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 
 

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