Kaynağa Gözat

[样式][修改]:整个页面布局和样式调整

tags/jenkins-front-end-screenad-53
hupeng 6 yıl önce
ebeveyn
işleme
8d664325e1
1 değiştirilmiş dosya ile 273 ekleme ve 12 silme
  1. +273
    -12
      App.js

+ 273
- 12
App.js Dosyayı Görüntüle

@@ -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'
},
});

Yükleniyor…
İptal
Kaydet