Authored by 肖亚东

分享功能开发 — review by 李其昌

1 import event from '../../utils/event.js' 1 import event from '../../utils/event.js'
2 2
3 -const CANCEL_SHARE = 'user-canel-share'; 3 +const SHARE_FRIENDS = 'user-share-friends';
  4 +const SHARE_MOMENTS = 'user-share-moments';
  5 +const SHARE_CANCEL = 'user-canel-share';
4 6
5 Component({ 7 Component({
6 /** 8 /**
@@ -25,32 +27,17 @@ Component({ @@ -25,32 +27,17 @@ Component({
25 */ 27 */
26 methods: { 28 methods: {
27 29
28 - onShare: function(event) {  
29 - let index = event.currentTarget.dataset.index;  
30 - if (index == 1) {//微信好友  
31 -  
32 - } else if (index == 2) {//朋友圈  
33 - 30 + onShare: function(e) {
  31 + let type = e.currentTarget.dataset.type;
  32 + if (type == 'friends') {//微信好友或群
  33 + event.emit(SHARE_FRIENDS);
  34 + } else if (type == 'moments') {//朋友圈
  35 + event.emit(SHARE_MOMENTS);
34 } 36 }
35 - console.log('====================================');  
36 - console.log(index);  
37 - console.log('====================================');  
38 }, 37 },
39 38
40 onCancel: function() { 39 onCancel: function() {
41 - console.log('====================================');  
42 - console.log(22);  
43 - console.log('====================================');  
44 -  
45 - event.on(CANCEL_SHARE, () => {  
46 -  
47 - });  
48 -  
49 - let prePage = getCurrentPages();  
50 - console.log(prePage);  
51 - if (prePage.length > 0 && prePage[prePage.length - 1].onCancel != undefined) {  
52 - prePage[prePage.length - 1].onCancel();  
53 - } 40 + event.emit(SHARE_CANCEL);
54 } 41 }
55 } 42 }
56 }) 43 })
@@ -2,14 +2,15 @@ @@ -2,14 +2,15 @@
2 <view class='cover-view' bindtap='onCancel'></view> 2 <view class='cover-view' bindtap='onCancel'></view>
3 <view class='main-view'> 3 <view class='main-view'>
4 <view class='share-view'> 4 <view class='share-view'>
5 - <view class='item' bindtap='onShare' data-index="1"> 5 + <button class='item left' bindtap='onShare' open-type="share" hover-class="none" plain='true' data-type="friends">
6 <image class='icon' src='../../assets/images/wechat_friend@3x.png'></image> 6 <image class='icon' src='../../assets/images/wechat_friend@3x.png'></image>
7 <text class='title'>微信好友</text> 7 <text class='title'>微信好友</text>
8 - </view>  
9 - <view class='item' bindtap='onShare' data-index="2"> 8 + </button>
  9 +
  10 + <button class='item right' bindtap='onShare' hover-class="none" plain='true' data-type="moments">
10 <image class='icon' src='../../assets/images/wechat@3x.png'></image> 11 <image class='icon' src='../../assets/images/wechat@3x.png'></image>
11 <text class='title'>朋友圈</text> 12 <text class='title'>朋友圈</text>
12 - </view> 13 + </button>
13 </view> 14 </view>
14 <view class='line'></view> 15 <view class='line'></view>
15 <view class='cancel' bindtap='onCancel'>取消</view> 16 <view class='cancel' bindtap='onCancel'>取消</view>
@@ -26,8 +26,6 @@ @@ -26,8 +26,6 @@
26 .main-view .share-view { 26 .main-view .share-view {
27 height: 262rpx; 27 height: 262rpx;
28 display: flex; 28 display: flex;
29 - justify-content: space-evenly;  
30 - align-items: center;  
31 } 29 }
32 .main-view .line { 30 .main-view .line {
33 height: 2rpx; 31 height: 2rpx;
@@ -46,17 +44,31 @@ @@ -46,17 +44,31 @@
46 justify-content: center; 44 justify-content: center;
47 } 45 }
48 46
  47 +.left {
  48 + margin-left: 183rpx;
  49 +}
  50 +
  51 +.right {
  52 + margin-right: 183rpx;
  53 +}
  54 +
