You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
440 lines
11 KiB
440 lines
11 KiB
<template> |
|
<div> |
|
<div |
|
class="fixed-box" |
|
:class="{ isMobile: deviceType !== 'pc' }" |
|
:style="{ right: right + 'px' }" |
|
> |
|
<div v-if="scrollTop > 200" @click="goTop"> |
|
<i class="el-icon-arrow-up"></i><span>TOP</span> |
|
</div> |
|
<template v-if="deviceType !== 'pc'"> |
|
<div |
|
v-if="showCollect" |
|
:style="{ color: isCollect == 1 ? '#EAAB00' : '' }" |
|
@click="collectClick" |
|
> |
|
<i class="el-icon-star-on"></i |
|
><span>{{ isCollect == 1 ? '已' : '' }}收藏</span> |
|
</div> |
|
<div v-if="showShare" @click="showSharePop"> |
|
<i class="el-icon-share"></i><span>分享</span> |
|
</div> |
|
<div v-if="showComment" @click="commentClick"> |
|
<img src="~/assets/images/comment.png" alt="" /><span>评论</span> |
|
</div> |
|
<div v-if="showLike" @click="likeClick"> |
|
<img |
|
v-if="isLike == 1" |
|
src="~/assets/images/like_chosen.png" |
|
alt="" |
|
/><img v-else src="~/assets/images/like.png" alt="" /><span |
|
:style="{ color: isLike == 1 ? '#E6553F' : '' }" |
|
>{{ likeNum }}</span |
|
> |
|
</div> |
|
</template> |
|
</div> |
|
<div |
|
v-if="deviceType === 'pc'" |
|
class="fixed-box left-fixed" |
|
:style="{ |
|
position: hasScroll ? 'fixed' : 'absolute', |
|
top: hasScroll ? '236px' : '', |
|
left: left + 'px' |
|
}" |
|
> |
|
<div |
|
v-if="showCollect" |
|
:style="{ color: isCollect == 1 ? '#EAAB00' : '' }" |
|
@click="collectClick" |
|
> |
|
<i class="el-icon-star-on"></i |
|
><span>{{ isCollect == 1 ? '已' : '' }}收藏</span> |
|
</div> |
|
<el-popover |
|
placement="right" |
|
width="174" |
|
:visible-arrow="false" |
|
popper-class="share-hover-box" |
|
trigger="hover" |
|
> |
|
<div class="share-box"> |
|
<el-popover |
|
placement="top-start" |
|
width="176" |
|
:visible-arrow="false" |
|
popper-class="wechat-qrcode-box" |
|
trigger="hover" |
|
> |
|
<div class="qrcode-box"> |
|
<p> |
|
<img |
|
src="~/assets/images/wechat_color.png" |
|
alt="扫码分享至微信" |
|
/>扫码分享至微信 |
|
</p> |
|
<vue-qr class="bicode" :size="220" :text="codeValue"></vue-qr> |
|
</div> |
|
<p slot="reference" @click="share('微信')"> |
|
<img src="~/assets/images/share_wechat.png" alt="" /> |
|
</p> |
|
</el-popover> |
|
<p @click="share('qq')"> |
|
<img src="~/assets/images/share_qq.png" alt="" /> |
|
</p> |
|
<p @click="share('微博')"> |
|
<img src="~/assets/images/share_weibo.png" alt="" /> |
|
</p> |
|
</div> |
|
<div v-if="showShare" slot="reference" @click="pcShareClick"> |
|
<i class="el-icon-share"></i><span>分享</span> |
|
</div> |
|
</el-popover> |
|
<div v-if="showComment" @click="commentClick"> |
|
<img src="~/assets/images/comment.png" alt="" /><span>评论</span> |
|
</div> |
|
<div v-if="showLike" @click="likeClick"> |
|
<img |
|
v-if="isLike == 1" |
|
src="~/assets/images/like_chosen.png" |
|
alt="" |
|
/><img v-else src="~/assets/images/like.png" alt="" /><span |
|
:style="{ color: isLike == 1 ? '#E6553F' : '' }" |
|
>{{ likeNum }}</span |
|
> |
|
</div> |
|
</div> |
|
<div |
|
v-if="sharePopupShow" |
|
class="share-popup" |
|
@click="sharePopupShow = false" |
|
> |
|
<template v-if="env === 'wechat' || env === 'weibo' || env === 'qq'"> |
|
<img src="~/assets/images/share_point.png" /> |
|
<div> |
|
<p>点击右上角</p> |
|
<p>分享给朋友</p> |
|
</div> |
|
</template> |
|
<template v-else> |
|
<p>点击浏览器分享图标，发送好友</p> |
|
</template> |
|
</div> |
|
</div> |
|
</template> |
|
<script> |
|
export default { |
|
props: { |
|
showCollect: Boolean, |
|
showShare: Boolean, |
|
showComment: Boolean, |
|
showLike: Boolean, |
|
isLike: { |
|
type: Number, |
|
default: 0 |
|
}, |
|
likeNum: { |
|
type: Number, |
|
default: 0 |
|
}, |
|
isCollect: { |
|
type: Number, |
|
default: 0 |
|
}, |
|
isLogin: { |
|
type: Boolean, |
|
default: false |
|
} |
|
}, |
|
data() { |
|
return { |
|
scrollTop: 0, |
|
left: -89, |
|
right: 0, |
|
codeValue: '', |
|
hasScroll: false, |
|
sharePopupShow: false |
|
}; |
|
}, |
|
computed: { |
|
deviceType() { |
|
return this.$store.state.device.deviceType; |
|
}, |
|
env() { |
|
return this.$store.state.device.env; |
|
} |
|
}, |
|
mounted() { |
|
const that = this; |
|
let href = window.location.href; |
|
if (that.$route.name !== 'video-id') { |
|
const origin = |
|
process.env.VUE_APP_TITLE !== 'production' |
|
? 'https://apptest.diabetes.com.cn' |
|
: 'https://app.diabetes.com.cn'; |
|
if (that.$route.name === 'doctor-id') { |
|
href = origin + '/expert-video'; |
|
} else { |
|
href = origin + '/library/detail/' + that.$route.params.id; |
|
} |
|
} |
|
this.codeValue = href; |
|
if (that.deviceType !== 'pc' && that.env === 'wechat' && that.showShare) { |
|
that.wxShare( |
|
{ |
|
title: document.title, |
|
desc: document |
|
.querySelector('meta[name="description"]') |
|
.getAttribute('content'), |
|
url: href, |
|
image: location.origin + require('~/assets/images/mobile_logo.png') |
|
}, |
|
() => { |
|
that.sharePopupShow = false; |
|
} |
|
); |
|
} |
|
this.right = (document.documentElement.offsetWidth - 1258) / 2; |
|
this.$nextTick(() => { |
|
window.addEventListener('scroll', function () { |
|
that.hasScroll = true; |
|
// 变量scrollTop是滚动条滚动时，距离顶部的距离 |
|
const scrollTop = |
|
document.documentElement.scrollTop || document.body.scrollTop; |
|
const scrollLeft = |
|
document.documentElement.scrollLeft || document.body.scrollLeft; |
|
that.scrollTop = scrollTop; |
|
if (document.documentElement.offsetWidth < 1258) { |
|
that.right = |
|
0 - (1258 - document.documentElement.offsetWidth) + scrollLeft; |
|
that.left = 0 - scrollLeft; |
|
} else { |
|
that.right = (document.documentElement.offsetWidth - 1258) / 2; |
|
that.left = (document.documentElement.offsetWidth - 1258) / 2; |
|
} |
|
}); |
|
}); |
|
}, |
|
methods: { |
|
goTop() { |
|
document.documentElement.scrollTop = 0; |
|
document.body.scrollTop = 0; |
|
}, |
|
commentClick() { |
|
this.$emit('commentClick'); |
|
}, |
|
likeClick() { |
|
this.$emit('likeClick'); |
|
}, |
|
collectClick() { |
|
this.$emit('collectClick'); |
|
}, |
|
share(types) { |
|
const title = document.title; |
|
|
|
// 当内容中没有图片时，设置分享图片为网站logo |
|
|
|
// 获取当前网页url |
|
const url = document.location.href; |
|
|
|
// 获取网页描述 |
|
const description = document |
|
.querySelector('meta[name="description"]') |
|
.getAttribute('content'); |
|
|
|
// 获取网页关键字 |
|
const keywords = document |
|
.querySelector('meta[name="keywords"]') |
|
.getAttribute('content'); |
|
|
|
if (types === '微博') { |
|
window.open( |
|
'http://service.weibo.com/share/share.php?url=' + |
|
url + |
|
'&sharesource=weibo&title=' + |
|
title + |
|
' ' + |
|
description, |
|
'_blank' |
|
); |
|
} |
|
// qq好友接口的传参 |
|
if (types === 'qq') { |
|
window.open( |
|
'http://connect.qq.com/widget/shareqq/index.html?url=' + |
|
url + |
|
'&sharesource=qq&title=' + |
|
title + |
|
'&summary=' + |
|
description + |
|
'&desc=' + |
|
keywords, |
|
'_blank' |
|
); |
|
} |
|
if (this.$route.name !== 'article-id') { |
|
this.baiduStat( |
|
(this.$route.name === 'video-id' ? '视频' : '一问医答') + '详情页', |
|
'click', |
|
(this.$route.name === 'video-id' ? '视频' : '一问医答') + |
|
'分享-' + |
|
types |
|
); |
|
} |
|
}, |
|
pcShareClick() { |
|
if (this.$route.name === 'article-id') { |
|
this.baiduStat('文章详情页', 'click', '文章内分享'); |
|
} |
|
}, |
|
showSharePop() { |
|
const that = this; |
|
that.sharePopupShow = true; |
|
this.baiduStat('移动端', 'click', '移动端-分享页面'); |
|
if (this.env !== 'wechat') { |
|
setTimeout(() => { |
|
that.sharePopupShow = false; |
|
}, 3000); |
|
} |
|
} |
|
} |
|
}; |
|
</script> |
|
<style lang="scss"> |
|
.fixed-box { |
|
position: fixed; |
|
bottom: 130px; |
|
right: 0; |
|
width: 60px; |
|
z-index: 9; |
|
div { |
|
margin-top: 1px; |
|
width: 62px; |
|
height: 62px; |
|
background: $bg-color; |
|
border-radius: 4px; |
|
text-align: center; |
|
cursor: pointer; |
|
color: $font-color2; |
|
|
|
i, |
|
span { |
|
font-size: 14px; |
|
font-family: PingFangSC-Regular, PingFang SC; |
|
font-weight: 400; |
|
line-height: 20px; |
|
} |
|
i { |
|
margin-top: 12px; |
|
font-size: 30px; |
|
} |
|
img { |
|
margin-top: 10px; |
|
width: 26px; |
|
} |
|
span { |
|
display: block; |
|
} |
|
} |
|
&.isMobile { |
|
top: auto !important; |
|
right: 15px !important; |
|
bottom: 70px !important; |
|
transform: scale(0.85); |
|
transform-origin: bottom; |
|
} |
|
&.left-fixed { |
|
position: absolute; |
|
top: 150px; |
|
bottom: auto; |
|
left: -89px; |
|
} |
|
} |
|
.share-hover-box { |
|
border: none; |
|
box-shadow: none; |
|
padding: 11px 0 11px 11px; |
|
height: 61px; |
|
background: $bg-color; |
|
box-sizing: border-box; |
|
transform: translateX(-15px); |
|
border-radius: 0 50px 50px 0; |
|
.share-box { |
|
font-size: 0; |
|
& > span, |
|
& > p { |
|
display: inline-block; |
|
margin-right: 12px; |
|
background: $body-color; |
|
cursor: pointer; |
|
@include roundFun(40px); |
|
img { |
|
@include roundFun(40px); |
|
} |
|
} |
|
} |
|
&.left-show { |
|
transform: translateX(15px) scale(0.85); |
|
transform-origin: bottom; |
|
border-radius: 50px 0 0 50px; |
|
} |
|
} |
|
.wechat-qrcode-box { |
|
border: 1px solid #ededed; |
|
padding: 14px 0 16px; |
|
background: $body-color; |
|
box-sizing: border-box; |
|
.qrcode-box { |
|
text-align: center; |
|
p { |
|
margin-bottom: 6px; |
|
font-size: 16px; |
|
color: $font-color1; |
|
line-height: 28px; |
|
img { |
|
width: 28px; |
|
height: 28px; |
|
} |
|
} |
|
& > img { |
|
width: 110px; |
|
} |
|
} |
|
} |
|
.share-popup { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: rgba(0, 0, 0, 0.5); |
|
z-index: 10; |
|
p { |
|
font-size: 16px; |
|
color: #fff; |
|
text-align: center; |
|
} |
|
div { |
|
text-align: right; |
|
float: right; |
|
position: absolute; |
|
right: 0; |
|
top: 60px; |
|
width: 150px; |
|
p { |
|
display: block; |
|
} |
|
} |
|
img { |
|
width: 210px; |
|
height: 124px; |
|
float: right; |
|
} |
|
& > p { |
|
position: absolute; |
|
bottom: 20px; |
|
width: 100%; |
|
} |
|
} |
|
</style>
|
|
|