目录

搜索界面的理解

搜索界面的理解

界面基本概况

  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://i-blog.csdnimg.cn/blog_migrate/003a2ce7eb50c2e24a8c624c260c5930.png “uni-app官网 (dcloud.net.cn)”)

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及后端相关联