Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 4731788f by fanx
Options

pdf 详情页面制作

1 parent 5d0a2b0e
Inline Side-by-side
Showing 19 changed files with 255 additions and 23 deletions
package-lock.json 0 → 100644
This diff could not be displayed because it is too large.
package.json
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
"vconsole": "^3.4.1", "vconsole": "^3.4.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-i18n": "^8.24.3", "vue-i18n": "^8.24.3",
"vue-pdf": "^4.2.0",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuex": "^3.4.0", "vuex": "^3.4.0",
"vuex-persist": "^3.1.3" "vuex-persist": "^3.1.3"
......
public/study.pdf 0 → 100644
No preview for this file type
public/test1.pdf 0 → 100644
No preview for this file type
public/test2.pdf 0 → 100644
No preview for this file type
src/assets/study.pdf 0 → 100644
No preview for this file type
src/components/SearchHistory.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
</div> </div>
<div class="historyList" v-if="historys.length"> <div class="historyList" v-if="historys.length">
<ul> <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> </ul>
</div> </div>
<div class="noData" v-else> <div class="noData" v-else>
......
src/components/SearchInput.vue
<template> <template>
<form action="javascript:return true"> <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> </form>
</template> </template>
<script> <script>
...@@ -20,11 +20,9 @@ export default { ...@@ -20,11 +20,9 @@ export default {
}, },
watch: { watch: {
searchValue (val) { searchValue (val) {
console.log('111-->',val)
this.$emit('input', val) this.$emit('input', val)
}, },
keyword (val) { keyword (val) {
console.log('222-->',val)
this.searchValue = val this.searchValue = val
} }
} }
......
src/main.js
...@@ -13,9 +13,13 @@ import '@/assets/css/index.less' ...@@ -13,9 +13,13 @@ import '@/assets/css/index.less'
const APP_ENV = process.env.VUE_APP_NODE_ENV const APP_ENV = process.env.VUE_APP_NODE_ENV
Vue.config.productionTip = false Vue.config.productionTip = false
console.log(window.location.href);
const url = window.location.href
if (APP_ENV != 'production') { if (APP_ENV != 'production') {
const vConsole = new Vconsole() if (!url.includes('/#/pdf')) {
Vue.use(vConsole) const vConsole = new Vconsole()
Vue.use(vConsole)
}
} }
// 获取APP 相关信息 // 获取APP 相关信息
......
src/router/index.js
...@@ -40,6 +40,15 @@ const routes = [ ...@@ -40,6 +40,15 @@ const routes = [
title: '目录' title: '目录'
}, },
component: () => import(/* webpackChunkName: "catalog" */ '@/views/catalog/') // 首页 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) ].concat(userRouter, memberRouter, qulificationRouter, regIssueRouter, homeRouter)
......
src/store/index.js
...@@ -6,6 +6,7 @@ import home from './modules/home' ...@@ -6,6 +6,7 @@ import home from './modules/home'
import user from './modules/user' import user from './modules/user'
import common from './modules/common' import common from './modules/common'
import search from './modules/search' import search from './modules/search'
import regIssue from './modules/regIssue'
// vuex 数据存储 进行本地存储操作 // vuex 数据存储 进行本地存储操作
const vuexLocal = new VuexPersistence({ const vuexLocal = new VuexPersistence({
...@@ -20,7 +21,8 @@ const store = new Vuex.Store({ ...@@ -20,7 +21,8 @@ const store = new Vuex.Store({
home, home,
user, user,
common, common,
search search,
regIssue
}, },
plugins: [vuexLocal.plugin, createLogger()] plugins: [vuexLocal.plugin, createLogger()]
}) })
......
src/store/modules/regIssue.js 0 → 100644
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 \ No newline at end of file
src/store/modules/search.js
...@@ -4,7 +4,7 @@ const Types = { ...@@ -4,7 +4,7 @@ const Types = {
RegIssue: { size: 10 } RegIssue: { size: 10 }
} }
import utils from '@/utils/index'
export default { export default {
namespaced: true, namespaced: true,
state: { state: {
...@@ -58,8 +58,9 @@ export default { ...@@ -58,8 +58,9 @@ export default {
function pushSearchValue(datas, value, size) { function pushSearchValue(datas, value, size) {
const newDatas = [...datas] 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) { if (newDatas.length > size) {
newDatas.pop() newDatas.pop()
} }
......
src/utils/index.js
...@@ -24,6 +24,15 @@ const emailRegCheck = (email) => { ...@@ -24,6 +24,15 @@ const emailRegCheck = (email) => {
return Reg.test(email); return Reg.test(email);
} }
// 判断是否为空
const isNull = (str) => {
if (str == null || str == "" || str == undefined || str==" ") {
return true
} else {
return false
}
}
// 复制值 // 复制值
const Copy = (node) => { const Copy = (node) => {
node = Array.isArray(node) ? node[0] : node node = Array.isArray(node) ? node[0] : node
...@@ -43,5 +52,6 @@ const Copy = (node) => { ...@@ -43,5 +52,6 @@ const Copy = (node) => {
export default { export default {
handlePromise, handlePromise,
phoneRegCheck, phoneRegCheck,
emailRegCheck emailRegCheck,
isNull
} }
\ No newline at end of file \ No newline at end of file
src/views/pdf/index.vue 0 → 100644
<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 \ No newline at end of file
src/views/regIssue/components/RegIssueLayout.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="search-layout"> <div class="search-layout">
<nafm-header title="注册发行" navClass="nafmii-head-bg3"> <nafm-header title="注册发行" navClass="nafmii-head-bg3">
<template #bottom> <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" /> <img :src="require('@/assets/icon/filter.png')" class="filter" v-if="!history" @click="show=true" />
</template> </template>
</nafm-header> </nafm-header>
...@@ -49,11 +49,10 @@ export default { ...@@ -49,11 +49,10 @@ export default {
}, },
}, },
methods: { methods: {
// // 点击历史搜索页面tag签 或者搜索关键字回车 跳转到 搜索页面
handleSearch(val) { handleSearch(val) {
console.log('value', val)
this.$store.dispatch('search/APushRegIssueSearchValue', val) this.$store.dispatch('search/APushRegIssueSearchValue', val)
this.onSeachAction() this.onSeachAction(val)
}, },
// 确定 // 确定
handleSure(arrOne, arrTwo) { handleSure(arrOne, arrTwo) {
...@@ -67,13 +66,14 @@ export default { ...@@ -67,13 +66,14 @@ export default {
jumpSearch() { jumpSearch() {
this.$emit('jumpSeachPage') this.$emit('jumpSeachPage')
}, },
// 注册发行搜索 回撤 跳转搜索结果页面 或者 直接搜索 // 注册发行搜索 回车 跳转搜索结果页面 或者 直接搜索
onSeachAction(val) { onSeachAction(val) {
const params = {} const params = {
if (!this.history) { keyword: val,
// todo api arrOne: this.arrOne,
arrTwo: this.arrTwo
} }
this.$emit('search', val) this.$emit('search', params)
}, },
// 重置 // 重置
handleReset() { handleReset() {
......
src/views/regIssue/search.vue
...@@ -14,10 +14,20 @@ export default { ...@@ -14,10 +14,20 @@ export default {
mounted() { mounted() {
}, },
methods: { methods: {
jumpResultPage(val) { jumpResultPage(params) {
const { keyword } = params
if (!keyword) {
Toast('搜索内容不能为空')
return
}
this.$router.push({ this.$router.push({
name: 'RegIssueSearchResult', name: 'RegIssueSearchResult',
query: {
keyword
}
}) })
} }
} }
} }
......
src/views/regIssue/searchResult.vue
<template> <template>
<RegIssueLayout :history="false"> <RegIssueLayout :history="false" :defKeyword="keyword" @search="handleSearch">
<RegIssueList /> <RegIssueList />
</RegIssueLayout> </RegIssueLayout>
</template> </template>
...@@ -14,13 +14,33 @@ export default { ...@@ -14,13 +14,33 @@ export default {
}, },
data() { data() {
return { return {
keyword: ''
} }
}, },
mounted() { mounted() {
const { keyword } = this.$route.query;
this.keyword = keyword
const params = {
keyword
}
this.handleRequest(params)
}, },
methods: { methods: {
handleRequest(params) {
this.$store.dispatch('regIssue/ARequestRegIssueList', params)
},
handleSearch(val) {
if (!val) {
Toast('搜索内容不能为空')
return
}
// todo
const params = {
keyword: val,
}
this.handleRequest(params)
}
} }
} }
</script> </script>
......
yarn.lock deleted 100644 → 0
This diff could not be displayed because it is too large.
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!