美化buyer页面搜索框，添加现代样式和置顶显示

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

pages/buyer/index.wxml

@@ -1,10 +1,11 @@
 <view class="container" style="align-items: flex-start; padding: 20rpx; width: 100%; max-width: 100vw; overflow-x: hidden; position: relative; box-sizing: border-box;">
 
 <!-- 搜索框 -->
-<view style="position: fixed; top: 0; left: 0; right: 0; padding: 20rpx; background-color: white; z-index: 100; box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1); box-sizing: border-box;">
+<view class="search-bar-container">
-  <view style="width: 90%; display: flex; border: 1rpx solid #ddd; border-radius: 40rpx; overflow: hidden; margin: 0 auto;">
+  <view class="search-box">
+    <image class="search-icon" src="/images/logo.svg" mode="aspectFit"></image>
     <input 
-      style="width: 100%; padding: 20rpx 30rpx;"
+      class="search-input"
       placeholder="搜索商品名称或品种" 
       bindinput="onSearchInput" 
       bindconfirm="searchGoods"
@@ -14,7 +15,7 @@
 </view>
 
 <!-- 商品列表 -->
-<view class="goods-list" style="width: 100%; display: flex; flex-direction: column; align-items: flex-start; min-height: 400rpx; margin-top: 120rpx;" bindscrolltolower="onReachBottom" bindscroll="onScroll">
+<view class="goods-list" style="width: 100%; display: flex; flex-direction: column; align-items: flex-start; min-height: 400rpx; margin-top: 160rpx;" bindscrolltolower="onReachBottom" bindscroll="onScroll">
   <view wx:if="{{filteredGoods.length > 0}}" wx:for="{{filteredGoods}}" wx:key="id" wx:for-item="item" wx:for-index="index" class="card" style="width: 100%; margin-top: 0; margin-bottom: 20rpx;">
     <!-- 图片和信息1:1比例并排显示 -->
     <view style="display: flex; width: 100%; border-radius: 8rpx; overflow: hidden; background-color: #f5f5f5;">

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;

pages/seller/index.js

@@ -237,6 +237,16 @@ Page({
     });
   },
 
+  // 清除搜索
+  clearSearch() {
+    this.setData({
+      searchKeyword: ''
+    }, () => {
+      // 重新加载所有数据
+      this.loadSupplies();
+    });
+  },
+
   // 处理搜索输入
   onSearchInput(e) {
     this.setData({

pages/seller/index.wxml

@@ -23,14 +23,15 @@
   <!-- 搜索框 -->
   <view class="search-container">
     <view class="search-box">
+      <view class="search-icon">🔍</view>
       <input 
         class="search-input"
         placeholder="搜索货源名称或品种" 
         bindinput="onSearchInput" 
         bindconfirm="searchSupplies"
         value="{{searchKeyword}}"
-        style="width: 100%;"
       />
+      <view wx:if="searchKeyword" class="clear-icon" bindtap="clearSearch">✕</view>
     </view>
   </view>
   

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;