|
|
@@ -0,0 +1,304 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="3" class="left">
|
|
|
+ <img src="@/assets/img/wenshu_logo.jpeg" alt="wenshu">
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" class="center">
|
|
|
+ <el-input
|
|
|
+ v-model="search"
|
|
|
+ placeholder="搜索裁判文书"
|
|
|
+ @focus="focus"
|
|
|
+ @blur="blur"
|
|
|
+ @keyup.enter.native="searchHandler"
|
|
|
+ >
|
|
|
+ <el-button id="search" slot="append" icon="el-icon-search" @click="searchHandler" />
|
|
|
+ </el-input>
|
|
|
+ <!---设置z-index优先级,防止被走马灯效果遮挡-->
|
|
|
+ <el-card
|
|
|
+ v-if="isSearch"
|
|
|
+ id="search-box"
|
|
|
+ class="box-card"
|
|
|
+ style="position:relative;z-index:15"
|
|
|
+ @mouseenter="enterSearchBoxHanlder"
|
|
|
+ >
|
|
|
+ <dl v-if="isHistorySearch">
|
|
|
+ <dt v-show="history" class="search-title">历史搜索</dt>
|
|
|
+ <dt v-show="history" class="remove-history" @click="removeAllHistory">
|
|
|
+ <i class="el-icon-delete" />清空历史记录
|
|
|
+ </dt>
|
|
|
+ <el-tag
|
|
|
+ v-for="search in historySearchList"
|
|
|
+ :key="search.id"
|
|
|
+ closable
|
|
|
+ :type="search.type"
|
|
|
+ style="margin-right:5px; margin-bottom:5px;"
|
|
|
+ @close="closeHandler(search)"
|
|
|
+ >{{ search.name }}</el-tag>
|
|
|
+ <dt class="search-title">热门搜索</dt>
|
|
|
+ <dd v-for="search in hotSearchList" :key="search.id">{{ search }}</dd>
|
|
|
+ </dl>
|
|
|
+ <dl v-if="isSearchList">
|
|
|
+ <dd v-for="search in searchList" :key="search.id">{{ search }}</dd>
|
|
|
+ </dl>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="movie-list">
|
|
|
+ <el-col v-for="(item, index) in dataList" :key="index" :md="18" :sm="18" :xs="18">
|
|
|
+ <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <el-button style="float: right; padding: 5px;" type="text" @click="onGetDetail(item.contentId)">查看详情</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <el-row>
|
|
|
+ <el-col :md="4">
|
|
|
+ <el-image
|
|
|
+ lazy
|
|
|
+ fit="cover"
|
|
|
+ :src="item.coverUrl"
|
|
|
+ class="coverImg"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="20">
|
|
|
+<!-- <el-button style="float: left; padding: 3px 0" type="text" @click="onGetDetail">
|
|
|
+ {{ item.title }}
|
|
|
+ </el-button>-->
|
|
|
+ <el-row>
|
|
|
+ <div style="padding: 14px">
|
|
|
+ <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.title }}</span>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <div style="padding: 14px">
|
|
|
+ <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.excerpt }}</span>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <div style="padding: 14px">
|
|
|
+ <span style="left: 0;margin-bottom: 0px;color: black;">发布于: {{ item.publishAt }}</span>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="18" class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ :small="screenWidth <= 768"
|
|
|
+ hide-on-single-page
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :total="totalSize"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-dialog title="裁判文书详情" :visible.sync="wenshuDetailDialog" width="70%" center>
|
|
|
+ <el-card v-if="wenshuDetail !== null" :model="wenshuDetail">
|
|
|
+ <el-descriptions class="margin-top" :column="3" border>
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template slot="label">
|
|
|
+ <i class="el-icon-user" />
|
|
|
+ 案由
|
|
|
+ </template>
|
|
|
+ <span> {{ wenshuDetail.subject }} </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template slot="label">
|
|
|
+ <i class="el-icon-mobile-phone" />
|
|
|
+ 案号
|
|
|
+ </template>
|
|
|
+ <span> {{ wenshuDetail.typeStr }} </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template slot="label">
|
|
|
+ <i class="el-icon-location-outline" />
|
|
|
+ 发布日期
|
|
|
+ </template>
|
|
|
+ <span> {{ wenshuDetail.level }} </span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <el-descriptions class="margin-top" :column="1" border>
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template slot="label">
|
|
|
+ <i class="el-icon-user" />
|
|
|
+ 文书内容
|
|
|
+ </template>
|
|
|
+ <span v-html="wenshuDetail.content" />
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </el-card>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="wenshuDetailDialog = false">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import RandomUtil from '@/utils/random-util'
|
|
|
+import Store from '@/utils/store'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 屏幕宽度, 为了控制分页条的大小
|
|
|
+ screenWidth: document.body.clientWidth,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ totalSize: 0,
|
|
|
+ dataList: [],
|
|
|
+ search: '', // 当前输入框的值
|
|
|
+ isFocus: false, // 是否聚焦
|
|
|
+ hotSearchList: ['暂无热门搜索'], // 热门搜索数据
|
|
|
+ historySearchList: [], // 历史搜索数据
|
|
|
+ searchList: ['暂无数据'], // 搜索返回数据,
|
|
|
+ history: false,
|
|
|
+ types: ['', 'success', 'info', 'warning', 'danger'], // 搜索历史tag式样
|
|
|
+ wenshuDetailDialog: false,
|
|
|
+ wenshuDetail: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isHistorySearch() {
|
|
|
+ return this.isFocus && !this.search
|
|
|
+ },
|
|
|
+ isSearchList() {
|
|
|
+ return this.isFocus && this.search
|
|
|
+ },
|
|
|
+ isSearch() {
|
|
|
+ return this.isFocus
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCurrentChange(currentPage) {
|
|
|
+ this.currentPage = currentPage
|
|
|
+ // 回到顶部
|
|
|
+ scrollTo(0, 0)
|
|
|
+ },
|
|
|
+ onGetDetail(val) {
|
|
|
+ this.$message.info('get wenshu -> ' + val)
|
|
|
+ this.wenshuDetail = {
|
|
|
+ }
|
|
|
+ this.wenshuDetailDialog = true
|
|
|
+ },
|
|
|
+ focus() {
|
|
|
+ this.isFocus = true
|
|
|
+ this.historySearchList = Store.loadHistory() == null ? [] : Store.loadHistory()
|
|
|
+ this.history = this.historySearchList.length !== 0
|
|
|
+ },
|
|
|
+ blur() {
|
|
|
+ var self = this
|
|
|
+ this.searchBoxTimeout = setTimeout(function() {
|
|
|
+ self.isFocus = false
|
|
|
+ }, 300)
|
|
|
+ },
|
|
|
+ enterSearchBoxHanlder() {
|
|
|
+ clearTimeout(this.searchBoxTimeout)
|
|
|
+ },
|
|
|
+ searchHandler() {
|
|
|
+ console.log('search data')
|
|
|
+ this.dataList.push(
|
|
|
+ {
|
|
|
+ contentId: 111,
|
|
|
+ title: 'aaa',
|
|
|
+ coverUrl: 'bbb',
|
|
|
+ excerpt: 'ccc'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ contentId: 222,
|
|
|
+ title: '222',
|
|
|
+ coverUrl: 'bbb',
|
|
|
+ excerpt: 'ccc'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ contentId: 333,
|
|
|
+ title: '333',
|
|
|
+ coverUrl: 'bbb',
|
|
|
+ excerpt: 'ccc'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ contentId: 444,
|
|
|
+ title: '444',
|
|
|
+ coverUrl: 'bbb',
|
|
|
+ excerpt: 'ccc'
|
|
|
+ }
|
|
|
+ )
|
|
|
+ this.totalSize = this.dataList.length
|
|
|
+
|
|
|
+ // 随机生成搜索历史tag式样
|
|
|
+ const n = RandomUtil.getRandomNumber(0, 5)
|
|
|
+ const exist =
|
|
|
+ this.historySearchList.filter(value => {
|
|
|
+ return value.name === this.search
|
|
|
+ }).length !== 0
|
|
|
+ if (!exist) {
|
|
|
+ this.historySearchList.push({ name: this.search, type: this.types[n] })
|
|
|
+ Store.saveHistory(this.historySearchList)
|
|
|
+ }
|
|
|
+ this.history = this.historySearchList.length !== 0
|
|
|
+ },
|
|
|
+ closeHandler(search) {
|
|
|
+ this.historySearchList.splice(this.historySearchList.indexOf(search), 1)
|
|
|
+ Store.saveHistory(this.historySearchList)
|
|
|
+ clearTimeout(this.searchBoxTimeout)
|
|
|
+ if (this.historySearchList.length === 0) {
|
|
|
+ this.history = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ removeAllHistory() {
|
|
|
+ Store.removeAllHistory()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.left {
|
|
|
+ margin-left: 200px;
|
|
|
+}
|
|
|
+.center {
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-left: 200px;
|
|
|
+}
|
|
|
+#search {
|
|
|
+ background-color: #c60d37;
|
|
|
+ border-radius: 0%;
|
|
|
+}
|
|
|
+.search-title {
|
|
|
+ color: #bdbaba;
|
|
|
+ font-size: 15px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+.remove-history {
|
|
|
+ color: #bdbaba;
|
|
|
+ font-size: 15px;
|
|
|
+ float: right;
|
|
|
+ margin-top: -22px;
|
|
|
+}
|
|
|
+#search-box {
|
|
|
+ width: 555px;
|
|
|
+ height: 300px;
|
|
|
+ margin-top: 0px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.movie-list {
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-left: 6%;
|
|
|
+ padding-right: 6%;
|
|
|
+}
|
|
|
+
|
|
|
+.coverImg {
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+</style>
|
