283 lines
5.6 KiB
Vue
283 lines
5.6 KiB
Vue
<template>
|
||
<view class="container" >
|
||
<view class="banner-box">
|
||
<image v-if="infoType==0" src="/static/imgs/jkzszxbanner.png" mode=""></image>
|
||
<image v-if="infoType==1" src="/static/imgs/hqfbbanner.jpg" mode=""></image>
|
||
</view>
|
||
<view class="main">
|
||
<view class="tab-box">
|
||
<view v-if="infoType==0" class="tab-item" style="width: 100%;" >健康知识资讯</view>
|
||
<view v-if="infoType==1" class="tab-item" style="width: 100%;" >后勤发布</view>
|
||
</view>
|
||
<view v-if="msgList.length > 0">
|
||
<view class="list-view">
|
||
<view v-for="(item, index) in msgList" :key="index"
|
||
class="list-cell list-item"
|
||
@tap="detail(item.id,item.type,item.forward_url,item.info_type)"
|
||
>
|
||
<view class="cell-title-box" >
|
||
<view class="cell-title" :class="[item.img == 0 ? 'pdr0' : '']">{{ item.title }}</view>
|
||
</view>
|
||
<view class="sub-title">
|
||
<text class="tag" >{{formatDate(item.create_time)}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<content-none v-else :padTop="35"></content-none>
|
||
</view>
|
||
<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {getHealthMsgList} from '@/common/api.js';
|
||
import {callbackRequest,formatDate} from '@/common/util.js';
|
||
import loadMore from '@/components/loadMore.vue';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
formatDate: formatDate,
|
||
loading:false,
|
||
page:1,
|
||
pageSize:10,
|
||
loadingType:0,//0-loading前；1-loading中；2-没有更多了
|
||
contentText: {
|
||
contentdown: "上拉加载更多",
|
||
contentrefresh: "正在加载...",
|
||
contentnomore: "没有更多数据了"
|
||
},
|
||
msgList:[],
|
||
infoType:"0"
|
||
};
|
||
},
|
||
components:{
|
||
loadMore,
|
||
contentNone
|
||
},
|
||
onLoad(option) {
|
||
this.infoType = option.infoType||"0"
|
||
this.getHealthMsgList();
|
||
},
|
||
methods:{
|
||
getHealthMsgList(){
|
||
let data = {
|
||
method: getHealthMsgList,
|
||
data: {
|
||
pageSize:this.pageSize,
|
||
pageNum:this.page,
|
||
infoType:this.infoType+""
|
||
//cate:this.tabbar[this.currentTab].data_code
|
||
}
|
||
};
|
||
callbackRequest(data).then(res => {
|
||
res = res.data;
|
||
if (res.returnCode == 1) {
|
||
if (this.page == 1) {
|
||
this.msgList = res.returnData ;
|
||
} else {
|
||
if (res.returnData.length > 0) {
|
||
this.msgList = this.msgList.concat(res.returnData);
|
||
this.loadingType = 0;
|
||
} else {
|
||
this.loadingType = 2;
|
||
}
|
||
}
|
||
} else {
|
||
alertTip(res.returnMsg);
|
||
}
|
||
});
|
||
},
|
||
detail(e,a,b,h) {
|
||
if(h==1){
|
||
uni.navigateTo({
|
||
url: '/pages/hqfb/hqfbDetail?id='+e
|
||
});
|
||
return;
|
||
}
|
||
if(a==1){
|
||
window.location.href = b;
|
||
// uni.navigateTo({
|
||
// url: b
|
||
// });
|
||
}else{
|
||
uni.navigateTo({
|
||
url: '/pages/hqfb/hqfbDetail?id='+e
|
||
});
|
||
}
|
||
},
|
||
},
|
||
onReachBottom() {
|
||
if(this.loadingType !== 0){
|
||
return false;
|
||
}
|
||
this.loadingType = 1;
|
||
this.page = this.page + 1;
|
||
this.getHealthMsgList();
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/static/css/common.scss';
|
||
.container{
|
||
background: #f8f8f8;
|
||
min-height:100vh;
|
||
overflow: hidden;
|
||
.banner-box {
|
||
width: 100%;
|
||
height: 240upx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
border-radius: 30upx;
|
||
}
|
||
.main {
|
||
margin: 172upx 40upx 0;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
.tab-box {
|
||
overflow: hidden;
|
||
border-radius: 10upx 10upx 0 0;
|
||
background: rgba(132, 149, 167, 0.8);
|
||
height: 70upx;
|
||
.tab-item {
|
||
float: left;
|
||
height: 70upx;
|
||
width: 50%;
|
||
font-size: 30upx;
|
||
color: #e5f6ff;
|
||
text-align: center;
|
||
line-height: 70upx;
|
||
}
|
||
.active {
|
||
background: #fff;
|
||
color: #333;
|
||
border-radius: 10upx 10upx 0 0;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
.list-view {
|
||
width: 100%;
|
||
background: #f8f8f8;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* .list-cell {
|
||
padding: 30upx;
|
||
box-sizing: border-box;
|
||
} */
|
||
.list-cell {
|
||
padding: 20upx 20upx;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
margin-bottom: 10upx;
|
||
}
|
||
/* .cell-title-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
} */
|
||
.cell-title-box {
|
||
position: relative;
|
||
}
|
||
|
||
.min {
|
||
min-height: 90upx;
|
||
}
|
||
/* .cell-title {
|
||
font-size: 36upx;
|
||
line-height: 56upx;
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
} */
|
||
.cell-title {
|
||
font-size: 28upx;
|
||
/* line-height: 56upx; */
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 3;
|
||
}
|
||
.img-container {
|
||
width: 100%;
|
||
padding-top: 24upx;
|
||
display: flex;
|
||
height: 160upx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.cell-img {
|
||
width: 32%;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
/* .img {
|
||
width: 100%;
|
||
height: 160upx;
|
||
display: block;
|
||
border-radius: 4upx;
|
||
} */
|
||
|
||
.img{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 6upx;
|
||
width: 146upx;
|
||
height: 146upx;
|
||
border-radius: 4upx;
|
||
}
|
||
|
||
.sub-title {
|
||
padding-top: 10upx;
|
||
font-size: 28upx;
|
||
color: #bcbcbc;
|
||
}
|
||
.badge {
|
||
padding: 5upx 10upx;
|
||
font-size: 24upx;
|
||
border-radius: 4upx;
|
||
margin-right: 20upx;
|
||
}
|
||
|
||
.b-red {
|
||
background: #FCEBEF;
|
||
color: #8A5966;
|
||
}
|
||
|
||
.b-blue {
|
||
background: #ECF6FD;
|
||
color: #4DABEB;
|
||
}
|
||
|
||
.b-orange {
|
||
background: #FEF5EB;
|
||
color: #FAA851
|
||
}
|
||
|
||
.b-green {
|
||
background: #E8F6E8;
|
||
color: #44CF85
|
||
}
|
||
.tag {
|
||
padding: 5upx 10upx;
|
||
font-size: 24upx;
|
||
border-radius: 4upx;
|
||
margin-right: 20upx;
|
||
}
|
||
</style>
|