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