注册发行

src/components/SearchHistory.vue

@@ -39,7 +39,7 @@ export default {
   flex-direction: column;
   padding: 20px 15px;
   background-color: #fafafa;
-  height: 100vh;
+  height: 100%;
   .history_title {
     display: flex;
     justify-content: space-between;

src/components/SearchInput.vue

@@ -15,7 +15,7 @@ export default {
   },
   data() {
     return {
-      searchValue: null
+      searchValue: ''
     }
   },
   watch: {

src/router/modules/regIssue.js

@@ -15,7 +15,16 @@ const regIssueRouter = [
             title: '注册发行',
             isLogin: false
         },
-        component: () => import(/* webpackChunkName: "regIssue" */ '@/views/regIssue/search.vue') // 注册发行 搜索页面
+        component: () => import(/* webpackChunkName: "regIssueSearch" */ '@/views/regIssue/search.vue') // 注册发行 搜索页面
+    },
+    {
+        path: '/regIssueSearchResult',
+        name: 'RegIssueSearchResult',
+        meta: {
+            title: '注册发行',
+            isLogin: false
+        },
+        component: () => import(/* webpackChunkName: "regIssueSearchResult" */ '@/views/regIssue/searchResult.vue') // 注册发行 搜索页面结果页面
     },
 ]
 

src/utils/LocalStorage.js

 
 export function getLocalStorage(key) {
+    try {
         return JSON.parse(localStorage.getItem(key))
+    } catch {
+    }
 }
 
 export function setLocalStorage(key, value) {

src/views/regIssue/index.vue

@@ -2,7 +2,7 @@
   <div class="regIssue_container">
     <NafmHeader :title="$t('title.regIssue')" navClass="nafmii-head-bg3">
       <template #bottom>
-        <SearchFirst class="common_search" placeholder="请输入企业名称/注册报告名称/主承销商" @click.native="jumpSearch" />
+        <SearchFirst class="common_search" placeholder="请输入企业名称/注册报告名称/主承销商" @click.native="jumpSearch" :autofocus="true" />
         <img :src="require('@/assets/icon/filter.png')" class="filter" @click="show=true" />
       </template>
     </NafmHeader>

src/views/regIssue/search.vue

@@ -2,11 +2,11 @@
   <div class="resIssue_search_container">
     <NafmHeader title="注册发行" navClass="nafmii-head-bg3">
       <template #bottom>
-        <SearchInput v-model="keyword" placeholder="请输入企业名称/注册报告名称/主承销商" @search="handleSearch" />
+        <SearchInput class="common_search" v-model="keyword" placeholder="请输入企业名称/注册报告名称/主承销商" @search="jumpSearchResult" />
       </template>
     </NafmHeader>
     <div class="resIssue_search_content">
-      <SearchHistory :list="list" @jumpPage="jumpDetail" @clear="handleClear" />
+      <SearchHistory :list="list" @jumpPage="jumpSearchResult" @clear="handleClear" />
     </div>
   </div>
 </template>
@@ -39,8 +39,14 @@ export default {
         setLocalStorage('resIssucessData', this.list)
       }
     },
-    jumpDetail(val) {
-
+    jumpSearchResult(val) {
+      this.handleSearch(val)
+      this.$router.push({
+        name: 'RegIssueSearchResult',
+        query: {
+          keyword: val
+        }
+      })
     },
     handleClear() {
       this.list = []
@@ -50,4 +56,12 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+.resIssue_search_container{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.resIssue_search_content{
+  flex: 1;
+}
 </style>
\ No newline at end of file

src/views/regIssue/searchResult.vue

+<template>
+  <div class="regIssue_container">
+    <NafmHeader title="注册发行" navClass="nafmii-head-bg3">
+      <template #bottom>
+        <SearchInput v-model="keyword" placeholder="请输入企业名称/注册报告名称/主承销商" @search="handleSearch" />
+        <img :src="require('@/assets/icon/filter.png')" class="filter" @click="show=true" />
+      </template>
+    </NafmHeader>
+    <div class="regIssue_content">
+      <van-list v-model="loading" :finished="finished" finished-text="已经到底了" @load="onLoad">
+        <div class="regIssue_list">
+          <div class="regIssue_item" v-for="(item,index) in list" :key="index">
+            <h3>{{item.title}}</h3>
+            <div class="bottom">
+              <div class="btm_left">
+                <img :src="require('@/assets/icon/time_update.png')">
+                <span class="time">更新日期：{{item.time}} </span>
+              </div>
+              <div class="btm_right">{{item.type}}</div>
+            </div>
+          </div>
+        </div>
+      </van-list>
+    </div>
+    <FilterPopup :checkboxArrOne="checkboxArrOne" :checkboxArrTwo="checkboxArrTwo" v-model="show" @rest="handleReset" @sure="handleSure" />
+  </div>
+</template>
+<script>
+import SearchInput from '@/components/SearchInput.vue'
+import FilterPopup from './components/FilterPopup';
+import { setLocalStorage, getLocalStorage } from '@/utils/LocalStorage'
+export default {
+  name: 'ResIssueSearch',
+  components: {
+    SearchInput,
+    FilterPopup
+  },
+  data() {
+    return {
+      loading: false,
+      finished: false,
+      show: false,
+      keyword: '',
+      list: [
+        {
+          title: '南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册报告',
+          time: '2021-4-12',
+          type: 'MTN'
+        },
+        {
+          title: '南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册报告',
+          time: '2021-4-12',
+          type: 'MTN'
+        }
+      ],
+      checkboxArrOne: [{
+        label: '待上会',
+        value: 1
+      }, {
+        label: '完成注册',
+        value: 2
+      }],
+      checkboxArrTwo: [{
+        label: 'SCP',
+        value: 1
+      }, {
+        label: 'SCP1',
+        value: 2
+      }],
+      historyList: []
+    }
+  },
+  mounted() {
+    // 获取本地搜索历史记录
+    this.historyList = getLocalStorage('resIssucessData') || []
+
+    // 获取 搜索关键字
+    const { keyword } = this.$route.query;
+    console.log('keyword',keyword);
+    this.keyword = keyword
+  },
+  methods: {
+    onLoad() {
+      this.finished = true
+      this.loading = false
+    },
+    // 将搜索关键字进行本地存储
+    searchAndStorge(val) {
+      if (this.historyList.indexOf(val) === -1) {
+        this.historyList.unshift(val)
+        if (this.historyList.length > 10) {
+          this.historyList.pop()
+        }
+        setLocalStorage('resIssucessData', this.historyList)
+      }
+    },
+    handleSearch(val) {
+      this.searchAndStorge(val)
+    },
+    // 重置
+    handleReset() {
+
+    },
+    // 确定
+    handleSure(arrOne, arrTwo) {
+      console.log('arrOne', arrOne);
+      console.log('arrTwo', arrTwo);
+      this.show = false
+    },
+    jumpSearch() {
+      this.$router.push({
+        name: 'RegIssueSearch'
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import "~@/assets/css/search.less";
+/deep/ form {
+  display: flex;
+  flex: 1;
+}
+/deep/ .common_search.common_search.van-search {
+  display: flex;
+  flex: 1;
+}
+/deep/ .nav_bottom_container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .filter {
+    width: 18px;
+    height: 21px;
+    margin-left: 15px;
+  }
+}
+.common_search {
+  display: flex;
+  flex: 1;
+  width: auto;
+}
+.regIssue_list {
+  padding: 0 15px;
+  .regIssue_item {
+    padding: 10px 0 12px 0;
+    border-bottom: 1px solid #f8f8f8;
+    display: flex;
+    flex-direction: column;
+    h3 {
+      color: #222;
+      font-size: 16px;
+    }
+    .bottom {
+      display: flex;
+      flex-direction: row;
+      margin-top: 10px;
+      color: #888d8d;
+      font-size: 12px;
+      justify-content: space-between;
+      .btm_left {
+        display: flex;
+        align-items: center;
+      }
+      img {
+        width: 17px;
+        height: 17px;
+        margin-right: 7px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file