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.
121 lines
2.6 KiB
121 lines
2.6 KiB
<template> |
|
<view class="books-container" v-if="!searchFlag"> |
|
<view class="flex justify-center"> |
|
<image src="/static/image/police-badge.png" style="width: 238rpx" mode="widthFix"></image> |
|
</view> |
|
<view class="title">督察知识库</view> |
|
<view class="flex search-box"> |
|
<input class="search-input" v-model="query.fileName" placeholder="搜索词" /> |
|
<button type="primary" class="search-btn" @tap="search">搜索</button> |
|
</view> |
|
</view> |
|
<view v-else> |
|
<view class="flex search"> |
|
<view class="search-item flex justify-center" :search="searchFlag"> |
|
<view class="search-item-conent"> |
|
<uni-easyinput prefixIcon="search" type="text" placeholder="搜索" :inputBorder="false" v-model="query.fileName" /> |
|
</view> |
|
</view> |
|
<view> |
|
<view class="cancel-btn" @tap="cancleSearch">取消</view> |
|
</view> |
|
</view> |
|
<view class="container"> |
|
<view v-for="item in books" class="flex items-center gap-8 file-item"> |
|
<view> |
|
<image :src="`/static/icon/${ getFileType(item.fileName) }.png`" mode="widthFix" style="width: 120rpx"></image> |
|
</view> |
|
<view class="filename">{{ item.fileName }}</view> |
|
</view> |
|
<empty description="无知识数据" v-if="books.length === 0" /> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { getFileType } from '@/common/util'; |
|
import { listBook } from '@/api/book' |
|
export default { |
|
data() { |
|
return { |
|
searchFlag: false, |
|
books: [], |
|
query: { |
|
size: 20, |
|
current: 1 |
|
} |
|
} |
|
}, |
|
watch: { |
|
'query.fileName': function(val) { |
|
if (this.searchFlag && val) { |
|
this.search() |
|
} |
|
}, |
|
}, |
|
setup() { |
|
return { |
|
getFileType |
|
} |
|
}, |
|
onLoad() { |
|
|
|
}, |
|
methods: { |
|
search() { |
|
if (!this.query.fileName) { |
|
return |
|
} |
|
this.searchFlag = true |
|
listBook(this.query).then(data => { |
|
this.books = data.records |
|
}) |
|
}, |
|
cancleSearch() { |
|
this.searchFlag = false |
|
this.query.fileName = '' |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.books-container { |
|
padding: 36rpx; |
|
padding-top: 6vh; |
|
} |
|
.title { |
|
font-size: 24px; |
|
font-weight: bold; |
|
color: #444; |
|
margin-top: 20rpx; |
|
margin-bottom: 60rpx; |
|
text-align: center; |
|
} |
|
.search-box { |
|
border-radius: 8rpx; |
|
border: 1rpx solid #B6D5FE; |
|
padding: 12rpx; |
|
gap: 16rpx; |
|
.search-input { |
|
height: 92rpx; |
|
line-height: 92rpx; |
|
background: rgba(0,0,0,0.04); |
|
border-radius: 8rpx; |
|
flex-grow: 1; |
|
padding-left: 12rpx; |
|
} |
|
.search-btn { |
|
height: 92rpx; |
|
line-height: 92rpx; |
|
margin: 0; |
|
padding: 0 40rpx; |
|
} |
|
} |
|
.file-item { |
|
padding: 12rpx 0; |
|
.filename { |
|
color: #555; |
|
} |
|
} |
|
</style> |