| @@ -20,22 +20,42 @@ import DeviceInfo from "react-native-device-info"; | |||||
| // 取得屏幕的宽高Dimensions | // 取得屏幕的宽高Dimensions | ||||
| const { width, height } = Dimensions.get('window'); | 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 { | export default class MyPage extends Component { | ||||
| constructor(props) { | constructor(props) { | ||||
| super(props); | super(props); | ||||
| this.state = { | this.state = { | ||||
| baseInfo: { | |||||
| imgUrlH:'', | |||||
| imgQrcodeWeapp:'', | |||||
| imgQrcodeWemp:'' | |||||
| }, | |||||
| baseInfo: baseInfoDefault, | |||||
| adDataList:[], | |||||
| adData:[], | |||||
| contentItem1:contentItemDefault, | |||||
| contentItem2:contentItemDefault, | |||||
| contentItem3:contentItemDefault, | |||||
| text:'', | text:'', | ||||
| qrcode:[], | |||||
| restartAllowed: true , | restartAllowed: true , | ||||
| syncMessage: "syncMessage" , | syncMessage: "syncMessage" , | ||||
| progress: false, | 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') | HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/list?deviceId=11%3AAA%3A33%3ABB%3A44&pageNum=1&pageSize=5') | ||||
| .then(result => { | .then(result => { | ||||
| this.setState({ | this.setState({ | ||||
| adData: result.data.list}); | |||||
| adDataList : result.data.list}); | |||||
| this.setState({ | |||||
| contentItem1 : this.state.adDataList[0]}); | |||||
| }) | }) | ||||
| .catch(error => console.error(error)) | .catch(error => console.error(error)) | ||||
| } | } | ||||
| getBaseInfo() { | 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 => { | .then(result => { | ||||
| this.setState({ | this.setState({ | ||||
| baseInfo:result.data}); | baseInfo:result.data}); | ||||
| @@ -139,6 +161,7 @@ getBaseInfo() { | |||||
| componentDidMount() { | componentDidMount() { | ||||
| this.getBaseInfo() | this.getBaseInfo() | ||||
| this.getAdDataList() | |||||
| } | } | ||||
| @@ -170,19 +193,102 @@ render() { | |||||
| <View style={styles.content}> | <View style={styles.content}> | ||||
| <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItem} > | <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> | ||||
| <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItem} > | <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> | ||||
| <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItem} > | <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> | ||||
| </View> | </View> | ||||
| <View style={styles.bottom}> | <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.bottomQrcode1} /> | ||||
| <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} /> | <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} /> | ||||
| <Text style={styles.bottomPlacehold}>{this.state.text}</Text> | <Text style={styles.bottomPlacehold}>{this.state.text}</Text> | ||||
| @@ -266,10 +372,17 @@ render() { | |||||
| }, | }, | ||||
| //layer bottom | //layer bottom | ||||
| bottomLogo: { | |||||
| bottomLogoBackground: { | |||||
| flex: 3, | flex: 3, | ||||
| borderRadius:10, | |||||
| marginTop: 12, | |||||
| marginBottom: 12, | |||||
| backgroundColor:'white' | |||||
| }, | |||||
| bottomLogo: { | |||||
| width:'100%', | width:'100%', | ||||
| height:'100%', | height:'100%', | ||||
| borderRadius:10, | |||||
| backgroundColor:'transparent' | backgroundColor:'transparent' | ||||
| }, | }, | ||||
| bottomQrcode1: { | bottomQrcode1: { | ||||
| @@ -303,4 +416,152 @@ render() { | |||||
| backgroundColor:'transparent' | 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' | |||||
| }, | |||||
| }); | }); | ||||