pdf 详情页面制作

package.json

@@ -23,6 +23,7 @@
     "vconsole": "^3.4.1",
     "vue": "^2.6.11",
     "vue-i18n": "^8.24.3",
+    "vue-pdf": "^4.2.0",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",
     "vuex-persist": "^3.1.3"

src/components/SearchHistory.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="historyList" v-if="historys.length">
       <ul>
-        <li v-for="(item,index) in historys" :key="index" @jump="jumItem(item)">{{item}}</li>
+        <li v-for="(item,index) in historys" :key="index" @click="jumItem(item)">{{item}}</li>
       </ul>
     </div>
     <div class="noData" v-else>

src/components/SearchInput.vue

 <template>
   <form action="javascript:return true">
-    <van-search class="common_search" v-model="searchValue" v-on="$listeners" v-bind="$attrs" />
+    <van-search class="common_search" v-model.trim="searchValue" v-on="$listeners" v-bind="$attrs" />
   </form>
 </template>
 <script>
@@ -20,11 +20,9 @@ export default {
   },
   watch: {
     searchValue (val) {
-      console.log('111-->',val)
       this.$emit('input', val)
     },
     keyword (val) {
-      console.log('222-->',val)
       this.searchValue = val
     }
   }

src/main.js

@@ -13,9 +13,13 @@ import '@/assets/css/index.less'
 const APP_ENV = process.env.VUE_APP_NODE_ENV
 Vue.config.productionTip = false
 
+console.log(window.location.href);
+const url = window.location.href
 if (APP_ENV != 'production') {
+  if (!url.includes('/#/pdf')) {
     const vConsole = new Vconsole()
     Vue.use(vConsole)
+  }
 }
 
 // 获取APP 相关信息

src/router/index.js

@@ -40,6 +40,15 @@ const routes = [
       title: '目录'
     },
     component: () => import(/* webpackChunkName: "catalog" */ '@/views/catalog/') // 首页
+  },
+  {
+    path: '/pdf',
+    name: 'PdfView',
+    meta: {
+      menu: true,
+      title: '目录'
+    },
+    component: () => import(/* webpackChunkName: "PdfView" */ '@/views/pdf/') // 首页
   }
 ].concat(userRouter, memberRouter, qulificationRouter, regIssueRouter, homeRouter)
 

src/store/index.js

@@ -6,6 +6,7 @@ import home from './modules/home'
 import user from './modules/user'
 import common from './modules/common'
 import search from './modules/search'
