| @@ -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() { | |||
| <View style={styles.content}> | |||
| <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItem} > | |||
| <View style={styles.contentItemTop}> | |||
| <Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCover} /> | |||
| <View style={styles.contentItemTopDetail}> | |||
| <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text> | |||
| <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text> | |||
| <View style={styles.contentItemTopDetailPrice}> | |||
| <View style={styles.contentItemTopDetailCurPrice}> | |||
| <Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text> | |||
| <Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text> | |||
| </View> | |||
| <View style={styles.contentItemTopDetailSalePrice}> | |||
| <Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text> | |||
| </View> | |||
| </View> | |||
| </View> | |||
| <Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> | |||
| </View> | |||
| <View style={styles.contentItemBottom}> | |||
| <Text style={styles.contentItemBottomMerchantName}>肯德基</Text> | |||
| <View style={styles.contentItemBottomPlacehold}></View> | |||
| <Text style={styles.contentItemBottomAction}>扫码领取</Text> | |||
| </View> | |||
| </ImageBackground> | |||
| <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItem} > | |||
| <View style={styles.contentItemTop}> | |||
| <Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCover} /> | |||
| <View style={styles.contentItemTopDetail}> | |||
| <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text> | |||
| <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text> | |||
| <View style={styles.contentItemTopDetailPrice}> | |||
| <View style={styles.contentItemTopDetailCurPrice}> | |||
| <Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text> | |||
| <Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text> | |||
| </View> | |||
| <View style={styles.contentItemTopDetailSalePrice}> | |||
| <Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text> | |||
| </View> | |||
| </View> | |||
| </View> | |||
| <Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> | |||
| </View> | |||
| <View style={styles.contentItemBottom}> | |||
| <Text style={styles.contentItemBottomMerchantName}>肯德基</Text> | |||
| <View style={styles.contentItemBottomPlacehold}></View> | |||
| <Text style={styles.contentItemBottomAction}>扫码领取</Text> | |||
| </View> | |||
| </ImageBackground> | |||
| <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItem} > | |||
| <View style={styles.contentItemTop}> | |||
| <Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCover} /> | |||
| <View style={styles.contentItemTopDetail}> | |||
| <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text> | |||
| <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text> | |||
| <View style={styles.contentItemTopDetailPrice}> | |||
| <View style={styles.contentItemTopDetailCurPrice}> | |||
| <Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text> | |||
| <Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text> | |||
| </View> | |||
| <View style={styles.contentItemTopDetailSalePrice}> | |||
| <Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text> | |||
| </View> | |||
| </View> | |||
| </View> | |||
| <Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> | |||
| </View> | |||
| <View style={styles.contentItemBottom}> | |||
| <Text style={styles.contentItemBottomMerchantName}>肯德基</Text> | |||
| <View style={styles.contentItemBottomPlacehold}></View> | |||
| <Text style={styles.contentItemBottomAction}>扫码领取</Text> | |||
| </View> | |||
| </ImageBackground> | |||
| </View> | |||
| <View style={styles.bottom}> | |||
| <Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='center' style={styles.bottomLogo} /> | |||
| <View style={styles.bottomLogoBackground}> | |||
| <Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='center' style={styles.bottomLogo} /> | |||
| </View> | |||
| <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode1} /> | |||
| <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} /> | |||
| <Text style={styles.bottomPlacehold}>{this.state.text}</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' | |||
| }, | |||
| }); | |||