Skip to content

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

商学院文章详情暂存

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