fe / yoho-blk · Commits

Go to a project

Authored by zhangxiaoru
Commit 1f6e1df9533c83c994a620d30ed7568ef529ed23 1 parent 741362bc

share

Inline Side-by-side
Showing 9 changed files with 196 additions and 89 deletions
@@ -113,6 +113,7 @@ const detail = (req, res) => { @@ -113,6 +113,7 @@ const detail = (req, res) => {
113 click: '26', 113 click: '26',
114 commentNum: '45' 114 commentNum: '45'
115 }, 115 },
  116 +
116 content: { 117 content: {
117 pic: { 118 pic: {
118 img: '#' 119 img: '#'
@@ -229,6 +230,11 @@ const detail = (req, res) => { @@ -229,6 +230,11 @@ const detail = (req, res) => {
229 likeNum: '10' 230 likeNum: '10'
230 231
231 }, 232 },
  233 + share: {
  234 + shareImg: 'hjchsk',
  235 + shareDesc: 'wjhdfwe',
  236 + weixinUrl: 'http://www.baidu.com'
  237 + },
232 tag: [ 238 tag: [
233 { 239 {
234 name: '户外' 240 name: '户外'
@@ -19,6 +19,5 @@ @@ -19,6 +19,5 @@
19 </li> 19 </li>
20 {{/ list}} 20 {{/ list}}
21 </ul> 21 </ul>
22 - {{!-- <div class="comment-pager pager">{{{commentPager}}}</div> --}}  
23 </div> 22 </div>
24 {{/ comment}} 23 {{/ comment}}
@@ -83,7 +83,11 @@ const index = (req, res) => { @@ -83,7 +83,11 @@ const index = (req, res) => {
83 round: false 83 round: false
84 } 84 }
85 ], 85 ],
86 - codeUrl: 'www.baidu.com', 86 + share: {
  87 + shareImg: 'hjchsk',
  88 + shareDesc: 'wjhdfwe',
  89 + weixinUrl: 'http://www.baidu.com'
  90 + },
87 genders: [ 91 genders: [
88 { 92 {
89 name: '男', 93 name: '男',
1 <div class="share"> 1 <div class="share">
  2 + {{# share}}
2 <span class="share-title">分享：</span> 3 <span class="share-title">分享：</span>
3 <span class="share-wrapper share-to pull-left clearfix"> 4 <span class="share-wrapper share-to pull-left clearfix">
4 <i class="iconfont weibo" data-type="weibo" title="分享到新浪微博">&#xe62e;</i> 5 <i class="iconfont weibo" data-type="weibo" title="分享到新浪微博">&#xe62e;</i>
@@ -8,12 +9,10 @@ @@ -8,12 +9,10 @@
8 <i class="iconfont qq" data-type="qq" title="分享到QQ好友">&#xe626;</i> 9 <i class="iconfont qq" data-type="qq" title="分享到QQ好友">&#xe626;</i>
9 <i class="iconfont renren" data-type="renren" title="分享到人人">&#xe62b;</i> 10 <i class="iconfont renren" data-type="renren" title="分享到人人">&#xe62b;</i>
10 <i class="iconfont douban" data-type="douban" title="分享到豆瓣">&#xe623;</i> 11 <i class="iconfont douban" data-type="douban" title="分享到豆瓣">&#xe623;</i>
  12 + <div class="weixin-share-box"></div>
11 </span> 13 </span>
12 - <div class="weixin-share-box hide">  
13 - <div class="weixin-content">  
14 - <div class="code" data-url="{{codeUrl}}"></div>  
15 - <span class="content-title">分享到微信朋友圈</span>  
16 - <span class="content-bottom">打开微信，使用“扫一扫”<br>即可将网页分享到我的朋友圈</span>  
17 - </div>  
18 - </div>  
19 -</div> 14 + <input id="share-img" type="hidden" value="{{shareImg}}">
  15 + <input id="share-desc" type="hidden" value="{{shareDesc}}">
  16 + <input id="weixin-url" type="hidden" value="{{weixinUrl}}">
  17 + {{/ share}}
  18 +</div>
  1 +require('../plugins/share');
  2 +
  3 + $(document).click(function() {
  4 + $(this).closest('.weixin-share-box').hide();
  5 + });
@@ -17,6 +17,7 @@ require('yoho-jquery-qrcode'); @@ -17,6 +17,7 @@ require('yoho-jquery-qrcode');
17 require('yoho-jquery-nanoscroller'); 17 require('yoho-jquery-nanoscroller');
18 require('../plugins/tips'); 18 require('../plugins/tips');
19 require('../plugins/check'); 19 require('../plugins/check');
  20 +require('../plugins/share');
20 21
21 $('.nano').nanoScroller(); 22 $('.nano').nanoScroller();
22 23
@@ -99,17 +100,3 @@ $(function() { @@ -99,17 +100,3 @@ $(function() {
99 common.setCookie('uid', '8050484'); 100 common.setCookie('uid', '8050484');
100 window.add = cascadingAddress({el: '#address'}); 101 window.add = cascadingAddress({el: '#address'});
101 }); 102 });
102 -  
103 -$('.weixin').click(function() {  
104 - if ($('.weixin-share-box').hasClass('hide')) {  
105 - $('.weixin-share-box').removeClass('hide');  
106 - } else {  
107 - $('.weixin-share-box').addClass('hide');  
108 - }  
109 -});  
110 -  
111 -$('.code').qrcode({  
112 - render: 'canvas', // table方式  
113 - size: 140, // 高度  
114 - text: $('.code').data('url')// 任意内容  
115 -});  
  1 +/**
  2 + * 分享
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2016/3/1
  5 + */
  6 +
1 var $ = require('yoho-jquery'); 7 var $ = require('yoho-jquery');
2 8
3 -require('yoho-jquery-qrcode'); 9 +function shareBase(options) {
  10 + var openUrl = '';
  11 + var defOption = {
  12 + title: '',
  13 + url: window.location.href,
  14 + weixinUrl: '',
  15 + image: '',
  16 + desc: '',
  17 + channel: ''
  18 + };
  19 + var shareChannels = ['weibo', 'tweibo', 'qzone', 'renren', 'qq', 'douban','weixin'];
  20 + var sharebox;
  21 + var shareCon = '<i class="iconfont top ">&#xe617;</i>';
  22 +
  23 + defOption = $.extend(defOption, options);
4 24
5 -$('.weixin').click(function() {  
6 - if ($('.weixin-share-box').hasClass('hide')) {  
7 - $('.weixin-share-box').removeClass('hide'); 25 + if ($.inArray(defOption.channel, shareChannels) === -1) {
  26 + alert('不存在的分享平台!');
  27 + return false;
  28 + }
  29 +
  30 + switch (defOption.channel) {
  31 + case 'weibo':
  32 + openUrl = 'http://service.weibo.com/share/share.php?url=' + defOption.url + '&title=' +
  33 + defOption.title + '&appkey=3739328910&searchPic=true&pic=' + defOption.image;
  34 + break;
  35 + case 'tweibo':
  36 + openUrl = 'http://share.v.t.qq.com/index.php?c=share&a=index&url=' + defOption.url + '&title=' +
  37 + defOption.title + '&appkey=c0af9c29e0900813028c2ccb42021792&pic=' + defOption.image;
  38 + break;
  39 + case 'qzone':
  40 + openUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + defOption.url + '&title=' +
  41 + defOption.title + '&desc=&summary=' + defOption.desc + '&site=YOHO!有货&pics=' + defOption.image;
  42 + break;
  43 + case 'renren':
  44 + openUrl = 'http://widget.renren.com/dialog/share?resourceUrl=' + defOption.url + '&srcUrl=' +
  45 + defOption.url + '&desc=' + defOption.desc + '&title=' + defOption.title + '&description=' +
  46 + defOption.desc + '&pic=' + defOption.image;
  47 + break;
  48 + case 'qq':
  49 + openUrl = 'http://connect.qq.com/widget/shareqq/index.html?url=' + defOption.url + '&desc=' +
  50 + defOption.desc + '&title=' + defOption.title.replace('%', '') + '&desc=&summary=' +
  51 + defOption.desc + '&site=YOHO!有货&pics=' + defOption.image;
  52 + break;
  53 + case 'weixin':
  54 + openUrl = 'http://s.jiathis.com/qrcode.php?url=' + defOption.weixinUrl + '&desc=' +
  55 + defOption.desc + '&title=' + defOption.title + '&description=' +
  56 + defOption.desc + '&pic=' + defOption.image;
  57 + break;
  58 + case 'douban':
  59 + openUrl = 'http://www.douban.com/share/service?href=' + defOption.url + '&text=' +
  60 + defOption.desc + '&image=' + defOption.image + '&title=' + defOption.title + '&comment=';
  61 + break;
  62 + }
  63 +
  64 + if (defOption.channel === 'weixin') {
  65 + if (!defOption.self) {
  66 + return;
  67 + }
  68 +
  69 + sharebox = defOption.self.closest('.share-to').find('.weixin-share-box');
  70 +
  71 + if (sharebox.length > 0) {
  72 + shareCon += '<div class="con"><p class="pic">' +'<img src="' + openUrl + '" /></p><h2>分享到微信朋友圈</h2><p class="w">打开微信，使用“扫一扫“<br/>即可将网页分享到我的朋友圈。</p>' +
  73 + '</div>';
  74 + sharebox.find('div').length > 0 ? sharebox.show() : sharebox.html(shareCon).show();
  75 + }
8 } else { 76 } else {
9 - $('.weixin-share-box').addClass('hide'); 77 + window.open(encodeURI(openUrl));
10 } 78 }
11 -}); 79 +}
12 80
13 -$('.code').qrcode({  
14 - render: 'canvas', // table方式  
15 - size: 140, // 高度  
16 - text: $('.code').data('url')// 任意内容 81 +function share(channel, self) {
  82 + var title = document.title.replace(/(^\s*)|(\s*$)/g, '');
  83 + var desc = $('#share-desc').val();
  84 + var image = $('#share-img').val();
  85 + var weixinUrl = $('#weixin-url').val();
  86 +
  87 +
  88 + if (channel === 'weibo' || channel === 'tqq') {
  89 + shareBase({
  90 + channel: channel,
  91 + title: title,
  92 + image: image
  93 + });
  94 + } else {
  95 + shareBase({
  96 + channel: channel,
  97 + title: title,
  98 + desc: desc,
  99 + image: image,
  100 + self: self,
  101 + weixinUrl: weixinUrl
  102 + });
  103 + }
  104 +}
  105 +
  106 +$('.share-wrapper').on('click', 'i', function() {
  107 + var $el = $(this),
  108 + type = $el.data('type');
  109 +
  110 + share(type);
17 }); 111 });
  112 +
  113 +$('.weixin').hover(function() {
  114 + var $el = $(this),
  115 + type = $el.data('type'),
  116 + $weixinShareBox = $('.weixin-share-box');
  117 +
  118 + share(type, $el);
  119 +}, function() {
  120 + $('.weixin-share-box').hide();
  121 +})
1 .share { 1 .share {
2 height: 25px; 2 height: 25px;
3 line-height: 25px; 3 line-height: 25px;
  4 + position: relative;
4 5
5 .share-title { 6 .share-title {
6 font-size: 14px; 7 font-size: 14px;
@@ -8,6 +9,7 @@ @@ -8,6 +9,7 @@
8 } 9 }
9 10
10 .share-wrapper { 11 .share-wrapper {
  12 +
11 13
12 i { 14 i {
13 display: block; 15 display: block;
@@ -17,74 +19,68 @@ @@ -17,74 +19,68 @@
17 margin-right: 15px; 19 margin-right: 15px;
18 cursor: pointer; 20 cursor: pointer;
19 font-size: 20px; 21 font-size: 20px;
  22 +
20 } 23 }
21 } 24 }
22 25
23 .weixin-share-box { 26 .weixin-share-box {
24 - position: relative;  
25 - top: -2px;  
26 - z-index: 6; 27 + position: absolute;
  28 + width: 282px;
  29 + height: 302px;
  30 + padding-top: 9px;
  31 + text-align: center;
  32 + font-family: Microsoft Yahei,Arial,Verdana;
  33 + top: 15px;
  34 + left: 26px;
  35 + z-index: 2;
  36 +
  37 + h2 {
  38 + display: block;
  39 + height: 46px;
  40 + line-height: 46px;
  41 + color: #000;
  42 + font-size: 18px;
  43 + }
  44 +
  45 + img {
  46 + width: 140px;
  47 + height: 140px;
  48 + }
  49 +
  50 + .top {
  51 + position: absolute;
  52 + color: #bbb;
  53 + background: #fff;
  54 + width: 18px;
  55 + left: 50px;
  56 + z-index: 100;
  57 + width: 18px;
  58 + }
27 } 59 }
28 60
29 - .weixin-content { 61 + .con {
  62 + width: 250px;
  63 + height: 310px;
  64 + position: relative;
  65 + overflow: hidden;
30 background-color: #fff; 66 background-color: #fff;
31 border: 1px solid #bbb; 67 border: 1px solid #bbb;
  68 + box-shadow: 0 2px 4px #d1d1d1;
32 margin-top: 15px; 69 margin-top: 15px;
33 - position: absolute;  
34 - width: 250px;  
35 - height: 310px;  
36 } 70 }
37 71
38 - .weixin-content:after,  
39 - .weixin-content:before {  
40 - border: 10px solid transparent;  
41 - border-bottom: 10px solid #fff;  
42 - width: 0;  
43 - height: 0;  
44 - position: absolute;  
45 - top: -19px;  
46 - left: 73px;  
47 - content: '';  
48 - }  
49 -  
50 - .weixin-content:before {  
51 - border-bottom-color: #bbb;  
52 - top: -20px;  
53 - left: 73px;  
54 - }  
55 -  
56 - .content-title {  
57 - margin-top: 25px;  
58 - text-align: center;  
59 - display: block;  
60 - font-size: 16px;  
61 -  
62 - b {  
63 - float: right;  
64 - margin-right: 10px;  
65 - font-size: 12px;  
66 - color: #d1d1d1;  
67 - } 72 + .hide {
  73 + display: none;
68 } 74 }
69 75
70 - .code {  
71 - width: 140px;  
72 - height: 140px;  
73 - margin: 30px auto; 76 + .pic {
  77 + overflow: hidden;
  78 + margin: 16px auto;
74 } 79 }
75 80
76 - .content-bottom {  
77 - margin: 25px auto;  
78 - display: block;  
79 - font-size: 14px;  
80 - text-align: center;  
81 - width: 190px; 81 + .w {
  82 + font-size: 13px;
  83 + color: #9f9f9f;
82 line-height: 20px; 84 line-height: 20px;
83 - height: 20px;  
84 - color: #a9a9a9;  
85 - }  
86 -  
87 - .hide {  
88 - display: none;  
89 } 85 }
90 } 86 }
@@ -58,11 +58,19 @@ @@ -58,11 +58,19 @@
58 margin-right: 100px; 58 margin-right: 100px;
59 } 59 }
60 60
  61 + .author-name:hover {
  62 + color: #CC3300;
  63 + }
  64 +
61 .article-status { 65 .article-status {
62 height: 64px; 66 height: 64px;
63 line-height: 64px; 67 line-height: 64px;
64 color: #999; 68 color: #999;
65 font-size: 14px; 69 font-size: 14px;
  70 +
  71 + span {
  72 + margin-right: 30px;
  73 + }
66 } 74 }
67 75
68 .article-pic { 76 .article-pic {
@@ -350,13 +358,12 @@ @@ -350,13 +358,12 @@
350 width: 100%; 358 width: 100%;
351 overflow: hidden; 359 overflow: hidden;
352 margin-bottom: 80px; 360 margin-bottom: 80px;
353 - border: 1px solid red;  
354 361
355 h4 { 362 h4 {
356 font-size: 14px; 363 font-size: 14px;
357 position: relative; 364 position: relative;
358 line-height: 32px; 365 line-height: 32px;
359 - border-bottom: 1px solid #e7e7e7; 366 + border-bottom: 1px solid #bbb;
360 367
361 .comment-num { 368 .comment-num {
362 color: #379ed6; 369 color: #379ed6;