Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit b031a6ba by 李新
Options

资质查询搜索组件封装

1 parent 1232fb09
Inline Side-by-side
Showing 5 changed files with 192 additions and 136 deletions
src/router/modules/qualification.js
......@@ -4,7 +4,7 @@ const qulificationRouter = [{
meta: {
title: '资质查询'
},
component: () => import( /* webpackChunkName: "qulificationSearch" */ '@/views/qulification/search.vue') // 资质查询
component: () => import( /* webpackChunkName: "qulificationSearch" */ '@/views/qulification/searchHistory.vue') // 资质查询
}, {
path: '/qulification/list',
name: 'QulificationList',
......
src/views/member/memberLogin.vue
......@@ -16,7 +16,7 @@
</template>
</van-field>
<p class="wraning_tip">
<span v-show="isLogin">{{$t('mlogin.warningTip')}}</span>
<span v-show="warningShow">{{$t('mlogin.warningTip')}}</span>
</p>
<div>
<van-button :class="isLogin ? 'login_btn' : 'act_btn login_btn'" block type="info" native-type="submit" @click="loginSubmit">登录</van-button>
......@@ -46,6 +46,9 @@ export default {
computed: {
isLogin() {
return !this.code || this.code === '' || !this.password || this.password === '' || !this.checkCode || this.checkCode === ''
},
warningShow() {
return !(this.code || this.password || this.checkCode)
}
},
methods: {
......@@ -84,7 +87,7 @@ export default {
align-items: center;
justify-content: center;
.login_form {
width: 330px;
width: 340px;
padding: 20px 0;
background-color: #ffffff;
::v-deep .van-cell:not(:last-child)::after {
......@@ -113,6 +116,7 @@ export default {
}
.wraning_tip {
min-height: 17px;
line-height: 17px;
color: #ea5c6d;
font-size: 12px;
margin-top: 16px;
......
src/views/qulification/components/search.vue 0 → 100644
<template>
<div class="qulification_search_container">
<div v-if="isSearch" class="search_bar">
<van-field v-model="searchName" :placeholder="placeholdTxt" @input="inputChange">
<template #label>
<div class="select" :style="searchName && searchName!== '' ? 'opacity: 1' : 'opacity: 0.6'" @click="showSheet = true">
<van-icon name="search" />
<span class="qulification_type">{{qulificationType}}</span>
<van-icon name="play" />
</div>
</template>
</van-field>
</div>
<section v-else class="search_box">
<span class="select" @click="showSheet = true">
<van-icon name="search" />
<span class="qulification_type">{{qulificationType}}</span>
<van-icon name="play" />
</span>
<div class="visual_input" @click="toListSearch">
<span>{{placeholdTxt}}</span>
</div>
</section>
<van-action-sheet v-model="showSheet" :actions="actions" :cancel-text="$t('button.cancel')" close-on-click-action @select="onSelect" />
</div>
</template>
<script>
export default {
name: 'QulificationSearch',
props: {
isSearch: {
type: Boolean,
default: () => {
return false
}
}
},
computed: {
actions() {
return [this.$t('qulification.searchAction').org, this.$t('qulification.searchAction').product ]
}
},
data() {
return {
qulificationType: '',
placeholdTxt: '',
showSheet: false,
searchName: ''
}
},
created() {
this.defaultInput()
},
methods: {
defaultInput() {
this.qulificationType = this.$t('qulification.searchAction').org.name
this.placeholdTxt = this.$t('qulification.searchAction').org.placeholder
},
onSelect(item) {
this.show = false;
this.qulificationType = item.name;
this.placeholdTxt = this.$t('qulification.searchAction')[item.key].placeholder
this.$emit('select', item)
},
toListSearch() {
this.$router.push({name: 'QulificationList'})
},
inputChange() {
this.$emit('input', this.searchName)
}
}
}
</script>
<style lang="less" scoped>
.search_box {
width: 384px;
margin: 30px auto 25px;
border-radius: 16px;
background-color: rgba(246, 246, 246, 1);
display: flex;
font-size: 12px;
.select {
color: #999999;
display: flex;
align-items: center;
padding: 10px 10px 10px 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 {
// width: 285px;
color: #999999;
padding: 10px 0;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
span {
padding-left: 15px;
border-left: 0.5px solid #999999;
}
}
}
.search_bar {
width: 384px;
padding: 10px 15px;
.van-cell {
border-radius: 50px;
background-color: rgba(255, 255, 255, 0.3);
padding: 5px;
line-height: 17px;
::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);
}
}
::v-deep .van-field__label {
width: auto;
}
.select {
color: #ffffff;
padding: 0 10px 0 5px;
font-size: 12px;
border-right: 0.5px solid #ffffff;
.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/list.vue
......@@ -2,17 +2,7 @@
<div class="list_container">
<NafmHeader navClass="nafmii-head-bg3" title="资质查询">
<template slot="bottom">
<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>
<search :isSearch="true" v-model="searchName"></search>
</template>
</NafmHeader>
<main class="list_content">
......@@ -20,9 +10,7 @@
<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>
<span v-html="highligntTxt(item.name)"></span>
</template>
</van-cell>
</van-cell-group>
......@@ -33,57 +21,20 @@
<script>
export default {
name: 'QulificationList',
components: {
search: ()=>import('./components/search.vue')
},
data() {
return {
searchName: 'aaa',
searchName: '',
qulificationType: '机构',
searchList: [{name: 'aaaaaaabbbbb', id: 111}]
}
}
}
</script>
<style lang="less" scoped>
.search_bar {
width: 384px;
padding: 10px 15px;
.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);
searchList: []
}
::v-deep input::-moz-input-placeholder {
color: rgba(255, 255, 255, 0.6);
},
methods: {
highligntTxt(txt) {
return txt.replace(this.searchName, `<font color='#2861AC'>${this.searchName}</font>`)
}
::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>
</script>
src/views/qulification/search.vue → src/views/qulification/searchHistory.vue
......@@ -5,16 +5,7 @@
<section class="logo">
</section>
<h3 class="search_title">{{$t('qulification.title')}}</h3>
<section class="search_box">
<span class="select" @click="showSheet = true">
<van-icon name="search" />
<span class="qulification_type">{{qulificationType}}</span>
<van-icon name="play" />
</span>
<div class="visual_input" @click="toListSearch">
<span>{{placeholdTxt}}</span>
</div>
</section>
<search @select="searchSelect"></search>
<section class="search_history">
<div class="history_header">
<span>{{$t('qulification.history')}}</span>
......@@ -27,26 +18,16 @@
</div>
</section>
</main>
<van-action-sheet v-model="showSheet" :actions="actions" :cancel-text="$t('button.cancel')" close-on-click-action @select="onSelect" />
</div>
</template>
<script>
export default {
name: 'QulificationSearch',
computed: {
actions() {
return [this.$t('qulification.searchAction').org, this.$t('qulification.searchAction').product ]
}
components: {
search: ()=>import('./components/search.vue')
},
data() {
return {
// actions: [
// {name:'机构', type: 'org' },
// {name:'非法人产品', type: 'pro'}
// ],
qulificationType: '',
placeholdTxt: '',
showSheet: false,
historyItems: [{
name: 'jdnskjfnjkds',
id:11111
......@@ -62,23 +43,18 @@ export default {
}
},
created() {
this.defaultInput()
this.searchSelect()
},
methods: {
defaultInput() {
this.qulificationType = this.$t('qulification.searchAction').org.name
this.placeholdTxt = this.$t('qulification.searchAction').org.placeholder
},
onSelect(item) {
this.show = false;
this.qulificationType = item.name;
this.placeholdTxt = this.$t('qulification.searchAction')[item.key].placeholder
},
toListSearch() {
this.$router.push({name: 'QulificationList'})
},
toDetail() {
this.$router.push({name: 'QulificationDetail'})
},
searchSelect(seachType) {
}
}
}
......@@ -101,47 +77,6 @@ export default {
color: #333333;
text-align: center;
}
.search_box {
width: 384px;
margin: 30px auto 25px;
border-radius: 16px;
background-color: rgba(246, 246, 246, 1);
display: flex;
font-size: 12px;
.select {
color: #999999;
display: flex;
align-items: center;
padding: 10px 10px 10px 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 {
// width: 285px;
color: #999999;
padding: 10px 0;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
span {
padding-left: 15px;
border-left: 0.5px solid #999999;
}
}
}
.search_history {
.history_header {
line-height: 25px;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!