mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit a3006c4b0722d2e361cf3252019a6cde1f137932 1 parent 7f1fae3c

add 卡片 review by daiqiang

Inline Side-by-side
Showing 5 changed files with 120 additions and 147 deletions
@@ -66,7 +66,7 @@ export default class SnapshootShare extends React.Component { @@ -66,7 +66,7 @@ export default class SnapshootShare extends React.Component {
66 if (!resource) { 66 if (!resource) {
67 return null; 67 return null;
68 } 68 }
69 - let productIcon = resource.productIcon ? getSlicedUrl(resource.productIcon,109*DEVICE_WIDTH_RATIO, 141*DEVICE_WIDTH_RATIO, 2) : ''; 69 + let productIcon = resource.productIcon ? getSlicedUrl(resource.productIcon,218*DEVICE_WIDTH_RATIO, 282*DEVICE_WIDTH_RATIO, 2) : '';
70 let productGroupPrice = resource.productGroupPrice; 70 let productGroupPrice = resource.productGroupPrice;
71 let productName = resource.productName; 71 let productName = resource.productName;
72 let productSalePrice = resource.productSalePrice; 72 let productSalePrice = resource.productSalePrice;
@@ -89,39 +89,36 @@ export default class SnapshootShare extends React.Component { @@ -89,39 +89,36 @@ export default class SnapshootShare extends React.Component {
89 showsVerticalScrollIndicator={false} 89 showsVerticalScrollIndicator={false}
90 > 90 >
91 <View style={styles.container} ref='container'> 91 <View style={styles.container} ref='container'>
92 - <View style={styles.titleV}>  
93 - <Text style={styles.name}>{nickName}</Text>  
94 - <Text style={styles.commonText}>邀请你参团</Text>  
95 - </View> 92 +
  93 + <Image source={require('../images/share-logo.png')} resizeMode={'contain'} style={styles.logo} />
96 <View style={styles.product}> 94 <View style={styles.product}>
97 <YH_Image style={styles.productimage} url={productIcon}></YH_Image> 95 <YH_Image style={styles.productimage} url={productIcon}></YH_Image>
98 - <View style={styles.right}>  
99 - <View style={styles.titleView}>  
100 - <Text style={styles.title} numberOfLines={2}>{productName}</Text> 96 + <View style={styles.productDetail}>
  97 + <View style={styles.productDetailTop}>
  98 + <Text style={styles.productDetailTopText}>{productName}</Text>
101 </View> 99 </View>
102 - <View style={styles.priceView}>  
103 - <View style={styles.iconTextView}>  
104 - <Text style={styles.iconText}>{perpleNum}人团</Text>  
105 - </View>  
106 - <Text style={styles.price1}>{productGroupPrice}</Text>  
107 - </View>  
108 - <View style={styles.subPriceView}>  
109 - <Text style={styles.subPrice1}>单人购买：</Text> 100 + <View style={styles.productDetailBottom}>
  101 + <Image source={require('../images/Group5.png')} style={styles.priceIcon} />
  102 + <Text style={styles.price}>{productGroupPrice}</Text>
110 <DeleteLineText 103 <DeleteLineText
111 - style={styles.oldPriceContainer}  
112 - textStyle={styles.price2}  
113 - lineStyle={styles.deleteLine}  
114 - text={productSalePrice}  
115 - /> 104 + style={styles.oldPriceContainer}
  105 + textStyle={styles.price2}
  106 + lineStyle={styles.deleteLine}
  107 + text={productSalePrice}
  108 + />
116 </View> 109 </View>
117 </View> 110 </View>
  111 + <Image source={require('../images/Page.png')} resizeMode={'contain'} style={styles.mianyouIcon} />
118 </View> 112 </View>
119 - <Image source={require('../images/share-logo.png')} resizeMode={'contain'} style={styles.logo} />  
120 - <Image source={{uri: qrCode}} resizeMode={'contain'} style={styles.qr} />  
121 - <Text style={styles.tip}>长按扫码立即参团</Text>  
122 - <View style={styles.tipDetailView}>  
123 - <Image source={require('../images/PT_tip_ic.png')} resizeMode={'contain'} style={styles.tipicon} />  
124 - <Text style={styles.tipDetailText}>实际价格以页面展示为准</Text> 113 + <View style={styles.bottom}>
  114 + <Image source={{uri: qrCode}} resizeMode={'contain'} style={styles.qr} />
  115 + <View style={styles.bottomDetail}>
  116 + <View style={styles.titleV}>
  117 + <Text style={styles.titleText}>{nickName}</Text>
  118 + <Text style={styles.titleText}>邀请你参团</Text>
  119 + </View>
  120 + <Text style={styles.tipDetailText}>长按图片识别小程序参团</Text>
  121 + </View>
125 </View> 122 </View>
126 </View> 123 </View>
127 <View style={styles.spaceV}/> 124 <View style={styles.spaceV}/>
@@ -184,154 +181,131 @@ let styles = StyleSheet.create({ @@ -184,154 +181,131 @@ let styles = StyleSheet.create({
184 backgroundColor: 'white', 181 backgroundColor: 'white',
185 alignItems: 'center', 182 alignItems: 'center',
186 }, 183 },
187 - titleV: {  
188 - width: 300*DEVICE_WIDTH_RATIO,  
189 - height: 22*DEVICE_WIDTH_RATIO,  
190 - flexDirection: 'row',  
191 - alignItems: 'center',  
192 - justifyContent: 'center',  
193 - marginTop: 60*DEVICE_WIDTH_RATIO,  
194 - },  
195 - name: {  
196 - fontSize: 16,  
197 - color: '#D0021B',  
198 - },  
199 - commonText: {  
200 - fontSize: 16,  
201 - color: '#000000',  
202 - },  
203 - product: {  
204 - width: 300*DEVICE_WIDTH_RATIO,  
205 - height: 141*DEVICE_WIDTH_RATIO,  
206 - shadowColor: 'rgba(0,0,0,0.4)',  
207 - shadowOffset: {width: 0, height: 5},  
208 - shadowOpacity: 0.5,  
209 - shadowRadius: 5,  
210 - elevation: 4,  
211 - flexDirection: 'row',  
212 - backgroundColor: 'white',  
213 - marginTop: 34*DEVICE_WIDTH_RATIO,  
214 - },  
215 - productimage: {  
216 - width: 109*DEVICE_WIDTH_RATIO,  
217 - height: 141*DEVICE_WIDTH_RATIO,  
218 - },  
219 - right: {  
220 - width: 191*DEVICE_WIDTH_RATIO,  
221 - height: 141*DEVICE_WIDTH_RATIO,  
222 - flexDirection: 'column',  
223 - },  
224 - titleView: {  
225 - width: 174*DEVICE_WIDTH_RATIO,  
226 - height: 32*DEVICE_WIDTH_RATIO,  
227 - marginTop: 17*DEVICE_WIDTH_RATIO,  
228 - marginLeft: 10*DEVICE_WIDTH_RATIO,  
229 - }, 184 +
230 scrollView: { 185 scrollView: {
231 backgroundColor: 'white', 186 backgroundColor: 'white',
232 }, 187 },
233 - spaceV: {  
234 - backgroundColor: 'white',  
235 - height: 150*DEVICE_WIDTH_RATIO,  
236 - width, 188 + spaceV: {
  189 + backgroundColor: 'white',
  190 + height: 150*DEVICE_WIDTH_RATIO,
  191 + width,
237 }, 192 },
238 193
239 - title: {  
240 - fontSize: 12,  
241 - color: '#444444',  
242 - lineHeight: 19, 194 + logo: {
  195 + height: 22*DEVICE_WIDTH_RATIO,
  196 + width: 112*DEVICE_WIDTH_RATIO,
  197 + marginTop: 37*DEVICE_WIDTH_RATIO,
243 }, 198 },
244 - subPriceView: {  
245 - width: 174*DEVICE_WIDTH_RATIO,  
246 - height: 14*DEVICE_WIDTH_RATIO,  
247 - marginLeft: 10*DEVICE_WIDTH_RATIO,  
248 - marginTop: 5*DEVICE_WIDTH_RATIO,  
249 - flexDirection: 'row',  
250 - alignItems: 'center', 199 +
  200 + productimage: {
  201 + height: 443*DEVICE_WIDTH_RATIO,
  202 + width: 325*DEVICE_WIDTH_RATIO,
251 }, 203 },
252 - subPrice1: {  
253 - fontSize: 10,  
254 - color: '#B0B0B0',  
255 - lineHeight: 10*DEVICE_WIDTH_RATIO, 204 +
  205 + product: {
  206 + height: 443*DEVICE_WIDTH_RATIO,
  207 + width: 325*DEVICE_WIDTH_RATIO,
  208 + marginTop: 24*DEVICE_WIDTH_RATIO,
256 }, 209 },
257 - priceView: {  
258 - width: 174*DEVICE_WIDTH_RATIO,  
259 - height: 21*DEVICE_WIDTH_RATIO,  
260 - marginLeft: 10*DEVICE_WIDTH_RATIO,  
261 - marginTop: 33*DEVICE_WIDTH_RATIO,  
262 - flexDirection: 'row',  
263 - alignItems: 'center', 210 + productDetail: {
  211 + height: 80*DEVICE_WIDTH_RATIO,
  212 + width: 325*DEVICE_WIDTH_RATIO,
  213 + backgroundColor: 'rgba(0,0,0,0.4)',
  214 + position: 'absolute',
  215 + bottom: 0,
264 }, 216 },
265 - iconTextView: {  
266 - width: 40*DEVICE_WIDTH_RATIO,  
267 - height: 14*DEVICE_WIDTH_RATIO, 217 + productDetailTop: {
  218 + height: 20*DEVICE_WIDTH_RATIO,
  219 + width: 325*DEVICE_WIDTH_RATIO,
  220 + marginTop: 14*DEVICE_WIDTH_RATIO,
268 justifyContent: 'center', 221 justifyContent: 'center',
269 alignItems: 'center', 222 alignItems: 'center',
270 - backgroundColor: '#D0021B',  
271 }, 223 },
272 - iconText: {  
273 - color: 'white',  
274 - fontSize: 9,  
275 - textAlign: 'center', 224 + productDetailTopText: {
  225 + fontSize: 14,
  226 + color: '#FFFFFF',
276 }, 227 },
277 - price1: {  
278 - fontSize: 18,  
279 - marginLeft: 10*DEVICE_WIDTH_RATIO,  
280 - color: '#444444',  
281 - lineHeight: 18*DEVICE_WIDTH_RATIO,  
282 - fontWeight: 'bold', 228 + productDetailBottom: {
  229 + height: 30*DEVICE_WIDTH_RATIO,
  230 + width: 325*DEVICE_WIDTH_RATIO,
  231 + marginTop: 7*DEVICE_WIDTH_RATIO,
  232 + flexDirection: 'row',
  233 + justifyContent: 'center',
  234 + alignItems: 'center',
283 }, 235 },
284 -  
285 oldPriceContainer: { 236 oldPriceContainer: {
286 - flexDirection: 'row',  
287 - height: 12,  
288 - marginTop: 2,  
289 - }, 237 + flexDirection: 'row',
  238 + height: 12,
  239 + marginTop: 2,
  240 + },
  241 + priceIcon: {
  242 + height: 17,
  243 + width: 50,
  244 + },
  245 + price: {
  246 + fontSize: 24,
  247 + color: '#FFFFFF',
  248 + marginLeft: 15*DEVICE_WIDTH_RATIO,
  249 + fontWeight: 'bold',
  250 + },
  251 + price2: {
  252 + fontSize: 14,
  253 + lineHeight: 14,
  254 + color: '#B0B0B0',
  255 + alignItems: 'center',
  256 + marginLeft: 13*DEVICE_WIDTH_RATIO,
  257 + },
  258 + deleteLine: {
  259 + position: 'absolute',
  260 + top: (12 / 2),
  261 + left: 13,
  262 + right: 0,
  263 + height: 1,
  264 + backgroundColor: '#b0b0b0',
  265 + },
290 266
291 - price2: {  
292 - fontSize: 12,  
293 - lineHeight: 12,  
294 - color: '#B0B0B0', 267 + mianyouIcon: {
  268 + position: 'absolute',
  269 + top: 262*DEVICE_WIDTH_RATIO,
  270 + right: 28*DEVICE_WIDTH_RATIO,
  271 + height: 63*DEVICE_WIDTH_RATIO,
  272 + width: 63*DEVICE_WIDTH_RATIO,
  273 + },
  274 +
  275 + bottom: {
  276 + height: 141*DEVICE_WIDTH_RATIO,
  277 + width: 325*DEVICE_WIDTH_RATIO,
295 alignItems: 'center', 278 alignItems: 'center',
296 - },  
297 - deleteLine: {  
298 - position: 'absolute',  
299 - top: (16 / 2) - 4,  
300 - left: 0,  
301 - right: 0,  
302 - height: 1,  
303 - backgroundColor: '#b0b0b0',  
304 - },  
305 - logo: {  
306 - height: 19*DEVICE_WIDTH_RATIO,  
307 - width: 300*DEVICE_WIDTH_RATIO,  
308 - marginTop: 80*DEVICE_WIDTH_RATIO, 279 + flexDirection: 'row',
309 }, 280 },
310 qr: { 281 qr: {
311 - height: 120*DEVICE_WIDTH_RATIO,  
312 - width: 120*DEVICE_WIDTH_RATIO,  
313 - marginTop: 25*DEVICE_WIDTH_RATIO, 282 + height: 80*DEVICE_WIDTH_RATIO,
  283 + width: 80*DEVICE_WIDTH_RATIO,
314 }, 284 },
315 - tip: {  
316 - fontSize: 14,  
317 - color:'#444444',  
318 - marginTop: 25*DEVICE_WIDTH_RATIO, 285 +
  286 + bottomDetail: {
  287 + height: 80*DEVICE_WIDTH_RATIO,
  288 + width: 245*DEVICE_WIDTH_RATIO,
319 }, 289 },
320 - tipDetailView: { 290 + titleV: {
  291 + width: 218*DEVICE_WIDTH_RATIO,
  292 + height: 20*DEVICE_WIDTH_RATIO,
321 flexDirection: 'row', 293 flexDirection: 'row',
322 alignItems: 'center', 294 alignItems: 'center',
  295 + marginTop: 16*DEVICE_WIDTH_RATIO,
  296 + marginLeft: 27*DEVICE_WIDTH_RATIO,
323 }, 297 },
324 - tipicon: {  
325 - marginTop: 10*DEVICE_WIDTH_RATIO,  
326 - height: 15*DEVICE_WIDTH_RATIO,  
327 - width: 15*DEVICE_WIDTH_RATIO, 298 + titleText: {
  299 + fontSize: 16,
  300 + color: '#444444',
328 }, 301 },
329 tipDetailText: { 302 tipDetailText: {
330 fontSize: 12, 303 fontSize: 12,
331 color: '#B0B0B0', 304 color: '#B0B0B0',
332 - marginTop: 10*DEVICE_WIDTH_RATIO,  
333 - marginLeft: 5*DEVICE_WIDTH_RATIO, 305 + marginTop: 12*DEVICE_WIDTH_RATIO,
  306 + marginLeft: 27*DEVICE_WIDTH_RATIO,
334 }, 307 },
  308 +
335 shareView: { 309 shareView: {
336 position: 'absolute', 310 position: 'absolute',
337 width, 311 width,
@@ -354,7 +328,6 @@ let styles = StyleSheet.create({ @@ -354,7 +328,6 @@ let styles = StyleSheet.create({
354 flexDirection: 'row', 328 flexDirection: 'row',
355 }, 329 },
356 button1: { 330 button1: {
357 - // marginLeft: 10*DEVICE_WIDTH_RATIO,  
358 alignItems: 'center', 331 alignItems: 'center',
359 }, 332 },
360 333