SwtTt29
/
Mini-Program
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 添加认证状态颜色区分和样式优化

pull/1/head
Trae AI 2 months ago
parent
734b4b7ba3
commit
1705555b79
4 changed files with 141 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      pages/buyer/index.wxml
  2. 72
      pages/buyer/index.wxss
  3. 4
      pages/index/index.wxml
  4. 73
      pages/index/index.wxss

13
pages/buyer/index.wxml
View File

@ -1,8 +1,9 @@
<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="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"> <view class="search-section">
<view class="search-container"> <view class="search-bar">
<view class="search-icon">🔍</view> <view class="search-input-wrapper">
<text class="search-icon">🔍</text>
<input <input
class="search-input" class="search-input"
placeholder="输入商品名称或品种" placeholder="输入商品名称或品种"
@ -10,7 +11,9 @@
bindconfirm="searchGoods" bindconfirm="searchGoods"
value="{{searchKeyword}}" value="{{searchKeyword}}"
/> />
<view wx:if="{{searchKeyword}}" class="clear-icon" bindtap="clearSearch">✘</view> <view wx:if="{{searchKeyword}}" class="clear-icon" bindtap="clearSearch">✕</view>
</view>
<button class="search-button" bindtap="searchGoods">搜索</button>
</view> </view>
</view> </view>

72
pages/buyer/index.wxss
View File

@ -19,6 +19,78 @@ page {
margin: 0; margin: 0;
} }
/* 搜索区域样式 */
.search-section {
width: 100%;
margin: 0 20rpx 20rpx 20rpx;
flex: 0 1 auto;
box-sizing: border-box;
}
.search-bar {
display: flex;
align-items: center;
gap: 10rpx;
width: 100%;
background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
padding: 6rpx;
border-radius: 50rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
box-sizing: border-box;
border: 1rpx solid rgba(22, 119, 255, 0.2);
}
.search-input-wrapper {
flex: 1;
display: flex;
align-items: center;
position: relative;
background-color: white;
border-radius: 40rpx;
padding: 0 10rpx;
}
.search-icon {
margin: 0 10rpx;
font-size: 28rpx;
color: #999;
transition: all 0.3s ease;
}
.search-input {
flex: 1;
height: 70rpx;
font-size: 28rpx;
color: #333;
border: none;
outline: none;
background: transparent;
}
.search-placeholder {
color: #999;
}
.clear-icon {
font-size: 32rpx;
color: #999;
padding: 10rpx 20rpx;
}
.search-button {
background-color: #1677ff;
color: white;
border: none;
border-radius: 40rpx;
padding: 12rpx 16rpx;
font-size: 22rpx;
font-weight: bold;
white-space: nowrap;
box-shadow: 0 2rpx 8rpx rgba(22, 119, 255, 0.3);
min-width: 100rpx;
text-align: center;
}
/* 搜索框样式 */ /* 搜索框样式 */
.search-bar { .search-bar {
width: 100%; width: 100%;

4
pages/index/index.wxml
View File

@ -161,7 +161,7 @@
<view class="goods-spec">{{item.specification || '无'}} | {{item.yolk || '无'}}</view> <view class="goods-spec">{{item.specification || '无'}} | {{item.yolk || '无'}}</view>
<view class="goods-status-row"> <view class="goods-status-row">
<view class="status-tag supply-{{item.supplyStatus === '预售' ? 'presale' : 'spot'}}">{{item.supplyStatus || ''}}</view> <view class="status-tag supply-{{item.supplyStatus === '预售' ? 'presale' : 'spot'}}">{{item.supplyStatus || ''}}</view>
<view class="status-tag source-{{item.sourceType ? 'yes' : 'no'}}">{{item.sourceType || ''}}</view> <view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">{{item.sourceType || ''}}</view>
<view class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}">{{item.negotiateStatus}}</view> <view class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}">{{item.negotiateStatus}}</view>
</view> </view>
<view class="goods-footer"> <view class="goods-footer">
@ -199,7 +199,7 @@
<view class="goods-spec">{{item.specification || '无'}} | {{item.yolk || '无'}}</view> <view class="goods-spec">{{item.specification || '无'}} | {{item.yolk || '无'}}</view>
<view class="goods-status-row"> <view class="goods-status-row">
<view class="status-tag supply-{{item.supplyStatus === '预售' ? 'presale' : 'spot'}}">{{item.supplyStatus || ''}}</view> <view class="status-tag supply-{{item.supplyStatus === '预售' ? 'presale' : 'spot'}}">{{item.supplyStatus || ''}}</view>
<view class="status-tag source-{{item.sourceType ? 'yes' : 'no'}}">{{item.sourceType || ''}}</view> <view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">{{item.sourceType || ''}}</view>
<view class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}">{{item.negotiateStatus}}</view> <view class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}">{{item.negotiateStatus}}</view>
</view> </view>
<view class="goods-footer"> <view class="goods-footer">

