Skip to content

T
tl_estate
Commit e67e8c6a authored by xishifeng's avatar xishifeng
Browse files
Options

商学院文章详情暂存

parent 0dde21e6
Show whitespace changes
Inline Side-by-side
Showing with 303 additions and 119 deletions
public/appnew/src/components/businessCollege/articleCommentLi.vue
View file @ e67e8c6a
<template> <template>
<li @click="goPage"> <li>
<div class="flex"> <div class="flex">
<div class="flex"> <div class="flex">
<p>{{data.content}}</p>
<p>{{data.time}}</p>
</div>
<div class="flex-center">
<img-error :datasrc="data.img" :imgtype="'avatar'"></img-error> <img-error :datasrc="data.img" :imgtype="'avatar'"></img-error>
</div> </div>
<div>
<p>{{data.name}}</p>
<p>{{data.create_time}}</p>
<div>
<p>{{showContent}}</p>
<a class="comment-a-lookmore oh" href="javascript:;" @click="lookMore" v-show="!isLookMore"><span class="fl">查看更多</span></a>
<a class="comment-a-shouqi oh" href="javascript:;" @click="shouqi" v-show="isLookMore"><span>收起</span></a>
</div>
</div>
</div> </div>
</li> </li>
</template> </template>
...@@ -32,25 +37,31 @@ ...@@ -32,25 +37,31 @@
}, },
data: () => ({ data: () => ({
dealContent: '',
showContent: '',
isLookMore: false,
limitNumberNum: 40
}), }),
created() { created() {
let _this = this; let _this = this;
let _str = _this.data.comment_content;
let _len = _str.length;
let _lim = _this.limitNumberNum;
_this.showContent = _this.dealContent = _len>_lim ? _str.slice(0,_lim)+'...' : _str;
}, },
mounted() { mounted() {
let _this = this; let _this = this;
}, },
methods: { methods: {
goPage() { lookMore() {
let _this = this; let _this = this;
_this.$router.push({ _this.isLookMore = true;
path: '/articleDetail', _this.showContent = _this.data.comment_content;
query: { },
'id': '123' shouqi() {
} let _this = this;
}); _this.isLookMore = false;
_this.showContent = _this.dealContent;
} }
}, },
computed: { computed: {
...@@ -60,34 +71,62 @@ ...@@ -60,34 +71,62 @@
</script> </script>
<style scoped> <style scoped>
li{
padding: 0 .3rem;
background-color: white;
}
li>div{ li>div{
height: 2.2rem; padding: .3rem 0;
border-bottom: 1px solid #eee;
} }
li>div>div:nth-of-type(1){ li>div>div:nth-of-type(1){
flex-direction: column; padding-right: .24rem;
justify-content: center; }
padding-right: .5rem; li>div>div:nth-of-type(1)>img{
width: .75rem;
height: .75rem;
} }
li>div>div:nth-of-type(1)>p:nth-of-type(1){ li>div>div:nth-of-type(2){}
color: #343434; li>div>div:nth-of-type(2)>p:nth-of-type(1){
color: #808080;
font-size: .3rem; font-size: .3rem;
} }
li>div>div:nth-of-type(1)>p:nth-of-type(2){ li>div>div:nth-of-type(2)>p:nth-of-type(2){
color: #999; color: #808080;
font-size: .24rem; font-size: .24rem;
padding-top: .2rem; padding-top: .1rem;
} }
li>div>div:nth-of-type(2){ li>div>div:nth-of-type(2)>div{
padding: .2rem 0 .2rem;
color: #1a1a1a;
position: relative;
}
.comment-a-lookmore,.comment-a-shouqi{
display: block;
line-height: .4rem;
color: #FF9419;
font-size: .26rem;
position: relative;
} }
li>div>div:nth-of-type(2)>img{ .comment-a-lookmore{
width: 2.2rem; width: 1.4rem;
height: 1.6rem; position: absolute;
object-fit: cover; right: 0;
bottom: .2rem;
} }
.comment-a-shouqi{
text-align: right;
}
.comment-a-lookmore::after{
content: '';
float: right;
width: .18rem;
height: .4rem;
padding-left: .18rem;
background: url(images/icon_down@2x.png) no-repeat center center/.18rem .13rem;
transform: rotate(180deg);
}
.comment-a-shouqi::after{
content: '';
width: .18rem;
height: .4rem;
padding-left: .36rem;
background: url(images/icon_down@2x.png) no-repeat center center/.18rem .13rem;
}
</style> </style>
\ No newline at end of file
public/appnew/src/components/businessCollege/articleDetail.vue
View file @ e67e8c6a
...@@ -2,47 +2,26 @@ ...@@ -2,47 +2,26 @@
<div> <div>
<header-pulic :data="headerData"></header-pulic> <header-pulic :data="headerData"></header-pulic>
<article> <article>
<p>示例文字示例文字示例文字</p> <div class="article-bar">
<p>示例文字示例文字示例文字</p> <h1>{{articleTitle}}</h1>
<p>示例文字示例文字示例文字</p> <p>{{articleTime}}</p>
<p>示例文字示例文字示例文字</p> </div>
<p>示例文字示例文字示例文字</p> <div v-html="articleContent">{{articleContent}}</div>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
<p>示例文字示例文字示例文字</p>
</article> </article>
<div class="list-commnet-area"> <div class="list-commnet-area">
<h2>最新评论</h2> <h2>最新评论</h2>
<pagination-load :canload="!isStop" :distance="10" @load="getCommentList">
<ul> <ul>
<!--<li is="self-defined-li" v-for="(item2, index2) in item.dataList" :data="item2" :dataindex="index2"></li>--> <li is="self-defined-li" v-for="(item, index) in commentDataList" :data="item" :dataindex="index"></li>
</ul> </ul>
</pagination-load>
<div class="loading-gif-block" v-show="isLoading">正在加载...</div>
<div class="no-data-block" v-if="noDataFlag">暂无数据</div>
<div class="no-more-block" v-if="!noDataFlag&&isStop">没有更多了...</div>
</div> </div>
<div class="comment-area-seat"></div>
<div class="txt-comment-area" v-show="isCommentingFlag"> <div class="txt-comment-area" v-show="isCommentingFlag">
<div> <div>
<div class="flex-center"> <div class="flex-center">
...@@ -83,23 +62,67 @@ ...@@ -83,23 +62,67 @@
'pagination-load': paginationLoad, 'pagination-load': paginationLoad,
'self-defined-li': selfDefinedLi 'self-defined-li': selfDefinedLi
}, },
data: () => ({ data() {
let _this = this;
return {
headerData: { headerData: {
'title': '文章详情', 'title': '文章详情',
'noborder': false, 'noborder': false,
'isBack': true 'isBack': true
}, },
articleId: _this.$route.query.id,
token: localStorage.getItem('token'),
articleTitle: '',
articleTime: '',
articleContent: '',
commentIcon, commentIcon,
isCommentingFlag: false, isCommentingFlag: false,
commentContent: '' commentContent: '',
}), isStop: false,
isLoading: false,
noDataFlag: false,
pageSize: 10,
page: 1,
commentDataList: []
};
},
created() { created() {
let _this = this; let _this = this;
_this.common.duringRequest({
'urlStr': '/broker/getComment',
startAction() {
_this.isLoading = true;
}, },
mounted() { endAction() {
let _this = this; _this.isLoading = false;
}
});
_this.axios({
method: 'get',
url: '/broker/getNewsInfo',
responseType: 'json',
data: {
'id': _this.articleId,
'AuthToken': _this.token
}
})
.then(function(response) {
if(response.data.code == 200) {
let _news = response.data.data.news;
_this.articleTitle = _news.title;
_this.articleTime = _news.create_time;
_this.articleContent = _news.content;
} else {
layer.tipsX(response.data.msg);
}
})
.catch(function(error) {
layer.tipsX(error);
});
//获取评论列表
_this.getCommentList();
}, },
methods: { methods: {
commentSend() { commentSend() {
...@@ -110,6 +133,40 @@ ...@@ -110,6 +133,40 @@
}else{ }else{
_this.isCommentingFlag = false; _this.isCommentingFlag = false;
} }
},
getCommentList() {
let _this = this;
_this.axios({
method: 'get',
url: '/broker/getComment',
responseType: 'json',
data: {
'pageNo': _this.page,
'pageSize': _this.pageSize,
'news_id': _this.articleId,
'AuthToken': _this.token
}
})
.then(function(response) {
if(response.data.code == 200) {
let _list = response.data.data;
if(Array.isArray(_list)){
if(_list.length === 0) {
_this.page === 1 && (_this.noDataFlag = true);
_this.isStop = true;
} else {
_this.commentDataList.push(..._list); //这里使用push要注意，先把数组展开
_list.length < _this.pageSize && (_this.isStop = true);
_this.page++;
};
};
} else {
layer.tipsX(response.data.msg);
}
})
.catch(function(error) {
layer.tipsX(error);
});
} }
}, },
computed: { computed: {
...@@ -119,6 +176,36 @@ ...@@ -119,6 +176,36 @@
</script> </script>
<style scoped> <style scoped>
article,.list-commnet-area{
background-color: white;
padding: .3rem;
}
article{
}
.article-bar>h1{
font-size: .4rem;
color: #1a1a1a;
}
.article-bar>p{
font-size: .3rem;
color: #999;
}
.article-bar+div{
padding-top: .3rem;
}
.list-commnet-area{
margin-top: .2rem;
}
.list-commnet-area>h2{
font-size: .32rem;
color: #1a1a1a;
}
.comment-area-seat{
height: .98rem;
}
.btn-comment-area{ .btn-comment-area{
position: fixed; position: fixed;
bottom: 0; bottom: 0;
......
public/appnew/src/components/businessCollege/articleList.vue
View file @ e67e8c6a
...@@ -3,24 +3,25 @@ ...@@ -3,24 +3,25 @@
<header-pulic :data="headerData"></header-pulic> <header-pulic :data="headerData"></header-pulic>
<nav> <nav>
<div class="nav-main"> <div class="nav-main">
<ul :style="'width: '+ulWid+'rem'"> <ul class="oh" :style="'width: '+ulWid+'rem'">
<li v-for="(item, index) in mainData" :key="item.labelName" :data-id="item.id" :class="{active:index === initTabNumMain}" @click="tabMain(index)">{{item.labelName}}</li> <li v-for="(item, index) in mainData" :key="item.labelName" :data-id="item.id" class="pointer-click-item" :class="{active:index === initTabNumMain}" @click="tabMain(index)">{{item.labelName}}</li>
</ul> </ul>
<div class="nav-bg-right"></div>
</div> </div>
<div class="nav-seat"></div> <div class="nav-seat"></div>
</nav> </nav>
<main> <main>
<section v-for="(item, index) in mainData"> <section v-for="(item, index) in mainData" v-show="index === initTabNumMain">
<pagination-load :canload="!isStop" :distance="10" @load="getLoad"> <pagination-load :canload="!item.isStop" :distance="30" @load="getList">
<ul> <ul>
<li is="self-defined-li" v-for="(item2, index2) in item.dataList" :data="item2" :dataindex="index2"></li> <li is="self-defined-li" v-for="(item2, index2) in item.dataList" :data="item2" :dataindex="index2"></li>
</ul> </ul>
</pagination-load> </pagination-load>
<div class="no-data-block" v-if="noDataFlag">暂无数据</div> <div class="no-data-block" v-show="item.noDataFlag">暂无数据</div>
<div class="no-more-block" v-if="!noDataFlag&&isStop">没有更多了...</div> <div class="no-more-block" v-show="!item.noDataFlag&&item.isStop">没有更多了...</div>
<div class="loading-gif-block" v-show="isLoading">正在加载...</div>
</section> </section>
</main> </main>
<div class="loading-gif-block" v-show="isLoading">正在加载...</div>
</div> </div>
</template> </template>
...@@ -46,31 +47,67 @@ ...@@ -46,31 +47,67 @@
'pagination-load': paginationLoad, 'pagination-load': paginationLoad,
'self-defined-li': selfDefinedLi 'self-defined-li': selfDefinedLi
}, },
data: () => ({ data() {
let _this = this;
let _token = _this.$route.query.token;
if(!_token) {
layer.tipsX('token获取出错');
return false;
};
return {
headerData: { headerData: {
'title': '商学院', 'title': '商学院',
'noborder': true, 'noborder': true,
'isBack': false 'isBack': false
}, },
token: _token,
ulWid: 6.9, ulWid: 6.9,
pageSize: 10,
initTabNumMain: 0, initTabNumMain: 0,
isStop: false, isLoading: false,//是否正在加载
isLoading: false, mainData: [{
noDataFlag: false, 'dataList': [],
mainData: [] 'id': 0,
}), 'page': 1,//页码
'isLoadOnce': false,//是否请求过一次数据
'isStop': false,//是否所有页的数据加载完毕
'noDataFlag': false,//是否是无数据
'labelName': '全部'
}]
}
},
created() { created() {
let _this = this; let _this = this;
_this.getLabel(()=>{
console.log(99); _this.common.duringRequest({
_this.getPageList(); 'urlStr': '/broker/business_school',
}) startAction() {
_this.isLoading = true;
}, },
mounted() { endAction() {
let _this = this; _this.isLoading = false;
}
});
_this.common.h5PageC(_this.token, () => {
_this.loadMain();
});
}, },
methods: { methods: {
loadMain() {
let _this = this;
_this.token = localStorage.getItem('token');
_this.getLabel(()=>{
_this.getList();
});
},
tabMain(index) {
let _this = this;
_this.initTabNumMain = index;
if(!_this.mainData[index].isLoadOnce) {
_this.getList();
};
},
getLabel(fn) { getLabel(fn) {
let _this = this; let _this = this;
_this.axios({ _this.axios({
...@@ -78,7 +115,7 @@ ...@@ -78,7 +115,7 @@
url: '/broker/getNewsLabel', url: '/broker/getNewsLabel',
responseType: 'json', responseType: 'json',
data: { data: {
'AuthToken': _this.$route.query.token, 'AuthToken': _this.token,
} }
}) })
.then(function(response) { .then(function(response) {
...@@ -87,12 +124,17 @@ ...@@ -87,12 +124,17 @@
let _len = _data.length; let _len = _data.length;
for(let i = 0;i<_len;i++){ for(let i = 0;i<_len;i++){
_this.mainData.push({ _this.mainData.push({
'isLoadOnce': false,
'dataList': [], 'dataList': [],
'id': _data[i].id, 'id': _data[i].id,
'page': 1,//页码
'isLoadOnce': false,//是否请求过一次数据
'isStop': false,//是否所有页的数据加载完毕
'noDataFlag': false,//是否是无数据
'labelName': _data[i].label_name 'labelName': _data[i].label_name
}); });
}; };
_this.ulWid = (_len*1.6>_this.ulWid)?(_len*1.6):_this.ulWid; _this.ulWid = ((_len+1)*1.6>_this.ulWid)?((_len+1)*1.6):_this.ulWid;
fn && fn(); fn && fn();
} else { } else {
layer.tipsX(response.data.msg); layer.tipsX(response.data.msg);
...@@ -102,23 +144,35 @@ ...@@ -102,23 +144,35 @@
layer.tipsX(error); layer.tipsX(error);
}); });
}, },
getPageList() { getList() {
let _this = this; let _this = this;
let _index = _this.initTabNumMain;
if(!_this.isLoading && !_this.mainData[_index].isStop) {
_this.axios({ _this.axios({
method: 'get', method: 'get',
//url: '/broker/business_school', url: '/broker/business_school',
url: 'http://c.tonglianjituan.com/broker/business_school',
responseType: 'json', responseType: 'json',
data: { data: {
'AuthToken': _this.$route.query.token, 'AuthToken': _this.token,
'pageNo': 1, 'pageNo': _this.mainData[_index].page,
'pageSize': 1000 'pageSize': _this.pageSize,
'label_id': _index
} }
}) })
.then(function(response) { .then(function(response) {
_this.mainData[_index].isLoadOnce = true;
if(response.data.code == 200) { if(response.data.code == 200) {
let _data = response.data.data; let _list = response.data.data.list;
if(Array.isArray(_list)){
if(_list.length === 0) {
_this.mainData[_index].page === 1 && (_this.mainData[_index].noDataFlag = true);
_this.mainData[_index].isStop = true;
} else {
_this.mainData[_index].dataList.push(..._list); //这里使用push要注意，先把数组展开
_list.length < _this.pageSize && (_this.mainData[_index].isStop = true);
_this.mainData[_index].page += 1;
};
};
} else { } else {
layer.tipsX(response.data.msg); layer.tipsX(response.data.msg);
} }
...@@ -126,12 +180,7 @@ ...@@ -126,12 +180,7 @@
.catch(function(error) { .catch(function(error) {
layer.tipsX(error); layer.tipsX(error);
}); });
}, };
tabMain() {
},
getLoad() {
} }
}, },
computed: { computed: {
...@@ -145,9 +194,8 @@ ...@@ -145,9 +194,8 @@
width: 7.5rem; width: 7.5rem;
} }
nav>.nav-main { nav>.nav-main {
box-sizing: border-box;
background-color: white; background-color: white;
width: 7.5rem; width: 6.9rem;
height: .9rem; height: .9rem;
line-height: .9rem; line-height: .9rem;
padding: 0 .3rem; padding: 0 .3rem;
...@@ -160,6 +208,14 @@ ...@@ -160,6 +208,14 @@
nav>.nav-main>ul{ nav>.nav-main>ul{
/*width: 10rem;*/ /*width: 10rem;*/
} }
nav>.nav-main>.nav-bg-right{
position: fixed;
right: 0;
top: .88rem;
width: .8rem;
height: .9rem;
background: url(images/img_more@2x.png) repeat-y center center/.8rem .27rem;
}
nav>.nav-seat { nav>.nav-seat {
height: .9rem; height: .9rem;
} }
......
public/appnew/src/components/businessCollege/articleListLi.vue
View file @ e67e8c6a
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<li @click="goPage"> <li @click="goPage">
<div class="flex"> <div class="flex">
<div class="flex"> <div class="flex">
<p>{{data.content}}</p> <p>{{data.title}}</p>
<p>{{data.time}}</p> <p>{{data.create_time}}</p>
</div> </div>
<div class="flex-center"> <div class="flex-center">
<img-error :datasrc="data.img" :imgtype="'avatar'"></img-error> <img-error :datasrc="data.cover_plan" :imgtype="'div'"></img-error>
</div> </div>
</div> </div>
</li> </li>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
_this.$router.push({ _this.$router.push({
path: '/articleDetail', path: '/articleDetail',
query: { query: {
'id': '123' 'id': _this.data.id
} }
}); });
} }
...@@ -72,6 +72,7 @@ ...@@ -72,6 +72,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding-right: .5rem; padding-right: .5rem;
flex: 1;
} }
li>div>div:nth-of-type(1)>p:nth-of-type(1){ li>div>div:nth-of-type(1)>p:nth-of-type(1){
color: #343434; color: #343434;
...@@ -83,7 +84,7 @@ ...@@ -83,7 +84,7 @@
padding-top: .2rem; padding-top: .2rem;
} }
li>div>div:nth-of-type(2){ li>div>div:nth-of-type(2){
flex: 2.2rem 0 0;
} }
li>div>div:nth-of-type(2)>img{ li>div>div:nth-of-type(2)>img{
width: 2.2rem; width: 2.2rem;
......
public/appnew/src/components/publicEg/errorImg.vue
View file @ e67e8c6a
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
}, },
imgtype: { imgtype: {
type: String, type: String,
default: () => 'avatar' default: () => 'div'
} }
}, },
data() { data() {
......
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