Browse Source

美化搜索框样式并删除冗余文件

pull/1/head
徐飞洋 3 months ago
parent
commit
5b64e3ceb8
  1. 0
      pages/buyer/goods-detail.js
  2. 0
      pages/buyer/goods-detail.json
  3. 0
      pages/buyer/goods-detail.wxml
  4. 0
      pages/buyer/goods-detail.wxss
  5. 18
      pages/buyer/index.js
  6. 11
      pages/buyer/index.wxml
  7. 39
      pages/buyer/index.wxss
  8. 10
      pages/seller/index.js
  9. 3
      pages/seller/index.wxml
  10. 61
      pages/seller/index.wxss

0
pages/buyer/goods-detail.js

0
pages/buyer/goods-detail.json

0
pages/buyer/goods-detail.wxml

0
pages/buyer/goods-detail.wxss

18
pages/buyer/index.js

@ -1067,24 +1067,6 @@ 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

11
pages/buyer/index.wxml

@ -1,12 +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 class="search-bar-container">
<view class="search-box">
<image class="search-icon" src="/images/logo.svg" mode="aspectFit"></image>
<view class="search-bar">
<view class="search-container">
<view class="search-icon">🔍</view>
<input
class="search-input"
placeholder="搜索商品名称或品种"
placeholder="输入商品名称或品种"
bindinput="onSearchInput"
bindconfirm="searchGoods"
value="{{searchKeyword}}"
@ -15,7 +14,7 @@
</view>
<!-- 商品列表 -->
<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 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 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;">

39
pages/buyer/index.wxss

@ -5,49 +5,52 @@
}
/* 搜索框样式 */
.search-bar-container {
.search-bar {
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);
background-color: transparent;
z-index: 100;
box-sizing: border-box;
}
.search-box {
width: 90%;
.search-container {
display: flex;
align-items: center;
background-color: #f7f8fa;
border-radius: 50rpx;
border: 1rpx solid rgba(0, 0, 0, 0.08);
border-radius: 40rpx;
background-color: white;
padding: 0 30rpx;
margin: 0 auto;
height: 88rpx;
width: 90%;
height: 80rpx;
box-sizing: border-box;
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-container:focus-within {
border-color: #07c160;
background-color: white;
box-shadow: 0 0 0 4rpx rgba(7, 193, 96, 0.1);
}
.search-icon {
width: 40rpx;
height: 40rpx;
font-size: 30rpx;
color: #999;
margin-right: 20rpx;
opacity: 0.4;
}
.search-input {
flex: 1;
height: 100%;
font-size: 32rpx;
font-size: 30rpx;
color: #333;
background-color: transparent;
border: none;
outline: none;
height: 60rpx;
line-height: 60rpx;
}
.search-input::placeholder {

10
pages/seller/index.js

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

3
pages/seller/index.wxml

@ -23,15 +23,14 @@
<!-- 搜索框 -->
<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>

61
pages/seller/index.wxss

@ -23,67 +23,6 @@ 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;

Loading…
Cancel
Save