Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit c31aae8b by lixin
Options

资质查询相关

1 parent 937cc188
Inline Side-by-side
Showing 6 changed files with 269 additions and 5 deletions
src/router/modules/qualification.js
...@@ -4,7 +4,21 @@ const qulificationRouter = [{ ...@@ -4,7 +4,21 @@ const qulificationRouter = [{
meta: { meta: {
title: '资质查询' title: '资质查询'
}, },
component: () => import( /* webpackChunkName: "QulificationSearch" */ '@/views/qulification/search.vue') // 资质查询 component: () => import( /* webpackChunkName: "qulificationSearch" */ '@/views/qulification/search.vue') // 资质查询
}, {
path: '/qulification/list',
name: 'QulificationList',
meta: {
title: '资质查询'
},
component: () => import( /* webpackChunkName: "qulificationList" */ '@/views/qulification/list.vue') // 业内搜索结果
}, {
path: '/qulification/detail',
name: 'QulificationDetail',
meta: {
title: '资质查询'
},
component: () => import( /* webpackChunkName: "qulificationDetail" */ '@/views/qulification/detail.vue') // 资质详情
}] }]
export default qulificationRouter export default qulificationRouter
src/utils/vant-ui.js
...@@ -17,7 +17,9 @@ import { ...@@ -17,7 +17,9 @@ import {
Button, Button,
Step, Step,
Steps, Steps,
Checkbox Checkbox,
Picker,
Popup
} from 'vant' } from 'vant'
import NafmHeader from '@/components/NafmHeader' import NafmHeader from '@/components/NafmHeader'
...@@ -27,7 +29,7 @@ import FooterBottom from '@/components/FooterBottom' ...@@ -27,7 +29,7 @@ import FooterBottom from '@/components/FooterBottom'
[NafmHeader, FooterBottom].forEach(item => Vue.component(item.name, item)); [NafmHeader, FooterBottom].forEach(item => Vue.component(item.name, item));
// 默认vant组件 // 默认vant组件
[Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Form, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button, Step, Steps, Checkbox].forEach(item => Vue.use(item)) [Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Form, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button, Step, Steps, Checkbox, Picker, Popup].forEach(item => Vue.use(item))
// 先预制，后期做统一调整 // 先预制，后期做统一调整
Object.assign(window, { Object.assign(window, {
......
src/views/qulification/detail.vue 0 → 100644
<template>
<div>
<NafmHeader title="资质查询" />
<section class="detail_content">
<van-cell-group class="">
<van-cell>
<span slot="title" class="detail_title">{{qulificationDetail.name}}</span>
<span class="org_type">机构类型：{{qulificationDetail.orgType}}</span>
</van-cell>
<van-cell>
<span slot="title" class="label">是否会员</span>
<span class="org_type">是</span>
</van-cell>
<van-cell>
<span slot="title" class="label">会籍类别</span>
<span class="org_type">{{qulificationDetail.memberType}}</span>
</van-cell>
<van-cell>
<span slot="title" class="label">主承销商类型</span>
<span class="org_type">{{qulificationDetail.memberType}}</span>
</van-cell>
<van-cell>
<span slot="title" class="label">做市商</span>
<span class="org_type">{{qulificationDetail.memberType}}</span>
</van-cell>
<van-cell>
<span slot="title" class="label">信用风险缓释工具</span>
<span class="org_type">{{qulificationDetail.memberType}}</span>
</van-cell>
<van-cell>
<span slot="title" class="label">已签署备案主协议</span>
<span class="org_type">{{qulificationDetail.memberType}}</span>
</van-cell>
</van-cell-group>
</section>
</div>
</template>
<script>
export default {
data() {
return {
qulificationDetail: {
name: '中国银行诏安支行',
orgType: 'XXXX',
isMember: true,
memberType: '投资人',
}
}
}
}
</script>
<style lang="less" scoped>
</style>
src/views/qulification/list.vue 0 → 100644
<template>
<div>
<NafmHeader title="资质查询" />
<div class="search_bar">
<van-field v-model="searchName" placeholder="请输入机构名称">
<template #label>
<div class="select" :style="searchName && searchName!== '' ? 'opacity: 1' : 'opacity: 0.6'">
<van-icon name="search" />
<span class="qulification_type">{{qulificationType}}</span>
<van-icon name="play" />
</div>
</template>
</van-field>
</div>
<section class="content">
<van-cell-group>
<van-cell v-for="item in searchList" :key="item.id" icon="search">
<template slot="title">
<!-- <van-icon name="search" /> -->
<!-- <span>{{item.name.replace(new RegExp(searchName, 'g'), '<span></span>')}}</span> -->
<span>{{item.name}}</span>
</template>
</van-cell>
</van-cell-group>
</section>
</div>
</template>
<script>
export default {
data() {
return {
searchName: 'aaa',
qulificationType: '机构',
searchList: [{name: 'aaaaaaabbbbb', id: 111}]
}
}
}
</script>
<style lang="less" scoped>
.search_bar {
background: cyan;
padding: 20px;
.van-cell {
border-radius: 50px;
background-color: rgba(255, 255, 255, 0.3);
padding: 0px;
::v-deep .van-field__control {
font-size: 12px;
color: #ffffff;
}
::v-deep input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.6);
}
::v-deep input::-moz-input-placeholder {
color: rgba(255, 255, 255, 0.6);
}
::v-deep input::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.6);
}
}
}
.select {
color: #ffffff;
display: flex;
align-items: center;
padding: 0 10px 0 5px;
font-size: 12px;
.van-icon-search {
margin: 0 11px;
}
.qulification_type {
margin-right: 5px;
}
.van-icon-play {
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-moz-transform: rotate(90deg); /* Firefox */
-webkit-transform: rotate(90deg); /* Safari 和 Chrome */
-o-transform: rotate(90deg);
}
}
</style>
src/views/qulification/search.vue
...@@ -5,14 +5,59 @@ ...@@ -5,14 +5,59 @@
</section> </section>
<h3 class="search_title">会员及市场参与者情况查询</h3> <h3 class="search_title">会员及市场参与者情况查询</h3>
<section class="search_box"> <section class="search_box">
<span class="select" @click="showPicker = true">
<van-icon name="search" />
<span class="qulification_type">{{qulificationType}}</span>
<van-icon name="play" />
</span>
<span class="visual_input">{{'请输入机构名称'}}</span>
</section> </section>
<section class="search_history">
<div class="history_header">
<span>搜索历史</span>
<span class="delete_circle">
<van-icon name="delete" />
</span>
</div>
<div>
<span class="history_item" v-for=" item in historyItems" :key="item.id">{{item.name}}</span>
</div>
</section>
<van-popup v-model="showPicker" round position="bottom">
<van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
</van-popup>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
columns: [
'机构', '非法人产品'
],
qulificationType: '机构',
showPicker: false,
historyItems: [{
name: 'jdnskjfnjkds',
id:11111
}, {
name: 'dksjnjkfdskjnkf',
id: 2222
}, {name: 'jdnskjfnjkds',
id:111112
}, {
name: 'dksjnjkfdskjnkf',
id: 22222
}]
}
},
methods: {
onConfirm(value) {
this.qulificationType = value;
this.showPicker = false;
},
popupShow() {
this.showPicker = false
} }
} }
} }
...@@ -34,8 +79,73 @@ export default { ...@@ -34,8 +79,73 @@ export default {
color: #333333; color: #333333;
text-align: center; text-align: center;
} }
// .search_box { .search_box {
width: 384px;
margin: 30px auto 25px;
padding: 10px 0;
border-radius: 16px;
background-color: rgba(246, 246, 246, 1);
display: flex;
font-size: 12px;
.select {
color: #999999;
display: flex;
align-items: center;
padding: 0 10px 0 5px;
.van-icon-search {
margin: 0 11px;
font-size: 12px;
}
.qulification_type {
color: #333333;
margin-right: 5px;
}
.van-icon-play {
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-moz-transform: rotate(90deg); /* Firefox */
-webkit-transform: rotate(90deg); /* Safari 和 Chrome */
-o-transform: rotate(90deg);
}
}
.visual_input {
// line-height: 33px;
color: #999999;
padding-left: 15px;
border-left: 0.5px solid #999999;
}
}
.search_history {
.history_header {
line-height: 25px;
margin-bottom: 5px;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
.delete_circle {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #f6f6f6;
text-align: center;
line-height: 25px;
// .van-icon-delete {
// align-self: middle;
// } // }
}
}
.history_item {
display: inline-block;
font-size: 12px;
color: #666666;
padding: 6px 20px;
border-radius: 50px;
background-color: #f6f6f6;
margin: 10px 10px 0 0;
}
}
} }
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!