Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 1e35f5ca by fanx
Options

注册发行搜索页面制作

1 parent 843d13a6
Inline Side-by-side
Showing 11 changed files with 298 additions and 140 deletions
src/assets/css/sprite.less
......@@ -5,37 +5,38 @@
.icon-bg-member-result { width: 1212px; height: 717px; background-position: 0px 0px; }
.icon-bg-member { width: 828px; height: 406px; background-position: -2080px -432px; }
.icon-bg-mine { width: 828px; height: 340px; background-position: -2080px -1238px; }
.icon-center-about { width: 36px; height: 36px; background-position: -2453px -1598px; }
.icon-center-collect { width: 36px; height: 36px; background-position: -2509px -1598px; }
.icon-center-feedback { width: 36px; height: 36px; background-position: -2565px -1598px; }
.icon-center-message { width: 36px; height: 36px; background-position: -2621px -1598px; }
.icon-center-question { width: 36px; height: 36px; background-position: -2677px -1598px; }
.icon-center-setting { width: 36px; height: 36px; background-position: -2733px -1598px; }
.icon-center-study { width: 36px; height: 36px; background-position: -2789px -1598px; }
.icon-center-about { width: 36px; height: 36px; background-position: -2523px -1598px; }
.icon-center-collect { width: 36px; height: 36px; background-position: -2579px -1598px; }
.icon-center-feedback { width: 36px; height: 36px; background-position: -2635px -1598px; }
.icon-center-message { width: 36px; height: 36px; background-position: -2691px -1598px; }
.icon-center-question { width: 36px; height: 36px; background-position: -2747px -1598px; }
.icon-center-setting { width: 36px; height: 36px; background-position: -2803px -1598px; }
.icon-center-study { width: 36px; height: 36px; background-position: -2859px -1598px; }
.icon-change-member { width: 90px; height: 90px; background-position: -1514px -526px; }
.icon-change-membership { width: 1155px; height: 303px; background-position: 0px -737px; }
.icon-change-name { width: 1155px; height: 303px; background-position: 0px -1060px; }
.icon-change-representive { width: 1155px; height: 303px; background-position: 0px -1383px; }
.icon-email { width: 36px; height: 36px; background-position: -2845px -1598px; }
.icon-empty { width: 36px; height: 36px; background-position: -1910px -526px; }
.icon-filter { width: 44px; height: 50px; background-position: -2324px -1598px; }
.icon-icon-arrow-right { width: 10px; height: 18px; background-position: -1552px -670px; }
.icon-icon-classify { width: 30px; height: 30px; background-position: -1452px -670px; }
.icon-icon-clock { width: 30px; height: 30px; background-position: -1502px -670px; }
.icon-email { width: 36px; height: 36px; background-position: -1910px -526px; }
.icon-empty { width: 36px; height: 36px; background-position: -1966px -526px; }
.icon-filter { width: 44px; height: 50px; background-position: -2394px -1598px; }
.icon-icon-arrow-right { width: 10px; height: 18px; background-position: -1608px -670px; }
.icon-icon-classify { width: 30px; height: 30px; background-position: -1508px -670px; }
.icon-icon-clock { width: 30px; height: 30px; background-position: -1558px -670px; }
.icon-join-member { width: 90px; height: 90px; background-position: -1624px -526px; }
.icon-logo-2 { width: 118px; height: 112px; background-position: -1376px -526px; }
.icon-logo { width: 224px; height: 224px; background-position: -1175px -737px; }
.icon-message { width: 50px; height: 50px; background-position: -2254px -1598px; }
.icon-more { width: 10px; height: 18px; background-position: -1582px -670px; }
.icon-password { width: 36px; height: 36px; background-position: -1966px -526px; }
.icon-more { width: 10px; height: 18px; background-position: -1638px -670px; }
.icon-password { width: 36px; height: 36px; background-position: -2022px -526px; }
.icon-pdf { width: 46px; height: 60px; background-position: -1844px -526px; }
.icon-photo-default { width: 124px; height: 124px; background-position: -1232px -526px; }
.icon-question-icon { width: 36px; height: 36px; background-position: -2022px -526px; }
.icon-question-icon { width: 36px; height: 36px; background-position: -1232px -670px; }
.icon-quit-member { width: 90px; height: 90px; background-position: -1734px -526px; }
.icon-shtyxydm { width: 54px; height: 54px; background-position: -2180px -1598px; }
.icon-tel { width: 36px; height: 36px; background-position: -1232px -670px; }
.icon-time-update { width: 45px; height: 45px; background-position: -2388px -1598px; }
.icon-user-question { width: 32px; height: 36px; background-position: -1400px -670px; }
.icon-user { width: 36px; height: 36px; background-position: -1288px -670px; }
.icon-verification { width: 36px; height: 36px; background-position: -1344px -670px; }
.icon-tel { width: 36px; height: 36px; background-position: -1288px -670px; }
.icon-time-update { width: 45px; height: 45px; background-position: -2458px -1598px; }
.icon-user-question { width: 32px; height: 36px; background-position: -1456px -670px; }
.icon-user { width: 36px; height: 36px; background-position: -1344px -670px; }
.icon-verification { width: 36px; height: 36px; background-position: -1400px -670px; }
.icon-wechat { width: 80px; height: 78px; background-position: -2080px -1598px; }
.icon-trash { width: 50px; height: 50px; background-position: -2324px -1598px; }
\ No newline at end of file
src/assets/images/sprite.png
src/assets/images/sprite.png

