mobile / YH_RNComponent · Commits

Go to a project

Authored by QC-L
Commit 7d32c066515d9d1870e209c25a656e0e9eb9fe26 1 parent 05887548

添加消息列表分享 review by sunkai

Inline Side-by-side
Showing 4 changed files with 374 additions and 10 deletions
@@ -21,6 +21,7 @@ export default class MessageList extends Component { @@ -21,6 +21,7 @@ export default class MessageList extends Component {
21 <MessageCell 21 <MessageCell
22 data={rowData} 22 data={rowData}
23 resourceJumpWithUrl={this.props.resourceJumpWithUrl} 23 resourceJumpWithUrl={this.props.resourceJumpWithUrl}
  24 + shareAction={this.props.shareAction}
24 /> 25 />
25 ); 26 );
26 } 27 }
@@ -9,6 +9,21 @@ import { @@ -9,6 +9,21 @@ import {
9 import YH_Image from '../../../common/components/YH_Image'; 9 import YH_Image from '../../../common/components/YH_Image';
10 import Immutable from 'immutable'; 10 import Immutable from 'immutable';
11 11
  12 +
  13 +function ShareButton(props) {
  14 + return (
  15 + <TouchableOpacity
  16 + activeOpacity={1}
  17 + style={styles.shareButton}
  18 + onPress={() => {
  19 + props.shareAction && props.shareAction(props.rowData);
  20 + }}
  21 + >
  22 + <Text style={styles.shareButtonText}>去分享</Text>
  23 + </TouchableOpacity>
  24 + )
  25 +}
  26 +
12 export class MessageCell extends Component { 27 export class MessageCell extends Component {
13 28
14 constructor(props) { 29 constructor(props) {
@@ -41,6 +56,8 @@ export class MessageCell extends Component { @@ -41,6 +56,8 @@ export class MessageCell extends Component {
41 return null; 56 return null;
42 } 57 }
43 data = data.toJS(); 58 data = data.toJS();
  59 + let isTrueDataType = data.type > 0 && data.type < 7 && data.type != 3
  60 + let isShowShare = data.shareFlag && isTrueDataType ? true: false;
44 61
45 return ( 62 return (
46 <TouchableOpacity 63 <TouchableOpacity
@@ -57,13 +74,20 @@ export class MessageCell extends Component { @@ -57,13 +74,20 @@ export class MessageCell extends Component {
57 url={data.image} 74 url={data.image}
58 style={styles.imageStyle} 75 style={styles.imageStyle}
59 /> 76 />
60 - <Text  
61 - style={styles.messageText}  
62 - numberOfLines={2}  
63 - >{data.content}</Text>  
64 - <Text  
65 - style={styles.startTimeText}  
66 - >{data.createTime}</Text> 77 + <View style={styles.textBgView}>
  78 + <Text
  79 + style={styles.messageText}
  80 + numberOfLines={2}
  81 + >{data.content}</Text>
  82 + <View style={styles.timeAndShare}>
  83 + <Text
  84 + style={styles.startTimeText}
  85 + >{data.createTime}</Text>
  86 + {
  87 + isShowShare ? <ShareButton rowData={data} shareAction={this.props.shareAction} /> : null
  88 + }
  89 + </View>
  90 + </View>
67 </View> 91 </View>
68 </TouchableOpacity> 92 </TouchableOpacity>
69 ); 93 );
@@ -86,6 +110,17 @@ let styles = StyleSheet.create({ @@ -86,6 +110,17 @@ let styles = StyleSheet.create({
86 marginRight: 15 * DEVICE_WIDTH_RATIO, 110 marginRight: 15 * DEVICE_WIDTH_RATIO,
87 flex: 1 111 flex: 1
88 }, 112 },
  113 + textBgView: {
  114 + flexDirection: 'column',
  115 + flex: 1
  116 + },
  117 + timeAndShare: {
  118 + flexDirection: 'row',
  119 + alignItems: 'center',
  120 + marginTop: 10 * DEVICE_HEIGHT_RATIO,
  121 + marginBottom: 20 * DEVICE_HEIGHT_RATIO,
  122 + justifyContent: 'space-between'
  123 + },
89 imageStyle: { 124 imageStyle: {
90 marginTop: 15 * DEVICE_HEIGHT_RATIO, 125 marginTop: 15 * DEVICE_HEIGHT_RATIO,
91 marginBottom: 15 * DEVICE_HEIGHT_RATIO, 126 marginBottom: 15 * DEVICE_HEIGHT_RATIO,
@@ -100,10 +135,20 @@ let styles = StyleSheet.create({ @@ -100,10 +135,20 @@ let styles = StyleSheet.create({
100 }, 135 },
101 startTimeText: { 136 startTimeText: {
102 fontSize: 12, 137 fontSize: 12,
103 - marginTop: 10 * DEVICE_HEIGHT_RATIO,  
104 - marginBottom: 20 * DEVICE_HEIGHT_RATIO,  
105 color: '#B0B0B0', 138 color: '#B0B0B0',
106 height: 14 139 height: 14
  140 + },
  141 + shareButton: {
  142 + width: 60,
  143 + height: 30,
  144 + borderRadius: 3,
  145 + backgroundColor: '#D0021B',
  146 + justifyContent: 'center'
  147 + },
  148 + shareButtonText: {
  149 + fontSize: 14,
  150 + color: 'white',
  151 + textAlign: 'center',
107 } 152 }
108 }); 153 });
109 154
@@ -6,10 +6,19 @@ import {bindActionCreators} from 'redux'; @@ -6,10 +6,19 @@ import {bindActionCreators} from 'redux';
6 import {connect} from 'react-redux'; 6 import {connect} from 'react-redux';
7 import {Map} from 'immutable'; 7 import {Map} from 'immutable';
8 import * as allianceActions from '../reducers/alliance/allianceActions'; 8 import * as allianceActions from '../reducers/alliance/allianceActions';
9 -import {StyleSheet, View,} from "react-native"; 9 +import {StyleSheet, View, Dimensions} from "react-native";
10 import MessageList from "../components/MessageList"; 10 import MessageList from "../components/MessageList";
11 import LoadingIndicator from '../../common/components/LoadingIndicator'; 11 import LoadingIndicator from '../../common/components/LoadingIndicator';
12 import ReactNative from "react-native"; 12 import ReactNative from "react-native";
  13 +import {
  14 + shareGroupPurchaseDetail,
  15 + shareH5,
  16 + shareGoodsDetail,
  17 + shareGroupPurchaseList,
  18 + shareStrollDetail
  19 +} from '../../common/utils/commonShareUtils'
  20 +import Request from '../../common/services/NativeRequest';
  21 +import {getSlicedUrl} from '../../classify/utils/Utils';
13 22
14 const actions = [ 23 const actions = [
15 allianceActions, 24 allianceActions,
@@ -38,6 +47,10 @@ class MessageContainer extends Component { @@ -38,6 +47,10 @@ class MessageContainer extends Component {
38 constructor(props) { 47 constructor(props) {
39 super(props); 48 super(props);
40 this._resourceJumpWithUrl = this._resourceJumpWithUrl.bind(this); 49 this._resourceJumpWithUrl = this._resourceJumpWithUrl.bind(this);
  50 + this._shareAction = this._shareAction.bind(this);
  51 +
  52 + let baseURL = 'http://api.yoho.cn';
  53 + this.api = new Request(baseURL);
41 } 54 }
42 55
43 componentDidMount() { 56 componentDidMount() {
@@ -56,6 +69,138 @@ class MessageContainer extends Component { @@ -56,6 +69,138 @@ class MessageContainer extends Component {
56 ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url); 69 ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
57 } 70 }
58 71
  72 + async _shareAction(params) {
  73 + const union_type = ReactNative.NativeModules.YH_CommonHelper.unionType();
  74 + switch(params.type) {
  75 + // 商品详情
  76 + case 1: {
  77 + let shareInfo = {
  78 + productInfo: params.productInfo,
  79 + union_type
  80 + }
  81 + let shareParam = shareGoodsDetail(shareInfo);
  82 + ReactNative.NativeModules.YH_CommonHelper.shareInfoWithParam(shareParam);
  83 + break;
  84 + }
  85 + // H5
  86 + case 2: {
  87 + let shareId = params.someKey;
  88 + this.api.get({
  89 + url: '/operations/api/v5/webshare/getShare',
  90 + body: {
  91 + shareId,
  92 + fromPage: 'iFP_H5'
  93 + }
  94 + }).then((json) => {
  95 + let bigImage = json.data.bigImage
  96 + let shareInfo = {
  97 + ...params,
  98 + data: {
  99 + bigImage: bigImage ? getSlicedUrl(bigImage, 150 * DEVICE_WIDTH_RATIO, 120 * DEVICE_WIDTH_RATIO, 2) : '',
  100 + content: json.data.content,
  101 + title: json.data.title,
  102 + shareUrl: json.data.url,
  103 + pic: json.data.pic
  104 + },
  105 + union_type
  106 + }
  107 + let shareParam = shareH5(shareInfo);
  108 + ReactNative.NativeModules.YH_CommonHelper.shareInfoWithAnyParam(shareParam);
  109 + return json;
  110 + }).catch((err) => {
  111 + let url = `${params.url.split('?')[0]}?shareId=${shareId}`
  112 + let shareInfo = {
  113 + ...params,
  114 + data: {
  115 + bigImage: params.image,
  116 + content: params.content,
  117 + title: params.content,
  118 + shareUrl: url,
  119 + pic: params.image
  120 + },
  121 + union_type,
  122 + isCatch: true
  123 + }
  124 + let shareParam = shareH5(shareInfo);
  125 + ReactNative.NativeModules.YH_CommonHelper.shareInfoWithAnyParam(shareParam);
  126 + throw(err);
  127 + });
  128 + break;
  129 + }
  130 + // 资讯
  131 + case 4: {
  132 + let json = await this.api.get({
  133 + url: '/guang/api/v1/share/guang',
  134 + body: {
  135 + id: params.someKey,
  136 + fromPage: 'iFP_GuangDetail',
  137 + yh_channel: '1'
  138 + }
  139 + }).catch((error) => {
  140 + throw(error);
  141 + });
  142 + let data = json;
  143 + let param = {
  144 + ...data,
  145 + someKey: params.someKey,
  146 + union_type
  147 + }
  148 + let shareParam = shareStrollDetail(param);
  149 + ReactNative.NativeModules.YH_CommonHelper.shareInfoWithGuangParam(shareParam);
  150 + break;
  151 + }
  152 + // 拼团列表
  153 + case 5: {
  154 + this.api.get({
  155 + url: '/operations/api/v5/webshare/getShare',
  156 + body: {
  157 + shareId: 5409,
  158 + }
  159 + }).then((json) => {
  160 + let shareInfo = {
  161 + activityId: params.someKey,
  162 + shareCodeInfo: json.data,
  163 + union_type
  164 + }
  165 + let shareParam = shareGroupPurchaseList(shareInfo);
  166 + ReactNative.NativeModules.YH_CommonHelper.shareInfoWithAnyParam(shareParam);
  167 + return json;
  168 + }).catch((error) => {
  169 + let json = {
  170 + "bigImage": "http://img12.static.yhbimg.com/taobaocms/2018/09/13/09/020e504e869fcad106f9687aec57f263d1.jpeg",
  171 + "content": "有货福利团！精选好货，拼团省钱！",
  172 + "pic": "http://img13.static.yhbimg.com/taobaocms/2018/09/07/17/02f7cc420cfde1aeff46a9239b07221319.jpeg",
  173 + "praise_num": 0,
  174 + "title": "有货福利团！精选好货，拼团省钱！",
  175 + "url": "https://m.yohobuy.com/?userUid=59100243"
  176 + };
  177 + let shareInfo = {
  178 + activityId: params.someKey,
  179 + shareCodeInfo: json,
  180 + union_type
  181 + };
  182 + let shareParam = shareGroupPurchaseList(shareInfo);
  183 + ReactNative.NativeModules.YH_CommonHelper.shareInfoWithAnyParam(shareParam);
  184 + throw(error);
  185 + })
  186 + break;
  187 + }
  188 + // 拼团详情
  189 + case 6: {
  190 + let shareInfo = {
  191 + activityId: params.someKey,
  192 + productInfo: params.productInfo,
  193 + union_type
  194 + }
  195 + let shareParam = shareGroupPurchaseDetail(shareInfo);
  196 + ReactNative.NativeModules.YH_CommonHelper.shareInfoWithParam(shareParam);
  197 + break;
  198 + }
  199 + default:
  200 + break;
  201 + }
  202 + }
  203 +
59 render() { 204 render() {
60 let {messageList} = this.props.alliance; 205 let {messageList} = this.props.alliance;
61 let isFetching = messageList.isFetching; 206 let isFetching = messageList.isFetching;
@@ -64,6 +209,7 @@ class MessageContainer extends Component { @@ -64,6 +209,7 @@ class MessageContainer extends Component {
64 <MessageList 209 <MessageList
65 messageList={messageList} 210 messageList={messageList}
66 resourceJumpWithUrl={this._resourceJumpWithUrl} 211 resourceJumpWithUrl={this._resourceJumpWithUrl}
  212 + shareAction={this._shareAction}
67 /> 213 />
68 <LoadingIndicator isVisible={isFetching}/> 214 <LoadingIndicator isVisible={isFetching}/>
69 </View> 215 </View>
@@ -71,6 +217,9 @@ class MessageContainer extends Component { @@ -71,6 +217,9 @@ class MessageContainer extends Component {
71 } 217 }
72 } 218 }
73 219
  220 +let { width } = Dimensions.get('window');
  221 +const DEVICE_WIDTH_RATIO = width / 375;
  222 +
74 let styles = StyleSheet.create({ 223 let styles = StyleSheet.create({
75 container: { 224 container: {
76 flex: 1, 225 flex: 1,
  1 +'use strict';
  2 +
  3 +// union_type CPS 用户都要携带
  4 +// miniQrType=4 拼团详情 √
  5 +// miniQrType=7 商品详情 √
  6 +// miniQrType=9 h5 √
  7 +// miniQrType=15 拼团列表 √
  8 +// miniQrType=18 逛
  9 +
  10 +// miniQrType=15
  11 +
  12 +let host = 'http://api.yoho.cn';
  13 +const shareGroupPurchaseList = (shareInfo) => {
  14 + let {
  15 + activityId,
  16 + shareCodeInfo
  17 + } = shareInfo;
  18 +
  19 + let param = {
  20 + activityId,
  21 + }
  22 + let qrCode = host + '/wechat/miniapp/img-check.jpg?param=' + encodeURIComponent(JSON.stringify(param)) + '&miniQrType=15';
  23 + let miniProgramPath = `/pages/groupPurchase/groupPurchase?activityId=${activityId}`;
  24 + let fromPage = 'GroupPurchase';
  25 + let businessId = 'collage';
  26 +
  27 + let shareParam = {
  28 + title: shareCodeInfo.content ? shareCodeInfo.content : '',
  29 + content: shareCodeInfo.content ? shareCodeInfo.content : '',
  30 + image: shareCodeInfo.pic,
  31 + bigImage: shareCodeInfo.bigImage,
  32 + url: shareCodeInfo.url,
  33 + miniProgramPath,
  34 + miniProgramQCodeUrl: qrCode,
  35 + from: fromPage,
  36 + businessId
  37 + };
  38 + return shareParam;
  39 +};
  40 +
  41 +// miniQrType=17
  42 +const shareGroupPurchaseDetail = (shareInfo) => {
  43 + const productSkn = shareInfo.productInfo.productSkn;
  44 +
  45 + let {
  46 + activityId,
  47 + productInfo,
  48 + union_type
  49 + } = shareInfo;
  50 +
  51 + let miniProgramPath = `pages/groupPurchase/groupPurchaseDetail?productSkn=${productSkn}&activityId=${activityId}&union_type=${union_type}`
  52 + let param = {
  53 + productSkn,
  54 + activityId,
  55 + union_type
  56 + };
  57 + let qrCode = host + '/wechat/miniapp/img-check.jpg?param=' + encodeURIComponent(JSON.stringify(param)) + '&miniQrType=17';
  58 +
  59 + let shareParam = {
  60 + title: productInfo.productName ? productInfo.productName : '',
  61 + content: productInfo.productName ? productInfo.productName : '',
  62 + image: productInfo.colorImage,
  63 + url: productInfo.productUrl,
  64 + miniProgramPath: miniProgramPath,
  65 + miniProgramQCodeUrl: qrCode,
  66 + product_name: productInfo.productName ? productInfo.productName : '',
  67 + sales_price: `￥${productInfo.marketPrice}`,
  68 + original_sales_price: `￥${productInfo.originalSalesPrice}`,
  69 + productDefaultImage: productInfo.colorImage,
  70 + fromType: 'productDetail',
  71 + };
  72 + return shareParam;
  73 +};
  74 +
  75 +// miniQrType=7
  76 +const shareGoodsDetail = (shareInfo) => {
  77 + let {
  78 + productInfo,
  79 + union_type
  80 + } = shareInfo;
  81 + let qrCode;
  82 +
  83 + let productSkn = productInfo.productSkn;
  84 + let params = {
  85 + productSkn,
  86 + union_type,
  87 + }
  88 +
  89 + let paramsString = encodeURIComponent(JSON.stringify(params));
  90 + qrCode = host + '/wechat/miniapp/img-check.jpg?param=' + paramsString + '&miniQrType=7';
  91 +
  92 + let shareParam = {
  93 + title: productInfo.productName ? productInfo.productName : '',
  94 + content: productInfo.productName ? productInfo.productName : '',
  95 + image: productInfo.colorImage,
  96 + url: productInfo.productUrl,
  97 + miniProgramPath: 'pages/goodsDetail/goodsDetail?productSkn=' + productSkn,
  98 + miniProgramQCodeUrl: qrCode,
  99 + product_name: productInfo.productName ? productInfo.productName : '',
  100 + sales_price: `￥${productInfo.originalSalesPrice}`,
  101 + productDefaultImage: productInfo.colorImage,
  102 + fromType: 'productDetail',
  103 + };
  104 + return shareParam;
  105 +};
  106 +
  107 +// miniQrType=18
  108 +const shareStrollDetail = (shareInfo) => {
  109 + let {
  110 + url,
  111 + title,
  112 + content,
  113 + pic,
  114 + minSortName,
  115 + wechatShareImgUrl,
  116 + union_type
  117 + } = shareInfo;
  118 +
  119 + let params = {
  120 + id: shareInfo.someKey,
  121 + union_type
  122 + }
  123 + let paramsString = encodeURIComponent(JSON.stringify(params));
  124 + let qrCode = host + '/wechat/miniapp/img-check.jpg?param=' + paramsString + '&miniQrType=18';
  125 + let miniProgramPath = `page/subPackage/pages/guang/detail?id=${shareInfo.someKey}`;
  126 + let shareParam = {
  127 + title: title ? title : '',
  128 + content: content ? content : '',
  129 + pic: pic,
  130 + bigImage: wechatShareImgUrl,
  131 + url: url,
  132 + minSortName,
  133 + miniProgramQCodeUrl: qrCode,
  134 + miniProgramPath,
  135 + };
  136 + return shareParam;
  137 +}
  138 +
  139 +// miniQrType=9
  140 +const shareH5 = (shareInfo) => {
  141 + // 请求web数据
  142 + let { someKey, url, data, isCatch } = shareInfo;
  143 + let param = {
  144 + shareId: someKey,
  145 + url: data.shareUrl
  146 + }
  147 + let qrCode = host + '/wechat/miniapp/img-check.jpg?param=' + encodeURIComponent(JSON.stringify(param)) + '&miniQrType=9';
  148 + let miniProgramPath = `pages/webview/webview?url=${url}&title=${data.content}`;
  149 + let shareParam = {
  150 + title: data.content ? data.content : '',
  151 + content: data.content ? data.content : '',
  152 + image: data.pic,
  153 + bigImage: data.bigImage,
  154 + url: url,
  155 + miniProgramPath,
  156 + miniProgramQCodeUrl: qrCode,
  157 + from: 'h5',
  158 + isCatch,
  159 + };
  160 + return shareParam;
  161 +}
  162 +
  163 +export {
  164 + shareGroupPurchaseList,
  165 + shareGroupPurchaseDetail,
  166 + shareGoodsDetail,
  167 + shareStrollDetail,
  168 + shareH5,
  169 +};