49 .main-view .share-view .item { 55 .main-view .share-view .item {
50 width: 100rpx; 56 width: 100rpx;
51 height: 100%; 57 height: 100%;
  58 + border-radius: 0;
  59 + border-style: none;
  60 + display: flex;
  61 + flex-direction: column;
  62 + justify-content: center;
  63 + align-items: center;
52 } 64 }
53 .main-view .share-view .item .icon { 65 .main-view .share-view .item .icon {
54 width: 90rpx; 66 width: 90rpx;
55 height: 90rpx; 67 height: 90rpx;
56 - margin-top: 62rpx; 68 + margin-top: 20rpx;
57 } 69 }
58 .main-view .share-view .item .title { 70 .main-view .share-view .item .title {
59 - margin-top: 16rpx; 71 + width: 150rpx;
60 font-family: PingFang-SC-Regular; 72 font-family: PingFang-SC-Regular;
61 font-size: 24rpx; 73 font-size: 24rpx;
62 color: #000000; 74 color: #000000;
@@ -13,6 +13,9 @@ import collectOff from '../../static/images/collect-off.png'; @@ -13,6 +13,9 @@ import collectOff from '../../static/images/collect-off.png';
13 import './index.scss'; 13 import './index.scss';
14 import event from '../../utils/event' 14 import event from '../../utils/event'
15 15
  16 +const SHARE_FRIENDS = 'user-share-friends';
  17 +const SHARE_MOMENTS = 'user-share-moments';
  18 +const SHARE_CANCEL = 'user-canel-share';
16 @connect(({ productDetail }) => ({ 19 @connect(({ productDetail }) => ({
17 productDetail 20 productDetail
18 }), (dispatch) => ({ 21 }), (dispatch) => ({
@@ -75,6 +78,13 @@ export default class ProductDetail extends Component { @@ -75,6 +78,13 @@ export default class ProductDetail extends Component {
75 this.getProductData(id); 78 this.getProductData(id);
76 this.getRecommendGoods(id); 79 this.getRecommendGoods(id);
77 this.getFavoriteState(id); 80 this.getFavoriteState(id);
  81 +
  82 + event.on(SHARE_CANCEL, () => {
  83 + this.onCancelCallback();
  84 + });
  85 + event.on(SHARE_MOMENTS, () => {
  86 + this.shareMomentsCallback();
  87 + });
78 } 88 }
79 89
80 getProductData(id) { 90 getProductData(id) {
@@ -174,16 +184,51 @@ export default class ProductDetail extends Component { @@ -174,16 +184,51 @@ export default class ProductDetail extends Component {
174 } 184 }
175 } 185 }
176 186
  187 + onShareAppMessage(res) {
  188 + console.log(res);
  189 +
  190 + if (res.from === 'menu') {
  191 + // 用户点击右上角分享
  192 + return {
  193 + title: '', // 分享标题
  194 + desc: '', // 分享描述
  195 + path: '',
  196 + imageUrl: '',
  197 + success: function() {},
  198 + fail: function() {}
  199 + };
  200 + } else if (res.from === 'button') {
  201 + // 用户点击分享按钮
  202 + return {
  203 + title: '', // 分享标题
  204 + desc: '', // 分享描述
  205 + path: '',
  206 + imageUrl: '',
  207 + success: function() {},
  208 + fail: function() {}
  209 + };
  210 + }
  211 + }
  212 +
  213 + //点击分享按钮
177 onClickShare(id, e) { 214 onClickShare(id, e) {
178 let {showSharesheet} = this.props; 215 let {showSharesheet} = this.props;
179 showSharesheet(true); 216 showSharesheet(true);
180 } 217 }
181 218
182 - onCancel() { 219 + //点击组件的取消回调处理
  220 + onCancelCallback() {
183 let {showSharesheet} = this.props; 221 let {showSharesheet} = this.props;
184 showSharesheet(false); 222 showSharesheet(false);
185 } 223 }
186 224
  225 + //点击组件的分享朋友圈回调处理
  226 + shareMomentsCallback() {
  227 + console.log('====================================');
  228 + console.log('分享到朋友圈');
  229 + console.log('====================================');
  230 + }
  231 +
187 onClickBuy() { 232 onClickBuy() {
188 let {showSizeBox} = this.props; 233 let {showSizeBox} = this.props;
189 234