From 8d664325e11da9eed1baea404026f73e2eb45014 Mon Sep 17 00:00:00 2001 From: hupeng Date: Sat, 2 Mar 2019 18:49:37 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=A0=B7=E5=BC=8F][=E4=BF=AE=E6=94=B9]:?= =?UTF-8?q?=E6=95=B4=E4=B8=AA=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E5=92=8C?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.js | 285 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 273 insertions(+), 12 deletions(-) diff --git a/App.js b/App.js index 340ee28..0d4fbec 100644 --- a/App.js +++ b/App.js @@ -20,22 +20,42 @@ import DeviceInfo from "react-native-device-info"; // 取得屏幕的宽高Dimensions const { width, height } = Dimensions.get('window'); +contentItemDefault = { + coverImg:'', + qrcode:[], + target:{ + title:'', + subTitle:'', + priceStr:'', + salePriceStr:'', + remark:'', + } +} + +baseInfoDefault = { + imgUrlH:'', + imgQrcodeWeapp:'', + imgQrcodeWemp:'' +} + export default class MyPage extends Component { constructor(props) { super(props); this.state = { - baseInfo: { - imgUrlH:'', - imgQrcodeWeapp:'', - imgQrcodeWemp:'' - }, + baseInfo: baseInfoDefault, + + adDataList:[], - adData:[], + contentItem1:contentItemDefault, + + contentItem2:contentItemDefault, + + contentItem3:contentItemDefault, text:'', - qrcode:[], + restartAllowed: true , syncMessage: "syncMessage" , progress: false, @@ -118,17 +138,19 @@ codePushStatusDidChange(syncStatus) { } -getTestData() { +getAdDataList() { HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/list?deviceId=11%3AAA%3A33%3ABB%3A44&pageNum=1&pageSize=5') .then(result => { this.setState({ - adData: result.data.list}); + adDataList : result.data.list}); + this.setState({ + contentItem1 : this.state.adDataList[0]}); }) .catch(error => console.error(error)) } getBaseInfo() { - HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/info?deviceId=11%3AAA%3A33%3ABB%3A44') + HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/info?deviceId=11%3AAA%3A33%3ABB%3A44') .then(result => { this.setState({ baseInfo:result.data}); @@ -139,6 +161,7 @@ getBaseInfo() { componentDidMount() { this.getBaseInfo() + this.getAdDataList() } @@ -170,19 +193,102 @@ render() { + + + + + + {this.state.contentItem1.target.title} + {this.state.contentItem1.target.remark} + + + {this.state.contentItem1.target.priceStr} + + + + {this.state.contentItem1.target.salePriceStr}元 + + + + + + + + + 肯德基 + + 扫码领取 + + + + + + + + {this.state.contentItem1.target.title} + {this.state.contentItem1.target.remark} + + + {this.state.contentItem1.target.priceStr} + + + + {this.state.contentItem1.target.salePriceStr}元 + + + + + + + + + 肯德基 + + 扫码领取 + + + + + + + + {this.state.contentItem1.target.title} + {this.state.contentItem1.target.remark} + + + {this.state.contentItem1.target.priceStr} + + + + {this.state.contentItem1.target.salePriceStr}元 + + + + + + + + + 肯德基 + + 扫码领取 + + - + + + {this.state.text} @@ -266,10 +372,17 @@ render() { }, //layer bottom - bottomLogo: { + bottomLogoBackground: { flex: 3, + borderRadius:10, + marginTop: 12, + marginBottom: 12, + backgroundColor:'white' + }, + bottomLogo: { width:'100%', height:'100%', + borderRadius:10, backgroundColor:'transparent' }, bottomQrcode1: { @@ -303,4 +416,152 @@ render() { backgroundColor:'transparent' }, + contentItemTop:{ + flex: 3, + width:'100%', + height:'100%', + paddingLeft: 25, + paddingRight: 20, + paddingTop: 15, + flexDirection: 'row', + alignItems: 'center', + backgroundColor:'transparent' + }, + + contentItemBottom:{ + flex: 1, + width:'100%', + height:'100%', + paddingLeft: 25, + paddingRight: 20, + paddingBottom: 15, + flexDirection: 'row', + alignItems: 'center', + backgroundColor:'transparent' + }, + + //layer content item top + contentItemTopCover:{ + flex: 5, + width:'100%', + height:'100%', + borderRadius:10, + backgroundColor:'blue' + }, + contentItemTopDetail:{ + flex: 6, + width:'100%', + height:'100%', + paddingLeft: 10, + paddingRight: 30, + alignItems: 'center', + backgroundColor:'transparent' + }, + contentItemTopQrcode:{ + flex: 5, + width:'100%', + height:'100%', + backgroundColor:'transparent' + }, + + //layer content item bottom + contentItemBottomMerchantName:{ + flex: 5, + width:'100%', + height:'100%', + alignItems: 'center', + backgroundColor:'transparent', + textAlign :'center', + textAlignVertical:'center', + fontSize: 10, + fontWeight : 'bold' + }, + contentItemBottomPlacehold:{ + flex: 6, + paddingLeft: 10, + paddingRight: 30, + width:'100%', + height:'100%', + backgroundColor:'transparent', + }, + contentItemBottomAction:{ + flex: 5, + width:'100%', + height:'100%', + backgroundColor:'transparent', + fontWeight : 'bold', + textAlign :'center', + textAlignVertical:'center', + }, + + //layer content item top detail + contentItemTopDetailTitle:{ + flex: 2, + width:'100%', + height:'100%', + backgroundColor:'transparent', + textAlign :'left', + textAlignVertical:'center', + fontSize: 24, + color: 'black' + }, + + contentItemTopDetailRemark:{ + flex: 1, + width:'100%', + height:'100%', + backgroundColor:'transparent', + textAlign :'left', + textAlignVertical:'center', + fontSize: 10, + color : 'gray' + }, + contentItemTopDetailPrice:{ + flex: 2, + width:'100%', + height:'100%', + backgroundColor:'transparent', + flexDirection: 'row', + }, + + contentItemTopDetailCurPrice:{ + flex: 3, + width:'100%', + height:'100%', + flexDirection: 'row', + backgroundColor:'transparent', + }, + contentItemTopDetailCurPriceStr:{ + backgroundColor:'transparent', + textAlign :'left', + textAlignVertical:'bottom', + fontSize: 32, + color : 'red' + }, + + contentItemTopDetailCurPriceStrUnit:{ + backgroundColor:'transparent', + textAlign :'left', + textAlignVertical:'bottom', + fontSize: 10, + color : 'red' + }, + + contentItemTopDetailSalePrice:{ + flex: 1, + width:'100%', + height:'100%', + backgroundColor:'transparent', + }, + + contentItemTopDetailSalePriceStr:{ + width:'100%', + height:'100%', + backgroundColor:'transparent', + textAlign :'left', + textAlignVertical:'bottom', + fontSize: 10, + textDecorationLine: 'line-through', + color : 'gray' + }, });