91 lines
2.7 KiB
Vue
91 lines
2.7 KiB
Vue
<template>
|
|
<view class="min-height bg-white">
|
|
<HeaderItem title="法治宣传"/>
|
|
<view class="p-20 pos-r bg-linear" style="padding-bottom: 80rpx">
|
|
<u-input v-model="keyword" shape="circle" :custom-style="{background: 'white', height: '65rpx'}"
|
|
placeholder="请输入您要查找的内容"/>
|
|
<view class="pos-a" style="right: 30rpx; top: 30rpx">
|
|
<u-button shape="circle" type="primary" :custom-style="{width: '200rpx', zIndex: 9999}" @click="getList">
|
|
搜索
|
|
</u-button>
|
|
</view>
|
|
<view class="p-20 text-25 flex justify-start items-center overflow-x pos-a"
|
|
style="background-color: #E1F3FE; border-radius: 10rpx; width: 90%; bottom: -40rpx">
|
|
<text v-for="(item, index) in cateList" :key="index" class="tag"
|
|
@click="changeType(index)"
|
|
:class="[item.categoryId === activeId ? 'selected-tag' : '']">{{ item.title }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<u-gap height="40rpx"></u-gap>
|
|
<template v-if="list.length">
|
|
<view class="card m-20 flex flex-col justify-center items-center" v-for="(item, index) in list" :key="index">
|
|
<view class="circle w-100p mb-20"
|
|
style="box-shadow: 0 2px 6px rgba(144, 144, 144, 0.4);"
|
|
@click="$jump(`/articlePages/pages/info?id=${item.articleId}&showFeedback=1`)"
|
|
:style="{backgroundImage: `url(${API()}/file${item.image})`, backgroundSize: 'cover',
|
|
height: '240rpx'}"></view>
|
|
<view class="text-25 mt-20">{{ item.title }}</view>
|
|
</view>
|
|
</template>
|
|
<u-empty v-else icon="/lawOrgPages/static/empty.png"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HeaderItem from "@/components/HeaderItem.vue";
|
|
import {articleCateReq, listArticleReq} from "@/api/common";
|
|
import {API} from "@/config";
|
|
|
|
export default {
|
|
name: "publicity",
|
|
components: {HeaderItem},
|
|
data() {
|
|
return {
|
|
keyword: '',
|
|
cateList: [],
|
|
list: [],
|
|
activeId: 0
|
|
}
|
|
},
|
|
methods: {
|
|
API() {
|
|
return API
|
|
},
|
|
async getCateList() {
|
|
const {data} = await articleCateReq({
|
|
parentId: 60
|
|
})
|
|
this.cateList = data
|
|
this.changeType(0)
|
|
},
|
|
changeType(index) {
|
|
this.activeId = this.cateList[index].categoryId
|
|
this.getList()
|
|
},
|
|
async getList() {
|
|
const {data} = await listArticleReq({
|
|
categoryId: this.activeId,
|
|
title: this.keyword
|
|
})
|
|
this.list = data
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getCateList()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.tag {
|
|
padding: 10rpx 25rpx;
|
|
margin-right: 25rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.selected-tag {
|
|
background-color: #FFCA68;
|
|
border-radius: 100rpx;
|
|
}
|
|
</style> |