73
pages/index/index.wxss
View File

@ -42,12 +42,14 @@ page {
align-items: center; align-items: center;
gap: 10rpx; gap: 10rpx;
width: 100%; width: 100%;
background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%); background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10rpx);
-webkit-backdrop-filter: blur(10rpx);
padding: 6rpx; padding: 6rpx;
border-radius: 50rpx; border-radius: 50rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
box-sizing: border-box; box-sizing: border-box;
border: 1rpx solid rgba(22, 119, 255, 0.2); border: 1rpx solid rgba(255, 255, 255, 0.5);
} }
.search-input-wrapper { .search-input-wrapper {
@ -55,7 +57,7 @@ page {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
background-color: white; background-color: transparent;
border-radius: 40rpx; border-radius: 40rpx;
padding: 0 10rpx; padding: 0 10rpx;
} }
@ -112,12 +114,20 @@ page {
background-color: #1677ff; background-color: #1677ff;
color: white; color: white;
border: none; border: none;
border-radius: 40rpx; border-radius: 20rpx;
padding: 15rpx 30rpx; padding: 20rpx 4rpx;
font-size: 24rpx; font-size: 20rpx;
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
box-shadow: 0 2rpx 8rpx rgba(22, 119, 255, 0.3); box-shadow: 0 2rpx 8rpx rgba(22, 119, 255, 0.3);
min-width: 10rpx;
text-align: center;
}
wx-button:not([size=mini]) {
margin-left: auto;
margin-right: auto;
width: 90px;
} }
/* 地区选择器弹窗样式 */ /* 地区选择器弹窗样式 */
@ -656,9 +666,12 @@ page {
} }
.status-tag.negotiate-yes { .status-tag.negotiate-yes {
background: rgba(114, 46, 209, 0.15); background: rgba(255, 255, 255, 0.7);
color: #722ed1; backdrop-filter: blur(8rpx);
border: 1rpx solid rgba(114, 46, 209, 0.5); -webkit-backdrop-filter: blur(8rpx);
border: 1rpx solid rgba(200, 200, 200, 0.5);
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
color: #000000;
} }
.status-tag.source-yes { .status-tag.source-yes {
@ -673,6 +686,24 @@ page {
border: 1rpx solid rgba(180, 180, 180, 0.5); border: 1rpx solid rgba(180, 180, 180, 0.5);
} }
.status-tag.source-third {
background: rgba(24, 144, 255, 0.15);
color: #096dd9;
border: 1rpx solid rgba(24, 144, 255, 0.5);
}
.status-tag.source-platform {
background: rgba(82, 196, 26, 0.15);
color: #389e0d;
border: 1rpx solid rgba(82, 196, 26, 0.5);
}
.status-tag.source-unverified {
background: rgba(140, 140, 140, 0.15);
color: #595959;
border: 1rpx solid rgba(140, 140, 140, 0.5);
}
.goods-footer { .goods-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -685,23 +716,23 @@ page {
} }
.goods-region-bg { .goods-region-bg {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(4rpx); backdrop-filter: blur(8rpx);
-webkit-backdrop-filter: blur(4rpx); -webkit-backdrop-filter: blur(8rpx);
border-radius: 4rpx; border-radius: 8rpx;
padding: 4rpx 12rpx; padding: 6rpx 14rpx;
border: 1.5rpx solid #1e3a6e; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
box-shadow: 0 1rpx 3rpx rgba(30, 58, 110, 0.08); border: none;
} }
.goods-region { .goods-region {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
color: #1e3a6e; padding: 4rpx 10rpx;
font-weight: 600; background: linear-gradient(135deg, rgba(22, 119, 255, 0.08) 0%, rgba(64, 150, 255, 0.05) 100%);
font-size: 23rpx; border-radius: 12rpx;
letter-spacing: 0.5rpx; font-size: 18rpx;
} }
.goods-reserved { .goods-reserved {

Write Preview
Loading…
Cancel
Save