优化搜索

pages/im/friends/search.vue

@@ -8,17 +8,17 @@
 
 <template>
     <view class="search">
-        <!-- 搜索 、   -->
+        <!-- 搜索 -->
         <u-sticky>
             <view class="header-search">
                 <u-search placeholder="输入用户账号、手机号" searchIcon="search" @custom="search" v-model="searchValue"
-                    @search="search" bgColor="#f9f9f9" :focus="focused" />
+                    @search="search" bgColor="#F3F6FB" :focus="focused" />
             </view>
         </u-sticky>
         <block v-if="searchResult.length > 0">
             <applyFriend :lists="searchResult" :isApply="true" @action="action" />
         </block>
-        <view class="no-lists" v-else>
+        <view class="no-lists" v-if="searchResult.length === 0 && searchValue.length > 1">
             <u-image class="cover" radius="4" width="400rpx" height="400rpx"
                 :src="require('@/static/imgs/no-search.png')" :lazy-load="true" />
             <span>暂无匹配内容~</span>
@@ -43,6 +43,20 @@
                 focused: true
             };
         },
+        watch: {
+            searchValue(value) {
+                console.log(value.length, 'length...')
+                if (value.length > 1) {
+                    this.searchResult = []
+                    this.search()
+                    return
+                }
+                if(value.length === 0){
+                    this.searchResult = []
+                    return
+                }
+            }
+        },
         methods: {
             search() {
                 // friendship: ''    没有好友关系