Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 4679de7c by fanx
Options

注册发行页面

1 parent f34f0e5e
Inline Side-by-side
Showing 11 changed files with 243 additions and 398 deletions
src/assets/css/search.less
form {
width: 100%;
}
.common_search { .common_search {
/deep/ &&.van-search { /deep/ &&.van-search {
...@@ -9,24 +12,27 @@ ...@@ -9,24 +12,27 @@
border-radius: 16px; border-radius: 16px;
height: 33px; height: 33px;
} }
/deep/ .van-search__content { /deep/ .van-search__content {
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
border-radius: 16px; border-radius: 16px;
color: #fff; color: #fff;
height: 33px; height: 33px;
} }
/deep/ .van-field__left-icon .van-icon, /deep/ .van-field__left-icon .van-icon,
.van-field__right-icon .van-icon { .van-field__right-icon .van-icon {
color: #fff; color: #fff;
} }
/deep/ input::-webkit-input-placeholder { /deep/ input::-webkit-input-placeholder {
color: #fff; color: #fff;
opacity: 0.8; opacity: 0.8;
font-size: 12px; font-size: 12px;
} }
/deep/ .van-field__control { /deep/ .van-field__control {
color: #fff; color: #fff;
// opacity: 0.8;
font-size: 12px; font-size: 12px;
} }
}
\ No newline at end of file \ No newline at end of file
}
\ No newline at end of file \ No newline at end of file
src/components/SearchFirst.vue deleted 100644 → 0
<template>
<div class="search_container" @click="jumpPage">
<van-icon name="search" color="#fff" size="18" class="search_first" />
<span class="text">{{placeholder}}</span>
</div>
</template>
<script>
export default {
name: 'SearchFirst',
props: {
placeholder: {
type: String,
required: true
}
},
methods: {
jumpPage() {
this.$emit('jumpPage')
}
}
}
</script>
<style lang="less" scoped>
.search_container {
width: 384px;
margin: 10px auto;
display: flex;
height: 33px;
align-items: center;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
border-radius: 16px;
.search_first {
opacity: 1;
margin-left: 10px;
margin-right: 5px;
}
.text {
color: #fff;
opacity: 0.8;
font-size: 12px;
}
}
</style>
\ No newline at end of file \ No newline at end of file
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" @click="jumItem(item)">{{item}}</li> <li v-for="(item,index) in historys" :key="index" @jump="jumItem(item)">{{item}}</li>
</ul> </ul>
</div> </div>
<div class="noData" v-else> <div class="noData" v-else>
......
src/components/SearchInput.vue
...@@ -20,9 +20,11 @@ export default { ...@@ -20,9 +20,11 @@ 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/store/index.js
...@@ -10,7 +10,7 @@ import search from './modules/search' ...@@ -10,7 +10,7 @@ import search from './modules/search'
// vuex 数据存储 进行本地存储操作 // vuex 数据存储 进行本地存储操作
const vuexLocal = new VuexPersistence({ const vuexLocal = new VuexPersistence({
storage: window.localStorage, storage: window.localStorage,
modules: ["user"] modules: ["user","search"]
}) })
Vue.use(Vuex) Vue.use(Vuex)
......
src/store/modules/search.js
const Types = { const Types = {
Home: { size: 10 } Home: { size: 10 },
RegIssue: { size: 10 }
} }
export default { export default {
namespaced: true, namespaced: true,
state: { state: {
Home: [] Home: [],
RegIssue: []
}, },
mutations: { mutations: {
MSetHistoryDatas (state, { key, datas }) { MSetHistoryDatas(state, { key, datas }) {
state[key] = datas state[key] = datas
}, },
MSetHomeHistory (state, datas) { MSetHomeHistory(state, datas) {
state.Home = datas state.Home = datas
}, },
MCleanHistory (state, stateKey) { MSetRegIssueHistory(state, datas) {
state.RegIssue = datas
},
MCleanHistory(state, stateKey) {
state[stateKey] = [] state[stateKey] = []
} }
}, },
actions: { actions: {
ACleanHistory ({ commit }, stateKey) { ACleanHistory({ commit }, stateKey) {
commit('MCleanHistory', stateKey) commit('MCleanHistory', stateKey)
}, },
APushSearchValue ({ state, commit }, param = {}) { APushSearchValue({ state, commit }, param = {}) {
const { stateKey, value } = param const { stateKey, value } = param
if (Object.hasOwnProperty.call(Types, stateKey)) { if (Object.hasOwnProperty.call(Types, stateKey)) {
const newDatas = pushSearchValue(state[stateKey], value, Types[stateKey].size) const newDatas = pushSearchValue(state[stateKey], value, Types[stateKey].size)
...@@ -35,22 +41,29 @@ export default { ...@@ -35,22 +41,29 @@ export default {
} }
}, },
APushHomeSearchValue ({ state, commit }, val) { APushHomeSearchValue({ state, commit }, val) {
const newDatas = pushSearchValue(state.Home, val, Types.Home.size) const newDatas = pushSearchValue(state.Home, val, Types.Home.size)
commit('MSetHomeHistory', newDatas) commit('MSetHomeHistory', newDatas)
} },
APushRegIssueSearchValue({ state, commit }, val) {
const newDatas = pushSearchValue(state.RegIssue, val, Types.RegIssue.size)
commit('MSetRegIssueHistory', newDatas)
},
}, },
modules: { modules: {
} }
} }
function pushSearchValue (datas, value, size) { function pushSearchValue(datas, value, size) {
const newDatas = [...datas] const newDatas = [...datas]
if (newDatas.indexOf(value) === -1) {
newDatas.unshift(value) newDatas.unshift(value)
if (newDatas.length > size) { if (newDatas.length > size) {
newDatas.pop() newDatas.pop()
} }
}
return newDatas return newDatas
} }
......
src/views/regIssue/components/RegIssueLayout.vue 0 → 100644
<template>
<div class="search-layout">
<nafm-header title="注册发行" navClass="nafmii-head-bg3">
<template #bottom>
<SearchInput v-model="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>
<div class="history-container" v-if="history">
<SearchHistory stateKey="RegIssue" @jumpPage="handleSearch" />
</div>
<slot />
<FilterPopup :checkboxArrOne="checkboxArrOne" :checkboxArrTwo="checkboxArrTwo" v-model="show" @rest="handleReset" @sure="handleSure" />
</div>
</template>
<script>
import SearchInput from '@/components/SearchInput';
import SearchHistory from '@/components/SearchHistory';
import FilterPopup from './FilterPopup';
export default {
name: 'RegIssueLayout',
components: {
SearchInput,
SearchHistory,
FilterPopup
},
props: {
history: Boolean,
defKeyword: String,
readonly: Boolean
},
data() {
return {
keyword: '',
show: false,
checkboxArrOne: [{
label: '待上会',
value: 1
}],
checkboxArrTwo: [{
label: 'SCP',
value: 1
}],
}
},
watch: {
defKeyword(val, old) {
this.keyword = val
},
},
methods: {
//
handleSearch(val) {
console.log('value', val)
this.$store.dispatch('search/APushRegIssueSearchValue', val)
this.onSeachAction()
},
// 确定
handleSure(arrOne, arrTwo) {
console.log('arrOne', arrOne);
console.log('arrTwo', arrTwo);
this.show = false
this.onSeachAction()
},
// input click 跳转 注册发行 首页
jumpSearch() {
this.$emit('jumpSeachPage')
},
// 注册发行搜索 回撤 跳转搜索结果页面 或者 直接搜索
onSeachAction(val) {
const params = {}
if (!this.history) {
// todo api
}
this.$emit('search', val)
},
// 重置
handleReset() {
},
}
}
</script>
<style lang="less" scoped>
.search-layout {
height: 100%;
display: flex;
flex-direction: column;
.history-container {
flex: 1;
}
}
/deep/ .nav_bottom_container {
display: flex;
flex-direction: row;
align-items: center;
.filter {
width: 18px;
height: 21px;
margin-left: 15px;
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/regIssue/components/RegIssueList.vue 0 → 100644
<template>
<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>
</template>
<script>
export default {
name: 'RegIssueList',
data() {
return {
loading: false,
finished: false,
show: false,
list: [
{
title: '南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册报告',
time: '2021-4-12',
type: 'MTN'
},
{
title: '南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册报告',
time: '2021-4-12',
type: 'MTN'
}
],
}
},
methods: {
onLoad() {
this.finished = true
this.loading = false
},
}
}
</script>
<style lang="less" scoped>
.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 \ No newline at end of file
src/views/regIssue/index.vue
<template> <template>
<div class="regIssue_container"> <RegIssueLayout :history="false" :readonly="true" @jumpSeachPage="jumpSeachPage">
<NafmHeader :title="$t('title.regIssue')" navClass="nafmii-head-bg3"> <RegIssueList />
<template #bottom> </RegIssueLayout>
<SearchFirst class="common_search" placeholder="请输入企业名称/注册报告名称/主承销商" @click.native="jumpSearch" :autofocus="true" />
<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> </template>
<script> <script>
import SearchFirst from '@/components/SearchFirst' import RegIssueLayout from './components/RegIssueLayout';
import FilterPopup from './components/FilterPopup'; import RegIssueList from './components/RegIssueList';
export default { export default {
name: 'RegIssue', name: 'RegIssue', // 注册发行首页
components: { components: {
SearchFirst, RegIssueLayout,
FilterPopup RegIssueList
}, },
data() { data() {
return { return {}
loading: false,
finished: false,
show: false,
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
}, {
label: 'SCP2',
value: 3
}, {
label: 'SCP3',
value: 4
}, {
label: 'PB-MTN',
value: 5
}, {
label: 'PB-RB',
value: 6
}, {
label: 'PB-其他',
value: 7
}],
}
}, },
methods: { methods: {
onLoad() { jumpSeachPage() {
this.finished = true
this.loading = false
},
// 重置
handleReset() {
},
// 确定
handleSure(arrOne, arrTwo) {
console.log('arrOne', arrOne);
console.log('arrTwo', arrTwo);
this.show = false
},
jumpSearch() {
this.$router.push({ this.$router.push({
name: 'RegIssueSearch' name: 'RegIssueSearch'
}) })
...@@ -106,51 +24,3 @@ export default { ...@@ -106,51 +24,3 @@ export default {
} }
} }
</script> </script>
\ No newline at end of file \ No newline at end of file
<style lang="less" scoped>
@import "~@/assets/css/search.less";
/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 \ No newline at end of file
src/views/regIssue/search.vue
<template> <template>
<div class="resIssue_search_container"> <RegIssueLayout :history="true" @search="jumpResultPage" />
<NafmHeader title="注册发行" navClass="nafmii-head-bg3">
<template #bottom>
<SearchInput class="common_search" v-model="keyword" placeholder="请输入企业名称/注册报告名称/主承销商" @search="jumpSearchResult" />
</template>
</NafmHeader>
<div class="resIssue_search_content">
<SearchHistory :list="list" @jumpPage="jumpSearchResult" @clear="handleClear" />
</div>
</div>
</template> </template>
<script> <script>
import SearchInput from '@/components/SearchInput.vue' import RegIssueLayout from './components/RegIssueLayout';
import SearchHistory from '@/components/SearchHistory'
import { setLocalStorage, getLocalStorage, removeLocalStorage } from '@/utils/LocalStorage'
export default { export default {
name: 'ResIssueSearch', name: 'ResIssueSearch', // 注册发行搜索页面
components: { components: {
SearchInput, RegIssueLayout
SearchHistory
}, },
data() { data() {
return { return {}
keyword: '',
list: []
}
}, },
mounted() { mounted() {
this.list = getLocalStorage('resIssucessData') || []
}, },
methods: { methods: {
handleSearch(val) { jumpResultPage(val) {
if (this.list.indexOf(val) === -1) {
this.list.unshift(val)
if (this.list.length > 10) {
this.list.pop()
}
setLocalStorage('resIssucessData', this.list)
}
},
jumpSearchResult(val) {
this.handleSearch(val)
this.$router.push({ this.$router.push({
name: 'RegIssueSearchResult', name: 'RegIssueSearchResult',
query: {
keyword: val
}
}) })
},
handleClear() {
this.list = []
removeLocalStorage('resIssucessData')
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.resIssue_search_container{
display: flex;
flex-direction: column;
height: 100%;
}
.resIssue_search_content{
flex: 1;
}
</style> </style>
\ No newline at end of file \ No newline at end of file
src/views/regIssue/searchResult.vue
<template> <template>
<div class="regIssue_container"> <RegIssueLayout :history="false">
<NafmHeader title="注册发行" navClass="nafmii-head-bg3"> <RegIssueList />
<template #bottom> </RegIssueLayout>
<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> </template>
<script> <script>
import SearchInput from '@/components/SearchInput.vue' import RegIssueLayout from './components/RegIssueLayout';
import FilterPopup from './components/FilterPopup'; import RegIssueList from './components/RegIssueList';
import { setLocalStorage, getLocalStorage } from '@/utils/LocalStorage'
export default { export default {
name: 'ResIssueSearch', name: 'ResIssueSearch', // 注册发行 搜索结果页面
components: { components: {
SearchInput, RegIssueLayout,
FilterPopup RegIssueList
}, },
data() { data() {
return { 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() { mounted() {
// 获取本地搜索历史记录
this.historyList = getLocalStorage('resIssucessData') || []
// 获取 搜索关键字
const { keyword } = this.$route.query;
console.log('keyword',keyword);
this.keyword = keyword
}, },
methods: { 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> </script>
<style lang="less" scoped> <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> </style>
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!