+import regIssue from './modules/regIssue'
 
 // vuex 数据存储 进行本地存储操作
 const vuexLocal = new VuexPersistence({
@@ -20,7 +21,8 @@ const store = new Vuex.Store({
     home,
     user,
     common,
-    search
+    search,
+    regIssue
   },
   plugins: [vuexLocal.plugin, createLogger()]
 })

src/store/modules/regIssue.js

+export default {
+    namespaced: true,
+    state: {
+        regIssuePamas: {},
+        regIssueList: []
+    },
+    mutations: {
+        MRegIssuePamas(state, datas) {
+            state.regIssuePamas = datas
+        },
+        MRegIssueList(state, datas) {
+            state.regIssueList = datas
+        },
+    },
+    actions: {
+        // 请求注册发行列表接口
+        ARequestRegIssueList({ state, commit }, params) {
+            console.log('params', params)
+            commit('MRegIssuePamas', params)
+
+            // todo api
+            const list = []
+            commit('MRegIssueList', list)
+        }
+    },
+    modules: {}
+}
\ No newline at end of file

src/store/modules/search.js

@@ -4,7 +4,7 @@ const Types = {
     RegIssue: { size: 10 }
 }
 
-
+import utils from '@/utils/index'
 export default {
     namespaced: true,
     state: {
@@ -58,8 +58,9 @@ export default {
 
 function pushSearchValue(datas, value, size) {
     const newDatas = [...datas]
-    if (newDatas.indexOf(value) === -1) {
-        newDatas.unshift(value)
+
+    if (!utils.isNull(value) && newDatas.indexOf(value) === -1) {
+        newDatas.unshift(value.trim())
         if (newDatas.length > size) {
             newDatas.pop()
         }

src/utils/index.js

@@ -24,6 +24,15 @@ const emailRegCheck = (email) => {
   return Reg.test(email);
 }
 
+// 判断是否为空
+const isNull = (str) => {
+  if (str == null || str == "" || str == undefined || str==" ") {
+    return true
+  } else {
+    return false
+  }
+}
+
 // 复制值
 const Copy = (node) => {
   node = Array.isArray(node) ? node[0] : node
@@ -43,5 +52,6 @@ const Copy = (node) => {
 export default {
   handlePromise,
   phoneRegCheck,
-  emailRegCheck
+  emailRegCheck,
+  isNull
 }
\ No newline at end of file

src/views/pdf/index.vue

+<template>
+  <div class="pdf_container">
+    <NafmHeader navClass="nafmii-head-bg3" title="详情页面">
+      <template #bottom>
+        <div class="header">
+          <div class="header_left">
+            <span class="pre" @click="handlePre">上一页</span>
+            <span class="next" @click="handleNext">下一页</span>
+          </div>
+
+          <div class="center">
+            <input type="text" v-model.number="inputValue" class="inputClass" @change="handleChange"> <span>/ {{pageCount}}</span>
+          </div>
+          <div class="header_right">
+            <span class="pre" @click="handleScaleBig">放大</span>
+            <span class="pre" @click="handleScaleSmall">缩小</span>
+            <span class="next" @click="handleReset">重置</span>
+          </div>
+
+        </div>
+      </template>
+    </NafmHeader>
+    <Pdf :src="src" ref="wrapper" :page="currentPage" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" @loaded="onLoad" />
+  </div>
+</template>
+
+<script>
+import Pdf from 'vue-pdf'
+export default {
+  components: {
+    Pdf
+  },
+  data() {
+    return {
+      inputValue: 1,
+      currentPage: 0,
+      pageCount: 0,
+      fileUrl: `${window.location.origin}/study.pdf`,
+      numPages: undefined,
+      src: '',
+      scale: 100,
+    }
+  },
+  created() {
+    this.src = Pdf.createLoadingTask(this.fileUrl)
+
+  },
+  mounted() {
+    // this.src.promise.then(pdf => {
+    //   this.numPages = pdf.numPages
+    // })
+    console.log('---', this.currentPage)
+
+  },
+  methods: {
+    onLoad(val) {
+      this.currentPage = val || 1
+      this.inputValue = this.currentPage
+      // this.src.then(pdf => { this.currentPage = pdf.numPages; });
+      // this.src.promise.then(pdf => {
+      //   this.currentPage = pdf.numPages
+      // })
+    },
+    handlePre() {
+      if (this.currentPage == 1) {
+        Toast('已在第一页')
+        return
+      } else {
+        this.currentPage--
+      }
+      this.inputValue = this.currentPage
+    },
+    handleNext() {
+      if (this.currentPage == this.pageCount) {
+        Toast('已在末页')
+        return
+      } else {
+        this.currentPage++
+      }
+      this.inputValue = this.currentPage
+    },
+    pageLoad(val) {
+      console.log(val, this.currentPage);
+    },
+    handleChange(e) {
+      console.log('val-->', val)
+      const val = e.target.value
+      if (val > this.pageCount) {
+        Toast('输入值不能大于总页数')
+        this.inputValue = ''
+        return
+      }
+      if (val < 1 || val == "" || val == '') {
+        Toast('输入值小于了最小页数')
+        this.inputValue = ''
+        return
+      }
+      try {
+        console.log('val', val);
+        this.currentPage = Number(val)
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    handleScaleBig() {
+      this.scale += 5;
+      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
+    },
+    handleScaleSmall() {
+      if (this.scale == 100) {
+        return;
+      }
+      this.scale += -5;
+      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
+    },
+    handleReset(){
+      this.scale = 100;
+      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
+      this.currentPage = 1
+      this.inputValue = 1
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.header {
+  display: flex;
+  height: 50px;
+  align-items: center;
+  .pre {
+    width: 50px;
+    margin-right: 5px;
+  }
+  .next {
+    width: 50px;
+  }
+  .center {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.inputClass {
+  width: 50px;
+  color: #333;
+  margin-right: 2px;
+  text-align: center;
+}
+</style>
\ No newline at end of file

src/views/regIssue/components/RegIssueLayout.vue

@@ -2,7 +2,7 @@
   <div class="search-layout">
     <nafm-header title="注册发行" navClass="nafmii-head-bg3">
       <template #bottom>
-        <SearchInput v-model="keyword" placeholder="请输入企业名称/注册报告名称/主承销商" :readonly="readonly" @click="jumpSearch" @search="handleSearch" />
+        <SearchInput v-model.trim="keyword" placeholder="请输入企业名称/注册报告名称/主承销商" :readonly="readonly" @click="jumpSearch" @search="handleSearch" />
         <img :src="require('@/assets/icon/filter.png')" class="filter" v-if="!history" @click="show=true" />
       </template>
     </nafm-header>
@@ -49,11 +49,10 @@ export default {
     },
   },
   methods: {
-    // 
+    // 点击历史搜索页面tag签 或者搜索关键字回车 跳转到 搜索页面
     handleSearch(val) {
-      console.log('value', val)
       this.$store.dispatch('search/APushRegIssueSearchValue', val)
-      this.onSeachAction()
+      this.onSeachAction(val)
     },
     // 确定
     handleSure(arrOne, arrTwo) {
@@ -67,13 +66,14 @@ export default {
     jumpSearch() {
       this.$emit('jumpSeachPage')
     },
-    // 注册发行搜索 回撤 跳转搜索结果页面 或者 直接搜索
+    // 注册发行搜索 回车 跳转搜索结果页面 或者 直接搜索 
     onSeachAction(val) {
-      const params = {}
-      if (!this.history) {
-        // todo api
+      const params = {
+        keyword: val,
+        arrOne: this.arrOne,
+        arrTwo: this.arrTwo
       }
-      this.$emit('search', val)
+      this.$emit('search', params)
     },
     // 重置
     handleReset() {

src/views/regIssue/search.vue

@@ -14,10 +14,20 @@ export default {
   mounted() {
   },
   methods: {
-    jumpResultPage(val) {
+    jumpResultPage(params) {
+      const { keyword } = params
+      if (!keyword) {
+        Toast('搜索内容不能为空')
+        return
+      }
+
       this.$router.push({
         name: 'RegIssueSearchResult',
+        query: {
+          keyword
+        }
       })
+
     }
   }
 }

src/views/regIssue/searchResult.vue

 <template>
-  <RegIssueLayout :history="false">
+  <RegIssueLayout :history="false" :defKeyword="keyword" @search="handleSearch">
     <RegIssueList />
   </RegIssueLayout>
 </template>
@@ -14,13 +14,33 @@ export default {
   },
   data() {
     return {
+      keyword: ''
     }
   },
   mounted() {
-
+    const { keyword } = this.$route.query;
+    this.keyword = keyword
+    const params = {
+      keyword
+    }
+    this.handleRequest(params)
   },
   methods: {
+    handleRequest(params) {
+      this.$store.dispatch('regIssue/ARequestRegIssueList', params)
+    },
+    handleSearch(val) {
+      if (!val) {
+        Toast('搜索内容不能为空')
+        return
+      }
+      // todo
+      const params = {
+        keyword: val,
+      }
 
+      this.handleRequest(params)
+    }
   }
 }
 </script>