Authored by Zhu-Arthur

merge 8.1.5 aea98c1f review by 戴强

@@ -4,7 +4,7 @@ import {Platform} from 'react-native'; @@ -4,7 +4,7 @@ import {Platform} from 'react-native';
4 // import Community from './community/Community'; 4 // import Community from './community/Community';
5 import Plustar from './plustar/Plustar'; 5 import Plustar from './plustar/Plustar';
6 import Coupon from './coupon/Coupon'; 6 import Coupon from './coupon/Coupon';
7 -// import QRCode from './qrcode/QRCode'; 7 +import QRCode from './qrcode/QRCode';
8 import BrandStore from './brandStore/BrandStore'; 8 import BrandStore from './brandStore/BrandStore';
9 import Classify from './classify/Classify'; 9 import Classify from './classify/Classify';
10 import Seckill from './seckill/Seckill'; 10 import Seckill from './seckill/Seckill';
@@ -312,6 +312,9 @@ let styles = StyleSheet.create({ @@ -312,6 +312,9 @@ let styles = StyleSheet.create({
312 titleWidth: { 312 titleWidth: {
313 maxWidth: 80, 313 maxWidth: 80,
314 }, 314 },
  315 + titleWidth: {
  316 + maxWidth: 80,
  317 + },
315 tipDetailText: { 318 tipDetailText: {
316 fontSize: 12, 319 fontSize: 12,
317 color: '#B0B0B0', 320 color: '#B0B0B0',
  1 +'use strict';
  2 +
  3 +import React from 'react';
  4 +import ReactNative from 'react-native';
  5 +import YH_Image from '../../common/components/YH_Image';
  6 +import {getSlicedUrl} from '../../classify/utils/Utils';
  7 +
  8 +const {
  9 + AppRegistry,
  10 + StyleSheet,
  11 + Image,
  12 + View,
  13 + Dimensions,
  14 + TouchableOpacity,
  15 + Modal,
  16 + Text,
  17 + CameraRoll,
  18 + Alert,
  19 + ScrollView,
  20 +} = ReactNative;
  21 +
  22 +
  23 +export default class SnapshootShare extends React.Component {
  24 + constructor(props) {
  25 + super(props);
  26 + this.saveImage = this.saveImage.bind(this);
  27 + this.shareImage = this.shareImage.bind(this);
  28 + }
  29 +
  30 + shareImage(shareType){
  31 + ReactNative.takeSnapshot(this.refs.container, {format: 'png', quality: 10}).then(
  32 + (uri) => {
  33 + this.props.shareSnapshootAction && this.props.shareSnapshootAction(shareType,uri);
  34 + }).catch(
  35 + (error) => {
  36 + Alert.alert('图片生成失败!')
  37 + });
  38 + }
  39 +
  40 + saveImage(){
  41 + ReactNative.takeSnapshot(this.refs.container, {format: 'png', quality: 10}).then(
  42 + (uri) => {
  43 + var promise = CameraRoll.saveToCameraRoll(uri);
  44 + promise.then(function(result) {
  45 + Alert.alert('保存成功!')
  46 + }).catch(function(error) {
  47 + Alert.alert('保存失败!')
  48 + });
  49 + }).catch(
  50 + (error) => {
  51 + Alert.alert('保存失败!')
  52 + });
  53 + }
  54 +
  55 + render() {
  56 + let { groupDetail ,qrCode, unionType} = this.props;
  57 + let productDetail = groupDetail ? groupDetail.toJS():null;
  58 + if(!productDetail){
  59 + return null;
  60 + }
  61 + let lackNum = productDetail.lackNum;
  62 + let membershipItems = productDetail.membershipItems;
  63 + let resource = membershipItems ? membershipItems[0]: null;
  64 +
  65 + if (!resource) {
  66 + return null;
  67 + }
  68 + let productIcon = resource.productIcon ? getSlicedUrl(resource.productIcon,218*DEVICE_WIDTH_RATIO, 282*DEVICE_WIDTH_RATIO, 2) : '';
  69 + let productGroupPrice = resource.productGroupPrice;
  70 + let productName = resource.productName;
  71 + let productSalePrice = resource.productSalePrice;
  72 + let productSkn = resource.productSkn;
  73 + let perpleNum = membershipItems.length + lackNum;
  74 + let nickName = resource.nickName;
  75 +
  76 +
  77 + return (
  78 + <Modal
  79 + visible={this.props.show}
  80 + animationType={'none'}
  81 + transparent={true}
  82 + onRequestClose={() => {
  83 + }}>
  84 + <View style={styles.modalContainer}>
  85 + <ScrollView
  86 + style={styles.scrollView}
  87 + vertical={true}
  88 + showsVerticalScrollIndicator={false}
  89 + >
  90 + <View style={styles.container} ref='container'>
  91 +
  92 + <Image source={require('../images/share-logo.png')} resizeMode={'contain'} style={styles.logo} />
  93 + <View style={styles.product}>
  94 + <YH_Image style={styles.productimage} url={productIcon}></YH_Image>
  95 + <View style={styles.productDetail}>
  96 + <View style={styles.productDetailTop}>
  97 + <Text style={styles.productDetailTopText}>{productName}</Text>
  98 + </View>
  99 + <View style={styles.productDetailBottom}>
  100 + <Image source={require('../images/Group5.png')} style={styles.priceIcon} />
  101 + <Text style={styles.price}>{productGroupPrice}</Text>
  102 + <Text style={[styles.price2, {textDecorationLine: 'line-through'}]}>{productSalePrice}</Text>
  103 + </View>
  104 + </View>
  105 + <Image source={require('../images/Page.png')} resizeMode={'contain'} style={styles.mianyouIcon} />
  106 + </View>
  107 + <View style={styles.bottom}>
  108 + <Image source={{uri: qrCode}} resizeMode={'contain'} style={styles.qr} />
  109 + <View style={styles.bottomDetail}>
  110 + <View style={styles.titleV}>
  111 + <Text style={[styles.titleText, styles.titleWidth]} numberOfLines={1}>{nickName}</Text>
  112 + <Text style={styles.titleText}>邀请你拼潮货</Text>
  113 + </View>
  114 + <Text style={styles.tipDetailText}>长按图片识别小程序参团</Text>
  115 + </View>
  116 + </View>
  117 + </View>
  118 + <View style={styles.spaceV}/>
  119 + </ScrollView>
  120 + <View style={styles.shareView}>
  121 + <View style={styles.buttons}>
  122 + <TouchableOpacity activeOpacity={0.5} style={styles.button1} onPress={() => {
  123 + this.shareImage && this.shareImage('WXSceneSession');
  124 + }}>
  125 + <Image source={unionType ? require('../images/unionShare_wx_icon.png') : require('../images/weixin.png')} style={styles.icon} />
  126 + <Text style={styles.text}>微信好友</Text>
  127 + </TouchableOpacity>
  128 + <TouchableOpacity activeOpacity={0.5} style={styles.button2} onPress={() => {
  129 + this.shareImage && this.shareImage('WXSceneTimeline');
  130 + }}>
  131 + <Image source={unionType ? require('../images/unionShare_timeline_icon.png') : require('../images/share_timeline_icon.png')} style={styles.icon} />
  132 + <Text style={styles.text}>微信朋友圈</Text>
  133 + </TouchableOpacity>
  134 + </View>
  135 + <View style={styles.line}/>
  136 + <TouchableOpacity activeOpacity={0.5} style={styles.save} onPress={() => {
  137 + this.saveImage && this.saveImage();
  138 + }}>
  139 + <Text style={styles.savetext}>保存图片</Text>
  140 + </TouchableOpacity>
  141 + </View>
  142 +
  143 + <TouchableOpacity activeOpacity={0.5} style={styles.cancelBtn} onPress={() => {
  144 + this.props.showSnapshootShare && this.props.showSnapshootShare(false);
  145 + }}>
  146 + <Image source={require('../images/imageShareClose.png')} style={styles.cancelBtnicon} resizeMode={'contain'}/>
  147 + </TouchableOpacity>
  148 +
  149 + </View>
  150 + </Modal>
  151 + );
  152 + }
  153 +};
  154 +
  155 +let {width, height} = Dimensions.get('window');
  156 +const DEVICE_WIDTH_RATIO = width / 375;
  157 +
  158 +let styles = StyleSheet.create({
  159 + modalContainer: {
  160 + flex: 1,
  161 + width: width,
  162 + height: height,
  163 + },
  164 + backContainer: {
  165 + flex: 1,
  166 + width: width,
  167 + height: height,
  168 + alignItems: 'center',
  169 + backgroundColor: 'white',
  170 + },
  171 +
  172 + container: {
  173 + width,
  174 + height,
  175 + backgroundColor: 'white',
  176 + alignItems: 'center',
  177 + },
  178 +
  179 + scrollView: {
  180 + backgroundColor: 'white',
  181 + },
  182 + spaceV: {
  183 + backgroundColor: 'white',
  184 + height: 150*DEVICE_WIDTH_RATIO,
  185 + width,
  186 + },
  187 +
  188 + logo: {
  189 + height: 22*DEVICE_WIDTH_RATIO,
  190 + width: 112*DEVICE_WIDTH_RATIO,
  191 + marginTop: 37*DEVICE_WIDTH_RATIO,
  192 + },
  193 +
  194 + productimage: {
  195 + height: 433*DEVICE_WIDTH_RATIO,
  196 + width: 325*DEVICE_WIDTH_RATIO,
  197 + },
  198 +
  199 + product: {
  200 + height: 433*DEVICE_WIDTH_RATIO,
  201 + width: 325*DEVICE_WIDTH_RATIO,
  202 + marginTop: 24*DEVICE_WIDTH_RATIO,
  203 + },
  204 + productDetail: {
  205 + height: 80*DEVICE_WIDTH_RATIO,
  206 + width: 325*DEVICE_WIDTH_RATIO,
  207 + backgroundColor: 'rgba(0,0,0,0.4)',
  208 + position: 'absolute',
  209 + bottom: 0,
  210 + },
  211 + productDetailTop: {
  212 + height: 20*DEVICE_WIDTH_RATIO,
  213 + width: 325*DEVICE_WIDTH_RATIO,
  214 + marginTop: 14*DEVICE_WIDTH_RATIO,
  215 + justifyContent: 'center',
  216 + alignItems: 'center',
  217 + },
  218 + productDetailTopText: {
  219 + fontSize: 14,
  220 + color: '#FFFFFF',
  221 + },
  222 + productDetailBottom: {
  223 + height: 30*DEVICE_WIDTH_RATIO,
  224 + width: 325*DEVICE_WIDTH_RATIO,
  225 + marginTop: 7*DEVICE_WIDTH_RATIO,
  226 + flexDirection: 'row',
  227 + justifyContent: 'center',
  228 + alignItems: 'center',
  229 + },
  230 + priceIcon: {
  231 + height: 17,
  232 + width: 50,
  233 + },
  234 + price: {
  235 + fontSize: 24,
  236 + color: '#FFFFFF',
  237 + marginLeft: 15*DEVICE_WIDTH_RATIO,
  238 + fontWeight: 'bold',
  239 + },
  240 + price2: {
  241 + fontSize: 14,
  242 + lineHeight: 14,
  243 + color: '#B0B0B0',
  244 + alignItems: 'center',
  245 + marginLeft: 13*DEVICE_WIDTH_RATIO,
  246 + height: 14,
  247 + marginTop: 2,
  248 + },
  249 + mianyouIcon: {
  250 + position: 'absolute',
  251 + top: 262*DEVICE_WIDTH_RATIO,
  252 + right: 28*DEVICE_WIDTH_RATIO,
  253 + height: 63*DEVICE_WIDTH_RATIO,
  254 + width: 63*DEVICE_WIDTH_RATIO,
  255 + },
  256 +
  257 + bottom: {
  258 + height: 141*DEVICE_WIDTH_RATIO,
  259 + width: 325*DEVICE_WIDTH_RATIO,
  260 + alignItems: 'center',
  261 + flexDirection: 'row',
  262 + },
  263 + qr: {
  264 + height: 80*DEVICE_WIDTH_RATIO,
  265 + width: 80*DEVICE_WIDTH_RATIO,
  266 + },
  267 +
  268 + bottomDetail: {
  269 + height: 80*DEVICE_WIDTH_RATIO,
  270 + width: 245*DEVICE_WIDTH_RATIO,
  271 + },
  272 + titleV: {
  273 + width: 218*DEVICE_WIDTH_RATIO,
  274 + height: 20*DEVICE_WIDTH_RATIO,
  275 + flexDirection: 'row',
  276 + alignItems: 'center',
  277 + marginTop: 16*DEVICE_WIDTH_RATIO,
  278 + marginLeft: 27*DEVICE_WIDTH_RATIO,
  279 + },
  280 + titleText: {
  281 + fontSize: 16,
  282 + color: '#444444',
  283 + },
  284 + titleWidth: {
  285 + maxWidth: 80,
  286 + },
  287 + tipDetailText: {
  288 + fontSize: 12,
  289 + color: '#B0B0B0',
  290 + marginTop: 12*DEVICE_WIDTH_RATIO,
  291 + marginLeft: 27*DEVICE_WIDTH_RATIO,
  292 + },
  293 +
  294 + shareView: {
  295 + position: 'absolute',
  296 + width,
  297 + height: 171*DEVICE_WIDTH_RATIO,
  298 + backgroundColor: 'rgb(241,241,241)',
  299 + alignItems: 'center',
  300 + bottom : 0,
  301 + },
  302 + image :{
  303 + width: 305*DEVICE_WIDTH_RATIO,
  304 + height: 88*DEVICE_WIDTH_RATIO,
  305 + marginTop: 25*DEVICE_WIDTH_RATIO,
  306 + backgroundColor: 'red',
  307 + },
  308 + buttons: {
  309 + width,
  310 + height: 115*DEVICE_WIDTH_RATIO,
  311 + alignItems: 'center',
  312 + flexDirection: 'row',
  313 + },
  314 + button1: {
  315 + alignItems: 'center',
  316 + marginLeft: (width - 180*DEVICE_WIDTH_RATIO)/3,
  317 + },
  318 +
  319 + button2: {
  320 + marginLeft: (width - 180*DEVICE_WIDTH_RATIO)/3,
  321 + alignItems: 'center',
  322 + },
  323 + icon: {
  324 + width: 45*DEVICE_WIDTH_RATIO,
  325 + height: 45*DEVICE_WIDTH_RATIO,
  326 + },
  327 + text: {
  328 + marginTop: 8*DEVICE_WIDTH_RATIO,
  329 + fontSize: 12,
  330 + width: 90*DEVICE_WIDTH_RATIO,
  331 + textAlign: 'center',
  332 + color: '#444444',
  333 + },
  334 + line: {
  335 + width: width - 52,
  336 + height: 1,
  337 + backgroundColor: '#CCCCCC',
  338 + },
  339 + save: {
  340 + width,
  341 + height: 54*DEVICE_WIDTH_RATIO,
  342 + justifyContent: 'center',
  343 + alignItems: 'center',
  344 + },
  345 + savetext: {
  346 + fontSize: 17,
  347 + color: '#444444',
  348 + },
  349 +
  350 + cancelBtn: {
  351 + position: 'absolute',
  352 + width: 54*DEVICE_WIDTH_RATIO,
  353 + height: 54*DEVICE_WIDTH_RATIO,
  354 + top: 44,
  355 + right: 34,
  356 + alignItems: 'flex-end',
  357 + },
  358 + cancelBtnicon: {
  359 + width: 30*DEVICE_WIDTH_RATIO,
  360 + height: 30*DEVICE_WIDTH_RATIO,
  361 + },
  362 +});
@@ -104,6 +104,7 @@ class GroupPurchaseDetailContainer extends Component { @@ -104,6 +104,7 @@ class GroupPurchaseDetailContainer extends Component {
104 imageUrl: url, 104 imageUrl: url,
105 fromPage, 105 fromPage,
106 } 106 }
  107 +
107 ReactNative.NativeModules.YH_CommonHelper.shareImageToWXMini(param); 108 ReactNative.NativeModules.YH_CommonHelper.shareImageToWXMini(param);
108 this.props.actions.showSnapshootShare(false); 109 this.props.actions.showSnapshootShare(false);
109 } 110 }