分享功能开发 — review by 李其昌
Showing
4 changed files
with
77 additions
and
32 deletions
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 |
-
Please register or login to post a comment