Skip to content

G
gs1
Commit aebc7365 by 林家欣
Options

新增一键分享插件

parent 6f57c1ee
Showing with 108 additions and 89 deletions
package.json
......@@ -34,6 +34,7 @@
"vue-puzzle-vcode": "^1.1.9",
"vue-router": "^3.1.6",
"vue-slick-carousel": "^1.0.6",
"vue-social-share": "^0.0.3",
"vuex": "^3.1.3",
"wangeditor": "^3.1.1",
"xss": "^1.0.6"
......
public/index.html
......@@ -7,6 +7,7 @@
<meta name="referrer" content="never">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href='https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css' rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" ></script>
<!-- <link rel="shortcut icon" href="/favicon.ico"/> -->
......
src/main.js
......@@ -18,6 +18,10 @@ import './utils/codeTable'
// 百度地图
import BaiduMap from 'vue-baidu-map'
import Share from 'vue-social-share'
import 'vue-social-share/dist/client.css';
import '../node_modules/social-share.js/dist/js/social-share.min.js'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'EoRpk2HWln2YKTEYYH5wutFX'
......@@ -25,6 +29,8 @@ Vue.use(BaiduMap, {
// 公共样式、布局样式
Vue.use(ElementUI)
Vue.use(Share)
// 主题色调修改在assets/_style.scss 修改里面的变量即可
// 页面内容区布局分为2大块
......
src/views/News/msg.vue
......@@ -6,24 +6,34 @@
<div class="msg-cont">
<div class="container">
<div class="msg-title">
{{title}}
{{ title }}
</div>
<div class="msg-head">
<div class="msg-head-left">
<span>作者：{{author}}</span>
<span>日期：{{showtime}}</span>
<span>编辑：{{editor}}</span>
<span>来源：{{source}}</span>
<span>作者：{{ author }}</span>
<span>日期：{{ showtime }}</span>
<span>编辑：{{ editor }}</span>
<span>来源：{{ source }}</span>
</div>
<div class="msg-head-right">
<span>分享至：</span>
<img src="../../assets/image/news/icon_weibo.png" alt="" @click="toweibo" />
<img src="../../assets/image/news/icon_weixin.png" alt="" @click="weixinShareTimeline"/>
<share :config="config"></share>
</div>
<div class="msg-head-right" v-if="false">
<span>分享至：</span>
<img
src="../../assets/image/news/icon_weibo.png"
alt=""
@click="toweibo"
/>
<img
src="../../assets/image/news/icon_weixin.png"
alt=""
@click="weixinShareTimeline"
/>
</div>
</div>
<div class="msg-text" v-html="content">
</div>
<div class="msg-text" v-html="content"></div>
</div>
</div>
<div class="xglj">
......@@ -32,7 +42,7 @@
<span>相关连接</span>
<!-- <span>更多>></span> -->
</div>
<list :list="xgljListArr" @getInfo='getInfo' />
<list :list="xgljListArr" @getInfo="getInfo" />
</div>
</div>
</div>
......@@ -44,14 +54,21 @@
</div>
<div class="top10-ul">
<div v-for="(tmp, i) in top10.data" :key="i" class="top10-li">
<div v-if="i<3">
<img :src="require(`../../assets/image/news/icon_${i+1}.png`)" alt="" >
<div v-if="i < 3">
<img
:src="require(`../../assets/image/news/icon_${i + 1}.png`)"
alt=""
/>
<span class="no"></span>
<span class="name" @click="getInfo(tmp.id,tmp.directpath)">{{ tmp.title }}</span>
<span class="name" @click="getInfo(tmp.id, tmp.directpath)">{{
tmp.title
}}</span>
</div>
<div v-else>
<span class="no">{{i+1}}</span>
<span class="name" @click="getInfo(tmp.id,tmp.directpath)">{{ tmp.title }}</span>
<div v-else>
<span class="no">{{ i + 1 }}</span>
<span class="name" @click="getInfo(tmp.id, tmp.directpath)">{{
tmp.title
}}</span>
</div>
</div>
</div>
......@@ -62,7 +79,7 @@
<div class="cate">
<span>公告通知</span>
</div>
<list2 :list="announceListArr" @getInfo='getInfo' />
<list2 :list="announceListArr" @getInfo="getInfo" />
</div>
</div>
<div class="zttj">
......@@ -70,7 +87,7 @@
<div class="cate">
<span>专题推荐</span>
</div>
<list2 :list="zttjListListArr" @getInfo='getInfo'/>
<list2 :list="zttjListListArr" @getInfo="getInfo" />
</div>
</div>
</div>
......@@ -96,13 +113,20 @@ export default {
},
data() {
return {
id:this.$route.query.id,
content:'',
title:'',
showtime:'',
author:'',
source:'',
editor:'',
config: {
sites: ["weibo", "wechat"],
wechatQrcodeTitle: "微信扫一扫：分享",
wechatQrcodeHelper:
"<p>扫一扫</p><p>二维码便可将本文分享至朋友圈。</p>",
},
id: this.$route.query.id,
content: "",
title: "",
showtime: "",
author: "",
source: "",
editor: "",
breadcrumb: [{ name: "资讯中心", path: "/News/index" }],
xglj: {
data: [
......@@ -119,54 +143,48 @@ export default {
top10: {
data: [],
},
announceListArr:[],
xgljListArr:[],
zttjListListArr:[],
url:window.location.href,
sharesinastring:null
announceListArr: [],
xgljListArr: [],
zttjListListArr: [],
url: window.location.href,
sharesinastring: null,
};
},
created() {
this.InfoFn()
this.newsTop10()
this.announceList()
this.zttjList()
this.InfoFn();
this.newsTop10();
this.announceList();
this.zttjList();
},
methods: {
async InfoFn() {
const params = {
id:this.id,
id: this.id,
};
const listRes =
await this.$api.news.newsInfo(params);
const listRes = await this.$api.news.newsInfo(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.content=data.content;
this.title=data.title
this.showtime = data.showtime
this.author=data.author
this.source=data.source
this.editor=data.editor
this.content = data.content;
this.title = data.title;
this.showtime = data.showtime;
this.author = data.author;
this.source = data.source;
this.editor = data.editor;
this.breadcrumb = this.breadcrumb.concat(this.matche);
this.breadcrumb.push(
{
this.breadcrumb.push({
name: this.title,
});
this.$store.commit("system/SET_BREADCRUMB", this.breadcrumb);
this.xgljList(data.keyword)
this.xgljList(data.keyword);
}
},
// top列表
async newsTop10() {
const policyListRes =
await this.$api.news.syzxphList();
const policyListRes = await this.$api.news.syzxphList();
const { returnCode, data } = policyListRes;
if (returnCode === "0") {
this.top10.data = data
this.top10.data = data;
}
},
// 公告
async announceList() {
......@@ -174,65 +192,57 @@ export default {
page: 1,
limit: 10,
};
const listRes =
await this.$api.news.announceList(params);
const listRes = await this.$api.news.announceList(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.announceListArr = data.list
this.announceListArr = data.list;
}
},
// 专题
// 专题
async zttjList() {
const params = {
page: 1,
limit: 10,
};
const listRes =
await this.$api.news.zttjList(params);
const listRes = await this.$api.news.zttjList(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.zttjListListArr = data
this.zttjListListArr = data;
}
},
// 相关链接
// 相关链接
async xgljList(keyword) {
const params = {
id:9979,
keyword:keyword
id: 9979,
keyword: keyword,
};
const listRes =
await this.$api.news.relatedLinks(params);
const listRes = await this.$api.news.relatedLinks(params);
const { returnCode, data } = listRes;
if (returnCode === "0") {
this.xgljListArr = data
this.xgljListArr = data;
}
},
getInfo(id,directpath){
if(directpath&&directpath!==''&& directpath.length>0){
window.open(directpath,'_blank');
}else{
getInfo(id, directpath) {
if (directpath && directpath !== "" && directpath.length > 0) {
window.open(directpath, "_blank");
} else {
let link = this.$router.resolve({
path: `/news/msg?id=${id}`,
});
window.open(link.href,'_blank')
window.open(link.href, "_blank");
}
},
// weibo
toweibo(){
this.sharesinastring ='http://service.weibo.com/share/share.php?title=' +this.title+'&url='+this.url;
window.open(this.sharesinastring, '_blank');//微博在新页面打开
},
//weixin
weixinShareTimeline(){
}
toweibo() {
this.sharesinastring =
"http://service.weibo.com/share/share.php?title=" +
this.title +
"&url=" +
this.url;
window.open(this.sharesinastring, "_blank"); //微博在新页面打开
},
//weixin
weixinShareTimeline() {},
},
};
</script>
......@@ -280,6 +290,7 @@ export default {
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
flex-wrap: wrap;
.msg-head-left {
......@@ -321,20 +332,20 @@ export default {
.top10-ul {
margin: 0;
padding: 0;
.top10-li {
display: flex;
justify-content: space-between;
padding: 10px 0;
margin: 0;
> div {
flex: 1;
display: flex;
align-items: center;
@include ellipsis;
font-size: 13px;
img{
img {
position: absolute;
left: -4px;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment