mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 19:06:43 +08:00
420 lines
13 KiB
Vue
420 lines
13 KiB
Vue
<template>
|
||
<div id="article-index">
|
||
<div class="article-banner">
|
||
<portal-header current="article" :goSearch="3"></portal-header>
|
||
</div>
|
||
<div>
|
||
<div class="xcontent2">
|
||
<div style="margin-right: 30px;" class="xcontent2-main">
|
||
<div v-if="noData" >
|
||
<!--文章详细内容-->
|
||
|
||
<div class="detail">
|
||
<div class="xpage-detail-crumbs">
|
||
<router-link to="/article"><span class="crumbs-first">文章列表</span></router-link>
|
||
<span class="crumbs-line">/</span>
|
||
<span class="crumbs-last">文章详情</span>
|
||
</div>
|
||
<div class="title">{{articleDetailData.title}}</div>
|
||
<div class="label">
|
||
<div style="margin-top: 5px;">
|
||
<author :avatar="articleDetailData.avatar" :name="articleDetailData.name" :sex="articleDetailData.sex"></author>
|
||
</div>
|
||
<div style="margin-top: 8px;padding-left: 15px;font-size: 14px;">
|
||
{{authorSign}}
|
||
<!-- <time-show :time="articleDetailData.sysCreateTime"></time-show> -->
|
||
</div>
|
||
<!-- <author :avatar="articleDetailData.avatar" :name="articleDetailData.name" :info="articleDetailData.orgInfo" ></author> -->
|
||
<!-- :readonly="true" -->
|
||
<!-- <interactBar v-if="articleDetailData.id" :type="2" :data="articleDetailData" :comments="false" :praises="false" :views="false"></interactBar> -->
|
||
<!-- <div style="padding-top: 5px;padding-left: 5px;"> 作者：{{ articleDetailData.name }}  部门：{{ articleDetailData.orgInfo }}  发布时间：<time-show :time="articleDetailData.sysCreateTime"></time-show> </div> -->
|
||
</div>
|
||
<div class="content ql-container">
|
||
<div class="ql-editor">
|
||
<div class="qltext" style="word-break:break-all; color:#121212" v-html="articleDetailData.content"></div>
|
||
</div>
|
||
</div>
|
||
<!-- </el-card> -->
|
||
<div style="margin-top:10px;">
|
||
<interactBar :type="2" :data="articleDetailData" :theme='1' :shares="false" ></interactBar>
|
||
</div>
|
||
</div>
|
||
<!--评论, 修改边距调整-->
|
||
<div>
|
||
<comments v-if="articleId!=''" @success="success" :obj-type="2" :obj-id="articleId" :toUsers="toUsers" :authorId="articleDetailData.sysCreateAid"></comments>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<el-empty :image-size="200"></el-empty>
|
||
</div>
|
||
</div>
|
||
<div class="xcontent2-minor">
|
||
<div>
|
||
<div id="articleAnking">
|
||
<div class="portal-model-btn pointer" @click="openDialog">
|
||
<svg-icon style="margin-right: 10px;font-size: 24px;" icon-class="addArticle"></svg-icon>
|
||
写文章
|
||
</div>
|
||
|
||
<div class="portal-ranking ranking-bg">
|
||
<p class="ranking-title">贡献榜</p>
|
||
<ul class="ranking-data">
|
||
<li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
|
||
<span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">
|
||
<img src="/images/list-01.png" alt="">
|
||
</span>
|
||
<span class="portal-right-text orange-tow" v-if="index==1" style="margin-right:94px">
|
||
<img src="/images/list02.png" alt="">
|
||
</span>
|
||
<span class="portal-right-text orange-three" v-if="index==2" style="margin-right:94px">
|
||
<img src="/images/list03.png" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==3" style="margin-right:94px">
|
||
<img src="/images/list04.png" alt="">
|
||
</span>
|
||
<span class="portal-right-text" v-if="index==4" style="margin-right:94px">
|
||
<img src="/images/list05.png" alt="">
|
||
</span>
|
||
<span class="portal-title-desc">{{ item.sysCreateUname }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="course-resources">
|
||
<!-- 资源位 -->
|
||
<img :src="fileBaseUrl + resonimg.image" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<!--以下是评论信息-->
|
||
|
||
</div>
|
||
<!-- <div style="display: none;">
|
||
<interactBar res="interactBar" :type="2" :data="articleDetailData" :comments="false" :views="false"></interactBar>
|
||
</div> -->
|
||
<el-dialog title="创建文章" :visible.sync="diagSync" :close-on-click-modal="false" width="900px" custom-class="g-dialog">
|
||
<editItems v-if="diagSync" :jumpLimit="false" :editForm="{}" @success="saveSuccess"></editItems>
|
||
</el-dialog>
|
||
<portal-footer></portal-footer>
|
||
<portalFloatTools></portalFloatTools>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import portalFloatTools from '@/components/PortalFloatTools.vue';
|
||
import { mapGetters } from "vuex";
|
||
import portalHeader from "@/components/PortalHeader.vue";
|
||
import portalFooter from "@/components/PortalFooter.vue";
|
||
import timeShow from '@/components/Portal/daytimeShow.vue';
|
||
import interactBar from "@/components/Portal/interactBar.vue";
|
||
import author from '@/components/Portal/authorInfo.vue';
|
||
import comments from "@/components/Portal/comments.vue";
|
||
import apiArticle from "@/api/modules/article.js"
|
||
import apiUser from '@/api/system/user.js';
|
||
import apiMessage from '@/api/system/message.js';
|
||
import apiPraises from '@/api/modules/praises.js';
|
||
import apiShares from '@/api/modules/shares.js';
|
||
import apiFavorites from '@/api/modules/favorites.js';
|
||
import editItems from '@/components/Article/editItems.vue';
|
||
import "quill/dist/quill.core.css";
|
||
import "quill/dist/quill.snow.css";
|
||
import "quill/dist/quill.bubble.css";
|
||
import apiPlace from "@/api/phase2/place.js"
|
||
export default {
|
||
components: { portalHeader, portalFooter,interactBar,comments,timeShow,author,editItems,portalFloatTools},
|
||
computed: {
|
||
...mapGetters(["userInfo"]),
|
||
},
|
||
data() {
|
||
return {
|
||
resonimg:{},
|
||
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||
noData:true,
|
||
shareInfo:{
|
||
name:'',
|
||
load:false,
|
||
list:[]
|
||
},
|
||
authorSign:'',//个性签名
|
||
shareShow:false,
|
||
toUsers: [],
|
||
articleId:'',
|
||
shareUsers:[],
|
||
articleDetailData:{
|
||
avatar:'',
|
||
name:'',
|
||
orgInfo:'',
|
||
code:'',
|
||
sex:null,
|
||
},
|
||
ankingList: [],
|
||
diagSync:false,//控制弹窗
|
||
isPraise:false,
|
||
isFavorite: false,
|
||
setTime: null
|
||
};
|
||
},
|
||
created(){
|
||
|
||
},
|
||
mounted() {
|
||
this.articleId=this.$route.query.id;
|
||
//console.log(this.$route.query.id,'this.$route.query.id');
|
||
this.getArticleDetail()
|
||
this.$watermark.set(this.userInfo.name+this.userInfo.loginName);
|
||
this.getAnkingData();
|
||
window.addEventListener(
|
||
"scroll",
|
||
this.handleScroll
|
||
);
|
||
this.couresreso();
|
||
},
|
||
beforeDestroy(){
|
||
window.removeEventListener("scroll",this.handleScroll);
|
||
clearInterval(this.setTime);
|
||
},
|
||
methods: {
|
||
couresreso(){
|
||
let key = 'article';
|
||
apiPlace.detail(key).then(res=>{
|
||
console.log(res)
|
||
let lmj = JSON.parse(res.result.content)
|
||
// console.log(lmj)
|
||
this.resonimg = lmj[0]
|
||
console.log(this.resonimg.image)
|
||
})
|
||
},
|
||
handleScroll() {
|
||
let el_anking = document.querySelector('#articleAnking');
|
||
//console.log(el_anking.clientWidth,'clientWidth');
|
||
//el_anking.wid
|
||
let innerHeight = document.querySelector('#article-index').clientHeight
|
||
let outerWidth = el_anking.clientWidth;
|
||
let outerHeight = document.documentElement.clientHeight
|
||
let scrollTop = document.documentElement.scrollTop
|
||
if(scrollTop > 400) {
|
||
document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:"+outerWidth+"px";
|
||
} else {
|
||
document.querySelector('#articleAnking').style.cssText = "position: static";
|
||
}
|
||
},
|
||
saveSuccess(data){
|
||
this.diagSync=false;
|
||
this.articleList.pageIndex = 1;
|
||
this.articleList.list = [];
|
||
this.getArticleList();
|
||
},
|
||
openDialog(){
|
||
this.diagSync=true
|
||
},
|
||
getAnkingData() {
|
||
apiArticle.countsUsername(5).then(res => {
|
||
if (res.status == 200) {
|
||
this.ankingList = res.result;
|
||
}
|
||
});
|
||
},
|
||
//获取文章详细信息
|
||
getArticleDetail(){
|
||
apiArticle.detail(this.articleId,true).then(res=>{
|
||
if(res.status==200){
|
||
res.result.avatar='';
|
||
res.result.name='';
|
||
res.result.orgInfo='';
|
||
res.result.sex=null;
|
||
this.articleDetailData=res.result;
|
||
//if(this.articleDetailData.toString()!='{}'){
|
||
this.getAuthorInfo(this.articleDetailData)
|
||
let event = {
|
||
key: "ViewArticle",//后台的事件key 发布文章且审核通过
|
||
title: "查看文章",//事件的标题
|
||
parameters:"",//用户自定义参数 name:value,name:value
|
||
content: "查看了文章",//事件的内容
|
||
objId: this.articleId,//关联的id
|
||
objType: "2",//关联的类型
|
||
objInfo: this.articleDetailData.title,
|
||
aid: this.userInfo.aid, //当前登录人的id
|
||
aname: this.userInfo.name,//当前人的姓名
|
||
status: 1 //状态，直接写1
|
||
}
|
||
this.$store.dispatch("userTrigger", event);
|
||
this.setTime = setTimeout(()=>{
|
||
event.key = 'ReadArticle';
|
||
event.title = "阅读文章";
|
||
event.content = "阅读了文章"
|
||
this.$store.dispatch("userTrigger", event);
|
||
},1000 * 60 *2)
|
||
//}
|
||
}else{
|
||
this.noData = false;
|
||
this.$message.error(res.message);
|
||
}
|
||
}).catch(err=>{
|
||
this.$message.error("获取数据失败")
|
||
})
|
||
},
|
||
//获取文章发布人的人物信息
|
||
getAuthorInfo(data){
|
||
let ids=[data.sysCreateAid]
|
||
apiUser.getByIds(ids).then(res=>{
|
||
if(res.status==200){
|
||
this.authorSign=res.result[0].sign;
|
||
this.articleDetailData=Object.assign(this.articleDetailData,res.result[0])
|
||
this.toUsers = [
|
||
{name: res.result[0].name, aid:res.result[0].aid ,sex:res.result[0].sex}
|
||
];
|
||
}
|
||
})
|
||
},
|
||
success(value){
|
||
let content=this.userInfo.name+'评论了我的文章'+'-'+this.articleDetailData.title;
|
||
let query={refId:this.articleDetailData.id,sendType:1,title:'系统消息',refType:2,content:content,sendName:this.userInfo.name,acceptId:this.articleDetailData.sysCreateAid,acceptName:this.articleDetailData.sysCreateBy}
|
||
apiMessage.save(query).then(res=>{
|
||
if(res.status==200){
|
||
|
||
}
|
||
})
|
||
}
|
||
//获取文章评论人的人物信息
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.article-banner{
|
||
height: 240px;
|
||
background: url('/images/article-banner.png');
|
||
}
|
||
.course-resources{
|
||
width: 410px;
|
||
margin-top: 26px;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
|
||
.write-art{
|
||
width: 410px;
|
||
height: 67px;
|
||
text-align: center;
|
||
// line-height: 67px;
|
||
background: #DDEDFF;
|
||
border-radius: 8px;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
border: none;
|
||
color: #387DF7;
|
||
margin-bottom: 22px;
|
||
}
|
||
::v-deep .el-card__body{
|
||
padding: 0;
|
||
}
|
||
::v-deep .bacolor:nth-child(odd){
|
||
background-color: #fff;
|
||
padding: 0 5px;
|
||
}
|
||
::v-deep .bacolor:nth-child(even){
|
||
background-color: #f6f6f6;
|
||
padding: 0 5px;
|
||
}
|
||
.qltext{
|
||
font-size: 15px;
|
||
font-weight: normal;
|
||
color: #454545;
|
||
line-height: 24px;
|
||
::v-deep img{
|
||
width: 100%;
|
||
}
|
||
|
||
}
|
||
.detail {
|
||
background-color: #fff;
|
||
padding: 50px;
|
||
.title {
|
||
font-size: 22px;
|
||
text-align: center;
|
||
line-height: 33px;
|
||
color: #121212 ;
|
||
font-weight: 500;
|
||
margin-top: 30px;
|
||
word-break:break-all;
|
||
}
|
||
.label {
|
||
font-size: 15px;
|
||
color: #999999;
|
||
display: flex;
|
||
padding: 10px 0;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
span{
|
||
margin-left: 10px;
|
||
}
|
||
.interact-bar{
|
||
margin-left: auto;
|
||
}
|
||
}
|
||
.btn-div {
|
||
|
||
margin: 8px 0;
|
||
text-align: right;
|
||
padding-bottom: 10px;
|
||
font-size: 15px;
|
||
color: #454545 ;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
.item {
|
||
margin: 0 8px 0 25px;
|
||
}
|
||
.item-right {
|
||
float: right;
|
||
}
|
||
}
|
||
.content {
|
||
padding: 20px 0;
|
||
// line-height: 25px;
|
||
// text-indent: 2em;
|
||
// color: #444444;
|
||
// font-size: 16px;
|
||
overflow-x: hidden;
|
||
min-height: 200px;
|
||
}
|
||
.ql-container{
|
||
// font-size: 14px;
|
||
.ql-editor{
|
||
padding: 0;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-box {
|
||
.add-btn {
|
||
width: 100%;
|
||
padding: 15px 0;
|
||
}
|
||
.ranking-title {
|
||
line-height: 34px;
|
||
.center-titlt{
|
||
font-size: 15px;
|
||
color: #333333;
|
||
}
|
||
.center{
|
||
text-align: right;
|
||
}
|
||
img{
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
.ranking-data {
|
||
margin: 10px 0;
|
||
color: #999999;
|
||
}
|
||
}
|
||
</style>
|