1.47 MB | W: | H:

src/assets/images/sprite.png

1.48 MB | W: | H:

src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Popup.vue 0 → 100644
<template>
<van-popup :value="value" @input="val=>this.$emit('input',val)" position="right" :style="{ height: '100%',width: '85%' }">
<div class="filter_container">
<div :style="{paddingTop: GStatusBarHeight+'px',height: '85vh',overflowY:'scroll'}">
<slot />
</div>
<div class="button">
<div class="btn reset" @click="handleReset">重置</div>
<div class="btn sure" @click="handleSure">确定</div>
</div>
</div>
</van-popup>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: 'Popup',
props: {
value: Boolean,
},
computed: {
...mapGetters('common', ['GStatusBarHeight']),
},
methods: {
handleReset() {
this.$emit('reset')
},
handleSure() {
this.$emit('sure')
}
}
}
</script>
<style lang="less" scoped>
.filter_container {
display: flex;
flex-direction: column;
padding: 50px 15px;
height: 100%;
}
.button {
display: flex;
align-items: flex-end;
flex: 1;
justify-content: space-between;
.btn {
width: 43%;
display: flex;
justify-content: center;
align-items: center;
height: 45px;
font-size: 15px;
border-radius: 5px;
}
.reset {
background-color: #f6f6f6;
color: #666;
}
.sure {
background-image: linear-gradient(to right, #25a3df, #106abc);
color: #fff;
}
}
</style>
\ No newline at end of file
src/router/modules/regIssue.js
......@@ -8,6 +8,15 @@ const regIssueRouter = [
},
component: () => import(/* webpackChunkName: "regIssue" */ '@/views/regIssue/index.vue') // 注册发行
},
{
path: '/regIssueSearch',
name: 'RegIssueSearch',
meta: {
title: '注册发行',
isLogin: false
},
component: () => import(/* webpackChunkName: "regIssue" */ '@/views/regIssue/search.vue') // 注册发行 搜索页面
},
]
export default regIssueRouter
\ No newline at end of file
src/utils/LocalStorage.js
export function getLocalStorage(key) {
return localStorage.getItem(key)
return JSON.parse(localStorage.getItem(key))
}
export function setLocalStorage(key, value) {
return localStorage.setItem(key, value)
return localStorage.setItem(key, JSON.stringify(value))
}
export function removeLocalStorage(key) {
......
src/views/catalog/data.json
......@@ -101,8 +101,8 @@
"class": "block red"
},
{
"url": "/user/setting",
"title": "设置",
"url": "/regIssue",
"title": "注册发行",
"class": "block red"
}
]
......
src/views/regIssue/components/FilterPopup.vue 0 → 100644
<template>
<Popup :value="value" @input="val=>this.$emit('input',val)" @reset="handleReset" @sure="handleSure">
<h3>项目状态</h3>
<div class="status_list">
<van-checkbox-group v-model="resultOne" class="checkboxGroup" ref="groupOne">
<van-checkbox :name="item.value" class="checkbox_item_common checkbox_item_1" v-for="(item,index) in checkboxArrOne" :key="index">{{item.label}}</van-checkbox>
</van-checkbox-group>
</div>
<h3>品种</h3>
<div class="class_list">
<van-checkbox-group v-model="resultTwo" class="checkboxGroup" ref="groupTwo">
<van-checkbox :name="item.value" class="checkbox_item_common checkbox_item_2" v-for="(item,index) in checkboxArrTwo" :key="index">{{item.label}}</van-checkbox>
</van-checkbox-group>
</div>
</Popup>
</template>
<script>
import Popup from '@/components/Popup'
export default {
name: 'FilterPopup',
components: {
Popup
},
props: {
value: Boolean,
checkboxArrOne: {
type: Array,
default: () => []
},
checkboxArrTwo: {
type: Array,
default: () => []
},
},
data() {
return {
resultOne: [], // 项目状态 选择的结果
resultTwo: [] // 品种 选择的结果
}
},
methods: {
handleReset() {
this.$refs.groupOne.toggleAll(false)
this.$refs.groupTwo.toggleAll(false)
this.$emit('reset')
},
handleSure() {
this.$emit('sure', this.resultOne, this.resultTwo)
}
}
}
</script>
<style lang="less" scoped>
h3 {
display: flex;
height: 57px;
align-items: center;
}
.mtb15 {
margin: 15px 0;
}
.checkboxGroup {
display: flex;
width: 100%;
flex-wrap: wrap;
.checkbox_item_common {
position: relative;
display: flex;
height: 40px;
align-items: center;
justify-content: center;
background-color: #f6f6f6;
margin-right: 10px;
margin-bottom: 10px;
font-size: 12px;
}
.checkbox_item_1 {
width: calc(50% - 5px);
&:nth-child(2n + 2) {
margin-right: 0;
}
}
.checkbox_item_2 {
width: calc(33% - 10px);
&:nth-child(3n + 3) {
margin-right: 0;
}
}
}
/deep/ .van-icon-success {
display: none;
}
/deep/ .van-checkbox__label {
margin-left: 0;
color: #666;
}
/deep/ .van-checkbox__icon .van-icon {
border: 0;
}
/deep/ .van-checkbox__icon--checked {
position: absolute;
background-color: #135faa;
width: 100%;
height: 40px;
}
/deep/ .van-checkbox__icon--checked + .van-checkbox__label {
position: absolute;
color: #fff;
}
</style>
\ No newline at end of file
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="请输入企业名称/注册报告名称/主承销商" />
<SearchFirst class="common_search" placeholder="请输入企业名称/注册报告名称/主承销商" @click.native="jumpSearch" />
<img :src="require('@/assets/icon/filter.png')" class="filter" @click="show=true" />
</template>
</NafmHeader>
......@@ -23,41 +23,23 @@
</div>
</van-list>
</div>
<van-popup v-model="show" position="right" :style="{ height: '100%',width: '85%' }">
<div class="filter_container" v-if="show">
<h3>项目状态</h3>
<div class="status_list mtb15">
<van-checkbox-group v-model="resultOne" class="checkboxGroup" ref="groupOne">
<van-checkbox :name="item.value" class="checkbox_item_common checkbox_item_1" v-for="(item,index) in checkboxArrOne" :key="index">{{item.label}}</van-checkbox>
</van-checkbox-group>
</div>
<h3>品种</h3>
<div class="class_list mtb15">
<van-checkbox-group v-model="resultTwo" class="checkboxGroup" ref="groupTwo">
<van-checkbox :name="item.value" class="checkbox_item_common checkbox_item_2" v-for="(item,index) in checkboxArrTwo" :key="index">{{item.label}}</van-checkbox>
</van-checkbox-group>
</div>
<div class="button">
<div class="btn reset" @click="handleReset">重置</div>
<div class="btn sure" @click="handleSure">确定</div>
</div>
</div>
</van-popup>
<FilterPopup :checkboxArrOne="checkboxArrOne" :checkboxArrTwo="checkboxArrTwo" v-model="show" @rest="handleReset" @sure="handleSure" />
</div>
</template>
<script>
import SearchFirst from '@/components/SearchFirst'
import FilterPopup from './components/FilterPopup';
export default {
name: 'RegIssue',
components: {
SearchFirst
SearchFirst,
FilterPopup
},
data() {
return {
loading: false,
finished: false,
show: true,
show: false,
list: [
{
title: '南京市高淳区城市投资有限公司关于发行2021年度第一期中期票据的注册报告',
......@@ -77,7 +59,6 @@ export default {
label: '完成注册',
value: 2
}],
resultOne: [],
checkboxArrTwo: [{
label: 'SCP',
value: 1
......@@ -100,7 +81,6 @@ export default {
label: 'PB-其他',
value: 7
}],
resultTwo: [],
}
},
methods: {
......@@ -110,14 +90,18 @@ export default {
},
// 重置
handleReset() {
this.$refs.groupOne.toggleAll(false)
this.$refs.groupTwo.toggleAll(false)
},
// 确定
handleSure() {
console.log(this.resultTwo)
console.log(this.resultOne)
handleSure(arrOne, arrTwo) {
console.log('arrOne', arrOne);
console.log('arrTwo', arrTwo);
this.show = false
},
jumpSearch() {
this.$router.push({
name: 'RegIssueSearch'
})
}
}
}
......@@ -169,87 +153,4 @@ export default {
}
}
}
.filter_container {
display: flex;
flex-direction: column;
padding: 50px 15px;
height: 100%;
}
.mtb15 {
margin: 15px 0;
}
.checkboxGroup {
display: flex;
width: 100%;
flex-wrap: wrap;
.checkbox_item_common {
position: relative;
display: flex;
height: 40px;
align-items: center;
justify-content: center;
background-color: #f6f6f6;
margin-right: 10px;
margin-bottom: 10px;
font-size: 12px;
}
.checkbox_item_1 {
width: calc(50% - 5px);
&:nth-child(2n + 2) {
margin-right: 0;
}
}
.checkbox_item_2 {
width: calc(33% - 10px);
&:nth-child(3n + 3) {
margin-right: 0;
}
}
}
/deep/ .van-icon-success {
display: none;
}
/deep/ .van-checkbox__label {
margin-left: 0;
color: #666;
}
/deep/ .van-checkbox__icon .van-icon {
border: 0;
}
/deep/ .van-checkbox__icon--checked {
position: absolute;
background-color: #135faa;
width: 100%;
height: 40px;
}
/deep/ .van-checkbox__icon--checked + .van-checkbox__label {
position: absolute;
color: #fff;
}
.button {
// position: absolute;
bottom: 20px;
display: flex;
align-items: flex-end;
flex: 1;
justify-content: space-between;
.btn {
width: 43%;
display: flex;
justify-content: center;
align-items: center;
height: 45px;
font-size: 15px;
border-radius: 5px;
}
.reset {
background-color: #f6f6f6;
color: #666;
}
.sure {
background-image: linear-gradient(to right, #25a3df, #106abc);
color: #fff;
}
}
</style>
\ No newline at end of file
src/views/regIssue/search.vue 0 → 100644
<template>
<div class="resIssue_search_container">
<NafmHeader title="注册发行" navClass="nafmii-head-bg3">
<template #bottom>
<SearchInput v-model="keyword" placeholder="请输入企业名称/注册报告名称/主承销商" @search="handleSearch" />
</template>
</NafmHeader>
<div class="resIssue_search_content">
<div class="history_title" v-if="list.length">
<span>搜索历史</span>
<img :src="require('@/assets/icon/trash.png')">
</div>
</div>
</div>
</template>
<script>
import SearchInput from '@/components/SearchInput.vue'
import { setLocalStorage, getLocalStorage, removeLocalStorage } from '@/utils/LocalStorage'
export default {
name: 'ResIssueSearch',
components: {
SearchInput
},
data() {
return {
keyword: '',
list: []
}
},
mounted() {
this.list = getLocalStorage('resIssucessData') || []
},
methods: {
handleSearch(val) {
const list = getLocalStorage('resIssucessData') || []
const length = list.legnth
const newList = []
if (list.indexOf(val) === -1) {
list.unshift(val)
if (length >= 10) {
list.pop()
}
newList.push(val)
setLocalStorage('resIssucessData', newList)
this.list = newList
}
}
}
// console.log(val);
}
</script>
<style lang="less" scoped>
.resIssue_search_content {
display: flex;
flex-direction: column;
padding: 20px 15px;
.history_title {
display: flex;
justify-content: space-between;
span {
color: #666;
font-size: 11px;
}
img {
width: 25px;
height: 25px;
}
}
}
</style>
\ No newline at end of file
src/views/user/nationality/index.vue
<template>
<div class="nationality_container">
{{$t('person.nickName')}}
<NafmHeader :title="$t('title.nationality')" navClass="nafmii-head-bg3">
<template #bottom>
<SearchInput v-model="keyword" :placeholder="$t('person.country')" @search="handleSearch" />
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!