搜索界面的理解

界面基本概况

1. `<template>`：模板标签，用于定义组件的模板内容。

2. `<view class="b-container">`：根视图容器，具有类名`b-container`。

3. `<view class="uni-search-box">`：搜索栏容器。

4. `<uni-search-bar>`：使用`uni-search-bar`组件创建搜索栏。 - `@confirm="search"`：当搜索确认时触发`search`方法。 - `v-model="searchTxt"`：将搜索文本与`searchTxt`数据属性进行双向绑定。 - `radius="100"`：设置搜索栏的圆角半径为 100。 - `cancelButton="none"`：隐藏取消按钮。 - `disabled`：禁用搜索栏。 - `placeholder="请输入搜索内容"`：设置搜索栏的占位符文本。

5. `<template v-slot:searchIcon>`：自定义搜索图标插槽。

6. `<uni-icons slot="searchIcon" type="search" color="#00cc77" size="18"></uni-icons>`：在搜索图标插槽中插入一个`uni-icons`组件，类型为`search`，颜色为`#00cc77`，大小为 18。

7. `<scroll-view>`：滚动视图组件，用于显示账单列表。 - `class="statement-item"`：设置滚动视图的类名。 - `:style="{ height: scrollHeight + 'px' }"`：根据`scrollHeight`数据属性设置滚动视图的高度。 - `scroll-y="true"`：启用垂直滚动。 - `lower-threshold="50"`：设置滚动到底部的阈值为 50。 - `@scrolltolower="onLowerBottom"`：当滚动到底部时触发`onLowerBottom`方法。

8. `<mb-b-day-group :groups="indexBills" />`：使用`mb-b-day-group`组件显示账单分组。

9. `<uni-load-more status="no-more" v-if="indexBills.length>0"></uni-load-more>`：根据账单数量显示加载更多组件。

uni-search-bar的使用

uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/component/uniui/uni-search-bar.html#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95

v-model

