Search.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. <template>
  2. <div class="search-container">
  3. <search-input ref="search" @submit="doSearch" @recovery="doSearch"></search-input>
  4. <div class="search-result-container">
  5. <div class="sort-list">
  6. <span
  7. class="sort-item"
  8. v-for="(item, index) in sortTypeList"
  9. :key="index"
  10. @click="sortAndSearch(item, index)"
  11. :class="{ active: item.active, reverse: item.sort }"
  12. >
  13. <span class="sort-text">{{ item.label }}</span>
  14. <span class="sort-icon" :class="'el-icon-jy-' + (item.active ? 'down-blue' : 'down-grey')"></span>
  15. </span>
  16. </div>
  17. <div class="search-result-list" v-loading="listState.loading">
  18. <doc-card
  19. v-for="(item, index) in listState.list"
  20. :key="index"
  21. :title="item.docName"
  22. :desc="item.docSummary + '...'"
  23. :docType="item.docFileType"
  24. :price="item.price"
  25. :subInfo="calcSubInfo(item)"
  26. @onClick="toDocDetail(item)"
  27. />
  28. <no-data v-if="listState.list.length === 0 && listState.loaded"></no-data>
  29. </div>
  30. <div class="search-pagination">
  31. <el-pagination
  32. background
  33. layout="prev, pager, next, ->, total"
  34. :hide-on-single-page="true"
  35. :current-page="listState.pageNum"
  36. :page-size="listState.pageSize"
  37. :total="listState.total"
  38. @current-change="onPageChange"
  39. >
  40. </el-pagination>
  41. </div>
  42. </div>
  43. </div>
  44. </template>
  45. <script>
  46. import { Icon, Pagination } from 'element-ui'
  47. import SearchInput from '@/components/Search'
  48. import DocCard from '@/components/doc-item-card/Card'
  49. import NoData from '@/components/NoData'
  50. import { getSearch } from '../api/modules/search'
  51. import { formatSize, dateFormatter } from '@/utils/'
  52. import { mixinBackground } from '@/utils/mixins'
  53. export default {
  54. name: 'seach',
  55. mixins: [mixinBackground],
  56. components: {
  57. [Icon.name]: Icon,
  58. [Pagination.name]: Pagination,
  59. SearchInput,
  60. DocCard,
  61. NoData
  62. },
  63. data () {
  64. return {
  65. sortTypeList: [
  66. {
  67. type: 'tSort',
  68. label: '上传时间',
  69. sort: 0,
  70. active: true
  71. },
  72. {
  73. type: 'dSort',
  74. label: '下载次数',
  75. sort: 0,
  76. active: false
  77. },
  78. {
  79. type: 'vSort',
  80. label: '浏览人数',
  81. sort: 0,
  82. active: false
  83. }
  84. ],
  85. searchQuery: {
  86. type: '',
  87. text: ''
  88. },
  89. listState: {
  90. loaded: false, // 是否已经搜索过
  91. loading: false,
  92. pageNum: 1, // 当前页
  93. pageSize: 10, // 每页多少条数据
  94. total: 0, // 一共多少条数据
  95. list: [] // 查询请求返回的数据
  96. }
  97. }
  98. },
  99. computed: {
  100. activeSortList () {
  101. return this.sortTypeList.find(item => {
  102. return item.active
  103. })
  104. }
  105. },
  106. methods: {
  107. getLoginStatus: function () {
  108. console.log(loginflag)
  109. },
  110. // 恢复数据至第一次请求的状态(页码等)
  111. resetListState () {
  112. const state = {
  113. loaded: false,
  114. loading: false,
  115. pageNum: 1,
  116. total: 0,
  117. list: []
  118. }
  119. Object.assign(this.listState, state)
  120. },
  121. setUrlQuery: function () {
  122. const arr = []
  123. for (const key in this.searchQuery) {
  124. arr.push(this.searchQuery[key] === this.$route.query[key])
  125. }
  126. // 如果当前url和设置的url完全相同或者搜索值为空时候,则直接返回
  127. // 是否所有元素都为true
  128. const isSame = arr.every(item => item)
  129. if (isSame || !this.searchQuery.text) {
  130. return
  131. }
  132. this.$router.replace({
  133. name: 'search',
  134. query: {
  135. type: this.searchQuery.type,
  136. text: this.searchQuery.text
  137. }
  138. })
  139. },
  140. getSearchState: function (search) {
  141. if (search) {
  142. Object.assign(this.searchQuery, search)
  143. } else {
  144. this.searchQuery.type = this.$refs.search.type
  145. this.searchQuery.text = this.$refs.search.input.trim().replace(/\s+/g, ' ')
  146. }
  147. },
  148. doSearch (search) {
  149. this.getSearchState(search)
  150. if (!this.searchQuery.text) {
  151. if (search.events === 'onSubmit') {
  152. this.$router.push('/')
  153. }
  154. return
  155. }
  156. this.resetListState()
  157. this.getList(search)
  158. },
  159. async getList (search) {
  160. const query = {
  161. keyWord: this.searchQuery.text.trim().replace(/\s+/g, ' '),
  162. tag: this.searchQuery.type === '全部' ? '' : this.searchQuery.type,
  163. sort: this.activeSortList.type,
  164. num: this.listState.pageNum,
  165. size: this.listState.pageSize
  166. }
  167. console.log(query)
  168. // 设置url
  169. this.setUrlQuery()
  170. // 搜索内容去多余的空格并设置
  171. this.$refs.search.setSearchContent(query.keyWord)
  172. this.listState.loading = true
  173. this.listState.loaded = false
  174. const r = await getSearch(query)
  175. this.listState.loading = false
  176. this.listState.loaded = true
  177. const res = r.data
  178. if (res.error_code === 0) {
  179. this.listState.total = res.data.total
  180. this.listState.list = res.data.list || []
  181. } else {
  182. this.listState.total = 0
  183. this.listState.list = []
  184. }
  185. },
  186. sortAndSearch (item, index) {
  187. if (item.active) {
  188. // 改变sort
  189. // item.sort = item.sort ? 0 : 1
  190. } else {
  191. this.sortTypeList.forEach(s => {
  192. s.active = false
  193. })
  194. item.active = true
  195. }
  196. this.doSearch()
  197. },
  198. toDocDetail (item) {
  199. const { docId: id } = item
  200. window.open(`./content/${id}`) // 打开新窗口
  201. // this.$router.push({
  202. // name: 'content',
  203. // params: { id }
  204. // })
  205. },
  206. onPageChange (p) {
  207. this.listState.pageNum = p
  208. this.getList()
  209. },
  210. calcSubInfo (item) {
  211. const { docFileSize: size, downTimes, uploadDate, docPageSize } = item
  212. const subInfoArr = []
  213. if (uploadDate !== undefined) {
  214. const data = uploadDate.replace(/-/g, '/')
  215. subInfoArr.push(dateFormatter(data, 'yyyy/MM/dd'))
  216. }
  217. if (downTimes !== undefined) {
  218. subInfoArr.push(`${downTimes}次下载`)
  219. }
  220. if (docPageSize !== undefined) {
  221. subInfoArr.push(`共${docPageSize}页`)
  222. }
  223. if (size !== undefined) {
  224. subInfoArr.push(formatSize(size))
  225. }
  226. return subInfoArr
  227. }
  228. }
  229. }
  230. </script>
  231. <style lang="scss" scoped>
  232. @include diy-icon('down-grey', 18, 18);
  233. @include diy-icon('down-blue', 18, 18);
  234. .search-container {
  235. padding-top: 48px;
  236. }
  237. .search-result-container {
  238. margin: 0 auto;
  239. .sort-list {
  240. display: flex;
  241. align-items: center;
  242. margin: 18px;
  243. height: 48px;
  244. border-radius: 4px;
  245. background: #F5F6F7;
  246. .sort-item {
  247. display: flex;
  248. align-items: center;
  249. padding: 0 20px;
  250. height: 100%;
  251. font-size: 14px;
  252. color: #686868;
  253. cursor: pointer;
  254. .sort-text {
  255. margin-right: 4px;
  256. }
  257. .sort-icon {
  258. color: #aaa;
  259. }
  260. &.reverse {
  261. .sort-icon {
  262. transform: rotate(180deg);
  263. }
  264. }
  265. &.active {
  266. .sort-text,
  267. .sort-icon {
  268. color: $color-text--highlight;
  269. }
  270. }
  271. &:hover {
  272. .sort-text,
  273. .sort-icon {
  274. color: $color-text--highlight;
  275. }
  276. }
  277. }
  278. }
  279. .search-result-list {
  280. min-height: 500px;
  281. }
  282. .search-pagination {
  283. margin-top: 28px;
  284. padding-bottom: 60px;
  285. text-align: right;
  286. }
  287. }
  288. </style>