Browse Source

优化商品详情页面布局,移除顶部空白,增大内容显示;修复商品重复问题;隐藏联系我们按钮

pull/3/head
Default User 2 months ago
parent
commit
71cfedfe2a
  1. 3
      pages/goods-detail/goods-detail.wxml
  2. 139
      pages/goods-detail/goods-detail.wxss
  3. 115
      pages/index/index.js
  4. 5
      pages/index/index.wxml

3
pages/goods-detail/goods-detail.wxml

@ -119,7 +119,6 @@
<!-- 联系信息 -->
<view class="contact-info">
<text class="contact-label">联系信息</text>
<view class="contact-content">
<view class="contact-item">
<text class="contact-icon user-icon">👤</text>
@ -134,7 +133,7 @@
</view>
</view>
</view>
</view>
</view>
<!-- 登录弹窗 -->
<view wx:if="{{showOneKeyLoginModal}}" class="auth-modal-overlay">

139
pages/goods-detail/goods-detail.wxss

@ -53,14 +53,14 @@
/* 商品详情内容区域 */
.goods-detail-content {
padding-top: 44px;
padding-bottom: 100px;
padding-top: 0; /* 移除顶部内边距,消除空白 */
padding-bottom: 90px; /* 减小底部内边距 */
}
/* 商品图片轮播 */
.goods-image-slider {
width: 100%;
height: 280px;
height: 240px; /* 适当增大图片高度 */
background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%);
overflow: hidden;
position: relative;
@ -89,7 +89,7 @@
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
padding: 10px; /* 减小内边距 */
box-sizing: border-box;
}
@ -109,9 +109,10 @@
/* 商品基本信息 */
.goods-info {
background-color: #ffffff;
padding: 20px 16px 16px;
padding: 14px 16px 10px; /* 适当增大内边距 */
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
margin-top: 0; /* 移除负外边距,让图片和信息自然衔接 */
}
.goods-info::after {
@ -126,22 +127,22 @@
.goods-name {
display: block;
font-size: 20px;
font-size: 20px; /* 适当增大字体大小 */
font-weight: 700;
color: #262626;
margin-bottom: 12px;
line-height: 1.4;
margin-bottom: 10px; /* 适当增大底部间距 */
line-height: 1.35; /* 适当增大行高 */
letter-spacing: -0.2px;
}
.goods-price {
display: flex;
align-items: center;
margin-bottom: 4px;
margin-bottom: 6px;
}
.price-symbol {
font-size: 18px;
font-size: 18px; /* 适当增大字体大小 */
color: #666;
margin-right: 4px;
font-weight: 500;
@ -151,7 +152,7 @@
}
.price-value {
font-size: 24px;
font-size: 26px; /* 适当增大字体大小 */
color: #ff4d4f;
font-weight: 700;
letter-spacing: -0.5px;
@ -193,15 +194,15 @@
/* 商品详细信息网格 */
.info-grid {
background-color: #ffffff;
margin: 12px 0;
padding: 16px;
margin: 8px 0;
padding: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.info-row {
display: flex;
flex-wrap: wrap;
margin-bottom: 16px;
margin-bottom: 10px;
background: #f0f5ff;
border-radius: 10px;
overflow: hidden;
@ -216,7 +217,7 @@
flex: 0 0 50%;
display: flex;
flex-direction: column;
padding: 14px 16px;
padding: 12px 14px;
box-sizing: border-box;
position: relative;
}
@ -232,7 +233,7 @@
}
.info-label-container {
margin-bottom: 6px;
margin-bottom: 4px; /* 减小间距 */
}
.info-label {
@ -240,11 +241,11 @@
color: #8c8c8c;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
letter-spacing: 0.2px;
}
.info-value-container {
min-height: 24px;
min-height: 20px; /* 减小最小高度 */
}
.info-value {
@ -256,72 +257,67 @@
/* 联系信息 */
.contact-info {
margin: 16px;
padding: 16px;
border-radius: 12px;
margin: 8px 16px; /* 减小外边距 */
padding: 12px; /* 减小内边距 */
border-radius: 10px; /* 减小圆角 */
background: #ffffff;
border: 1px solid #d6e4ff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.contact-label {
display: block;
font-size: 16px;
font-weight: 600;
color: #2f54eb;
margin-bottom: 16px;
text-align: center;
display: none; /* 隐藏联系信息标题,节省空间 */
}
.contact-content {
display: flex;
flex-direction: column;
gap: 12px;
gap: 6px; /* 减小间距 */
}
.contact-item {
display: flex;
align-items: center;
padding: 8px 0;
padding: 6px 0; /* 减小内边距 */
}
.phone-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
padding: 6px 0; /* 减小内边距 */
}
.contact-icon {
font-size: 16px;
margin-right: 10px;
font-size: 14px; /* 减小图标大小 */
margin-right: 8px; /* 减小间距 */
flex-shrink: 0;
width: 20px;
width: 18px; /* 减小宽度 */
text-align: center;
color: #2f54eb;
}
.user-icon {
font-size: 18px;
font-size: 16px; /* 减小图标大小 */
}
.phone-icon {
font-size: 18px;
font-size: 16px; /* 减小图标大小 */
}
.contact-label-text {
font-size: 14px;
font-size: 13px; /* 减小字体大小 */
color: #595959;
margin-right: 8px;
margin-right: 6px; /* 减小间距 */
white-space: nowrap;
flex-shrink: 0;
}
.contact-text {
font-size: 14px;
font-size: 13px; /* 减小字体大小 */
color: #262626;
flex-shrink: 0;
margin-right: 16px;
margin-right: 12px; /* 减小间距 */
}
.phone-info {
@ -363,22 +359,32 @@
/* 底部按钮区域样式 */
.action-buttons {
display: flex;
justify-content: space-around;
align-items: center;
padding: 16px;
background-color: #ffffff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
padding: 12px 16px; /* 减小内边距 */
background-color: #ffffff;
border-top: 1px solid #f0f0f0;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
z-index: 99;
display: flex;
gap: 8px; /* 减小按钮间距 */
}
.bottom-button {
flex: 1;
margin: 0 8px;
font-weight: 500;
height: 48px; /* 减小按钮高度 */
border-radius: 24px; /* 减小圆角 */
font-size: 16px; /* 减小字体大小 */
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
border: none;
outline: none;
transition: all 0.3s ease;
margin: 0;
}
.bottom-button:active {
@ -392,38 +398,21 @@
box-shadow: 0 4px 12px rgba(47, 84, 235, 0.3);
}
.call-button:active {
background-color: #1d39c4;
transform: scale(0.98);
.call-button.bottom-button {
background-color: #ffffff;
color: #2f54eb;
border: 2px solid #2f54eb;
box-shadow: none;
}
/* 操作按钮区域 */
.action-buttons {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
background-color: #ffffff;
border-top: 1px solid #f0f0f0;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
z-index: 99;
display: flex;
gap: 12px;
.call-button.bottom-button:active {
background-color: #f0f4ff;
transform: scale(0.98);
}
.bottom-button {
flex: 1;
height: 52px;
border-radius: 26px;
font-size: 18px;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
border: none;
outline: none;
transition: all 0.3s ease;
.chat-button.bottom-button:active {
background-color: #d6f7e6;
transform: scale(0.98);
}
.call-button.bottom-button {

115
pages/index/index.js

@ -447,8 +447,13 @@ Page({
const imageUrls = product.imageUrls || product.images || [];
const formattedImageUrls = Array.isArray(imageUrls) ? imageUrls : [imageUrls];
// 确保商品ID的一致性
const productId = product.productId || product.id;
return {
...product,
id: productId, // 统一使用id字段
productId: productId, // 同时保留productId字段
category: product.category || '',
fullRegion: product.region || '',
region: product.region ? this.extractProvince(product.region) : '',
@ -471,12 +476,23 @@ Page({
}
})
// 过滤隐藏状态的商品
newGoods = newGoods.filter(item => (item.status || '').toLowerCase() !== 'hidden')
// 先对新商品进行内部查重
const uniqueNewGoodsMap = new Map();
newGoods.forEach(item => {
if (!uniqueNewGoodsMap.has(item.id)) {
uniqueNewGoodsMap.set(item.id, item);
}
});
newGoods = Array.from(uniqueNewGoodsMap.values());
// 更新商品的收藏状态
this.updateGoodsFavoriteStatus(newGoods, isLoadMore)
// 只在第一页或刷新时在商品列表最前面插入广告
// 只在第一页或刷新时在商品列表最前面插入广告,且只插入一次
let adSlotsAdded = false;
if ((!isLoadMore || this.data.page === 1) && newGoods.length > 0) {
// 确保广告位在最前面
const adSlots = [
@ -499,14 +515,17 @@ Page({
];
newGoods = [...adSlots, ...newGoods];
adSlotsAdded = true;
}
let updatedGoods = []
if (isLoadMore) {
// 加载更多时,去重处理
const existingIds = new Set(this.data.goods.map(item => item.id));
const uniqueNewGoods = newGoods.filter(item => !existingIds.has(item.id));
updatedGoods = [...this.data.goods, ...uniqueNewGoods];
} else {
// 首次加载或切换分类时,直接使用去重后的新商品
updatedGoods = newGoods
}
@ -537,8 +556,13 @@ Page({
const imageUrls = product.imageUrls || product.images || [];
const formattedImageUrls = Array.isArray(imageUrls) ? imageUrls : [imageUrls];
// 确保商品ID的一致性
const productId = product.productId || product.id;
return {
...product,
id: productId, // 统一使用id字段
productId: productId, // 同时保留productId字段
category: product.category || '',
fullRegion: product.region || '',
region: product.region ? this.extractProvince(product.region) : '',
@ -563,9 +587,20 @@ Page({
newGoods = newGoods.filter(item => (item.status || '').toLowerCase() !== 'hidden')
const existingIds = new Set(existingGoods.filter(item => !item.isAd).map(item => item.id));
// 对新商品进行内部查重
const newGoodsMap = new Map();
newGoods.forEach(item => {
if (!newGoodsMap.has(item.id)) {
newGoodsMap.set(item.id, item);
}
});
newGoods = Array.from(newGoodsMap.values());
// 移除与现有商品重复的新商品(包括广告和普通商品)
const existingIds = new Set(existingGoods.map(item => item.id));
const uniqueNewGoods = newGoods.filter(item => !existingIds.has(item.id));
// 合并现有商品和去重后的新商品
const updatedGoods = [...existingGoods, ...uniqueNewGoods]
const filteredGoods = this.applyFilters(updatedGoods, false)
@ -754,35 +789,50 @@ Page({
processCachedGoods: function(cachedGoods, isLoadMore) {
console.log('processCachedGoods 被调用, isLoadMore:', isLoadMore);
// 处理商品数据格式
const processedGoods = cachedGoods.map(product => {
// 处理商品数据格式并去重
const goodsMap = new Map();
cachedGoods.forEach(product => {
const imageUrls = product.imageUrls || product.images || [];
const formattedImageUrls = Array.isArray(imageUrls) ? imageUrls : [imageUrls];
return {
...product,
category: product.category || '',
fullRegion: product.region || '',
region: product.region ? this.extractProvince(product.region) : '',
grossWeight: product.grossWeight || product.weight || '',
displayGrossWeight: product.grossWeight || product.weight || '',
status: product.status || 'published',
createdAt: product.created_at || product.createTime || null,
reservedCount: product.reservedCount || product.selected || 0,
reservedCountDisplay: product.reservedCount || product.selected || 0,
sales: product.sales || product.reservedCount || Math.floor(Math.random() * 1000) + 100,
product_contact: product.product_contact || '',
contact_phone: product.contact_phone || '',
supplyStatus: product.supplyStatus || '',
sourceType: product.sourceType || '',
negotiateStatus: '可议价',
isReserved: false,
isFavorite: false,
currentImageIndex: 0,
imageUrls: formattedImageUrls
// 确保商品ID的一致性
const productId = product.productId || product.id;
// 只有当商品ID不存在时才添加,避免重复
if (!goodsMap.has(productId)) {
const processedProduct = {
...product,
id: productId, // 统一使用id字段
productId: productId, // 同时保留productId字段
category: product.category || '',
fullRegion: product.region || '',
region: product.region ? this.extractProvince(product.region) : '',
grossWeight: product.grossWeight || product.weight || '',
displayGrossWeight: product.grossWeight || product.weight || '',
status: product.status || 'published',
createdAt: product.created_at || product.createTime || null,
reservedCount: product.reservedCount || product.selected || 0,
reservedCountDisplay: product.reservedCount || product.selected || 0,
sales: product.sales || product.reservedCount || Math.floor(Math.random() * 1000) + 100,
product_contact: product.product_contact || '',
contact_phone: product.contact_phone || '',
supplyStatus: product.supplyStatus || '',
sourceType: product.sourceType || '',
negotiateStatus: '可议价',
isReserved: false,
isFavorite: false,
currentImageIndex: 0,
imageUrls: formattedImageUrls
};
goodsMap.set(productId, processedProduct);
}
});
// 转换为数组
const processedGoods = Array.from(goodsMap.values());
// 更新收藏状态
this.updateGoodsFavoriteStatus(processedGoods, false);
@ -862,6 +912,21 @@ Page({
filtered = filtered.filter(item => item.isAd || (item.region && item.region.includes(selectedRegion)))
}
// 去重处理 - 确保返回的商品列表中没有重复的商品
const uniqueGoodsMap = new Map();
filtered.forEach(item => {
// 使用id作为唯一标识,如果id不存在则使用productId
const uniqueId = item.id || item.productId;
if (uniqueId && !uniqueGoodsMap.has(uniqueId)) {
uniqueGoodsMap.set(uniqueId, item);
}
// 对于广告位,使用它们的唯一id
else if (item.isAd && !uniqueGoodsMap.has(item.id)) {
uniqueGoodsMap.set(item.id, item);
}
});
filtered = Array.from(uniqueGoodsMap.values());
if (shouldSort) {
filtered.sort((a, b) => {
const reservedCountA = a.reservedCount || 0

5
pages/index/index.wxml

@ -100,10 +100,7 @@
<text class="sidebar-item-icon">📢</text>
<text class="sidebar-item-text">招商合作</text>
</view>
<view class="sidebar-item" bindtap="navigateToCustomerService" data-type="buyer">
<text class="sidebar-item-icon">📞</text>
<text class="sidebar-item-text">联系我们</text>
</view>
</view>
</view>

Loading…
Cancel
Save