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

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