搜索优化

hdApp/src/admin/custom/addCustom.vue

@@ -15,7 +15,7 @@
           <input v-model="form.confirmMobile1" type="number" placeholder-class="phcolor" placeholder-style="color:#CCCCCC" class="tui-input" name="confirmMobile1" placeholder="客户手机号" />
         </tui-list-cell>
       </view>
-      <view class="app-footer">
+      <view>
         <div class="btn-wrap">
           <button class="admin-button-com blue big" formType="submit">确认</button>
         </div>

hdApp/src/admin/home/member.vue

@@ -2,12 +2,11 @@
   <view class="app-main app-content">
 
     <view class="input-wrap_box">
-      <view>
-        <AppSearchModule placeholder="这里搜索" @input="searchFn"/>
+      <button class="admin-button-com middle blue" @click="changeSearchStyle()">{{ searchStyle==0?'尾号':'名称' }}</button>
+      <view class="search-container">
+        <AppSearchModule placeholder="这里搜索" v-model="searchText" @input="searchFn"/>
       </view>
-      <view style="padding:0 0upx 0 10upx;" >
-				<button class="admin-button-com middle blue" @click="addCustom()">添加客户</button>
-			</view>
+      <button class="admin-button-com middle blue" @click="addCustom()">添加客户</button>
     </view>
     <view class="app-tabs">
       <app-tabs :tabs="tabs" :isFixed="false" :top="50" :currentTab="tabIndex" :height="100" @change="change" itemWidth="25%" :isAdd="false" />
@@ -117,7 +116,9 @@ export default {
           type:3
         }
       ],
-      customType:0
+      customType:0,
+      searchStyle:0,
+      searchText:''
     };
   },
   onPullDownRefresh() {
@@ -138,6 +139,12 @@ export default {
   onLoad() {
   },
   methods: {
+    changeSearchStyle(){
+      this.searchStyle = this.searchStyle == 0 ? 1 : 0
+      this.searchText = ''
+      this.resetList()
+      this.getMyCustomList()
+    },
     change(e) {
       if (this.tabIndex == e.index) {
         return false;
@@ -148,24 +155,18 @@ export default {
       this.resetList();
       this.getMyCustomList();
     },
-    invite(){
-      this.$msg('开发中')
-      return false
-      this.pageTo({url: '/admin/cg/member'})
-    },
     addCustom(){
       this.pageTo({url: '/admin/custom/addCustom'})
     },
     init() {
       this.getMyCustomList()      
     },
-    searchFn(e) {
+    searchFn() {
       this.resetList();
-      this.seekVal = e;
       this.getMyCustomList()
     },
     getMyCustomList() {
-      return getList({ search:"", page:this.list.page,type:this.customType,name: this.seekVal }).then(res => {
+      return getList({page:this.list.page,type:this.customType,searchText:this.searchText,searchStyle:this.searchStyle }).then(res => {
         if(res.code == 1){
           this.completes(res)
         }
@@ -214,9 +215,19 @@ export default {
   height: 100upx;
   display: flex;
   align-items: center;
-  padding: 0 10upx;
-  & > view:nth-child(1) {
+  padding: 0 20upx;
+  gap: 20upx;
+  
+  .admin-button-com {
+    flex-shrink: 0;
+    min-width: 120upx;
+  }
+  
+  .search-container {
     flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
   }
 }
 

hdPad/src/pages/home/components/customList.vue

@@ -10,13 +10,8 @@
 
         <view class="search-container">
             <view class="search-box">
-                <input 
-                    type="text" 
-                    v-model="searchKeyword" 
-                    placeholder="客户名称或手机尾号" 
-                    class="search-input" 
-                    @input="handleSearch"
-                />
+                <text class="search-style" @click="changeSearchStyle()">{{ searchStyle == 0 ? '尾号' : '名称' }}</text>
+                <input type="text" v-model="searchText" placeholder="客户名称或手机尾号" class="search-input" @input="handleSearch" @focus="clearSearch()" />
                 <text class="clear-btn" @tap="clearSearch">清空</text>
             </view>
             <view class="number-keyboard">
@@ -95,14 +90,21 @@ export default {
             type:0,
             selCustomId:0,
             sn:'',
-            searchKeyword: '',
+            searchText: '',
             searchTimer: null,
+            searchStyle:0
         }
     },
     created(){
         this.getCustomData()
     },
     methods:{
+        changeSearchStyle(){
+            this.searchStyle = this.searchStyle == 0 ? 1 : 0
+            this.searchText = ''
+            this.resetList()
+            this.getCustomData()
+        },
         refreshList(){
             this.resetList()
             this.getCustomData()
@@ -121,7 +123,6 @@ export default {
                 clearTimeout(this.searchTimer)
                 this.searchTimer = null
             }
-            
             this.resetList()
             this.getCustomData()
         },
@@ -131,14 +132,13 @@ export default {
                 clearTimeout(this.searchTimer)
                 this.searchTimer = null
             }
-            
-            this.searchKeyword = ''
+            this.searchText = ''
             this.resetList()
             this.getCustomData()
         },
         appendNumber(num) {
             this.$util.hitVoice()
-            this.searchKeyword += num.toString()
+            this.searchText += num.toString()
             // 清除之前的定时器
             if (this.searchTimer) {
                 clearTimeout(this.searchTimer)
@@ -158,10 +158,7 @@ export default {
             }
         },
         getCustomData(){
-            let params = {page:this.list.page,pageSize:20,type:this.type}
-            if (this.searchKeyword) {
-                params.keyword = this.searchKeyword
-            }
+            let params = {page:this.list.page,pageSize:20,type:this.type,searchStyle:this.searchStyle,searchText:this.searchText}
             return getCustomList(params).then(res=>{
                 if(res.code == 1){
                     this.completes(res)
@@ -219,7 +216,15 @@ export default {
             background-color: #f5f5f5;
             border-radius: 5upx;
             margin-bottom: 5upx;
-            
+            .search-style{
+                width: 18%;
+                height: 30upx;
+                line-height: 30upx;
+                text-align: center;
+                background-color: #fff;
+                border-radius: 3upx;
+                font-size: 12upx;
+            }
             .search-input {
                 flex: 1;
                 height: 30upx;