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

修改商品详情页和首页登录流程 

1. 将登录检查移至 viewGoodsDetail 函数末尾
2. 在详情页显示登录弹窗而非在首页
3. 为收藏和在线咨询功能添加登录检查
4. 优化用户体验，确保先浏览再提示登录
pull/3/head
徐飞洋 2 months ago
parent
3dc0cd3446
commit
05c9e21bd1
6 changed files with 337 additions and 252 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. 100
      pages/goods-detail/goods-detail.js
  2. 27
      pages/goods-detail/goods-detail.wxml
  3. 105
      pages/goods-detail/goods-detail.wxss
  4. 93
      pages/index/index.js
  5. 170
      pages/index/index.wxml
  6. 94
      pages/index/index.wxss

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

@ -94,6 +94,8 @@ Page({
previewImageIndex: 0, // 当前预览图片的索引 previewImageIndex: 0, // 当前预览图片的索引
fromSeller: false, // 是否来自seller页面 fromSeller: false, // 是否来自seller页面
isFavorite: false, // 当前商品是否已收藏 isFavorite: false, // 当前商品是否已收藏
// 登录弹窗状态
showOneKeyLoginModal: false, // 是否显示登录弹窗
// 图片缩放相关状态 // 图片缩放相关状态
scale: 1, // 当前缩放比例 scale: 1, // 当前缩放比例
lastScale: 1, // 上一次缩放比例 lastScale: 1, // 上一次缩放比例
@ -108,6 +110,18 @@ Page({
onLoad: function (options) { onLoad: function (options) {
console.log('商品详情页面加载，参数:', options); console.log('商品详情页面加载，参数:', options);
// 处理登录状态检查
if (options.needLogin === 'true' || options.needLogin === true) {
console.log('检测到需要登录，显示登录提示弹窗');
// 延迟显示登录弹窗，确保页面完全加载
setTimeout(() => {
this.setData({
showOneKeyLoginModal: true
});
}, 500);
}
// 解析传入的商品数据 // 解析传入的商品数据
let goodsData = null; let goodsData = null;
if (options.goodsData) { if (options.goodsData) {
@ -435,11 +449,9 @@ Page({
if (!openid || !userId) { if (!openid || !userId) {
console.log('用户未登录，显示一键登录弹窗'); console.log('用户未登录，显示一键登录弹窗');
// 由于商品详情页可能没有登录弹窗，这里直接提示用户登录 // 显示登录弹窗
wx.showToast({ this.setData({
title: '请先登录', showOneKeyLoginModal: true
icon: 'none',
duration: 2000
}); });
return; return;
} }
@ -773,6 +785,18 @@ Page({
return; return;
} }
// 检查用户登录状态
const openid = wx.getStorageSync('openid');
const userId = wx.getStorageSync('userId');
if (!openid || !userId) {
console.log('用户未登录，显示登录弹窗');
this.setData({
showOneKeyLoginModal: true
});
return;
}
// 跳转到聊天界面或打开客服窗口 // 跳转到聊天界面或打开客服窗口
wx.showModal({ wx.showModal({
title: '在线咨询', title: '在线咨询',
@ -799,14 +823,8 @@ Page({
userPhone = wx.getStorageSync('phoneNumber'); userPhone = wx.getStorageSync('phoneNumber');
} }
} }
// 如果都获取不到，使用默认登录手机号
if (!userPhone) {
userPhone = '18482694520';
}
} catch (e) { } catch (e) {
console.error('获取用户手机号失败:', e); console.error('获取用户手机号失败:', e);
// 如果获取失败，使用默认登录手机号
userPhone = '18482694520';
} }
console.log('当前用户手机号:', userPhone); console.log('当前用户手机号:', userPhone);
@ -942,6 +960,66 @@ Page({
}, },
*/ */
// 关闭登录弹窗
closeOneKeyLoginModal() {
this.setData({
showOneKeyLoginModal: false
});
},
// 处理手机号授权结果
onPhoneNumberResult(e) {
console.log('getPhoneNumber响应:', e.detail);
// 关闭登录弹窗
this.setData({
showOneKeyLoginModal: false
});
// 用户点击拒绝授权
if (e.detail.errMsg === 'getPhoneNumber:fail user deny') {
wx.showToast({
title: '需要授权手机号才能使用',
icon: 'none',
duration: 2000
});
return;
}
// 处理没有权限的情况
if (e.detail.errMsg === 'getPhoneNumber:fail no permission') {
wx.showToast({
title: '当前环境无法获取手机号权限',
icon: 'none',
duration: 3000
});
return;
}
// 这里可以添加完整的登录处理逻辑
// 参考首页的 onGetPhoneNumber 函数
console.log('手机号授权成功，需要完整的登录流程处理');
// 由于详情页的登录处理比较复杂，建议跳转到首页处理
// 或者可以触发一个全局事件，让其他页面处理登录逻辑
const app = getApp();
if (app && app.globalData) {
app.globalData.pendingPhoneAuth = e.detail;
// 可以跳转到首页处理登录
wx.switchTab({
url: '/pages/index/index',
success: () => {
// 可以发送事件通知首页处理登录
wx.showToast({
title: '请在首页完成登录',
icon: 'none',
duration: 2000
});
}
});
}
},
// 返回上一页 // 返回上一页
goBack() { goBack() {
wx.navigateBack(); wx.navigateBack();

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

@ -38,7 +38,7 @@
<span style="vertical-align: middle; font-size: 20rpx; color: white; background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); padding: 4rpx 8rpx; clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%); margin-left: 8rpx; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5); font-weight: bold; margin-top: -20rpx;">V</span> <span style="vertical-align: middle; font-size: 20rpx; color: white; background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); padding: 4rpx 8rpx; clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%); margin-left: 8rpx; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5); font-weight: bold; margin-top: -20rpx;">V</span>
</view> </view>
<view style="display: flex; align-items: flex-start;"> <view style="display: flex; align-items: flex-start;">
<view class="source-type-badge" style="display: flex; align-items: center; justify-content: center;"> <view class="source-type-badge" style="display: flex; align-items: center; justify-content: center; margin-right: 10rpx;">
<text style="color: {{goodsDetail.sourceTypeColor}}; font-weight: bold;">{{goodsDetail.sourceType || '暂无'}}</text> <text style="color: {{goodsDetail.sourceTypeColor}}; font-weight: bold;">{{goodsDetail.sourceType || '暂无'}}</text>
</view> </view>
</view> </view>
@ -90,7 +90,7 @@
</view> </view>
<view class="info-item"> <view class="info-item">
<view class="info-label-container"> <view class="info-label-container">
<text class="info-label">斤重</text> <text class="info-label">产品包装</text>
</view> </view>
<view class="info-value-container"> <view class="info-value-container">
<text class="info-value">{{goodsDetail.displayGrossWeight || '暂无'}}</text> <text class="info-value">{{goodsDetail.displayGrossWeight || '暂无'}}</text>
@ -134,8 +134,31 @@
</view> </view>
</view> </view>
</view> </view>
</view>
<!-- 登录弹窗 -->
<view wx:if="{{showOneKeyLoginModal}}" class="auth-modal-overlay">
<view class="auth-modal-container">
<view class="auth-modal-title">授权登录</view>
<view class="auth-modal-content">授权您的手机号后才能使用完整功能</view>
<view class="auth-modal-buttons">
<button
class="auth-primary-button"
open-type="getPhoneNumber"
bindgetphonenumber="onPhoneNumberResult"
>
授权手机号
</button>
<button
class="auth-cancel-button"
bindtap="closeOneKeyLoginModal"
>
取消
</button>
</view>
</view> </view>
</view> </view>
</view>
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<view class="action-buttons" wx:if="{{!fromSeller}}"> <view class="action-buttons" wx:if="{{!fromSeller}}">

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

@ -560,4 +560,109 @@
.price-value { .price-value {
font-size: 32px; font-size: 32px;
} }
}
/* 登录弹窗样式 */
.auth-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.auth-modal-container {
background-color: #fff;
border-radius: 32rpx;
width: 90%;
max-width: 720rpx;
padding: 60rpx 40rpx 40rpx;
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
border: 2rpx solid rgba(255, 255, 255, 0.8);
box-sizing: border-box;
}
.auth-modal-title {
font-size: 44rpx;
font-weight: bold;
color: #222;
text-align: center;
margin-bottom: 40rpx;
letter-spacing: 1rpx;
}
.auth-modal-content {
font-size: 32rpx;
line-height: 1.6;
color: #555;
text-align: center;
margin-bottom: 50rpx;
padding: 0 20rpx;
width: 100%;
box-sizing: border-box;
word-break: break-word;
}
.auth-modal-buttons {
display: flex;
flex-direction: column;
gap: 20rpx;
padding: 0 20rpx;
width: 100%;
box-sizing: border-box;
}
.auth-primary-button {
background-color: #07c160;
color: #fff;
font-size: 36rpx;
font-weight: 600;
line-height: 1.6;
border-radius: 12rpx;
padding: 32rpx 0;
width: 100%;
box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
transition: all 0.3s ease;
border: none;
margin: 0;
min-width: auto;
}
.auth-primary-button:active {
transform: translateY(2rpx);
box-shadow: 0 3rpx 12rpx rgba(7, 193, 96, 0.5);
}
.auth-primary-button::after {
border: none;
}
.auth-cancel-button {
background-color: #fff;
color: #666;
font-size: 36rpx;
font-weight: 500;
line-height: 1.6;
border-radius: 12rpx;
padding: 32rpx 0;
width: 100%;
border: 1rpx solid #e0e0e0;
transition: all 0.3s ease;
margin: 0;
min-width: auto;
}
.auth-cancel-button:active {
transform: translateY(2rpx);
border-color: #d0d0d0;
}
.auth-cancel-button::after {
border: none;
} }

93
pages/index/index.js
View File

@ -40,8 +40,6 @@ Page({
// 商品相关 - 淘宝风格 // 商品相关 - 淘宝风格
goods: [], goods: [],
filteredGoods: [], filteredGoods: [],
leftColumnGoods: [],
rightColumnGoods: [],
selectedCategory: '全部', selectedCategory: '全部',
categories: ['全部', '粉壳', '褐壳', '绿壳', '白壳'], categories: ['全部', '粉壳', '褐壳', '绿壳', '白壳'],
loadingMore: false, loadingMore: false,
@ -279,16 +277,13 @@ Page({
this.setData({ this.setData({
goods: updatedGoods goods: updatedGoods
}, () => { }, () => {
// 重新应用筛选条件，确保显示的商品收藏状态也更新 // 重新应用筛选条件，确保显示的商品收藏状态也更新
const filteredGoods = this.applyFilters(this.data.goods, false); const filteredGoods = this.applyFilters(this.data.goods, false);
const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods); this.setData({
this.setData({ filteredGoods: filteredGoods,
filteredGoods: filteredGoods, });
leftColumnGoods: leftColumnGoods,
rightColumnGoods: rightColumnGoods
}); });
});
}; };
app.eventBus.on('favoriteChanged', this.favoriteChangedHandler); app.eventBus.on('favoriteChanged', this.favoriteChangedHandler);
}, },
@ -367,8 +362,6 @@ Page({
hasMoreData: true, hasMoreData: true,
goods: existingGoods, goods: existingGoods,
filteredGoods: [], filteredGoods: [],
leftColumnGoods: [],
rightColumnGoods: []
}) })
const timestamp = new Date().getTime(); const timestamp = new Date().getTime();
@ -529,17 +522,9 @@ Page({
console.log('filteredGoods[1].category:', filteredGoods[1] ? filteredGoods[1].category : 'N/A') console.log('filteredGoods[1].category:', filteredGoods[1] ? filteredGoods[1].category : 'N/A')
} }
const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
console.log('leftColumnGoods 数量:', leftColumnGoods.length)
console.log('rightColumnGoods 数量:', rightColumnGoods.length)
console.log('leftColumnGoods[0]:', leftColumnGoods[0])
console.log('rightColumnGoods[0]:', rightColumnGoods[0])
this.setData({ this.setData({
goods: updatedGoods, goods: updatedGoods,
filteredGoods: filteredGoods, filteredGoods: filteredGoods,
leftColumnGoods: leftColumnGoods,
rightColumnGoods: rightColumnGoods,
loadingMore: false, loadingMore: false,
isLoading: false, isLoading: false,
page: this.data.page + 1 page: this.data.page + 1
@ -585,13 +570,9 @@ Page({
const filteredGoods = this.applyFilters(updatedGoods, false) const filteredGoods = this.applyFilters(updatedGoods, false)
const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
this.setData({ this.setData({
goods: updatedGoods, goods: updatedGoods,
filteredGoods: filteredGoods, filteredGoods: filteredGoods,
leftColumnGoods: leftColumnGoods,
rightColumnGoods: rightColumnGoods,
loadingMore: false, loadingMore: false,
isLoading: false, isLoading: false,
page: this.data.page + 1 page: this.data.page + 1
@ -806,16 +787,11 @@ Page({
this.updateGoodsFavoriteStatus(processedGoods, false); this.updateGoodsFavoriteStatus(processedGoods, false);
// 应用筛选条件 // 应用筛选条件
let filteredGoods = this.applyFilters(processedGoods, false); const filteredGoods = this.applyFilters(processedGoods, false);
// 分配到两列
const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods);
this.setData({ this.setData({
goods: processedGoods, goods: processedGoods,
filteredGoods: filteredGoods, filteredGoods: filteredGoods,
leftColumnGoods: leftColumnGoods,
rightColumnGoods: rightColumnGoods,
loadingMore: false, loadingMore: false,
isLoading: false, isLoading: false,
hasMoreData: false // 缓存数据不分页 hasMoreData: false // 缓存数据不分页
@ -835,6 +811,34 @@ Page({
}) })
}, },
// 统一字段长度
normalizeFieldLength: function(item) {
const normalized = { ...item }
// 统一 name 字段长度为 20 字符
if (normalized.name) {
normalized.name = normalized.name.length > 20 ?
normalized.name.substring(0, 17) + '...' :
normalized.name.padEnd(20, ' ')
}
// 统一 region 字段长度为 15 字符
if (normalized.region) {
normalized.region = normalized.region.length > 15 ?
normalized.region.substring(0, 12) + '...' :
normalized.region.padEnd(15, ' ')
}
// 统一 grossWeight 字段长度为 10 字符
if (normalized.grossWeight) {
normalized.grossWeight = normalized.grossWeight.length > 10 ?
normalized.grossWeight.substring(0, 7) + '...' :
normalized.grossWeight.padEnd(10, ' ')
}
return normalized
},
// 应用筛选条件 // 应用筛选条件
applyFilters: function(goods, shouldSort = true) { applyFilters: function(goods, shouldSort = true) {
let filtered = [...goods] let filtered = [...goods]
@ -874,6 +878,9 @@ Page({
}) })
} }
// 统一字段长度
filtered = filtered.map(item => this.normalizeFieldLength(item))
return filtered return filtered
}, },
@ -1019,12 +1026,9 @@ Page({
const filteredGoods = this.applyFilters(this.data.goods, false) const filteredGoods = this.applyFilters(this.data.goods, false)
const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods) const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
this.setData({ this.setData({
filteredGoods: filteredGoods, filteredGoods: filteredGoods,
groupedGoods: groupedGoods, groupedGoods: groupedGoods,
leftColumnGoods: leftColumnGoods,
rightColumnGoods: rightColumnGoods
}) })
}, },
@ -1059,12 +1063,9 @@ Page({
// 否则仅对本地商品进行筛选 // 否则仅对本地商品进行筛选
const filteredGoods = this.applyFilters(this.data.goods, false) const filteredGoods = this.applyFilters(this.data.goods, false)
const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods) const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
this.setData({ this.setData({
filteredGoods: filteredGoods, filteredGoods: filteredGoods,
groupedGoods: groupedGoods, groupedGoods: groupedGoods,
leftColumnGoods: leftColumnGoods,
rightColumnGoods: rightColumnGoods
}) })
} }
}, },
@ -1093,8 +1094,6 @@ Page({
hasMoreData: true, hasMoreData: true,
goods: [], goods: [],
filteredGoods: [], filteredGoods: [],
leftColumnGoods: [],
rightColumnGoods: [],
loadingMore: false, loadingMore: false,
isLoading: true isLoading: true
}) })
@ -1120,15 +1119,8 @@ Page({
// 查看商品详情 // 查看商品详情
viewGoodsDetail: function(e) { viewGoodsDetail: function(e) {
// 检查登录状态
if (this.data.needPhoneAuth) {
this.setData({
showOneKeyLoginModal: true
})
return;
}
const item = e.currentTarget.dataset.item const item = e.currentTarget.dataset.item
// 确保productId存在，优先使用id，其次使用productId // 确保productId存在，优先使用id，其次使用productId
const productId = String(item.id || item.productId || '') const productId = String(item.id || item.productId || '')
@ -1143,8 +1135,10 @@ Page({
} }
// 将完整的商品数据传递给详情页，包含联系人信息，与buyer页面保持一致 // 将完整的商品数据传递给详情页，包含联系人信息，与buyer页面保持一致
// 同时传递登录状态信息，让详情页决定是否显示登录弹窗
const needLogin = this.data.needPhoneAuth;
wx.navigateTo({ wx.navigateTo({
url: `/pages/goods-detail/goods-detail?goodsData=${encodeURIComponent(JSON.stringify(item))}&productId=${productId}` url: `/pages/goods-detail/goods-detail?goodsData=${encodeURIComponent(JSON.stringify(item))}&productId=${productId}&needLogin=${needLogin}`
}) })
}, },
@ -1351,11 +1345,8 @@ Page({
}, () => { }, () => {
// 重新应用筛选条件，确保显示的商品收藏状态也更新 // 重新应用筛选条件，确保显示的商品收藏状态也更新
const filteredGoods = this.applyFilters(this.data.goods, false); const filteredGoods = this.applyFilters(this.data.goods, false);
const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods);
this.setData({ this.setData({
filteredGoods: filteredGoods, filteredGoods: filteredGoods,
leftColumnGoods: leftColumnGoods,
rightColumnGoods: rightColumnGoods
}); });
}); });
} }

170
pages/index/index.wxml
View File

@ -109,25 +109,13 @@
<!-- 骨架屏加载 --> <!-- 骨架屏加载 -->
<view wx:if="{{isLoading && goods.length === 0}}" class="skeleton-container"> <view wx:if="{{isLoading && goods.length === 0}}" class="skeleton-container">
<view class="skeleton-waterfall"> <view class="skeleton-grid">
<view class="skeleton-column"> <view class="skeleton-grid-item" wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="index">
<view class="skeleton-item" wx:for="{{[1,2,3,4]}}" wx:key="index"> <view class="skeleton-image"></view>
<view class="skeleton-image"></view> <view class="skeleton-title"></view>
<view class="skeleton-title"></view> <view class="skeleton-title short"></view>
<view class="skeleton-title short"></view> <view class="skeleton-footer">
<view class="skeleton-footer"> <view class="skeleton-price"></view>
<view class="skeleton-price"></view>
</view>
</view>
</view>
<view class="skeleton-column">
<view class="skeleton-item" wx:for="{{[1,2,3,4]}}" wx:key="index">
<view class="skeleton-image"></view>
<view class="skeleton-title"></view>
<view class="skeleton-title short"></view>
<view class="skeleton-footer">
<view class="skeleton-price"></view>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -150,124 +138,40 @@
bindrefresherrestore="onRestore" bindrefresherrestore="onRestore"
> >
<view class="goods-list-container"> <view class="goods-list-container">
<!-- 瀑布流布局 --> <!-- 网格布局 -->
<view class="waterfall-container"> <view class="grid-container">
<!-- 左列 --> <view
<view class="waterfall-column left-column"> class="grid-item"
<!-- 顶部空白间距 --> wx:for="{{filteredGoods}}"
<view style="height: 20rpx;"></view> wx:key="id"
data-item="{{item}}"
<!-- 广告位1：轮播图1 --> bindtap="viewGoodsDetail"
<view class="waterfall-item"> wx:if="{{!item.isAd && filteredGoods.length > 0}}"
<view class="ad-card ad-full-card"> >
<swiper class="ad-swiper" autoplay="true" interval="3000" duration="500" circular="true"> <view class="product-card">
<swiper-item> <view class="product-image-wrapper">
<image class="ad-image" src="/images/1.jpg" mode="aspectFill" bindtap="onAdClick" data-ad="ad_slot_1_1" data-src="/images/1.jpg"></image>
</swiper-item>
<swiper-item>
<image class="ad-image" src="/images/2.jpg" mode="aspectFill" bindtap="onAdClick" data-ad="ad_slot_1_2" data-src="/images/2.jpg"></image>
</swiper-item>
<swiper-item>
<image class="ad-image" src="/images/3.jpg" mode="aspectFill" bindtap="onAdClick" data-ad="ad_slot_1_3" data-src="/images/3.jpg"></image>
</swiper-item>
</swiper>
</view>
</view>
<!-- 正常商品列表 -->
<view
class="waterfall-item"
wx:for="{{leftColumnGoods}}"
wx:key="id"
data-item="{{item}}"
bindtap="viewGoodsDetail"
wx:if="{{!item.isAd && filteredGoods.length > 0}}"
>
<view class="product-card">
<view class="product-image-wrapper">
<image
class="product-image"
src="{{item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : '/images/default-avatar.png'}}"
mode="widthFix"
lazy-load="true"
bindload="onImageLoad"
data-index="{{index}}"
data-column="left"
></image>
<view wx:if="{{item.supplyStatus === '预售'}}" class="promo-tag presale">预售</view>
<view wx:if="{{item.supplyStatus === '现货'}}" class="promo-tag in-stock">现货</view>
</view>
<view class="product-info">
<view class="product-title">{{item.name}}</view>
<view class="product-spec">{{item.specification || '无'}}<text wx:if="{{item.yolk && item.yolk !== '无'}}"> | {{item.yolk}}</text></view>
<view class="product-status-row">
<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>
<view class="product-meta">
<text class="sales-count">已有{{item.reservedCount || 0}}人收藏</text>
<text class="product-location">{{item.region || ''}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 右列 -->
<view class="waterfall-column right-column">
<!-- 顶部空白间距 -->
<view style="height: 4rpx;"></view>
<!-- 广告位2：半高图片广告 (始终显示) -->
<view class="waterfall-item">
<view class="ad-card ad-half-image">
<image <image
class="ad-image-half" class="product-image"
src="/images/4.jpg" src="{{item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : '/images/default-avatar.png'}}"
mode="aspectFill" mode="widthFix"
bindtap="onAdClick" lazy-load="true"
data-ad="ad_slot_2" bindload="onImageLoad"
data-src="/images/4.jpg" data-index="{{index}}"
></image> ></image>
<view wx:if="{{item.supplyStatus === '预售'}}" class="promo-tag presale">预售</view>
<view wx:if="{{item.supplyStatus === '现货'}}" class="promo-tag in-stock">现货</view>
</view> </view>
</view> <view class="product-info">
<view class="product-title">{{item.name}}</view>
<!-- 正常商品列表 --> <view class="product-spec">{{item.specification || '无'}}<text wx:if="{{item.yolk && item.yolk !== '无'}}"> | {{item.yolk}}</text></view>
<view <view class="product-status-row">
class="waterfall-item" <view class="status-tag source-{{item.sourceType === '三方认证' ? 'third' : (item.sourceType === '平台货源' ? 'platform' : 'unverified')}}">{{item.sourceType || ''}}</view>
wx:for="{{rightColumnGoods}}" <view class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}">{{item.negotiateStatus}}</view>
wx:key="id" <view class="status-tag item-count">库存：{{item.minOrder || item.quantity || '暂无'}}</view>
data-item="{{item}}"
bindtap="viewGoodsDetail"
wx:if="{{!item.isAd && filteredGoods.length > 0}}"
>
<view class="product-card">
<view class="product-image-wrapper">
<image
class="product-image"
src="{{item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : '/images/default-avatar.png'}}"
mode="widthFix"
lazy-load="true"
bindload="onImageLoad"
data-index="{{index}}"
data-column="right"
></image>
<view wx:if="{{item.supplyStatus === '预售'}}" class="promo-tag presale">预售</view>
<view wx:if="{{item.supplyStatus === '现货'}}" class="promo-tag in-stock">现货</view>
</view> </view>
<view class="product-info"> <view class="product-meta">
<view class="product-title">{{item.name}}</view> <text class="sales-count">已有{{item.reservedCount || 0}}人收藏</text>
<view class="product-spec">{{item.specification || '无'}}<text wx:if="{{item.yolk && item.yolk !== '无'}}"> | {{item.yolk}}</text></view> <text class="product-location">{{item.region || ''}}</text>
<view class="product-status-row">
<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>
<view class="product-meta">
<text class="sales-count">已有{{item.reservedCount || 0}}人收藏</text>
<text class="product-location">{{item.region || ''}}</text>
</view>
</view> </view>
</view> </view>
</view> </view>

94
pages/index/index.wxss
View File

@ -617,25 +617,18 @@ wx-button:not([size=mini]) {
padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx); padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
} }
.waterfall-container { .grid-container {
display: flex; display: flex;
gap: 32rpx; flex-wrap: wrap;
width: 100%;
}
.waterfall-column {
flex: 1;
display: flex;
flex-direction: column;
gap: 16rpx; gap: 16rpx;
width: 100%;
padding: 0 10rpx;
box-sizing: border-box;
} }
.left-column { .grid-item {
align-items: flex-start; width: calc((100% - 16rpx) / 2);
} /* 每个商品项占50%宽度，留出16rpx的间距 */
.right-column {
align-items: flex-end;
} }
.goods-item { .goods-item {
@ -874,6 +867,12 @@ wx-button:not([size=mini]) {
border: 1rpx solid rgba(140, 140, 140, 0.5); border: 1rpx solid rgba(140, 140, 140, 0.5);
} }
.status-tag.item-count {
background: rgba(82, 196, 26, 0.15);
color: #389e0d;
border: 1rpx solid rgba(82, 196, 26, 0.5);
}
.goods-footer { .goods-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -1153,24 +1152,18 @@ wx-button:not([size=mini]) {
margin-top: 180rpx; margin-top: 180rpx;
} }
.skeleton-waterfall { .skeleton-grid {
display: flex; display: flex;
flex-wrap: wrap;
gap: 16rpx; gap: 16rpx;
width: 100%; width: 100%;
} }
.skeleton-column { .skeleton-grid-item {
flex: 1; width: calc((100% - 16rpx) / 2);
display: flex;
flex-direction: column;
gap: 16rpx;
}
.skeleton-item {
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 16rpx;
overflow: hidden; overflow: hidden;
padding-bottom: 20rpx;
} }
.skeleton-image { .skeleton-image {
@ -1226,40 +1219,25 @@ wx-button:not([size=mini]) {
padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx); padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
} }
/* 瀑布流容器 */ /* 网格容器 */
.waterfall-container { .grid-container {
display: flex; display: flex;
gap: 32rpx; flex-wrap: wrap;
gap: 16rpx;
width: 100%; width: 100%;
margin-top: 20rpx; /* 增加上边距，避免被分类区域遮挡 */ margin-top: 20rpx;
background: transparent; background: transparent;
} }
/* 瀑布流列 */ /* 网格商品项 */
.waterfall-column { .grid-item {
flex: 1; width: calc((100% - 16rpx) / 2);
display: flex;
flex-direction: column;
gap: 16rpx;
}
.left-column {
align-items: flex-start;
}
.right-column {
align-items: flex-end;
}
/* 瀑布流商品项 */
.waterfall-item {
width: 100%;
border-radius: 16rpx; border-radius: 16rpx;
overflow: hidden; overflow: hidden;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.waterfall-item:active { .grid-item:active {
transform: scale(0.98); transform: scale(0.98);
opacity: 0.9; opacity: 0.9;
} }
@ -1267,6 +1245,7 @@ wx-button:not([size=mini]) {
/* 商品卡片 */ /* 商品卡片 */
.product-card { .product-card {
width: 100%; width: 100%;
height: 450rpx; /* 固定高度 */
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 16rpx;
overflow: hidden; overflow: hidden;
@ -1274,7 +1253,6 @@ wx-button:not([size=mini]) {
transition: all 0.3s ease; transition: all 0.3s ease;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* 移除固定最小高度，让卡片高度根据内容自动调整 */
} }
.product-card:active { .product-card:active {
@ -1286,6 +1264,7 @@ wx-button:not([size=mini]) {
.product-image-wrapper { .product-image-wrapper {
position: relative; position: relative;
width: 100%; width: 100%;
height: 320rpx; /* 固定图片高度 */
background: #f5f5f5; background: #f5f5f5;
border-radius: 16rpx 16rpx 0 0; border-radius: 16rpx 16rpx 0 0;
overflow: hidden; overflow: hidden;
@ -1293,7 +1272,9 @@ wx-button:not([size=mini]) {
.product-image { .product-image {
width: 100%; width: 100%;
height: 100%; /* 图片占满整个图片容器 */
display: block; display: block;
object-fit: cover; /* 图片按比例填充，裁剪多余部分 */
} }
/* 促销标签 */ /* 促销标签 */
@ -1327,9 +1308,10 @@ wx-button:not([size=mini]) {
/* 商品信息区域 */ /* 商品信息区域 */
.product-info { .product-info {
padding: 16rpx; padding: 16rpx;
flex: 1; /* 自动拉伸，占据剩余空间 */ height: 210rpx; /* 固定信息区域高度 (600 - 350 - 40 = 210) */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; /* 内容均匀分布 */
} }
/* 商品标题 */ /* 商品标题 */
@ -1337,12 +1319,12 @@ wx-button:not([size=mini]) {
font-size: 26rpx; font-size: 26rpx;
color: #000000ff; color: #000000ff;
line-height: 1.4; line-height: 1.4;
height: 72rpx; /* 固定标题高度 */
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
min-height: 72rpx;
margin-bottom: 8rpx; margin-bottom: 8rpx;
font-weight: 500; font-weight: 500;
} }
@ -1351,15 +1333,17 @@ wx-button:not([size=mini]) {
.product-spec { .product-spec {
font-size: 22rpx; font-size: 22rpx;
color: #797878ff; color: #797878ff;
margin-bottom: 12rpx; height: 32rpx; /* 固定规格高度 */
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-bottom: 8rpx;
} }
/* 价格区域 - 淘宝风格突出显示 */ /* 价格区域 - 淘宝风格突出显示 */
.product-price-row { .product-price-row {
margin-bottom: 12rpx; height: 48rpx; /* 固定价格区域高度 */
margin-bottom: 8rpx;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
justify-content: space-between; justify-content: space-between;
@ -1392,12 +1376,12 @@ wx-button:not([size=mini]) {
/* 销量和地区 - 淘宝风格 */ /* 销量和地区 - 淘宝风格 */
.product-meta { .product-meta {
height: 32rpx; /* 固定元信息高度 */
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 22rpx; font-size: 22rpx;
color: #999; color: #999;
margin-top: 8rpx;
} }
.sales-count { .sales-count {

Write Preview
Loading…
Cancel
Save