资质查询搜索组件封装

src/router/modules/qualification.js

@@ -4,7 +4,7 @@ const qulificationRouter = [{
   meta: {
   meta: {
     title: '资质查询'
     title: '资质查询'
   },
   },
-  component: () => import( /* webpackChunkName: "qulificationSearch" */ '@/views/qulification/search.vue') // 资质查询
+  component: () => import( /* webpackChunkName: "qulificationSearch" */ '@/views/qulification/searchHistory.vue') // 资质查询
 }, {
 }, {
   path: '/qulification/list',
   path: '/qulification/list',
   name: 'QulificationList',
   name: 'QulificationList',

src/views/member/memberLogin.vue

@@ -16,7 +16,7 @@
           </template>
           </template>
         </van-field>
         </van-field>
         <p class="wraning_tip">
         <p class="wraning_tip">
-          <span v-show="isLogin">{{$t('mlogin.warningTip')}}</span>
+          <span v-show="warningShow">{{$t('mlogin.warningTip')}}</span>
         </p>
         </p>
         <div>
         <div>
           <van-button :class="isLogin ? 'login_btn' : 'act_btn login_btn'" block type="info" native-type="submit" @click="loginSubmit">登录</van-button>
           <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: {
   computed: {
     isLogin() {
     isLogin() {
       return !this.code || this.code === '' || !this.password || this.password === '' || !this.checkCode || this.checkCode === ''
       return !this.code || this.code === '' || !this.password || this.password === '' || !this.checkCode || this.checkCode === ''
+    },
+    warningShow() {
+      return !(this.code || this.password || this.checkCode)
     }
     }
   },
   },
   methods: {
   methods: {
@@ -84,7 +87,7 @@ export default {
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     .login_form {
     .login_form {
-      width: 330px;
+      width: 340px;
       padding: 20px 0;
       padding: 20px 0;
       background-color: #ffffff;
       background-color: #ffffff;
       ::v-deep .van-cell:not(:last-child)::after {
       ::v-deep .van-cell:not(:last-child)::after {
@@ -113,6 +116,7 @@ export default {
       }
       }
       .wraning_tip {
       .wraning_tip {
         min-height: 17px;
         min-height: 17px;
+        line-height: 17px;
         color: #ea5c6d;
         color: #ea5c6d;
         font-size: 12px;
         font-size: 12px;
         margin-top: 16px;
         margin-top: 16px;

src/views/qulification/components/search.vue

+<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">
   <div class="list_container">
     <NafmHeader navClass="nafmii-head-bg3" title="资质查询">
     <NafmHeader navClass="nafmii-head-bg3" title="资质查询">
       <template slot="bottom">
       <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>
       </template>
     </NafmHeader>
     </NafmHeader>
     <main class="list_content">
     <main class="list_content">
@@ -20,9 +10,7 @@
         <van-cell-group>
         <van-cell-group>
           <van-cell v-for="item in searchList" :key="item.id" icon="search">
           <van-cell v-for="item in searchList" :key="item.id" icon="search">
             <template slot="title">
             <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>
             </template>
           </van-cell>
           </van-cell>
         </van-cell-group>
         </van-cell-group>
@@ -33,57 +21,20 @@
 <script>
 <script>
 export default {
 export default {
   name: 'QulificationList',
   name: 'QulificationList',
+  components: {
+    search: ()=>import('./components/search.vue')
+  },
   data() {
   data() {
     return {
     return {
-      searchName: 'aaa',
+      searchName: '',
       qulificationType: '机构',
       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;
+      searchList: []
     }
     }
-    ::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);
+  },
+  methods: {
+    highligntTxt(txt) {
+      return txt.replace(this.searchName, `<font color='#2861AC'>${this.searchName}</font>`)
     }
     }
   }
   }
 }
 }
-.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 class="logo">
       </section>
       </section>
       <h3 class="search_title">{{$t('qulification.title')}}</h3>
       <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">
       <section class="search_history">
         <div class="history_header">
         <div class="history_header">
           <span>{{$t('qulification.history')}}</span>
           <span>{{$t('qulification.history')}}</span>
@@ -27,26 +18,16 @@
         </div>
         </div>
       </section>
       </section>
     </main>
     </main>
-    <van-action-sheet v-model="showSheet" :actions="actions" :cancel-text="$t('button.cancel')" close-on-click-action @select="onSelect" />
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
 export default {
 export default {
   name: 'QulificationSearch',
   name: 'QulificationSearch',
-  computed: {
-    actions() {
-      return [this.$t('qulification.searchAction').org, this.$t('qulification.searchAction').product ]
-    }
+  components: {
+    search: ()=>import('./components/search.vue')
   },
   },
   data() {
   data() {
     return {
     return {
-      // actions: [
-      //   {name:'机构', type: 'org' },
-      //   {name:'非法人产品', type: 'pro'}
-      // ],
-      qulificationType: '',
-      placeholdTxt: '',
-      showSheet: false,
       historyItems: [{
       historyItems: [{
         name: 'jdnskjfnjkds',
         name: 'jdnskjfnjkds',
         id:11111
         id:11111
@@ -62,23 +43,18 @@ export default {
     }
     }
   },
   },
   created() {
   created() {
-    this.defaultInput()
+    this.searchSelect()
   },
   },
   methods: {
   methods: {
     defaultInput() {
     defaultInput() {
       this.qulificationType = this.$t('qulification.searchAction').org.name
       this.qulificationType = this.$t('qulification.searchAction').org.name
       this.placeholdTxt = this.$t('qulification.searchAction').org.placeholder
       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() {
     toDetail() {
       this.$router.push({name: 'QulificationDetail'})
       this.$router.push({name: 'QulificationDetail'})
+    },
+    searchSelect(seachType) {
+
     }
     }
   }
   }
 }
 }
@@ -101,47 +77,6 @@ export default {
     color: #333333;
     color: #333333;
     text-align: center;
     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 {
   .search_history {
     .history_header {
     .history_header {
       line-height: 25px;
       line-height: 25px;