4 changed files with 232 additions and 4 deletions
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<div> |
|||
<div class="flex flex-mean" style="background-color: #FFFFFF;"> |
|||
<van-search class=".flex flex-1" v-model="searchValue" left-icon="" shape="round" placeholder="请输入搜索关键词" /> |
|||
<van-button round type="info" class="custom-button font-size13 m-top10 m-right12" @click="handleSearch">查询</van-button> |
|||
</div> |
|||
<div class='container'> |
|||
<van-tabs v-model="tagActive" style="width: 100%;" @change="handelChangeTags"> |
|||
<van-tab v-for="item in tagList" :key="item.id" :title="item.tagName"> |
|||
<div class="flex flex-y flex1 flex-end" v-if="PublicityList.length !== 0"> |
|||
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" |
|||
@load="communityPublicity" class="card" :offset="50"> |
|||
<div class="activity_content flex flex-y" v-for="(item, index) in PublicityList" |
|||
:key="index"> |
|||
<div class="flex flex1 oh"> |
|||
<div class="flex flex-y flex1 m-right10 oh"> |
|||
<span class="van-multi-ellipsis--l2 " style="line-height: 28px;"> |
|||
{{ item.title }} |
|||
</span> |
|||
<span class="van-ellipsis y66666 font-size15"> |
|||
{{ item.content }} |
|||
</span> |
|||
</div> |
|||
<img v-if="item.coverPic" :src="item.coverPic" style="width: 100px;height: 60px;" |
|||
alt=""> |
|||
</div> |
|||
<div class="flex flex-end flex-center gray m-top10 font-size13"> |
|||
<div class="flex flex-center"><img src="@/assets/images/icons/support.png" alt="" |
|||
class="img_16 m-right7"><span>{{ item.likes }}</span> |
|||
</div> |
|||
<div class="flex1 text-align-right">{{ item.releaseTime }}</div> |
|||
</div> |
|||
</div> |
|||
</van-list> |
|||
</div> |
|||
<div v-else class="no-data"> |
|||
暂无数据~ |
|||
</div> |
|||
</van-tab> |
|||
</van-tabs> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import { advertisingTag, communityPublicity } from '@/api/home'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
PublicityList: [], |
|||
tagList: [], |
|||
tagActive: 'new', |
|||
tagId: null, |
|||
pageSize: 5, |
|||
pageNo: 1, |
|||
agencyId: null, |
|||
finished: false, |
|||
loading: true, |
|||
showRegister: false, |
|||
searchValue: "" |
|||
}; |
|||
}, |
|||
created() { |
|||
this.agencyId = this.$store.state.app.agencyId; |
|||
this.advertisingTag();//获取社区讯息菜单 |
|||
this.communityPublicity()//获取讯息列表 |
|||
}, |
|||
methods: { |
|||
handleSearch(){ |
|||
this.PublicityList = []; |
|||
this.pageNo = 1; |
|||
this.communityPublicity() |
|||
}, |
|||
filterTagId(tagId) { |
|||
return this.tagList.filter(item => item.id === tagId)[0].tagName || '--'; |
|||
}, |
|||
async advertisingTag() { |
|||
let parm = { |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
status: 0, |
|||
tagName: null |
|||
} |
|||
let res = await advertisingTag(parm) |
|||
if (res) { |
|||
this.tagList = res.list; |
|||
this.tagList.unshift({ tagName: '最新', id: 'new' }) |
|||
} |
|||
}, |
|||
async communityPublicity() { |
|||
let parm = { |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
title: this.searchValue, |
|||
tagId: this.tagId, |
|||
startTime: '', |
|||
endTime: '', |
|||
agencyId: this.agencyId |
|||
} |
|||
let res = await communityPublicity(parm) |
|||
if (res) { |
|||
this.loading = false; |
|||
res.list.forEach(item => { |
|||
if (item.content) { |
|||
item.content = this.extractChineseCharactersAndPunctuation(item.content) |
|||
} |
|||
}) |
|||
if (res.list.length < this.pageSize) { |
|||
this.finished = true; |
|||
} |
|||
this.PublicityList = this.PublicityList.concat(res.list); |
|||
} |
|||
}, |
|||
extractChineseCharactersAndPunctuation(str) { |
|||
const chineseCharsAndPunctuation = str.match(/[\u4e00-\u9fa5\u3000-\u303F\uff00-\uffef]/g); |
|||
return chineseCharsAndPunctuation ? chineseCharsAndPunctuation.join('') : ''; |
|||
}, |
|||
handelChangeTags(val, title) { |
|||
if (val !== 0) { |
|||
this.tagId = this.tagList[val].id; |
|||
this.PublicityList = []; |
|||
} else { |
|||
this.tagId = ''; |
|||
} |
|||
this.communityPublicity() |
|||
}, |
|||
}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
.custom-button { |
|||
width: 60px; |
|||
height: 33px; |
|||
} |
|||
|
|||
.activity_content { |
|||
padding-bottom: 10px; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
border-bottom: 1px solid #EAEAEA; |
|||
margin-top: 14px; |
|||
min-height: 50px; |
|||
|
|||
.img { |
|||
width: 231px; |
|||
height: 33px; |
|||
margin: 5px 3px 0 3px; |
|||
} |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
|
|||
.content { |
|||
|
|||
width: 325px; |
|||
height: 40px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
line-height: 23px; |
|||
} |
|||
|
|||
.dianzan { |
|||
width: 325px; |
|||
height: 20px; |
|||
display: flex; |
|||
font-size: 13px; |
|||
color: #AAAAAA; |
|||
flex-direction: row; |
|||
justify-content: space-evenly; |
|||
align-items: center; |
|||
|
|||
.img { |
|||
width: 14.5px; |
|||
height: 15px; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.header {} |
|||
|
|||
.header .input_search { |
|||
width: 279px; |
|||
height: 33px; |
|||
background: rgba(193, 193, 193, 0.16); |
|||
border-radius: 17px; |
|||
// flex: 1; |
|||
color: #333333; |
|||
border: none; |
|||
/* 取消边框 */ |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.header .btn_search { |
|||
width: 60px; |
|||
height: 33px; |
|||
background: #3974F6; |
|||
border-radius: 17px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
line-height: 23px; |
|||
border: none; |
|||
/* 取消边框 */ |
|||
margin-right: 10px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue