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

对比价格ui设计

Xfy
Trae AI 5 days ago
parent
78fbaf767d
commit
4419f12566
3 changed files with 448 additions and 391 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. 120
      pages/goods-detail/goods-detail.js
  2. 172
      pages/goods-detail/goods-detail.wxml
  3. 455
      pages/goods-detail/goods-detail.wxss

120
pages/goods-detail/goods-detail.js
View File

@ -1365,6 +1365,15 @@ Page({
initialTouch: null, // 初始触摸点
// 对比价格相关状态
showCompareModal: false, // 是否显示对比价格弹窗
compareStep: 1, // 当前步骤（1：选择品种，2：选择规格）
categoryOptions: ['全部', '绿壳', '粉壳', '褐壳'], // 品种选项
categoryIcons: ['🥚', '🥚', '🥚', '🥚'], // 品种图标
categoryDescriptions: ['所有品种', '绿壳鸡蛋', '粉壳鸡蛋', '褐壳鸡蛋'], // 品种描述
selectedCategoryIndex: 0, // 选中的品种索引
selectedCategory: '', // 选中的品种
selectedSpecIndex: 0, // 选中的规格索引
selectedSpec: null, // 选中的规格
currentSpecifications: [], // 当前商品的规格列表
activeTab: 'home', // 当前激活的选项卡，'home'表示首页数据，'favorite'表示收藏数据
homeGoods: [], // 首页商品数据
favoriteGoods: [], // 收藏商品数据
@ -3691,7 +3700,7 @@ Page({
// 对比价格功能：处理按钮点击事件
onCompareClick: function () {
console.log('用户点击了对比价格按钮，准备跳转到对比价格页面');
console.log('用户点击了对比价格按钮，准备显示对比价格弹窗');
// 检查用户登录状态
const openid = wx.getStorageSync('openid');
@ -3731,54 +3740,84 @@ Page({
// 即使失败也不影响主流程
});
// 检查用户身份证认证状态
let idcardstatus = '';
const users = wx.getStorageSync('users') || {};
const userInfo = wx.getStorageSync('userInfo') || {};
if (userId && users[userId] && users[userId].idcardstatus) {
idcardstatus = users[userId].idcardstatus;
} else if (userInfo.idcardstatus) {
idcardstatus = userInfo.idcardstatus;
}
console.log('用户身份证认证状态:', idcardstatus);
// 获取当前商品的信息
const currentGoods = this.data.goodsDetail;
const currentCategory = currentGoods.category || '';
const currentSpecifications = currentGoods.weightQuantityData || [];
// 定义种类选项
const categoryOptions = ['全部', '绿壳', '粉壳', '褐壳', '土鸡蛋'];
// 找到当前商品种类在选项中的索引，默认为0（全部）
let defaultCategoryIndex = 0;
if (currentCategory) {
const index = categoryOptions.indexOf(currentCategory);
const index = this.data.categoryOptions.indexOf(currentCategory);
if (index !== -1) {
defaultCategoryIndex = index;
}
}
// 显示种类选择对话框
wx.showActionSheet({
itemList: categoryOptions,
success: (categoryRes) => {
const selectedCategoryIndex = categoryRes.tapIndex;
const selectedCategory = categoryOptions[selectedCategoryIndex];
// 初始化弹窗状态
this.setData({
showCompareModal: true,
compareStep: 1,
selectedCategoryIndex: defaultCategoryIndex,
selectedCategory: this.data.categoryOptions[defaultCategoryIndex],
selectedSpecIndex: 0,
selectedSpec: currentSpecifications.length > 0 ? currentSpecifications[0] : null,
currentSpecifications: currentSpecifications
});
},
// 选择品种
selectCategory: function (e) {
const index = e.currentTarget.dataset.index;
this.setData({
selectedCategoryIndex: index,
selectedCategory: this.data.categoryOptions[index]
});
},
// 选择规格
selectSpec: function (e) {
const index = e.currentTarget.dataset.index;
this.setData({
selectedSpecIndex: index,
selectedSpec: this.data.currentSpecifications[index]
});
},
// 进入下一步
nextStep: function () {
if (!this.data.selectedCategory) {
wx.showToast({
title: '请选择品种',
icon: 'none'
});
return;
}
this.setData({
compareStep: 2
});
},
// 返回上一步
prevStep: function () {
this.setData({
compareStep: 1
});
},
// 构建规格选择列表
const specList = currentSpecifications.map((spec, index) => {
return spec.display || spec.weightSpec || `规格${index + 1}`;
// 确认对比
confirmCompare: function () {
if (!this.data.selectedSpec) {
wx.showToast({
title: '请选择规格',
icon: 'none'
});
return;
}
// 显示规格选择对话框
wx.showActionSheet({
itemList: specList,
success: (specRes) => {
const selectedSpecIndex = specRes.tapIndex;
const selectedSpec = currentSpecifications[selectedSpecIndex];
const currentGoods = this.data.goodsDetail;
const selectedCategory = this.data.selectedCategory;
const selectedSpec = this.data.selectedSpec;
// 显示提示信息
wx.showToast({
@ -3787,6 +3826,11 @@ Page({
duration: 1500,
success: () => {
setTimeout(() => {
// 关闭弹窗
this.setData({
showCompareModal: false
});
// 构建要传递的数据
const goodsData = {
id: currentGoods.id || currentGoods.productId,
@ -3826,16 +3870,6 @@ Page({
}
});
},
fail: (res) => {
console.log('选择规格失败:', res);
}
});
},
fail: (res) => {
console.log('选择种类失败:', res);
}
});
},
// 关闭对比价格弹窗
closeCompareModal: function () {

172
pages/goods-detail/goods-detail.wxml
View File

@ -307,137 +307,81 @@
<!-- 底部弹出层 - 对比价格 -->
<view wx:if="{{showCompareModal}}" class="compare-modal-overlay" bindtap="closeCompareModal">
<view class="compare-modal-container" catchtap="stopPropagation">
<view class="compare-modal-header">
<text class="compare-modal-title">对比价格</text>
<text class="compare-modal-close" bindtap="closeCompareModal">×</text>
<!-- 步骤指示器 -->
<view class="compare-step-container">
<view class="compare-step-wrapper">
<view class="compare-step {{compareStep === 1 ? 'active' : ''}}">
<view class="compare-step-circle">{{compareStep === 1 ? '✓' : '1'}}</view>
<view class="compare-step-line {{compareStep >= 2 ? 'active' : ''}}"></view>
</view>
<!-- 选项卡 -->
<view class="compare-tabs">
<view
class="compare-tab {{activeTab === 'home' ? 'active' : ''}}"
bindtap="switchTab"
data-tab="home"
>
相同规格的同种类型
<view class="compare-step {{compareStep === 2 ? 'active' : ''}}">
<view class="compare-step-circle">{{compareStep === 2 ? '✓' : '2'}}</view>
<view class="compare-step-line"></view>
</view>
<view class="compare-step">
<view class="compare-step-circle">3</view>
</view>
<view
class="compare-tab {{activeTab === 'favorite' ? 'active' : ''}}"
bindtap="switchTab"
data-tab="favorite"
>
已收藏数据
</view>
</view>
<!-- 商品列表 -->
<view class="compare-goods-list">
<block wx:if="{{activeTab === 'home' && homeGoods.length > 0}}">
<view wx:for="{{homeGoods}}" wx:key="id" class="compare-goods-item" bindtap="viewCompareGoodsDetail" data-item="{{item}}">
<view class="product-image-wrapper">
<!-- 视频处理：根据mediaItems中的类型字段判断 -->
<video
wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}"
class="product-media"
src="{{item.mediaItems[0].url}}"
mode="aspectFit"
show-center-play-btn="{{true}}"
show-play-btn="{{false}}"
controls="{{true}}"
autoplay="{{true}}"
loop="{{true}}"
muted="{{true}}"
object-fit="contain"
poster=""
></video>
<!-- 图片处理 -->
<image
wx:else
class="product-media"
src="{{item.mediaItems && item.mediaItems.length > 0 ? item.mediaItems[0].url : (item.imageUrls[0] || '')}}"
mode="aspectFill"
lazy-load="true"
></image>
<!-- 已售空标签 -->
<view wx:if="{{item.isSoldOutLabel}}" class="sold-out-label">已售空</view>
<!-- 标题和引导文字 -->
<view class="compare-modal-header">
<text class="compare-modal-title">{{compareStep === 1 ? '选择鸡蛋品种' : '选择鸡蛋规格'}}</text>
<text class="compare-modal-subtitle">{{compareStep === 1 ? '请选择您想对比的鸡蛋品种' : '请选择您想对比的鸡蛋规格'}}</text>
</view>
<view class="compare-goods-info">
<text class="compare-goods-name">{{item.name}}</text>
<view class="compare-goods-spec-quantity">
<block wx:if="{{item.weightQuantityData && item.weightQuantityData.length > 0}}">
<view wx:for="{{item.weightQuantityData}}" wx:for-item="specItem" wx:key="index">
{{specItem.display}}
<text wx:if="{{specItem.isOffShelf}}" style="color: red; margin-left: 20rpx;">已下架</text>
<!-- 已选品种提示区 -->
<view wx:if="{{compareStep === 2 && selectedCategory}}" class="compare-selected-category">
<text class="compare-selected-icon">✓</text>
<text class="compare-selected-text">已选品种：{{selectedCategory}}</text>
</view>
</block>
<block wx:else>
{{item.specification || item.spec || item.specs || '暂无规格'}}|{{item.quantity || '暂无件数'}}件
</block>
<!-- 内容区域 -->
<view class="compare-content">
<!-- 品种选择列表 -->
<block wx:if="{{compareStep === 1}}">
<view wx:for="{{categoryOptions}}" wx:key="index" class="compare-option {{selectedCategoryIndex === index ? 'selected' : ''}}" bindtap="selectCategory" data-index="{{index}}">
<view class="compare-option-icon">{{categoryIcons[index]}}</view>
<view class="compare-option-info">
<text class="compare-option-name">{{item}}</text>
<text class="compare-option-desc">{{categoryDescriptions[index]}}</text>
</view>
<text class="compare-goods-region-time">
{{item.province || item.region || '暂无地区'}}{{item.formattedDate ? ' | 售出时间：' + item.formattedDate : ''}}
</text>
<view class="compare-option-radio {{selectedCategoryIndex === index ? 'selected' : ''}}">
<view wx:if="{{selectedCategoryIndex === index}}" class="compare-option-radio-inner"></view>
</view>
<!-- 右侧售空文字 -->
<view wx:if="{{item.status === 'sold_out'}}" class="sold-out-text">售空</view>
</view>
</block>
<block wx:elif="{{activeTab === 'home' && homeGoods.length === 0}}">
<view class="compare-empty">暂无首页数据</view>
</block>
<block wx:if="{{activeTab === 'favorite' && favoriteGoods.length > 0}}">
<view wx:for="{{favoriteGoods}}" wx:key="id" class="compare-goods-item" bindtap="viewCompareGoodsDetail" data-item="{{item}}">
<view class="product-image-wrapper">
<!-- 视频处理：根据mediaItems中的类型字段判断 -->
<video
wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}"
class="product-media"
src="{{item.mediaItems[0].url}}"
mode="aspectFit"
show-center-play-btn="{{true}}"
show-play-btn="{{false}}"
controls="{{true}}"
autoplay="{{true}}"
loop="{{true}}"
muted="{{true}}"
object-fit="contain"
poster=""
></video>
<!-- 图片处理 -->
<image
wx:else
class="product-media"
src="{{item.mediaItems && item.mediaItems.length > 0 ? item.mediaItems[0].url : (item.imageUrls[0] || '')}}"
mode="aspectFill"
lazy-load="true"
></image>
<!-- 已售空标签 -->
<view wx:if="{{item.isSoldOutLabel}}" class="sold-out-label">已售空</view>
<!-- 规格选择列表 -->
<block wx:elif="{{compareStep === 2}}">
<view wx:for="{{currentSpecifications}}" wx:key="index" class="compare-option {{selectedSpecIndex === index ? 'selected' : ''}}" bindtap="selectSpec" data-index="{{index}}">
<view class="compare-option-info spec-info">
<text class="compare-option-name">{{item.display || item.weightSpec}}</text>
<text class="compare-option-desc">{{item.price ? '价格：¥' + item.price : '价格：暂无'}}</text>
</view>
<view class="compare-goods-info">
<text class="compare-goods-name">{{item.name}}</text>
<view class="compare-goods-spec-quantity">
<block wx:if="{{item.weightQuantityData && item.weightQuantityData.length > 0}}">
<view wx:for="{{item.weightQuantityData}}" wx:for-item="specItem" wx:key="index">
{{specItem.display}}
<text wx:if="{{specItem.isOffShelf}}" style="color: red; margin-left: 20rpx;">已下架</text>
<view class="compare-option-radio {{selectedSpecIndex === index ? 'selected' : ''}}">
<view wx:if="{{selectedSpecIndex === index}}" class="compare-option-radio-inner"></view>
</view>
</block>
<block wx:else>
{{item.specification || item.spec || item.specs || '暂无规格'}}|{{item.quantity || '暂无件数'}}件
</block>
</view>
<text class="compare-goods-region-time">
{{item.province || item.region || '暂无地区'}}{{item.formattedDate ? ' | 售出时间：' + item.formattedDate : ''}}
</text>
</view>
<!-- 右侧售空文字 -->
<view wx:if="{{item.status === 'sold_out'}}" class="sold-out-text">售空</view>
</block>
</view>
<!-- 底部按钮区域 -->
<view class="compare-modal-footer">
<block wx:if="{{compareStep === 1}}">
<button class="compare-next-button" bindtap="nextStep">
下一步
</button>
</block>
<block wx:elif="{{activeTab === 'favorite' && favoriteGoods.length === 0}}">
<view class="compare-empty">暂无收藏商品</view>
<block wx:elif="{{compareStep === 2}}">
<view class="compare-footer-buttons">
<button class="compare-back-button" bindtap="prevStep">
返回
</button>
<button class="compare-confirm-button" bindtap="confirmCompare">
确认
</button>
</view>
</block>
</view>
</view>

455
pages/goods-detail/goods-detail.wxss
View File

@ -834,21 +834,20 @@ video.slider-media .wx-video-volume-icon {
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: flex-end;
align-items: center;
z-index: 9999;
animation: fadeIn 0.3s ease-out;
}
.compare-modal-container {
width: 100%;
width: 340px;
background-color: #fff;
border-top-left-radius: 32rpx;
border-top-right-radius: 32rpx;
padding-bottom: 20rpx;
max-height: 70vh;
border-radius: 20px;
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
animation: slideUp 0.3s ease-out;
display: flex;
flex-direction: column;
max-height: 560px;
}
@keyframes fadeIn {
@ -869,6 +868,268 @@ video.slider-media .wx-video-volume-icon {
}
}
/* 步骤指示器 */
.compare-step-container {
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.compare-step-wrapper {
width: 280px;
display: flex;
align-items: center;
justify-content: space-between;
}
.compare-step {
display: flex;
align-items: center;
flex: 1;
}
.compare-step-circle {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 500;
background-color: #E5E7EB;
color: #9CA3AF;
z-index: 1;
}
.compare-step.active .compare-step-circle {
background-color: #165DFF;
color: #FFFFFF;
}
.compare-step-line {
flex: 1;
height: 2px;
background-color: #E5E7EB;
margin: 0 12px;
}
.compare-step-line.active {
background-color: #165DFF;
}
/* 标题和引导文字 */
.compare-modal-header {
padding: 0 24px 24px;
text-align: center;
}
.compare-modal-title {
font-size: 18px;
font-weight: 500;
color: #1A1A1A;
line-height: 24px;
margin-bottom: 4px;
}
.compare-modal-subtitle {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 20px;
}
/* 已选品种提示区 */
.compare-selected-category {
width: 292px;
height: 48px;
background-color: #F0F7FF;
border-radius: 12px;
margin: 0 24px 16px;
padding: 12px 16px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.compare-selected-icon {
font-size: 20px;
color: #165DFF;
margin-right: 8px;
}
.compare-selected-text {
font-size: 14px;
font-weight: 500;
color: #165DFF;
line-height: 20px;
}
/* 内容区域 */
.compare-content {
flex: 1;
padding: 0 24px 24px;
overflow-y: auto;
}
/* 选项样式 */
.compare-option {
height: 80px;
background-color: #FFFFFF;
border: 2px solid #E5E7EB;
border-radius: 12px;
margin-bottom: 12px;
display: flex;
align-items: center;
padding: 0 16px;
transition: all 0.3s ease;
}
.compare-option.selected {
border-color: #165DFF;
background-color: #F0F7FF;
}
.compare-option-icon {
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #F0F7FF;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-right: 12px;
}
.compare-option-info {
flex: 1;
}
.compare-option-info.spec-info {
margin-left: 0;
}
.compare-option-name {
font-size: 16px;
font-weight: 400;
color: #666666;
line-height: 22px;
margin-bottom: 4px;
}
.compare-option.selected .compare-option-name {
font-weight: 500;
color: #1A1A1A;
}
.compare-option-desc {
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
.compare-option-radio {
width: 20px;
height: 20px;
border: 2px solid #D1D5DB;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.compare-option-radio.selected {
border-color: #165DFF;
}
.compare-option-radio-inner {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #165DFF;
}
/* 底部按钮区域 */
.compare-modal-footer {
padding: 0 24px 24px;
}
.compare-next-button {
width: 292px;
height: 44px;
background-color: #165DFF;
color: #FFFFFF;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
line-height: 22px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin: 0;
}
.compare-next-button:active {
background-color: #0E47D9;
transform: scale(0.98);
}
.compare-footer-buttons {
display: flex;
gap: 12px;
width: 292px;
}
.compare-back-button {
flex: 1;
height: 44px;
background-color: #FFFFFF;
color: #4B5563;
border: 1px solid #D1D5DB;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
line-height: 22px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin: 0;
}
.compare-back-button:active {
background-color: #F9FAFB;
transform: scale(0.98);
}
.compare-confirm-button {
flex: 1;
height: 44px;
background-color: #165DFF;
color: #FFFFFF;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
line-height: 22px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin: 0;
}
.compare-confirm-button:active {
background-color: #0E47D9;
transform: scale(0.98);
}
/* 内部信息样式 */
.internal-info {
margin: 8px 16px;
@ -996,188 +1257,6 @@ video.slider-media .wx-video-volume-icon {
font-weight: 500;
}
.compare-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 32rpx;
border-bottom: 1rpx solid #f0f0f0;
position: relative;
}
.compare-modal-title {
font-size: 36rpx;
font-weight: bold;
color: #222;
text-align: center;
flex: 1;
}
.compare-modal-close {
font-size: 48rpx;
color: #999;
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.compare-modal-close:active {
background-color: #f0f0f0;
transform: scale(0.9);
}
.compare-tabs {
display: flex;
background-color: #f8f9fa;
padding: 12rpx;
border-radius: 0;
}
.compare-tab {
flex: 1;
text-align: center;
padding: 16rpx 0;
font-size: 32rpx;
color: #666;
border-radius: 12rpx;
transition: all 0.3s ease;
font-weight: 500;
}
.compare-tab.active {
background-color: #fff;
color: #4a90e2;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
font-weight: bold;
}
.compare-goods-list {
flex: 1;
overflow-y: auto;
padding: 12rpx;
}
.compare-goods-item {
display: flex;
align-items: center;
background-color: #fff;
border-radius: 12rpx;
padding: 12rpx;
margin-bottom: 12rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1rpx solid #f0f0f0;
}
.compare-goods-item:active {
transform: translateY(2rpx);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
}
.compare-goods-image {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
margin-right: 12rpx;
object-fit: cover;
background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%);
}
/* 视频和图片容器样式 */
.product-image-wrapper {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
margin-right: 12rpx;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%);
}
/* 视频和图片样式 */
.product-media {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
.compare-goods-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.compare-goods-name {
font-size: 32rpx;
color: #222;
font-weight: 600;
line-height: 1.3;
margin-bottom: 4rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.compare-goods-spec {
font-size: 28rpx;
color: #666;
margin-bottom: 4rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.compare-goods-quantity {
font-size: 28rpx;
color: #666;
margin-bottom: 4rpx;
}
.compare-goods-price {
font-size: 36rpx;
color: #ff4d4f;
font-weight: bold;
margin-bottom: 4rpx;
}
.compare-goods-region {
font-size: 26rpx;
color: #999;
}
.compare-goods-spec-quantity {
font-size: 28rpx;
color: #666;
line-height: 1.1;
margin: 2rpx 0;
}
.compare-goods-region-time {
font-size: 26rpx;
color: #999;
line-height: 1.1;
margin-top: 2rpx;
}
.compare-empty {
text-align: center;
padding: 80rpx 0;
color: #999;
font-size: 32rpx;
}
/* 修复样式冲突 */
.goods-detail-page {
position: relative;

Write Preview
Loading…
Cancel
Save