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

875 regels
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.IMMEDIATE},
  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. async routine() {
  280. hbRequestCount -=1;
  281. getAdDataCount -=1;
  282. pageChangeCount -=1;
  283. try {
  284. if (getAdDataCount<=0) {
  285. await this.getAdDataList(false)
  286. getAdDataCount = heartConfig.dataRefreshInterval
  287. } else if (hbRequestCount<=0) {
  288. await 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. await this.getBaseInfo()
  299. await 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.target.coverImg}} resizeMethod='resize' 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. </View>
  384. {/* 优惠券底部商户名称 */}
  385. <View style={styles.contentItemBottom}>
  386. <Text style={styles.contentItemBottomMerchantName}>{merchantName}</Text>
  387. <Text style={styles.contentItemBottomPlacehold}>{contentItem.target.merchantVoList[0].buildingName}{contentItem.target.merchantVoList[0].floorName}</Text>
  388. <Text style={styles.contentItemBottomAction}>{actionText}</Text>
  389. </View>
  390. </ImageBackground>
  391. {this.getContentViewItemUplayer(contentItem)}
  392. </Animatable.View>
  393. )
  394. }
  395. getContentView() {
  396. if (this.state.contentDisplayStatus) {
  397. return (<View style={styles.content}>
  398. {this.getContentViewItem(this.state.contentItem0,this.state.animationTheme.first)}
  399. {this.getContentViewItem(this.state.contentItem1,this.state.animationTheme.second)}
  400. {this.getContentViewItem(this.state.contentItem2,this.state.animationTheme.third)}
  401. </View>)
  402. }else{
  403. return (
  404. <View style={styles.content}>
  405. <Text style={styles.updatePage}>{this.state.errorMessage}</Text>
  406. </View>)
  407. }
  408. }
  409. getUpdateView() {
  410. if (this.state.progress.totalBytes > 0)
  411. return (
  412. <Text style={styles.updatePage}>{this.state.syncMessage}{'\n'}
  413. {this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received{'\n'}
  414. </Text>
  415. );
  416. return (
  417. <Text style={styles.updatePage}>{this.state.syncMessage}
  418. </Text>
  419. );
  420. }
  421. render() {
  422. if (this.state.progress) {
  423. return this.getUpdateView();
  424. }
  425. return (
  426. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  427. {/* 头部title二维码开始 */}
  428. <View style={styles.title}>
  429. <View style={styles.titleImagePlace}>
  430. <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
  431. </View>
  432. <ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} >
  433. <View style={styles.titleQrcodePlacehold}></View>
  434. <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
  435. <View style={styles.titleQrcodePlacehold}></View>
  436. </ImageBackground>
  437. </View>
  438. {/* 券列表展示列表开始 */}
  439. {this.getContentView()}
  440. {/* 底部商场信息展示开始 */}
  441. <View style={styles.bottom}>
  442. <View style={styles.bottomLogoBackground}>
  443. <Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='contain' style={styles.bottomLogo} />
  444. </View>
  445. <View style={styles.bottomQrcode1Background}>
  446. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode1} />
  447. <Text style={styles.bottomQrcode1Str}>小程序</Text>
  448. </View>
  449. <View style={styles.bottomQrcode2Background}>
  450. <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} />
  451. <Text style={styles.bottomQrcode1Str}>公众号</Text>
  452. </View>
  453. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  454. </View>
  455. </ImageBackground>
  456. );
  457. }
  458. }
  459. const styles = StyleSheet.create({
  460. updatePage:{
  461. flex: 2,
  462. width:'100%',
  463. height:'100%',
  464. backgroundColor:'transparent',
  465. textAlign :'center',
  466. textAlignVertical:'center',
  467. fontSize: 63/PixelRatio.get(),
  468. color: 'darkblue'
  469. },
  470. //layer background
  471. background:{
  472. flex: 1,
  473. width:'100%',
  474. height:'100%'
  475. },
  476. //layer top
  477. title:{
  478. flex: 6,
  479. flexDirection: 'row',
  480. alignItems: 'center',
  481. paddingLeft:42/PixelRatio.get(),
  482. paddingRight:42/PixelRatio.get(),
  483. backgroundColor:'transparent'
  484. },
  485. content:{
  486. flex: 18,
  487. flexDirection: 'column',
  488. alignItems: 'center',
  489. backgroundColor:'transparent'
  490. },
  491. bottom:{
  492. flex: 2,
  493. flexDirection: 'row',
  494. alignItems: 'center',
  495. paddingLeft:42/PixelRatio.get(),
  496. paddingRight:42/PixelRatio.get(),
  497. backgroundColor:'transparent'
  498. },
  499. //layer title
  500. titleImagePlace: {
  501. flex: 2,
  502. paddingTop: '20%',
  503. paddingLeft: '15%',
  504. alignItems: 'center',
  505. backgroundColor:'transparent'
  506. },
  507. titleImage: {
  508. width:'100%',
  509. height:'100%',
  510. flex: 1,
  511. backgroundColor:'transparent'
  512. },
  513. titleQrcodeBonder: {
  514. width:'100%',
  515. height:'100%',
  516. alignItems: 'center',
  517. flexDirection: 'column',
  518. flex: 1,
  519. backgroundColor:'transparent'
  520. },
  521. titleQrcodePlacehold: {
  522. flex: 5,
  523. backgroundColor:'transparent'
  524. },
  525. titleQrcode: {
  526. flex: 6,
  527. width:'100%',
  528. height:'100%',
  529. backgroundColor:'transparent'
  530. },
  531. //layer bottom
  532. bottomLogoBackground: {
  533. flex: 3,
  534. borderRadius:16/PixelRatio.get(),
  535. marginTop: 26/PixelRatio.get(),
  536. marginBottom: 26/PixelRatio.get(),
  537. backgroundColor:'transparent',//'rgba(255,255,255,0.5)',
  538. },
  539. bottomLogo: {
  540. width:'100%',
  541. height:'100%',
  542. backgroundColor:'transparent'
  543. },
  544. bottomQrcode1Background : {
  545. flex: 1,
  546. width:'100%',
  547. height:'100%',
  548. marginLeft: 21/PixelRatio.get(),
  549. paddingTop: 27/PixelRatio.get(),
  550. paddingBottom: 11/PixelRatio.get(),
  551. flexDirection: 'column',
  552. backgroundColor:'transparent'
  553. },
  554. bottomQrcode2Background : {
  555. flex: 1,
  556. width:'100%',
  557. height:'100%',
  558. marginLeft: 21/PixelRatio.get(),
  559. paddingTop: 26/PixelRatio.get(),
  560. paddingBottom: 11/PixelRatio.get(),
  561. flexDirection: 'column',
  562. backgroundColor:'transparent'
  563. },
  564. bottomQrcode1: {
  565. flex: 2,
  566. width:'100%',
  567. height:'100%',
  568. backgroundColor:'transparent'
  569. },
  570. bottomQrcode2: {
  571. flex: 2,
  572. width:'100%',
  573. height:'100%',
  574. backgroundColor:'transparent'
  575. },
  576. bottomQrcode1Str: {
  577. flex: 1,
  578. textAlign :'center',
  579. textAlignVertical:'center',
  580. fontSize: 16/PixelRatio.get(),
  581. color : 'white',
  582. backgroundColor:'transparent'
  583. },
  584. bottomQrcode2Str: {
  585. flex: 1,
  586. textAlign :'center',
  587. textAlignVertical:'center',
  588. fontSize: 16/PixelRatio.get(),
  589. color : 'white',
  590. backgroundColor:'transparent'
  591. },
  592. bottomPlacehold: {
  593. flex: 8,
  594. width:'100%',
  595. height:'100%',
  596. backgroundColor:'transparent',
  597. textAlign :'right',
  598. textAlignVertical:'bottom',
  599. fontSize: 27/PixelRatio.get(),
  600. color : 'gray'
  601. },
  602. //layer content item
  603. contentItem:{
  604. flex: 1,
  605. width:'100%',
  606. height:'100%',
  607. flexDirection: 'column',
  608. backgroundColor:'transparent'
  609. },
  610. contentItemDownLayer:{
  611. position:'absolute',
  612. width:'100%',
  613. height:'100%',
  614. flexDirection: 'column',
  615. alignItems: 'center',
  616. backgroundColor:'transparent'
  617. },
  618. contentItemUpLayer:{
  619. width:210/PixelRatio.get(),
  620. height:153/PixelRatio.get(),
  621. position:'absolute',
  622. backgroundColor:'transparent'
  623. },
  624. contentItemTop:{
  625. flex: 3,
  626. width:'100%',
  627. height:'100%',
  628. paddingLeft: 66/PixelRatio.get(),
  629. paddingRight: 53/PixelRatio.get(),
  630. paddingTop: 40/PixelRatio.get(),
  631. flexDirection: 'row',
  632. alignItems: 'center',
  633. backgroundColor:'transparent'
  634. },
  635. contentItemBottom:{
  636. flex: 1,
  637. width:'100%',
  638. height:'100%',
  639. paddingLeft: 66/PixelRatio.get(),
  640. paddingRight: 53/PixelRatio.get(),
  641. paddingBottom: 40/PixelRatio.get(),
  642. flexDirection: 'row',
  643. alignItems: 'center',
  644. backgroundColor:'transparent'
  645. },
  646. //layer content item top
  647. contentItemTopCoverImg:{
  648. flex: 5,
  649. width:'100%',
  650. height:'100%',
  651. borderRadius:27/PixelRatio.get(),
  652. backgroundColor:'transparent'
  653. },
  654. contentItemTopDetail:{
  655. flex: 6,
  656. width:'100%',
  657. height:'100%',
  658. paddingLeft: 20/PixelRatio.get(),
  659. paddingRight: 20/PixelRatio.get(),
  660. alignItems: 'center',
  661. backgroundColor:'transparent'
  662. },
  663. contentItemTopQrcode:{
  664. flex: 5,
  665. width:'100%',
  666. height:'100%',
  667. // borderStyle:"solid",
  668. // borderWidth:1,
  669. // borderColor:"red",
  670. marginLeft:18/PixelRatio.get(),
  671. backgroundColor:'transparent'
  672. },
  673. //layer content item bottom
  674. contentItemBottomMerchantName:{
  675. flex: 5,
  676. width:'100%',
  677. height:'100%',
  678. alignItems: 'center',
  679. color:"black",
  680. backgroundColor:'transparent',
  681. textAlign :'center',
  682. textAlignVertical:'center',
  683. fontSize: 27/PixelRatio.get(),
  684. fontWeight : 'bold'
  685. },
  686. contentItemBottomPlacehold:{
  687. flex: 6,
  688. fontSize: 27/PixelRatio.get(),
  689. paddingLeft: 27/PixelRatio.get(),
  690. paddingRight: 79/PixelRatio.get(),
  691. width:'100%',
  692. height:'100%',
  693. color:"black",
  694. textAlignVertical:'center',
  695. backgroundColor:'transparent',
  696. },
  697. contentItemBottomAction:{
  698. flex: 5,
  699. width:'100%',
  700. height:'100%',
  701. backgroundColor:'transparent',
  702. textAlign :'center',
  703. textAlignVertical:'center',
  704. fontSize: 36/PixelRatio.get(),
  705. color: 'black',
  706. // borderStyle:"solid",
  707. // borderWidth:1,
  708. // borderColor:"red"
  709. },
  710. // 券的title
  711. contentItemTopDetailTitle:{
  712. flex: 2,
  713. // height:'100%',
  714. width:'100%',
  715. marginTop:"2%",
  716. // borderStyle:"solid",
  717. // borderWidth:1,
  718. // borderColor:"red",
  719. backgroundColor:'transparent',
  720. textAlign :'left',
  721. color:"black",
  722. textAlignVertical:'center',
  723. fontSize: 53/PixelRatio.get(),
  724. },
  725. /*
  726. contentItemTopDetailRemark:{
  727. flex: 1,
  728. width:'100%',
  729. height:'100%',
  730. backgroundColor:'transparent',
  731. textAlign :'left',
  732. textAlignVertical:'center',
  733. fontSize: 27/PixelRatio.get(),
  734. color : 'gray'
  735. },
  736. */
  737. contentItemTopDetailPrice:{
  738. flex: 2,
  739. width:'100%',
  740. height:'100%',
  741. backgroundColor:'transparent',
  742. flexDirection: 'row',
  743. },
  744. // 售价的样式
  745. contentItemTopDetailCurPrice:{
  746. position:"absolute",
  747. bottom:10,
  748. left:0,
  749. width:'100%',
  750. height:'100%',
  751. flexDirection: 'row',
  752. backgroundColor:'transparent',
  753. },
  754. contentItemTopDetailCurPriceStr:{
  755. backgroundColor:'transparent',
  756. fontSize:96/PixelRatio.get(),
  757. fontFamily:"PingFangSC-Bold",
  758. fontWeight: "bold",
  759. textAlign :'left',
  760. textAlignVertical:'bottom',
  761. color : 'red'
  762. },
  763. contentItemTopDetailCurPriceStrUnit:{
  764. backgroundColor:'transparent',
  765. textAlign :'left',
  766. textAlignVertical:'bottom',
  767. paddingBottom: 16/PixelRatio.get(),
  768. fontSize: 48/PixelRatio.get(),
  769. color : 'red'
  770. },
  771. // 面额的样式
  772. contentItemTopDetailSalePrice:{
  773. position:"absolute",
  774. bottom:2,
  775. left:0,
  776. // flex: 1,
  777. paddingTop:50,
  778. width:'100%',
  779. // height:'100%',
  780. backgroundColor:'transparent',
  781. },
  782. contentItemTopDetailSalePriceStr:{
  783. width:'100%',
  784. height:'100%',
  785. backgroundColor:'transparent',
  786. textAlign :'left',
  787. textAlignVertical:'bottom',
  788. fontSize: 27/PixelRatio.get(),
  789. textDecorationLine: 'line-through',
  790. color : 'gray'
  791. },
  792. });