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

879 line
24 KiB

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