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

估价ui优化

Xfy
Trae AI 7 days ago
parent
72b9daae0d
commit
abd2ab8a06
9 changed files with 616 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      pages/evaluate2/index.js
  2. 54
      pages/evaluate2/index.wxml
  3. 234
      pages/evaluate2/index.wxss
  4. 23
      pages/evaluate2/one.wxml
  5. 74
      pages/evaluate2/one.wxss
  6. 43
      pages/evaluate2/product-list.wxml
  7. 143
      pages/evaluate2/product-list.wxss
  8. 22
      pages/evaluate2/spec-detail.wxml
  9. 64
      pages/evaluate2/spec-detail.wxss

15
pages/evaluate2/index.js
View File

@ -3,6 +3,7 @@ Page({
productName: '',
category: '',
specifications: [],
selectedSpec: '',
loading: false,
error: '',
navigating: false
@ -474,11 +475,14 @@ Page({
wx.stopPullDownRefresh();
},
// 跳转到规格详情页面
goToSpecDetail(e) {
// 选择规格
selectSpec(e) {
this.navigateLock(() => {
const specItem = e.currentTarget.dataset.spec;
console.log('点击的规格项:', specItem);
this.setData({
selectedSpec: specItem.name
});
console.log('选择的规格项:', specItem);
console.log('传递的价格:', specItem.finalPriceText);
console.log('传递的分类:', this.data.category);
wx.navigateTo({
@ -487,6 +491,11 @@ Page({
});
},
// 跳转到规格详情页面
goToSpecDetail(e) {
this.selectSpec(e);
},
// 返回上一页
goBack() {
this.navigateLock(() => {

54
pages/evaluate2/index.wxml
View File

@ -1,5 +1,37 @@
<view class="container">
<!-- 步骤指示器 -->
<view class="step-indicator">
<view class="step-item active">
<view class="step-number">1</view>
<text class="step-text">选择品种</text>
</view>
<view class="step-line active"></view>
<view class="step-item active">
<view class="step-number">2</view>
<text class="step-text">选择产品</text>
</view>
<view class="step-line active"></view>
<view class="step-item active">
<view class="step-number">3</view>
<text class="step-text">选择规格</text>
</view>
<view class="step-line"></view>
<view class="step-item">
<view class="step-number">4</view>
<text class="step-text">查看估价</text>
</view>
</view>
<!-- 头部导航栏 -->
<view class="header">
<view class="header-content">
<button class="back-button" bindtap="goBackToProductList">
<text class="back-icon">←</text>
</button>
<text class="title">规格选择</text>
<view class="header-right"></view> <!-- 占位，保持标题居中 -->
</view>
</view>
<view class="content">
<!-- 加载中状态 -->
<view wx:if="{{loading}}" class="loading">
@ -21,12 +53,17 @@
<view wx:else class="product-card">
<view class="product-info-container">
<view class="product-info-row">
<view class="product-name-container">
<view class="product-image-container">
<image
src="../../images/OIP-C.png"
mode="aspectFill"
class="product-image"
/>
</view>
<view class="product-details">
<text class="product-name">{{productName}}</text>
<text class="product-hint">请选择重量规格</text>
</view>
<button bindtap="goBackToProductList" class="btn-change-product">
<text class="btn-change-product-text">更换商品</text>
</button>
</view>
</view>
</view>
@ -43,9 +80,14 @@
wx:key="item.name"
class="spec-item"
data-spec="{{item}}"
bindtap="goToSpecDetail"
bindtap="selectSpec"
>
<text class="spec-name">{{item.name}}</text>
<view class="spec-info">
<text class="spec-name">{{item.name}}</text>
</view>
<view class="spec-radio {{selectedSpec === item.name ? 'selected' : ''}}">
<view wx:if="selectedSpec === item.name" class="radio-inner"></view>
</view>
</view>
</view>

234
pages/evaluate2/index.wxss
View File

@ -6,56 +6,131 @@
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}
/* 步骤指示器 */
.step-indicator {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
background: #FFFFFF;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
margin-bottom: 24rpx;
width: 100%;
box-sizing: border-box;
}
.step-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.step-number {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #E5E5E5;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-weight: 600;
color: #999;
margin-bottom: 8rpx;
transition: all 0.3s ease;
}
.step-text {
font-size: 20rpx;
color: #999;
transition: all 0.3s ease;
}
.step-item.active .step-number {
background: #007AFF;
color: #FFFFFF;
box-shadow: 0 0 0 8rpx rgba(0,122,255,0.1);
}
.step-item.active .step-text {
color: #007AFF;
font-weight: 500;
}
.step-line {
flex: 1;
height: 2rpx;
background: #E5E5E5;
margin: 0 16rpx;
transition: all 0.3s ease;
}
.step-line.active {
background: #007AFF;
}
.header {
background: #FFFFFF;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
position: sticky;
top: 0;
z-index: 10;
width: 100%;
box-sizing: border-box;
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 32rpx;
width: 100%;
box-sizing: border-box;
height: 100rpx;
max-width: 100%;
position: relative;
}
.back-button {
width: 100rpx;
height: 60rpx;
line-height: 60rpx;
font-size: 26rpx;
font-size: 36rpx;
color: #4a90e2;
background: transparent;
border: none;
padding: 0;
padding: 0 16rpx 0 0;
margin: 0;
display: flex;
align-items: center;
justify-content: flex-start;
border-radius: 8rpx;
transition: all 0.3s ease;
flex-shrink: 0;
overflow: visible;
}
.back-button:hover {
color: #3b82f6;
background: rgba(74, 144, 226, 0.1);
transform: translateX(-2rpx);
}
.back-icon {
margin-right: 8rpx;
font-size: 22rpx;
font-size: 36rpx;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
}
.back-button:hover .back-icon {
transform: translateX(-12rpx);
font-weight: 700;
}
.back-text {
font-size: 26rpx;
font-weight: 500;
font-size: 36rpx;
font-weight: 700;
}
.title {
@ -63,14 +138,19 @@
font-weight: 700;
color: #2c3e50;
letter-spacing: 2rpx;
flex: 1;
text-align: center;
margin: 0;
padding: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 300rpx;
}
.header-right {
width: 100rpx;
width: 60rpx;
flex-shrink: 0;
}
.content {
@ -234,17 +314,32 @@
.product-info-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
box-sizing: border-box;
}
.product-name-container {
display: flex;
align-items: center;
.product-image-container {
width: 120rpx;
height: 120rpx;
border-radius: 8rpx;
overflow: hidden;
margin-right: 24rpx;
background: #F5F5F5;
flex-shrink: 0;
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-details {
flex: 1;
margin-right: 16rpx;
display: flex;
flex-direction: column;
gap: 8rpx;
}
.product-name {
@ -253,13 +348,18 @@
color: #333;
line-height: 1.4;
word-break: break-word;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-hint {
font-size: 24rpx;
color: #999;
line-height: 1.4;
}
/* 规格列表区域 */
.spec-section {
margin-top: 32rpx;
@ -293,8 +393,8 @@
/* 规格列表布局 */
.spec-list {
margin-top: 16rpx;
display: grid;
grid-template-columns: repeat(2, 1fr);
display: flex;
flex-direction: column;
gap: 16rpx;
width: 100%;
}
@ -302,17 +402,32 @@
/* 规格项 */
.spec-item {
background: #FFFFFF;
border: 1rpx solid #E5E5E5;
border-radius: 12rpx;
padding: 32rpx 24rpx;
padding: 32rpx 32rpx;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
transition: all 0.3s ease;
}
.spec-radio {
width: 32rpx;
height: 32rpx;
border: 2rpx solid #E5E5E5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
margin-left: 16rpx;
}
.spec-item:hover {
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
transform: translateY(-2rpx);
@ -322,16 +437,59 @@
background: #F5F5F5;
}
.spec-item.selected {
border: 2rpx solid #007AFF;
box-shadow: 0 0 0 4rpx rgba(0,122,255,0.1);
}
.spec-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 8rpx;
}
.spec-name {
font-size: 30rpx;
font-weight: 500;
color: #333;
line-height: 1.4;
word-break: break-word;
text-align: center;
padding: 0 8rpx;
}
.spec-details {
font-size: 24rpx;
color: #666;
line-height: 1.4;
padding: 0 8rpx;
}
.spec-radio {
width: 32rpx;
height: 32rpx;
border: 2rpx solid #E5E5E5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
}
.spec-radio.selected {
border-color: #007AFF;
background: #007AFF;
}
.radio-inner {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background: #FFFFFF;
transition: all 0.3s ease;
}
/* 空状态 */
.empty-state {
display: flex;
@ -407,10 +565,26 @@
font-size: 28rpx;
}
.spec-details {
font-size: 22rpx;
}
.spec-list {
grid-template-columns: repeat(2, 1fr);
gap: 16rpx;
}
.product-image-container {
width: 100rpx;
height: 100rpx;
}
.product-name {
font-size: 28rpx;
}
.product-hint {
font-size: 22rpx;
}
}
/* 小屏幕设备适配 */
@ -439,6 +613,10 @@
font-size: 24rpx;
}
.spec-details {
font-size: 20rpx;
}
.btn-change-product {
padding: 10rpx 20rpx;
}
@ -448,9 +626,21 @@
}
.spec-list {
grid-template-columns: repeat(2, 1fr);
gap: 12rpx;
}
.product-image-container {
width: 80rpx;
height: 80rpx;
}
.product-name {
font-size: 26rpx;
}
.product-hint {
font-size: 20rpx;
}
}
/* 暂无更多规格提示 */

23
pages/evaluate2/one.wxml
View File

@ -1,5 +1,26 @@
<view class="container">
<!-- 头部导航栏 -->
<!-- 步骤指示器 -->
<view class="step-indicator">
<view class="step-item active">
<view class="step-number">1</view>
<text class="step-text">选择品种</text>
</view>
<view class="step-line"></view>
<view class="step-item">
<view class="step-number">2</view>
<text class="step-text">选择产品</text>
</view>
<view class="step-line"></view>
<view class="step-item">
<view class="step-number">3</view>
<text class="step-text">选择规格</text>
</view>
<view class="step-line"></view>
<view class="step-item">
<view class="step-number">4</view>
<text class="step-text">查看估价</text>
</view>
</view>
<!-- 登录弹窗 -->
<view wx:if="{{showOneKeyLoginModal}}" class="auth-modal-overlay">

74
pages/evaluate2/one.wxss
View File

@ -6,12 +6,78 @@
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}
/* 步骤指示器 */
.step-indicator {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
background: #FFFFFF;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
margin-bottom: 24rpx;
width: 100%;
box-sizing: border-box;
}
.step-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.step-number {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #E5E5E5;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-weight: 600;
color: #999;
margin-bottom: 8rpx;
transition: all 0.3s ease;
}
.step-text {
font-size: 20rpx;
color: #999;
transition: all 0.3s ease;
}
.step-item.active .step-number {
background: #007AFF;
color: #FFFFFF;
box-shadow: 0 0 0 8rpx rgba(0,122,255,0.1);
}
.step-item.active .step-text {
color: #007AFF;
font-weight: 500;
}
.step-line {
flex: 1;
height: 2rpx;
background: #E5E5E5;
margin: 0 16rpx;
transition: all 0.3s ease;
}
.step-line.active {
background: #007AFF;
}
.header {
background: #FFFFFF;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
position: sticky;
top: 0;
z-index: 10;
width: 100%;
box-sizing: border-box;
}
.header-content {
@ -23,6 +89,7 @@
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
}
.title {
@ -572,7 +639,11 @@
.card-footer {
display: flex;
justify-content: center;
align-items: center;
margin-top: 16rpx;
width: 100%;
padding: 0 20rpx;
box-sizing: border-box;
}
.select-button {
@ -585,9 +656,12 @@
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);
transition: all 0.3s ease;
width: 100%;
max-width: 200rpx;
}
.select-button:hover {

43
pages/evaluate2/product-list.wxml
View File

@ -1,10 +1,32 @@
<view class="container">
<!-- 步骤指示器 -->
<view class="step-indicator">
<view class="step-item active">
<view class="step-number">1</view>
<text class="step-text">选择品种</text>
</view>
<view class="step-line active"></view>
<view class="step-item active">
<view class="step-number">2</view>
<text class="step-text">选择产品</text>
</view>
<view class="step-line"></view>
<view class="step-item">
<view class="step-number">3</view>
<text class="step-text">选择规格</text>
</view>
<view class="step-line"></view>
<view class="step-item">
<view class="step-number">4</view>
<text class="step-text">查看估价</text>
</view>
</view>
<!-- 头部导航栏 -->
<view class="header">
<view class="header-content">
<button class="back-button" bindtap="goBackToCategories">
<text class="back-icon">←</text>
<text class="back-text">分类</text>
</button>
<text class="title">商品选择</text>
<view class="header-right"></view> <!-- 占位，保持标题居中 -->
@ -29,18 +51,8 @@
<!-- 商品名称列表 -->
<view wx:else class="product-section">
<!-- 当前选择的分类 -->
<view wx:if="{{category}}" class="current-category">
<view class="current-category-content">
<text class="current-category-name">{{category}}</text>
</view>
<!-- 价格范围 -->
<view wx:if="{{priceRange.hasPrice}}" class="price-range">
<text class="price-range-value">¥{{priceRange.min}} - ¥{{priceRange.max}}</text>
</view>
</view>
<view class="section-header">
<text class="section-title">商品列表</text>
<text class="section-title">{{category}}系列的商品列表</text>
<view class="section-count">{{productNames.length}}个商品</view>
</view>
<view class="section-divider"></view>
@ -54,6 +66,13 @@
data-product="{{item}}"
bindtap="selectProduct"
>
<view class="product-image-container">
<image
src="../../images/OIP-C.png"
mode="aspectFill"
class="product-image"
/>
</view>
<text class="product-name">{{item}}</text>
</view>
</view>

143
pages/evaluate2/product-list.wxss
View File

@ -9,22 +9,108 @@
box-sizing: border-box;
}
/* 步骤指示器 */
.step-indicator {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
background: #FFFFFF;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
margin-bottom: 24rpx;
width: 100%;
box-sizing: border-box;
}
.step-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.step-number {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #E5E5E5;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-weight: 600;
color: #999;
margin-bottom: 8rpx;
transition: all 0.3s ease;
}
.step-text {
font-size: 20rpx;
color: #999;
transition: all 0.3s ease;
}
.step-item.active .step-number {
background: #007AFF;
color: #FFFFFF;
box-shadow: 0 0 0 8rpx rgba(0,122,255,0.1);
}
.step-item.active .step-text {
color: #007AFF;
font-weight: 500;
}
.step-line {
flex: 1;
height: 2rpx;
background: #E5E5E5;
margin: 0 16rpx;
transition: all 0.3s ease;
}
.step-line.active {
background: #007AFF;
}
.header {
background: #FFFFFF;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
position: sticky;
top: 0;
z-index: 10;
width: 100%;
box-sizing: border-box;
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 32rpx;
width: 100%;
box-sizing: border-box;
height: 100rpx;
max-width: 100%;
}
.title {
font-size: 36rpx;
font-weight: 700;
color: #2c3e50;
letter-spacing: 2rpx;
text-align: center;
margin: 0;
padding: 0;
flex: 1;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 300rpx;
}
.header-content {
position: relative;
}
/* 返回按钮样式 */
@ -32,34 +118,42 @@
width: 100rpx;
height: 60rpx;
line-height: 60rpx;
font-size: 26rpx;
font-size: 36rpx;
color: #4a90e2;
background: transparent;
border: none;
padding: 0;
padding: 0 16rpx 0 0;
margin: 0;
display: flex;
align-items: center;
justify-content: flex-start;
border-radius: 8rpx;
transition: all 0.3s ease;
flex-shrink: 0;
overflow: visible;
}
.back-button:hover {
color: #3b82f6;
background: rgba(74, 144, 226, 0.1);
transform: translateX(-2rpx);
}
.back-icon {
margin-right: 8rpx;
font-size: 22rpx;
font-size: 36rpx;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
}
.back-button:hover .back-icon {
transform: translateX(-12rpx);
font-weight: 700;
}
.back-text {
font-size: 26rpx;
font-weight: 500;
font-size: 36rpx;
font-weight: 700;
}
.title {
@ -74,7 +168,8 @@
}
.header-right {
width: 100rpx;
width: 60rpx;
flex-shrink: 0;
}
.content {
@ -270,16 +365,32 @@
border-radius: 16rpx;
padding: 16rpx;
cursor: pointer;
min-height: 120rpx;
min-height: 240rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: flex-start;
width: 100%;
box-sizing: border-box;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
transition: all 0.3s ease;
}
.product-image-container {
width: 100%;
height: 160rpx;
margin-bottom: 16rpx;
border-radius: 12rpx;
overflow: hidden;
background: #F5F5F5;
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-card:hover {
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.08);
transform: translateY(-2rpx);
@ -311,7 +422,11 @@
.product-card {
padding: 16rpx;
min-height: 110rpx;
min-height: 220rpx;
}
.product-image-container {
height: 140rpx;
}
.title {
@ -351,7 +466,11 @@
.product-card {
padding: 16rpx;
min-height: 100rpx;
min-height: 200rpx;
}
.product-image-container {
height: 120rpx;
}
.product-name {

22
pages/evaluate2/spec-detail.wxml
View File

@ -1,4 +1,26 @@
<view class="page-container">
<!-- 步骤指示器 -->
<view class="step-indicator">
<view class="step-item active">
<view class="step-number">1</view>
<text class="step-text">选择品种</text>
</view>
<view class="step-line active"></view>
<view class="step-item active">
<view class="step-number">2</view>
<text class="step-text">选择产品</text>
</view>
<view class="step-line active"></view>
<view class="step-item active">
<view class="step-number">3</view>
<text class="step-text">选择规格</text>
</view>
<view class="step-line active"></view>
<view class="step-item active">
<view class="step-number">4</view>
<text class="step-text">查看估价</text>
</view>
</view>
<!-- 主要内容区域 -->
<view class="main-content">

64
pages/evaluate2/spec-detail.wxss
View File

@ -8,6 +8,70 @@
box-sizing: border-box;
}
/* 步骤指示器 */
.step-indicator {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
background: #FFFFFF;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
margin-bottom: 24rpx;
width: 100%;
box-sizing: border-box;
}
.step-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.step-number {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #E5E5E5;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-weight: 600;
color: #999;
margin-bottom: 8rpx;
transition: all 0.3s ease;
}
.step-text {
font-size: 20rpx;
color: #999;
transition: all 0.3s ease;
}
.step-item.active .step-number {
background: #007AFF;
color: #FFFFFF;
box-shadow: 0 0 0 8rpx rgba(0,122,255,0.1);
}
.step-item.active .step-text {
color: #007AFF;
font-weight: 500;
}
.step-line {
flex: 1;
height: 2rpx;
background: #E5E5E5;
margin: 0 16rpx;
transition: all 0.3s ease;
}
.step-line.active {
background: #007AFF;
}
/* 头部样式 */
.page-header {
background: rgba(255, 255, 255, 0.95);

Write Preview
Loading…
Cancel
Save