Authored by 孙凯

修改 红人店铺header UI review by hongmo

@@ -120,7 +120,7 @@ export default class Header extends React.Component { @@ -120,7 +120,7 @@ export default class Header extends React.Component {
120 let backgroundImage = data.shopBanner?data.shopBanner.module_data.data[0].pic:'null'; 120 let backgroundImage = data.shopBanner?data.shopBanner.module_data.data[0].pic:'null';
121 let brandIcon = getSlicedUrl(data.shop_logo, 60, 60, 2); 121 let brandIcon = getSlicedUrl(data.shop_logo, 60, 60, 2);
122 let isFav = data.is_addFav; 122 let isFav = data.is_addFav;
123 - let favImage = isFav?require('../../image/heart_h.png'):require('../../image/heart_n.png'); 123 + let favImage = isFav?require('../../image/btn_gz_h.png'):require('../../image/btn_gz_n.png');
124 //下拉图标 124 //下拉图标
125 let sourceIcon = launchProfile?require('../../image/arrow_ic_up.png'):require('../../image/arrow_ic.png'); 125 let sourceIcon = launchProfile?require('../../image/arrow_ic_up.png'):require('../../image/arrow_ic.png');
126 //计算控件高度,图片+标题+简介+下拉图标+20空白 126 //计算控件高度,图片+标题+简介+下拉图标+20空白
@@ -141,16 +141,19 @@ export default class Header extends React.Component { @@ -141,16 +141,19 @@ export default class Header extends React.Component {
141 url={backgroundImage} 141 url={backgroundImage}
142 style={{width, height: imageHeigth }} 142 style={{width, height: imageHeigth }}
143 /> 143 />
144 -  
145 - <View style={styles.titleView}>  
146 - <Text style={styles.name} numberOfLines={1}>{brandName}</Text> 144 + <View style={styles.maskView}/>
  145 + <View style={styles.header}>
  146 + <Text style={styles.number} numberOfLines={1}>{numberOfFav}</Text>
147 <TouchableOpacity activeOpacity={0.5} onPress={() => { 147 <TouchableOpacity activeOpacity={0.5} onPress={() => {
148 - this.props.onPressCollection && this.props.onPressCollection(isFav);  
149 - }}> 148 + this.props.onPressCollection && this.props.onPressCollection(isFav);
  149 + }}>
150 <Image source={favImage} style={styles.favImage}/> 150 <Image source={favImage} style={styles.favImage}/>
151 </TouchableOpacity> 151 </TouchableOpacity>
  152 + </View>
  153 +
  154 + <View style={styles.titleView}>
  155 + <Text style={styles.name} numberOfLines={1}>{brandName}</Text>
152 </View> 156 </View>
153 - <Text style={styles.number}>{numberOfFav}</Text>  
154 157
155 <YH_Image 158 <YH_Image
156 url={brandIcon} 159 url={brandIcon}
@@ -204,30 +207,43 @@ let styles = StyleSheet.create({ @@ -204,30 +207,43 @@ let styles = StyleSheet.create({
204 backgroundColor:'white', 207 backgroundColor:'white',
205 width: width, 208 width: width,
206 height: titleHeigth, 209 height: titleHeigth,
207 - justifyContent:'space-between', 210 + },
  211 + maskView: {
  212 + width: width,
  213 + height: imageHeigth,
  214 + position: 'absolute',
  215 + marginTop: -imageHeigth,
  216 + backgroundColor: 'rgba(0,0,0,.2)'
  217 + },
  218 + header: {
  219 + justifyContent: 'flex-end',
  220 + flexDirection: 'row',
  221 + width: width,
  222 + height: 25,
  223 + position: 'absolute',
  224 + marginTop: -35,
  225 + backgroundColor: 'transparent',
208 }, 226 },
209 name: { 227 name: {
210 marginLeft: 15 + 60 + 15, 228 marginLeft: 15 + 60 + 15,
211 backgroundColor: 'white', 229 backgroundColor: 'white',
212 - width: width-85-120, 230 + width: width-120,
213 marginTop: 22, 231 marginTop: 22,
214 color: '#444444', 232 color: '#444444',
215 fontWeight: 'bold', 233 fontWeight: 'bold',
216 fontSize: 16, 234 fontSize: 16,
217 }, 235 },
218 number: { 236 number: {
219 - marginTop: - (60 - 22),  
220 - color: '#444444', 237 + color: '#ffffff',
221 fontSize: 13, 238 fontSize: 13,
222 - backgroundColor: 'white',  
223 - position: 'absolute',  
224 - marginLeft: width - 15 - 60 - 15 - 17, 239 + marginRight: 10,
  240 + marginTop: 8,
  241 + backgroundColor: 'transparent',
225 }, 242 },
226 favImage: { 243 favImage: {
227 - width: 17,  
228 - height: 16,  
229 - marginTop: 22,  
230 - backgroundColor: 'white', 244 + width: 64,
  245 + height: 25,
  246 + backgroundColor: 'transparent',
231 marginRight: 15, 247 marginRight: 15,
232 }, 248 },
233 text: { 249 text: {