Skip to content

T
techbook
Commit ccb40b64 authored by zhangyanni's avatar zhangyanni
Browse files
Options

文章列表页面+详情推荐阅读

parent d4a72605
Hide whitespace changes
Inline Side-by-side
Showing with 126 additions and 61 deletions
src/views/mobile/article/api.js
View file @ ccb40b64
......@@ -20,4 +20,18 @@ export default {
getArticleDetailById(params,params1){
return api.fetchLogin('/business/content/selectContentById?contentId='+params+"&isAddBrowse="+params1);
},
//获取文章详情推荐阅读
getArticleDetailRecommendById(params){
return api.fetchLoadingLogin("/business/content/selectRecommendContentById",params);
},
praiseAxios(params){
return api.fetchLogin("/business/content/addOrSubtractHot",params);
},
collectionAxios(params){
return api.fetchLogin("/business/content/addCollection",params);
},
}
\ No newline at end of file
src/views/mobile/article/detail.vue
View file @ ccb40b64
......@@ -10,7 +10,8 @@
<div>
<span v-if="articleInfo.contentSourceType==0" :class="articleInfo.contentSourceType==0?'isOriginal':''">原创</span>
<span>{{articleInfo.publishDateStr}}</span>
<span v-if="articleInfo.isRecommended==1">推荐人：<img src="../../../assets/img/index/bdefaultLogo.png" alt=""><span class="peopleTitle">{{articleInfo.professorList[0].empName}}</span></span>
<span v-if="articleInfo.isRecommended==1">推荐人：<img :src="articleInfo.empLogo!=''&&articleInfo.empLogo?articleInfo.empLogo:require('../../../assets/img/defaultlogo.png')">
<span class="peopleTitle">{{articleInfo.professorList[0].empName}}</span></span>
<span v-if="articleInfo.isRecommended==0&&articleInfo.contentSourceType==0">作者：{{articleInfo.contentAuthor}}</span>
</div>
<div>
......@@ -21,14 +22,12 @@
</div>
<div class="original" v-if="articleInfo.contentSourceType==1">
<p><span>来源：</span><span>人工智能产业发展联盟</span></p>
<p><span>原文地址：</span><span>http://www.ciotimes.com/property</span></p>
<p><span>来源：</span><span>{{articleInfo.contentSource}}</span></p>
<p v-if="articleInfo.originalUrl"><span>原文地址：</span><span>{{articleInfo.originalUrl}}</span></p>
</div>
<div class="disclaimer">
<p style="flex-wrap: wrap;line-height:.48rem;" :class="isShowAllDisclaimer?'showTwoLine':''"><span style="width: 100%;display: block;">免责声明：</span><span style="display: block;width: 100%;line-height: .48rem;">{{"产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景".slice(0,45)}}...<span class="xialaicon" @click="isShowAllDisclaimer = !isShowAllDisclaimer"><i class="iconfont icon-xiala" style="font-size: .24rem"></i></span></span></p>
<p style="flex-wrap: wrap;line-height:.48rem;" v-if="(!isShowAllDisclaimer)||!isShowAllDisclaimer"><span style="width: 100%;display: block;">免责声明：</span><span style="display: block;width: 100%;line-height: .48rem;">{{"产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景产品主要功能和场景"}}<span class="xialaicon" v-if="(!isShowAllDisclaimer)||isShowAllDisclaimer" @click="isShowAllDisclaimer = !isShowAllDisclaimer"><i class="iconfont icon-xiala-copy" style="font-size: .24rem"></i></span></span></p>
<!--<p style="flex-wrap: wrap;line-height:.58rem;" v-if="(companyInfo.isShowAllDisclaimer&&isShowAllDisclaimer)||isShowAllDisclaimer" :class="isShowAllDisclaimer?'showTwoLine':''"><span style="width: 100%;display: block;">产品主要功能和场景：</span><span style="display: block;width: 100%;line-height: .58rem;">{{companyInfo.projectInstroduction.slice(0,45)}}...<span class="xialaicon" @click="isShowAllDisclaimer = !isShowAllDisclaimer"><i class="iconfont icon-xiala"></i></span></span></p>-->
<!--<p style="flex-wrap: wrap;line-height:.58rem;" v-if="(!companyInfo.isShowAllDisclaimer&&!isShowAllDisclaimer)||companyInfo.isShowAllDisclaimer&&!isShowAllDisclaimer"><span style="width: 100%;display: block;">产品主要功能和场景：</span><span style="display: block;width: 100%;line-height: .58rem;">{{companyInfo.projectInstroduction}}<span class="xialaicon" v-if="(companyInfo.isShowAllDisclaimer&&!isShowAllDisclaimer)||isShowAllDisclaimer" @click="isShowAllDisclaimer = !isShowAllDisclaimer"><i class="iconfont icon-xiala-copy"></i></span></span></p>-->
<p style="flex-wrap: wrap;line-height:.48rem;" v-if="(articleInfo.isShowAllDisclaimer&&isShowAllDisclaimer)||isShowAllDisclaimer":class="isShowAllDisclaimer?'showTwoLine':''"><span style="width: 100%;display: block;">免责声明：</span><span style="display: block;width: 100%;line-height: .48rem;">{{articleInfo.baseContentSetting.settingStatementContent.slice(0,45)}}...<span class="xialaicon" @click="isShowAllDisclaimer = !isShowAllDisclaimer"><i class="iconfont icon-xiala" style="font-size: .24rem"></i></span></span></p>
<p style="flex-wrap: wrap;line-height:.48rem;" v-if="(!articleInfo.isShowAllDisclaimer&&!isShowAllDisclaimer)||articleInfo.isShowAllDisclaimer&&!isShowAllDisclaimer"><span style="width: 100%;display: block;">免责声明：</span><span style="display: block;width: 100%;line-height: .48rem;">{{articleInfo.baseContentSetting.settingStatementContent}}<span class="xialaicon" v-if="(!isShowAllDisclaimer)||isShowAllDisclaimer" @click="isShowAllDisclaimer = !isShowAllDisclaimer"><i class="iconfont icon-xiala-copy" style="font-size: .24rem"></i></span></span></p>
</div>
</div>
<div class="divHeight8px">
......@@ -80,7 +79,7 @@
<p style="text-align: center;" @click="istext?pushproject():''" :style="istext?'line-height: 0.8rem;':'line-height: 0.2rem;'">
<span v-if="!istext">&nbsp;</span>
<span>
{{istext?'展开更多项目信息':''}}
{{istext?'展开更多评论':''}}
<i v-if="istext" style="font-size: 12px;margin-left: 0.2rem;" class="iconfont icon-xiala"></i>
</span>
</p>
......@@ -95,7 +94,7 @@
<p class="bottomLine" v-if="tableData.length>0&&page==totalPage">没有更多内容</p>
</div>
<div class="divHeight8px"></div>
<div class="allTabInfoDetail recommended">
<div class="allTabInfoDetail recommended" v-if="recommendListData.length>0">
<div class="tabInfo">
<span class="leftTab"></span>
<div>
......@@ -105,69 +104,51 @@
<div class="div1px"></div>
<div class="articleContent">
<ul>
<li @click="handleToArticle()">
<div v-if="false">
<li @click="handleToArticle(item)" v-for="(item,index) in recommendListData">
<div v-if="item.contentUrlList.length==0">
<div class="articleNoImg">
<div>
<span v-if="false"><span class="originalTitle" >原创</span><i> | </i></span>
<span class="articleTitle">国家互联网信息办公室发布《信息内容生态治理规定》</span>
<span v-if="item.contentSourceType==0"><span class="originalTitle" >原创</span><i> | </i></span>
<span class="articleTitle">{{item.contentTitle}}</span>
</div>
<div class="mainIntro">
Gauzy通过太库平台成功对接中国固安恒成功对接中国固安恒鑫科技有成功对接中国固安恒成功对接中国固安恒中国固安恒成功对接中国固安恒…
{{item.contentValidity}}
</div>
<p class="itemButton">
<span>9,999 阅读</span>
<span>3-22</span>
<span v-if="item.contentBrowseStr!=0">{{item.contentBrowseStr}} 阅读</span>
<span>{{item.publishDateStr}}</span>
</p>
</div>
</div>
<div>
<div v-if="item.contentUrlList.length>0">
<div class="articleHasImg">
<div class="leftInfo">
<div>
<span v-if="false"><span class="originalTitle" >原创</span><i> | </i></span>
<span class="articleTitle">国家互联网信息办公室发布《信息内容生态治理规定》</span>
<span v-if="item.contentSourceType==0"><span class="originalTitle" >原创</span><i> | </i></span>
<span class="articleTitle">{{item.contentTitle}}</span>
</div>
<p class="itemButton">
<span>9,999 阅读</span>
<span>3-22</span>
<span v-if="item.contentBrowseStr!=0">{{item.contentBrowseStr}} 阅读</span>
<span>{{item.publishDateStr}}</span>
</p>
</div>
<!--<div class="rightInfo" :style="{backgroundImage:'url('+item.subjectBackground+')'}">-->
<!--</div>-->
<div class="rightInfo" :style="{backgroundImage:'url('+require('../../../assets/img/index/bdefaultLogo.png')+')'}">
<div class="rightInfo" :style="{backgroundImage:'url('+item.contentUrlList[0]+')'}">
</div>
</div>
</div>
</li>
<li @click="handleToArticle()">
<div class="articleNoImg">
<div>
<span><span class="originalTitle" >原创</span><i> | </i></span>
<span class="articleTitle">国家互联网信息办公室发布《信息内容生态治理规定》</span>
</div>
<div class="mainIntro">
Gauzy通过太库平台成功对接中国固安恒成功对接中国固安恒鑫科技有成功对接中国固安恒成功对接中国固安恒中国固安恒成功对接中国固安恒…
</div>
<p class="itemButton">
<span>9,999 阅读</span>
<span>3-22</span>
</p>
</div>
</li>
</ul>
</div>
</div>
</mt-loadmore>
<div class="commentInput">
<div class="commentInput" v-if="articleInfo">
<div>
<p @click="handleScore()">
<i class="iconfont icon-weibiaoti--"></i><span>点评有礼</span>
......@@ -177,11 +158,10 @@
<div @click="handlePraise()">
<p v-if="!isHasPraise"><i class="iconfont icon-zan1"></i></p>
<p v-if="isHasPraise"><i class="iconfont icon-zan2"></i></p>
<p>赞</p>
<!--<p>{{Number(articleInfo.projectHotStr)==0?"赞":articleInfo.projectHotStr}}</p>-->
<p>{{articleInfo&&articleInfo.contentHotStr==0?"赞":articleInfo.contentHotStr}}</p>
</div>
<div @click="handlePraise()" class="collection">
<p v-if="!isHasCollection"><i class="iconfont icon-xingxing"></i></p>
<div @click="handleCollection()" class="collection">
<p v-if="!isHasCollection"><i class="iconfont icon-star"></i></p>
<p v-if="isHasCollection" :class="isHasCollection?'hasCollection':''"><i class="iconfont icon-xingxing"></i></p>
<p>收藏</p>
</div>
......@@ -259,7 +239,7 @@
commentsDeepId:"",
replyCreatedBy:"",
isHasPraise:false,//true点赞过 false没点赞过
isHasCollection:true,
isHasCollection:false,
isListFlag:0,
documentFront:"",
pathfrom:"",
......@@ -273,6 +253,7 @@
configVal:{},
isShowTop:false,
top:0,
recommendListData:[]
}
},
methods:{
......@@ -371,7 +352,9 @@
if(res.code==0){
this.articleInfo = res.result;
this.isHasPraise = res.result.isHasHot;
this.isHasCollection = res.result.isHasCollection;
// this.userIsScoreFunc();
this.articleInfo.isShowAllDisclaimer = res.result.baseContentSetting.settingStatementContent.length>46?true:false;
this.isShowAllDisclaimer = res.result.baseContentSetting.settingStatementContent.length>46?true:false;
// this.getDocumentFunc();
// if(flag){
......@@ -479,12 +462,10 @@
this.replyCreatedBy=data1.createdBy;
}
if(!data){
this.maiDianFunc(2);
// this.maiDianFunc(2);
}
let query = {
subId:this.$route.query.subId,
proId:this.$route.query.proId,
activityId:this.$route.query.activityId,
contentId:this.$route.query.id,
isList:this.$route.query.isList,
commentsId:data?data.id:undefined,
replyId:data1?data1.id:undefined,
......@@ -592,7 +573,7 @@
this.userInfo = this.publicFun.getCookie("userInfo") ? JSON.parse(this.Base64.decode(this.publicFun.getCookie("userInfo"))) : null;
if(this.userInfo){
this.isAddBrowse = false;
this.getSubjectDetail('isPraise');
this.getArticleDetail('isPraise');
if(this.isScoreStatus){
this.userIsScoreFunc(true);
}
......@@ -627,7 +608,7 @@
this.isListFlag = 1;
}
this.isAddBrowse = false;
this.getSubjectDetail();
this.getArticleDetail();
},
//分享
......@@ -667,9 +648,7 @@
handlePraise(data){
let params = {
addOrSubtractHot:data?!data.isHasHot:!this.isHasPraise,
projectId:this.$route.query.proId,
subjectId:this.$route.query.activityId,
subjectProjectId:this.$route.query.subId,
contentId:this.$route.query.id,
commentsId:data?data.id:undefined
};
api.praiseAxios(params).then((res)=>{
......@@ -679,9 +658,9 @@
this.$set(data,"likeNumberStr",Number(res.result)==0?'赞':res.result)
// this.getCommentListFunc();
}else{
this.$set(this.articleInfo,"projectHotStr",Number(res.result)==0?'赞':res.result)
this.$set(this.articleInfo,"contentHotStr",Number(res.result)==0?'赞':res.result)
this.isAddBrowse = false;
this.getSubjectDetail('isPraise');
this.getArticleDetail('isPraise');
}
// this.$toast("点赞成功");
}else{
......@@ -692,6 +671,28 @@
})
},
handleCollection(){
let params = {
addOrSubtractCollection:!this.isHasCollection,
contentId:this.$route.query.id,
};
if(this.userInfo){
api.collectionAxios(params).then((res)=>{
if(res.code==0){
this.isAddBrowse = false;
this.getArticleDetail('isCollection');
// this.$toast("点赞成功");
}else{
this.$toast(res.msg);
}
}).catch((err)=>{
this.$toast(err);
})
}else{
this.isLogin = true;
}
},
//查看回复更多
handleToCommentMore(data){
......@@ -841,18 +842,64 @@
}
},
handleToArticle(){
handleToArticle(data){
this.$router.push({path:"/articleDetail",query:{id:data.contentId}})
this.scrollToTopPage();
},
getRecommendListDetail(){
let params = {
pagination:{
numberOfPages:1,
number:5
},
search:{
contentId:this.$route.query.id
}
};
api.getArticleDetailRecommendById(params).then((res)=>{
if(res.code==0){
if(res.result.records.length>0){
res.result.records.forEach((item)=>{
if(item.contentCoverUrl){
item.contentUrlList = [item.contentCoverUrl]
} else {
if(item.contentUrl){
if(item.contentUrl.indexOf(',')>-1) {
item.contentUrlList = item.contentUrl.split(",").length>3?item.contentUrl.split(",").slice(0,3):item.contentUrl.split(",");
}
else item.contentUrlList = [item.contentUrl];
}
else item.contentUrlList = [];
}
})
}
this.recommendListData = res.result.records;
}else{
this.$toast(res.msg);
}
}).catch((err)=>{
this.$toast(err);
})
}
},
mounted(){
this.getArticleDetail()
this.getArticleDetail();
this.getRecommendListDetail();
// this.setCookieFunc();
// globalMsg.$on("scrollToTop",()=>{
// this.checkWxScroll();
// })
},
watch:{
//监听相同路由下参数变化的时候，从而实现异步刷新
'$route'(to,from){
this.getArticleDetail();
this.getRecommendListDetail();
},
}
// beforeDestroy () {
// globalMsg.$off('scrollToTop')
// },
......@@ -1038,7 +1085,6 @@
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .5rem;
span{
display: inline-flex;
align-items: center;
......@@ -1076,6 +1122,7 @@
text-align: justify;
}
.original{
margin-top: .5rem;
font-size: .28rem;
color: #BBBBBB;
margin-bottom: .05rem;
......
src/views/mobile/article/list.vue
View file @ ccb40b64
......@@ -193,7 +193,9 @@
if(response.result.records.length>0){
response.result.records.forEach((item)=>{
if(item.contentUrl){
if(item.contentUrl.indexOf(',')>-1) item.contentUrlList = item.contentUrl.split(",").length>3?item.contentUrl.split(",").slice(0,3):item.contentUrl.split(",");
if(item.contentUrl.indexOf(',')>-1) {
item.contentUrlList = item.contentUrl.split(",").length>3?item.contentUrl.split(",").slice(0,3):item.contentUrl.split(",");
}
else item.contentUrlList = [item.contentUrl];
}
else item.contentUrlList = [];
......
src/views/mobile/index/index.vue
View file @ ccb40b64
......@@ -333,6 +333,7 @@
this.$router.push({path:"/tabconnect",query:{tabIndex:1}});
}
else if(data==3){
this.publicFun.setUserInfoCookie("ismobile",1)
this.$router.push({path:"/articleList"});
}
else {
......
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