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) => {
click: '26',
commentNum: '45'
},
content: {
pic: {
img: '#'
... ... @@ -229,6 +230,11 @@ const detail = (req, res) => {
likeNum: '10'
},
share: {
shareImg: 'hjchsk',
shareDesc: 'wjhdfwe',
weixinUrl: 'http://www.baidu.com'
},
tag: [
{
name: '户外'
... ...
... ... @@ -19,6 +19,5 @@
</li>
{{/ list}}
</ul>
{{!-- <div class="comment-pager pager">{{{commentPager}}}</div> --}}
</div>
{{/ comment}}
... ...
... ... @@ -83,7 +83,11 @@ const index = (req, res) => {
round: false
}
],
codeUrl: 'www.baidu.com',
share: {
shareImg: 'hjchsk',
shareDesc: 'wjhdfwe',
weixinUrl: 'http://www.baidu.com'
},
genders: [
{
name: '男',
... ...
<div class="share">
{{# share}}
<span class="share-title">分享：</span>
<span class="share-wrapper share-to pull-left clearfix">
<i class="iconfont weibo" data-type="weibo" title="分享到新浪微博">&#xe62e;</i>
... ... @@ -8,12 +9,10 @@
<i class="iconfont qq" data-type="qq" title="分享到QQ好友">&#xe626;</i>
<i class="iconfont renren" data-type="renren" title="分享到人人">&#xe62b;</i>
<i class="iconfont douban" data-type="douban" title="分享到豆瓣">&#xe623;</i>
<div class="weixin-share-box"></div>
</span>
<div class="weixin-share-box hide">
<div class="weixin-content">
<div class="code" data-url="{{codeUrl}}"></div>
<span class="content-title">分享到微信朋友圈</span>
<span class="content-bottom">打开微信，使用“扫一扫”<br>即可将网页分享到我的朋友圈</span>
</div>
</div>
</div>
<input id="share-img" type="hidden" value="{{shareImg}}">
<input id="share-desc" type="hidden" value="{{shareDesc}}">
<input id="weixin-url" type="hidden" value="{{weixinUrl}}">
{{/ share}}
</div>
\ No newline at end of file
... ...
require('../plugins/share');
$(document).click(function() {
$(this).closest('.weixin-share-box').hide();
});
\ No newline at end of file
... ...
... ... @@ -17,6 +17,7 @@ require('yoho-jquery-qrcode');
require('yoho-jquery-nanoscroller');
require('../plugins/tips');
require('../plugins/check');
require('../plugins/share');
$('.nano').nanoScroller();
... ... @@ -99,17 +100,3 @@ $(function() {
common.setCookie('uid', '8050484');
window.add = cascadingAddress({el: '#address'});
});
$('.weixin').click(function() {
if ($('.weixin-share-box').hasClass('hide')) {
$('.weixin-share-box').removeClass('hide');
} else {
$('.weixin-share-box').addClass('hide');
}
});
$('.code').qrcode({
render: 'canvas', // table方式
size: 140, // 高度
text: $('.code').data('url')// 任意内容
});
... ...
/**
* 分享
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/3/1
*/
var $ = require('yoho-jquery');
require('yoho-jquery-qrcode');
function shareBase(options) {
var openUrl = '';
var defOption = {
title: '',
url: window.location.href,
weixinUrl: '',
image: '',
desc: '',
channel: ''
};
var shareChannels = ['weibo', 'tweibo', 'qzone', 'renren', 'qq', 'douban','weixin'];
var sharebox;
var shareCon = '<i class="iconfont top ">&#xe617;</i>';
defOption = $.extend(defOption, options);
$('.weixin').click(function() {
if ($('.weixin-share-box').hasClass('hide')) {
$('.weixin-share-box').removeClass('hide');
if ($.inArray(defOption.channel, shareChannels) === -1) {
alert('不存在的分享平台!');
return false;
}
switch (defOption.channel) {
case 'weibo':
openUrl = 'http://service.weibo.com/share/share.php?url=' + defOption.url + '&title=' +
defOption.title + '&appkey=3739328910&searchPic=true&pic=' + defOption.image;
break;
case 'tweibo':
openUrl = 'http://share.v.t.qq.com/index.php?c=share&a=index&url=' + defOption.url + '&title=' +
defOption.title + '&appkey=c0af9c29e0900813028c2ccb42021792&pic=' + defOption.image;
break;
case 'qzone':
openUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + defOption.url + '&title=' +
defOption.title + '&desc=&summary=' + defOption.desc + '&site=YOHO!有货&pics=' + defOption.image;
break;
case 'renren':
openUrl = 'http://widget.renren.com/dialog/share?resourceUrl=' + defOption.url + '&srcUrl=' +
defOption.url + '&desc=' + defOption.desc + '&title=' + defOption.title + '&description=' +
defOption.desc + '&pic=' + defOption.image;
break;
case 'qq':
openUrl = 'http://connect.qq.com/widget/shareqq/index.html?url=' + defOption.url + '&desc=' +
defOption.desc + '&title=' + defOption.title.replace('%', '') + '&desc=&summary=' +
defOption.desc + '&site=YOHO!有货&pics=' + defOption.image;
break;
case 'weixin':
openUrl = 'http://s.jiathis.com/qrcode.php?url=' + defOption.weixinUrl + '&desc=' +
defOption.desc + '&title=' + defOption.title + '&description=' +
defOption.desc + '&pic=' + defOption.image;
break;
case 'douban':
openUrl = 'http://www.douban.com/share/service?href=' + defOption.url + '&text=' +
defOption.desc + '&image=' + defOption.image + '&title=' + defOption.title + '&comment=';
break;
}
if (defOption.channel === 'weixin') {
if (!defOption.self) {
return;
}
sharebox = defOption.self.closest('.share-to').find('.weixin-share-box');
if (sharebox.length > 0) {
shareCon += '<div class="con"><p class="pic">' +'<img src="' + openUrl + '" /></p><h2>分享到微信朋友圈</h2><p class="w">打开微信，使用“扫一扫“<br/>即可将网页分享到我的朋友圈。</p>' +
'</div>';
sharebox.find('div').length > 0 ? sharebox.show() : sharebox.html(shareCon).show();
}
} else {
$('.weixin-share-box').addClass('hide');
window.open(encodeURI(openUrl));
}
});
}
$('.code').qrcode({
render: 'canvas', // table方式
size: 140, // 高度
text: $('.code').data('url')// 任意内容
function share(channel, self) {
var title = document.title.replace(/(^\s*)|(\s*$)/g, '');
var desc = $('#share-desc').val();
var image = $('#share-img').val();
var weixinUrl = $('#weixin-url').val();
if (channel === 'weibo' || channel === 'tqq') {
shareBase({
channel: channel,
title: title,
image: image
});
} else {
shareBase({
channel: channel,
title: title,
desc: desc,
image: image,
self: self,
weixinUrl: weixinUrl
});
}
}
$('.share-wrapper').on('click', 'i', function() {
var $el = $(this),
type = $el.data('type');
share(type);
});
$('.weixin').hover(function() {
var $el = $(this),
type = $el.data('type'),
$weixinShareBox = $('.weixin-share-box');
share(type, $el);
}, function() {
$('.weixin-share-box').hide();
})
\ No newline at end of file
... ...
.share {
height: 25px;
line-height: 25px;
position: relative;
.share-title {
font-size: 14px;
... ... @@ -8,6 +9,7 @@
}
.share-wrapper {
i {
display: block;
... ... @@ -17,74 +19,68 @@
margin-right: 15px;
cursor: pointer;
font-size: 20px;
}
}
.weixin-share-box {
position: relative;
top: -2px;
z-index: 6;
position: absolute;
width: 282px;
height: 302px;
padding-top: 9px;
text-align: center;
font-family: Microsoft Yahei,Arial,Verdana;
top: 15px;
left: 26px;
z-index: 2;
h2 {
display: block;
height: 46px;
line-height: 46px;
color: #000;
font-size: 18px;
}
img {
width: 140px;
height: 140px;
}
.top {
position: absolute;
color: #bbb;
background: #fff;
width: 18px;
left: 50px;
z-index: 100;
width: 18px;
}
}
.weixin-content {
.con {
width: 250px;
height: 310px;
position: relative;
overflow: hidden;
background-color: #fff;
border: 1px solid #bbb;
box-shadow: 0 2px 4px #d1d1d1;
margin-top: 15px;
position: absolute;
width: 250px;
height: 310px;
}
.weixin-content:after,
.weixin-content:before {
border: 10px solid transparent;
border-bottom: 10px solid #fff;
width: 0;
height: 0;
position: absolute;
top: -19px;
left: 73px;
content: '';
}
.weixin-content:before {
border-bottom-color: #bbb;
top: -20px;
left: 73px;
}
.content-title {
margin-top: 25px;
text-align: center;
display: block;
font-size: 16px;
b {
float: right;
margin-right: 10px;
font-size: 12px;
color: #d1d1d1;
}
.hide {
display: none;
}
.code {
width: 140px;
height: 140px;
margin: 30px auto;
.pic {
overflow: hidden;
margin: 16px auto;
}
.content-bottom {
margin: 25px auto;
display: block;
font-size: 14px;
text-align: center;
width: 190px;
.w {
font-size: 13px;
color: #9f9f9f;
line-height: 20px;
height: 20px;
color: #a9a9a9;
}
.hide {
display: none;
}
}
... ...
... ... @@ -58,11 +58,19 @@
margin-right: 100px;
}
.author-name:hover {
color: #CC3300;
}
.article-status {
height: 64px;
line-height: 64px;
color: #999;
font-size: 14px;
span {
margin-right: 30px;
}
}
.article-pic {
... ... @@ -350,13 +358,12 @@
width: 100%;
overflow: hidden;
margin-bottom: 80px;
border: 1px solid red;
h4 {
font-size: 14px;
position: relative;
line-height: 32px;
border-bottom: 1px solid #e7e7e7;
border-bottom: 1px solid #bbb;
.comment-num {
color: #379ed6;
... ...