v-model` 是 Vue.js 中的一个指令，用于实现表单元素（如输入框、复选框等）与组件数据的双向绑定。在这个例子中，`searchTxt` 是组件的一个数据属性，它将与搜索栏的输入值进行双向绑定。 当用户在搜索栏中输入内容时，`searchTxt` 的值会自动更新为用户输入的内容。同时，当 `searchTxt` 的值发生变化时，搜索栏的显示内容也会相应地更新。 这样，通过 `v-model` 的双向绑定机制，搜索内容被定义在组件的 `searchTxt` 数据属性中，并且可以在组件的其他部分使用或处理这个搜索内容。

search函数

const search = () => {  
	    // 显示一个不带图标的Toast提示，内容为“搜索：”加上searchTxt变量的值  
	    uni.showToast({  
	        title: '搜索：' + searchTxt.value,  
	        icon: 'none'  
	    })  
	  
	    // 这一行被注释掉了，如果取消注释，它会尝试打印indexPage的page属性和indexStat的value.count属性  
	    // 但由于indexPage和indexStat可能不是对象或未定义，这行代码可能会引发错误  
	    // console.log(indexPage.page , indexStat.value.count);  
	  
	    // 检查loading变量，如果为true，则函数直接返回，不执行后续操作  
	    // 这通常用于防止在搜索结果还在加载时重复触发搜索  
	    if (loading) return;  
	  
	    // 将loading变量设置为true，表示搜索操作已经开始  
	    loading = true;  
	  
	    // 调用bill对象的getSearchBills方法，传入搜索关键词、页码和初始化标志  
	    // 然后返回一个Promise对象，该对象在搜索完成时解析为结果res  
	    return bill.getSearchBills({  
	        keyword: searchTxt.value, // 搜索关键词，从searchTxt变量中获取  
	        page: indexPage, // 页码，从indexPage变量中获取  
	        isInit: true, // 初始化标志，可能用于控制搜索的某些初始化行为  
	    }).then((res) => {  
	        // 当Promise解析时，执行这个回调函数  
	        // 将搜索结果赋值给indexTotal变量  
	        // 注意：这里假设indexTotal是一个普通的变量，而不是响应式变量  
	        // 如果是在Vue中，并且indexTotal是响应式的，应该使用indexTotal.value = res;  
	        indexTotal = res;  
	    })  
	    .finally(() => {  
	        // 无论Promise是成功还是失败，都会执行这个回调函数  
	        // 将loading变量设置为false，表示搜索操作已经完成  
	        loading = false;  
	    });  
	}

​​​​​​searchTxt

1. 创建：const searchTxt = ref('') 这行代码创建了一个响应式引用 searchTxt，并初始化为空字符串 ''。这意味着 searchTxt 的值是一个响应式的，Vue 会追踪它的变化，并在其值改变时自动更新依赖于它的 DOM 或其他计算属性。

2. 用途：在这个组件中，searchTxt 被用作搜索功能的输入值。用户可以在某个搜索输入框中输入文本，这个文本的值会被绑定到 searchTxt.value 上。当用户触发搜索操作（可能是通过点击一个按钮或按下回车键）时，search 函数会被调用，并使用 searchTxt.value 作为搜索关键词。

3. 响应性：由于 searchTxt 是响应式的，所以当用户在搜索输入框中输入文本时，searchTxt.value 的值会自动更新。这意味着，如果组件中有任何依赖于 searchTxt.value 的逻辑（比如计算属性、侦听器或模板中的表达式），它们也会自动更新以反映新的搜索文本。

4. 搜索功能：在 search 函数中，searchTxt.value 被用作搜索关键词，传递给 bill.getSearchBills 方法。这个方法可能是用来从后端 API 获取与搜索关键词匹配的账单列表的。search 函数还处理了一些加载状态（通过 loading 变量），以确保在搜索过程中不会重复触发请求。

5. 模板绑定：虽然 <script setup> 片段中没有直接显示模板代码，但可以合理推测，在某个地方（可能是 <template> 部分），会有一个输入框（如 <input> 或 <textarea>），它的 v-model 被绑定到了 searchTxt 上。这样，用户输入的文本就会自动更新 searchTxt.value 的值。

bill.getSearchBills

// 定义一个名为 getSearchBills 的函数，它接受一个对象作为参数，该对象包含 keyword, page, 和 isInit 属性  
getSearchBills({ keyword, page, isInit }) {    
    // 调用 api.searchBills 函数，传入一个对象作为参数，该对象包含 keyword 和（如果取消注释）page 的展开值  
    // 注意：api.searchBills 应该返回一个 Promise，它将在未来某个时间点解析为搜索结果  
    return api.searchBills({    
        keyword,  // 使用 ES6 的对象解构赋值来直接传递 keyword 参数  
        // 取消注释以传递分页信息（如果 API 支持）。这里使用展开语法（...）来传递 page 对象中的所有属性  
        ...page,    
    }).then((res) => {    
        // 当 api.searchBills 的 Promise 解析时，.then() 方法中的回调函数将被调用，res 参数是解析后的结果  
        if (res.data.code === 0) {    
            // 检查响应中的 code 属性是否为 0，通常表示请求成功  
            if (isInit) {    
                // 如果 isInit 为真，则调用 add_index_bills 函数，传入 this（当前上下文），一个空数组作为账单项，以及 true 表示是初始加载  
                // 假设 add_index_bills 函数能够处理这种情况，可能是用于清空并重置账单列表  
                add_index_bills(this, [], true);   
            }    
            // 从响应中提取总账单数和具体的账单项  
            let total = res.data.result.total;    
            let items = res.data.result.items;    
            // 检查 this.indexBills（可能是当前类的属性，用于存储账单项）的长度  
            if (this.indexBills.length > 0) {    
                // 如果已经存在账单项，则调用 add_index_bills，传入账单项并标记为不是初始加载（false）  
                // 这可能是用于追加新的账单项到现有列表  
                add_index_bills(this, items, false);    
            } else {    
                // 如果 this.indexBills 为空，则也调用 add_index_bills，但这次是以初始加载的方式（true）  
                // 这可能意味着需要重新设置整个账单列表  
                add_index_bills(this, items, true);    
            }    
            // 返回总账单数，这样调用者就可以知道有多少账单被检索到  
            return total;   
        }    
        // 如果 res.data.code 不等于 0，则抛出一个错误，表示请求失败  
        throw new Error('Failed to fetch bills');    
    }).catch((err) => {    
        // 如果在 Promise 链中的任何地方发生错误（包括在 api.searchBills 的执行中或在其 .then() 回调中），  
        // .catch() 方法中的回调函数将被调用，err 参数是捕获到的错误  
        // 这里简单地重新抛出错误，但您也可以在这里添加自定义的错误处理逻辑  
        throw err;    
    });    
}

后续内容与api及后端相关联