Parcourir la source

[增加注释,修改样式][修改]

tags/jenkins-front-end-screenad-79-v54^0
meo il y a 6 ans
Parent
révision
0ba76b71d9
1 fichiers modifiés avec 38 ajouts et 29 suppressions
  1. +38
    -29
      App.js

+ 38
- 29
App.js Voir le fichier

@@ -288,17 +288,21 @@ getContentViewItem(contentItem, annomation) {
<Animatable.View animation={annomation} easing="ease-out" duration={1500} delay={500} useNativeDriver ={true} style={styles.contentItem}> <Animatable.View animation={annomation} easing="ease-out" duration={1500} delay={500} useNativeDriver ={true} style={styles.contentItem}>


<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} > <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
{/* 列表 */}
<View style={styles.contentItemTop}> <View style={styles.contentItemTop}>
<Image source={{uri: contentItem.target.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} /> <Image source={{uri: contentItem.target.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}> <View style={styles.contentItemTopDetail}>
{/* 券的title */}
<Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text> <Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text>
{/* <Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">你好世界你好你是你好宿舍熟话说术后</Text> */}
{/* <Text style={styles.contentItemTopDetailRemark} numberOfLines={1} ellipsizeMode="tail">{contentItem.target.remark}</Text> */} {/* <Text style={styles.contentItemTopDetailRemark} numberOfLines={1} ellipsizeMode="tail">{contentItem.target.remark}</Text> */}
<View style={styles.contentItemTopDetailPrice}> <View style={styles.contentItemTopDetailPrice}>
{/* 售价 */}
<View style={styles.contentItemTopDetailCurPrice}> <View style={styles.contentItemTopDetailCurPrice}>
<Text style={styles.contentItemTopDetailCurPriceStrUnit}>¥</Text> <Text style={styles.contentItemTopDetailCurPriceStrUnit}>¥</Text>
<Text style={styles.contentItemTopDetailCurPriceStr}>{contentItem.target.salePriceStr}</Text> <Text style={styles.contentItemTopDetailCurPriceStr}>{contentItem.target.salePriceStr}</Text>
</View> </View>
{/* 面额 */}
<View style={styles.contentItemTopDetailSalePrice}> <View style={styles.contentItemTopDetailSalePrice}>
<Text style={styles.contentItemTopDetailSalePriceStr} >¥{contentItem.target.priceStr}</Text> <Text style={styles.contentItemTopDetailSalePriceStr} >¥{contentItem.target.priceStr}</Text>
</View> </View>
@@ -306,17 +310,14 @@ getContentViewItem(contentItem, annomation) {
</View> </View>
<Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
</View> </View>
{/* 优惠券底部商户名称 */}
<View style={styles.contentItemBottom}> <View style={styles.contentItemBottom}>
<Text style={styles.contentItemBottomMerchantName}>{merchantName}</Text> <Text style={styles.contentItemBottomMerchantName}>{merchantName}</Text>
<View style={styles.contentItemBottomPlacehold}></View> <View style={styles.contentItemBottomPlacehold}></View>
<Text style={styles.contentItemBottomAction}>{actionText}</Text> <Text style={styles.contentItemBottomAction}>{actionText}</Text>
</View> </View>

</ImageBackground> </ImageBackground>

{this.getContentViewItemUplayer(contentItem)} {this.getContentViewItemUplayer(contentItem)}

</Animatable.View> </Animatable.View>
) )
} }
@@ -354,21 +355,20 @@ render() {


return ( return (
<ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}> <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
{/* 头部title二维码开始 */}
<View style={styles.title}> <View style={styles.title}>
<View style={styles.titleImagePlace}> <View style={styles.titleImagePlace}>
<Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} /> <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
</View> </View>

<ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} > <ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} >
<View style={styles.titleQrcodePlacehold}></View> <View style={styles.titleQrcodePlacehold}></View>
<Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} /> <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
<View style={styles.titleQrcodePlacehold}></View> <View style={styles.titleQrcodePlacehold}></View>
</ImageBackground> </ImageBackground>
</View> </View>
{/* 券列表展示列表开始 */}
{this.getContentView()} {this.getContentView()}
{/* 底部商场信息展示开始 */}
<View style={styles.bottom}> <View style={styles.bottom}>
<View style={styles.bottomLogoBackground}> <View style={styles.bottomLogoBackground}>
<Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='contain' style={styles.bottomLogo} /> <Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='contain' style={styles.bottomLogo} />
@@ -383,7 +383,6 @@ render() {
</View> </View>
<Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text> <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
</View> </View>

</ImageBackground> </ImageBackground>
); );
} }
@@ -610,8 +609,8 @@ render() {
flex: 6, flex: 6,
width:'100%', width:'100%',
height:'100%', height:'100%',
paddingLeft: 27/PixelRatio.get(),
paddingRight: 79/PixelRatio.get(),
paddingLeft: 20/PixelRatio.get(),
paddingRight: 20/PixelRatio.get(),
alignItems: 'center', alignItems: 'center',
backgroundColor:'transparent' backgroundColor:'transparent'
}, },
@@ -629,6 +628,7 @@ render() {
width:'100%', width:'100%',
height:'100%', height:'100%',
alignItems: 'center', alignItems: 'center',
color:"black",
backgroundColor:'transparent', backgroundColor:'transparent',
textAlign :'center', textAlign :'center',
textAlignVertical:'center', textAlignVertical:'center',
@@ -657,28 +657,33 @@ render() {
color: 'darkgray' color: 'darkgray'
}, },


//layer content item top detail
// 券的title
contentItemTopDetailTitle:{ contentItemTopDetailTitle:{
flex: 2, flex: 2,
// height:'100%',
width:'100%', width:'100%',
height:'100%',
marginTop:"2%",
// borderStyle:"solid",
// borderWidth:1,
// borderColor:"red",
backgroundColor:'transparent', backgroundColor:'transparent',
textAlign :'left', textAlign :'left',
color:"black",
textAlignVertical:'center', textAlignVertical:'center',
fontSize: 53/PixelRatio.get(), fontSize: 53/PixelRatio.get(),
}, },
/*
contentItemTopDetailRemark:{
flex: 1,
width:'100%',
height:'100%',
backgroundColor:'transparent',
textAlign :'left',
textAlignVertical:'center',
fontSize: 27/PixelRatio.get(),
color : 'gray'
},
*/
/*
contentItemTopDetailRemark:{
flex: 1,
width:'100%',
height:'100%',
backgroundColor:'transparent',
textAlign :'left',
textAlignVertical:'center',
fontSize: 27/PixelRatio.get(),
color : 'gray'
},
*/
contentItemTopDetailPrice:{ contentItemTopDetailPrice:{
flex: 2, flex: 2,
width:'100%', width:'100%',
@@ -687,6 +692,7 @@ render() {
flexDirection: 'row', flexDirection: 'row',
}, },


// 售价的样式
contentItemTopDetailCurPrice:{ contentItemTopDetailCurPrice:{
flex: 3, flex: 3,
width:'100%', width:'100%',
@@ -713,11 +719,14 @@ render() {
fontSize: 48/PixelRatio.get(), fontSize: 48/PixelRatio.get(),
color : 'red' color : 'red'
}, },
// 面额的样式
contentItemTopDetailSalePrice:{ contentItemTopDetailSalePrice:{
flex: 1,
position:"absolute",
bottom:0,
left:0,
// flex: 1,
width:'100%', width:'100%',
height:'100%',
height:'30%',
backgroundColor:'transparent', backgroundColor:'transparent',
}, },




Chargement…
Annuler
Enregistrer