You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
286 lines
6.7 KiB
286 lines
6.7 KiB
4 days ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="search-wrap">
|
||
|
|
<image class="bg" src="@/static/image/info.png"></image>
|
||
|
|
<view class="info">
|
||
|
|
<uni-search-bar class="search" radius="30" placeholder="请输入文章名称，标签" v-model="keyword" clearButton="auto" cancelButton="none" bgColor="#fff" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="type">
|
||
|
|
<view v-for="(item, i) in classifications.slice(0, 4)" :key="i" :class="['item', {active: active == item.id}]" @click="classificationClick(item, 1)">{{ item.classificationName }}</view>
|
||
|
|
<uni-icons class="icon" custom-prefix="iconfont" type="icon-filter" size="22" color="#007eff" @click="typeVisible = true"></uni-icons>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<template v-if="list.length">
|
||
|
|
<view class="list">
|
||
|
|
<view v-for="(item, i) in list" :key="i" class="item" @click="toDetail(item)">
|
||
|
|
<view class="title ell">{{ item.title }}</view>
|
||
|
|
<view class="texts">
|
||
|
|
<view class="left">
|
||
|
|
<view class="des">{{ item.mainBody }}</view>
|
||
|
|
<view class="metas">
|
||
|
|
<text class="date">{{ item.releaseTime }}</text>
|
||
|
|
<view v-if="item.labelName" class="labels">
|
||
|
|
<view v-for="(label, j) in item.labelName" :key="j" class="label">{{ label }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<image class="pic" :src="item.bannerImg"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<uni-load-more :status="status" />
|
||
|
|
</template>
|
||
|
|
<empty v-else></empty>
|
||
|
|
|
||
|
|
<view :class="['type-popup', {active: typeVisible}]">
|
||
|
|
<uni-icons class="close" type="closeempty" size="20" color="#757575" @click="closeType"></uni-icons>
|
||
|
|
<view class="title">所属分类</view>
|
||
|
|
<view class="types">
|
||
|
|
<view v-for="(item, i) in classifications" :key="i" :class="['item', {active: active == item.id}]" @click="classificationClick(item)">{{ item.classificationName }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { partnerOperatingList, queryClassificationByType } from '@/apis/modules/article.js'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
classifications: [],
|
||
|
|
active: '',
|
||
|
|
typeVisible: false,
|
||
|
|
reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
|
||
|
|
status: 'more', // 上拉加载状态 more|loading|noMore
|
||
|
|
searchTimer: null,
|
||
|
|
articleNameSort: '',
|
||
|
|
keyword: '',
|
||
|
|
list: [],
|
||
|
|
page: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
keyword () {
|
||
|
|
this.active = ''
|
||
|
|
clearTimeout(this.searchTimer)
|
||
|
|
this.searchTimer = setTimeout(() => {
|
||
|
|
this.initList()
|
||
|
|
}, 500)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 下拉刷新
|
||
|
|
onPullDownRefresh() {
|
||
|
|
this.initList()
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.stopPullDownRefresh()
|
||
|
|
}, 1500)
|
||
|
|
},
|
||
|
|
// 上拉加载
|
||
|
|
onReachBottom() {
|
||
|
|
if (this.reachBottom >= 0) {
|
||
|
|
this.reachBottom = 1
|
||
|
|
this.status = 'loading'
|
||
|
|
this.getList()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.keyword = ''
|
||
|
|
this.active = ''
|
||
|
|
this.typeVisible = false
|
||
|
|
this.initRole()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 初始化权限
|
||
|
|
initRole() {
|
||
|
|
if (!uni.getStorageSync('auth').includes('资讯')) {
|
||
|
|
this.per = false
|
||
|
|
}
|
||
|
|
this.initList()
|
||
|
|
this.getClassification()
|
||
|
|
},
|
||
|
|
getList() {
|
||
|
|
const data = {
|
||
|
|
keyWord: this.keyword,
|
||
|
|
pageNum: this.page,
|
||
|
|
pageSize: this.pageSize,
|
||
|
|
querySource: 4,
|
||
|
|
typeId: 2,
|
||
|
|
articleNameSort: this.articleNameSort,
|
||
|
|
classificationId: this.active
|
||
|
|
}
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中'
|
||
|
|
})
|
||
|
|
partnerOperatingList(data).then(({ page, total }) => {
|
||
|
|
uni.hideLoading()
|
||
|
|
// 未加载完所有数据，并且不是筛选，则拼接list，否则直接赋值
|
||
|
|
const list = page
|
||
|
|
list.forEach(e => {
|
||
|
|
if (e.labelName) e.labelName = e.labelName.split(',').slice(0, 2) // 只展示前两个标签
|
||
|
|
e.mainBody = (e.summary || e.mainBody).replace(/(<[^>]+>)|(( )+)/g , '')
|
||
|
|
})
|
||
|
|
this.list = this.reachBottom > 0 ? [...this.list, ...list] : list
|
||
|
|
this.page++ // 每次获取了数据后page+1
|
||
|
|
const noMore = this.list.length === total // 是否加载完所有数据
|
||
|
|
this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
|
||
|
|
this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1
|
||
|
|
}).catch(e => {
|
||
|
|
uni.hideLoading()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
initList() {
|
||
|
|
this.page = 1
|
||
|
|
this.reachBottom = 0
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
// 获取所属分类
|
||
|
|
getClassification() {
|
||
|
|
queryClassificationByType(2).then(({ data }) => {
|
||
|
|
this.classifications = [
|
||
|
|
{
|
||
|
|
id: '',
|
||
|
|
classificationName: '不限'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
this.classifications.push(...data)
|
||
|
|
}).catch(e => {})
|
||
|
|
},
|
||
|
|
// 所属分类点击回调
|
||
|
|
classificationClick(item, query) {
|
||
|
|
this.active = item.id
|
||
|
|
query && this.initList()
|
||
|
|
},
|
||
|
|
// 关闭所属分类弹框
|
||
|
|
closeType() {
|
||
|
|
this.typeVisible = false
|
||
|
|
this.initList()
|
||
|
|
},
|
||
|
|
// 展开
|
||
|
|
toggle(item) {
|
||
|
|
item.toggle = !item.toggle
|
||
|
|
},
|
||
|
|
// 排序
|
||
|
|
switchSort() {
|
||
|
|
this.articleNameSort = this.articleNameSort === 'desc' ? 'asc' : 'desc'
|
||
|
|
this.initList()
|
||
|
|
},
|
||
|
|
// 跳转详情
|
||
|
|
toDetail(item) {
|
||
|
|
this.$util.to(`/team/article/article?info=1&id=` + item.id)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.search-wrap {
|
||
|
|
position: relative;
|
||
|
|
height: 300rpx;
|
||
|
|
padding: 120rpx 10px 0;
|
||
|
|
.bg {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.info {
|
||
|
|
position: relative;
|
||
|
|
margin-top: 160rpx;
|
||
|
|
}
|
||
|
|
.text {
|
||
|
|
margin: 0 10px 10rpx;
|
||
|
|
font-size: 50rpx;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.type {
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
padding: 30rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
.item {
|
||
|
|
padding: 0 15rpx;
|
||
|
|
line-height: 1.6;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333;
|
||
|
|
white-space: nowrap;
|
||
|
|
&.active {
|
||
|
|
color: #007FFF;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.icon {
|
||
|
|
position: absolute;
|
||
|
|
right: 40rpx;
|
||
|
|
width: 40rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list {
|
||
|
|
background-color: #fff;
|
||
|
|
.item {
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
padding: 20rpx 40rpx;
|
||
|
|
border-bottom: 1px solid #f1f1f1;
|
||
|
|
}
|
||
|
|
.texts {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.pic {
|
||
|
|
width: 260rpx;
|
||
|
|
height: 180rpx;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
.left {
|
||
|
|
width: calc(100% - 280rpx);
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.des {
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.metas {
|
||
|
|
margin-top: 10rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.date {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #ccc;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.labels {
|
||
|
|
display: inline-flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 15rpx;
|
||
|
|
}
|
||
|
|
.label {
|
||
|
|
width: 90rpx;
|
||
|
|
padding: 2px 6px;
|
||
|
|
margin: 0 10rpx 15rpx 0;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #fff;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: #ccc;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|