diff --git a/pages/buyer/index.js b/pages/buyer/index.js index 044b6af..6608e8a 100644 --- a/pages/buyer/index.js +++ b/pages/buyer/index.js @@ -1067,6 +1067,24 @@ Page({ }); }, + // 清除搜索 + clearSearch() { + this.setData({ + searchKeyword: '', + page: 1, + hasMoreData: true, + selectedCategory: '全部' + }, () => { + // 重新加载第一页数据 + this.loadGoods().then(() => { + console.log('清除搜索后数据加载完成'); + }).catch(err => { + console.error('清除搜索后数据加载失败:', err); + this.fallbackToLocalStorageWithPagination(); + }); + }); + }, + // 搜索输入处理 onSearchInput(e) { const searchKeyword = e.detail.value diff --git a/pages/buyer/index.wxml b/pages/buyer/index.wxml index 430eed1..7dcc0c1 100644 --- a/pages/buyer/index.wxml +++ b/pages/buyer/index.wxml @@ -1,10 +1,11 @@ - - + + + - + diff --git a/pages/buyer/index.wxss b/pages/buyer/index.wxss index 02c7865..d0b7a52 100644 --- a/pages/buyer/index.wxss +++ b/pages/buyer/index.wxss @@ -4,6 +4,57 @@ background-color: #f5f5f5; } +/* 搜索框样式 */ +.search-bar-container { + position: fixed; + top: 0; + left: 0; + right: 0; + padding: 20rpx; + background-color: #ffffff; + z-index: 1000; + box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.08); + box-sizing: border-box; +} + +.search-box { + width: 90%; + display: flex; + align-items: center; + background-color: #f7f8fa; + border-radius: 50rpx; + padding: 0 30rpx; + margin: 0 auto; + height: 88rpx; + transition: all 0.3s ease; +} + +.search-box:focus-within { + background-color: #ffffff; + box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.12); + transform: translateY(-2rpx); +} + +.search-icon { + width: 40rpx; + height: 40rpx; + margin-right: 20rpx; + opacity: 0.4; +} + +.search-input { + flex: 1; + height: 100%; + font-size: 32rpx; + color: #333; + background-color: transparent; +} + +.search-input::placeholder { + color: #999; + font-size: 30rpx; +} + .title { font-size: 36rpx; font-weight: bold; diff --git a/pages/seller/index.js b/pages/seller/index.js index f581ad8..11d8a85 100644 --- a/pages/seller/index.js +++ b/pages/seller/index.js @@ -237,6 +237,16 @@ Page({ }); }, + // 清除搜索 + clearSearch() { + this.setData({ + searchKeyword: '' + }, () => { + // 重新加载所有数据 + this.loadSupplies(); + }); + }, + // 处理搜索输入 onSearchInput(e) { this.setData({ diff --git a/pages/seller/index.wxml b/pages/seller/index.wxml index 5878b28..2e48cbd 100644 --- a/pages/seller/index.wxml +++ b/pages/seller/index.wxml @@ -23,14 +23,15 @@ + 🔍 + diff --git a/pages/seller/index.wxss b/pages/seller/index.wxss index 467a0f5..abfb65d 100644 --- a/pages/seller/index.wxss +++ b/pages/seller/index.wxss @@ -23,6 +23,67 @@ button { background-color: #fafafa; } +/* 搜索框样式 */ +.search-container { + position: relative; + padding: 20rpx 0; + z-index: 10; + box-sizing: border-box; +} + +.search-box { + width: 90%; + display: flex; + align-items: center; + background-color: #f8f9fa; + border: 2rpx solid #e9ecef; + border-radius: 50rpx; + padding: 0 20rpx; + margin: 0 auto; + transition: all 0.3s ease; +} + +.search-box:focus-within { + border-color: #07c160; + box-shadow: 0 0 0 4rpx rgba(7, 193, 96, 0.1); + background-color: white; +} + +.search-icon { + font-size: 28rpx; + color: #999; + margin-right: 16rpx; +} + +.search-input { + flex: 1; + padding: 24rpx 0; + font-size: 28rpx; + color: #333; + background-color: transparent; + border: none; + outline: none; +} + +.search-input::placeholder { + color: #ccc; +} + +.clear-icon { + font-size: 24rpx; + color: #999; + padding: 8rpx; + border-radius: 50%; + background-color: #e9ecef; + cursor: pointer; + transition: all 0.2s ease; +} + +.clear-icon:hover { + background-color: #dee2e6; + color: #666; +} + /* 页面标题栏 */ .title-bar { display: flex;