diff --git a/pages/index/index.js b/pages/index/index.js index b53e95c..cb00483 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -20,6 +20,7 @@ Page({ startY: 0, currentY: 0, sidebarBtnTop: 500, // 初始位置,单位rpx + sidebarBtnHidden: false, // 按钮是否隐藏到侧边栏 // 搜索相关 searchKeyword: '', @@ -33,7 +34,6 @@ Page({ selectedCategory: '全部', loadingMore: false, hasMoreData: true, - hasMore: true, // 用于显示"已加载全部商品"提示 page: 1, pageSize: 10, @@ -41,13 +41,6 @@ Page({ previewImageUrls: [], // 预览的图片URL列表 previewImageIndex: 0, // 当前预览图片的索引 showImagePreview: false, // 控制图片预览弹窗显示 - - // 导航栏显示控制 - showNavBar: true, // 控制导航栏显示/隐藏 - lastScrollTop: 0, // 上一次滚动位置 - - // 回到顶部按钮 - showBackToTop: false, // 控制回到顶部按钮显示/隐藏 }, // 跳转到聊天页面 @@ -113,6 +106,13 @@ Page({ }); }, + // 切换按钮显示/隐藏到侧边栏 + toggleSidebarBtn() { + this.setData({ + sidebarBtnHidden: !this.data.sidebarBtnHidden + }); + }, + // 触摸开始事件 handleTouchStart(e) { this.setData({ @@ -341,7 +341,6 @@ Page({ loadingMore: false, page: currentPage + 1, hasMoreData: hasMoreData, - hasMore: hasMoreData, totalGoods: totalGoods, totalPages: totalPages }) @@ -536,42 +535,6 @@ Page({ url: `/pages/goods-detail/goods-detail?goodsData=${encodeURIComponent(JSON.stringify(item))}&productId=${productId}` }) }, - - // 查看商品详情(与buyer页面保持一致的方法名) - showGoodsDetail: function (e) { - // 检查用户是否登录 - const openid = wx.getStorageSync('openid'); - const userId = wx.getStorageSync('userId'); - - if (!openid || !userId) { - console.log('用户未登录,直接显示授权登录弹窗'); - // 直接显示授权登录弹窗 - this.showOneKeyLogin(); - return; - } - - const goodsItem = e.currentTarget.dataset.item; - // 跳转到商品详情页面,并传递商品数据,使用encodeURIComponent编码JSON字符串 - wx.navigateTo({ - url: '/pages/goods-detail/goods-detail?goodsData=' + encodeURIComponent(JSON.stringify(goodsItem)) - }); - - // 同时尝试直接更新tabBar的选中状态 - if (typeof this.getTabBar === 'function' && this.getTabBar()) { - const tabBar = this.getTabBar(); - if (tabBar.setData) { - tabBar.setData({ show: false }); - } - } - - // 调用后端API执行商品联系人更新 - console.log('开始调用API.updateProductContacts()'); - API.updateProductContacts().then(function(res) { - console.log('商品联系人更新成功:', res); - }).catch(function(err) { - console.error('商品联系人更新失败:', err); - }); - }, // 跳转到入驻页面 navigateToSettlement: function() { @@ -632,16 +595,21 @@ Page({ onScroll: function(e) { // 获取滚动信息 const { scrollTop, scrollHeight, clientHeight } = e.detail; + const distanceToBottom = scrollHeight - scrollTop - clientHeight; - // 显示/隐藏回到顶部按钮:当滚动距离超过500rpx时显示 - if (scrollTop > 500) { - this.setData({ - showBackToTop: true - }); - } else { - this.setData({ - showBackToTop: false - }); + // 获取全局状态 + const app = getApp(); + if (!app || !app.globalData) { + return; + } + + // 当滚动到底部且没有更多数据时,隐藏tabBar + if (distanceToBottom < 100 && !this.data.hasMoreData) { + app.globalData.showTabBar = false; + } + // 当往上滚动不在底部时,立即重新显示tabBar + else { + app.globalData.showTabBar = true; } }, @@ -649,175 +617,11 @@ Page({ onReachBottom: function() { if (this.data.hasMoreData && !this.data.loadingMore) { this.loadGoods(true) - } - }, - - // 回到顶部功能 - backToTop: function() { - wx.pageScrollTo({ - scrollTop: 0, - duration: 300 // 动画持续时间,单位ms - }); - }, - - // 切换图片 - swiperChange(e) { - const current = e.detail.current - const itemId = e.currentTarget.dataset.itemId - - // 更新对应商品项的currentImageIndex - this.setData({ - [`filteredGoods[${itemId}].currentImageIndex`]: current - }) - }, - - // 切换收藏状态 - toggleFavorite(e) { - const goodsItem = e.currentTarget.dataset.item; - console.log('用户点击了收藏按钮,商品信息:', goodsItem); - - // 检查用户登录状态 - const openid = wx.getStorageSync('openid'); - const userId = wx.getStorageSync('userId'); - - if (!openid || !userId) { - console.log('用户未登录,显示一键登录弹窗'); - this.setData({ - showOneKeyLoginModal: true - }); - return; - } - - // 获取商品ID - const productId = String(goodsItem.productId || goodsItem.id); - console.log('准备操作的商品ID:', productId); - - // 根据当前收藏状态决定是添加还是取消收藏 - if (goodsItem.isFavorite) { - this.cancelFavorite(e); - } else { - this.addFavorite(e); - } - }, - - // 添加收藏 - addFavorite: function (e) { - const goodsItem = e.currentTarget.dataset.item; - console.log('用户点击了收藏按钮,商品信息:', goodsItem); - - // 获取商品ID - const productId = String(goodsItem.productId || goodsItem.id); - console.log('准备收藏的商品ID:', productId); - - wx.showLoading({ title: '正在收藏...' }); - - // 调用API添加收藏 - API.addFavorite(productId) - .then(res => { - wx.hideLoading(); - console.log('添加收藏成功:', res); - - // 更新商品的收藏状态 - this.updateGoodsFavoriteStatus(productId, true); - - // 触发全局事件,通知其他页面收藏状态已更改 - const app = getApp(); - if (app.eventBus) { - app.eventBus.emit('favoriteChanged', { - productId: productId, - isFavorite: true - }); - } - - // 显示成功提示 - wx.showToast({ - title: '收藏成功', - icon: 'success', - duration: 1500 - }); - }) - .catch(err => { - wx.hideLoading(); - console.error('添加收藏失败:', err); - - // 显示错误提示 - wx.showToast({ - title: '收藏失败,请稍后重试', - icon: 'none', - duration: 2000 - }); - }); - }, - - // 取消收藏 - cancelFavorite: function (e) { - const goodsItem = e.currentTarget.dataset.item; - console.log('用户点击了取消收藏按钮,商品信息:', goodsItem); - - // 获取商品ID - const productId = String(goodsItem.productId || goodsItem.id); - console.log('准备取消收藏的商品ID:', productId); - - wx.showLoading({ title: '正在取消收藏...' }); - - // 调用API取消收藏 - API.cancelFavorite(productId) - .then(res => { - wx.hideLoading(); - console.log('取消收藏成功:', res); - - // 更新商品的收藏状态 - this.updateGoodsFavoriteStatus(productId, false); - - // 触发全局事件,通知其他页面收藏状态已更改 - const app = getApp(); - if (app.eventBus) { - app.eventBus.emit('favoriteChanged', { - productId: productId, - isFavorite: false - }); - } - - // 显示成功提示 - wx.showToast({ - title: '取消收藏成功', - icon: 'success', - duration: 1500 - }); - }) - .catch(err => { - wx.hideLoading(); - console.error('取消收藏失败:', err); - - // 显示错误提示 - wx.showToast({ - title: '取消收藏失败,请稍后重试', - icon: 'none', - duration: 2000 - }); - }); - }, - - // 更新商品收藏状态 - updateGoodsFavoriteStatus: function (productId, isFavorite) { - // 找到商品在列表中的索引 - const goodsIndex = this.data.filteredGoods.findIndex(item => - String(item.id) === productId || String(item.productId) === productId - ); - - if (goodsIndex !== -1) { - // 更新商品的收藏状态 - const updateData = {}; - updateData[`filteredGoods[${goodsIndex}].isFavorite`] = isFavorite; - this.setData(updateData); - - // 同时更新原始goods数组 - const originalIndex = this.data.goods.findIndex(item => - String(item.id) === productId || String(item.productId) === productId - ); - if (originalIndex !== -1) { - updateData[`goods[${originalIndex}].isFavorite`] = isFavorite; - this.setData(updateData); + } else if (!this.data.hasMoreData) { + // 没有更多数据时,隐藏tabBar + const app = getApp(); + if (app && app.globalData) { + app.globalData.showTabBar = false; } } }, diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 5efd103..70db257 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -1,71 +1,27 @@ - - - - 专业的鸡蛋现货交易平台 - - - - - - - - {{selectedRegion || '全国'}} - - - - 🔍 - - - - - - - - - - - 全部 - - - 粉壳 - - - 红壳 - - - 绿壳 - - - 白壳 + + 专业的鸡蛋现货交易平台 + + + + + + + + {{selectedRegion || '全国'}} + + + 🔍 + + @@ -88,17 +44,65 @@ + + + + + 全部 + + + 粉壳 + + + 红壳 + + + 绿壳 + + + 白壳 + + + + - - 招商入驻 + + + + 招商入驻 + + + + + + @@ -139,88 +143,30 @@ - - - - - - - - - - 暂无图片 - - - - - - - - - - - - - {{(item.currentImageIndex || 0) + 1}}/{{item.imageUrls.length}} - - - - - - - - - - - - {{item.supplyStatus || '暂无状态'}} - {{item.name}} - V - - - - - {{item.specification || '无'}} | {{item.yolk || '无'}} | {{item.minOrder || item.quantity || 1}}件 - - - - - - - - - - - 已有 - {{item.reservedCount || 0}} - 人收藏 - - - - - + + + + {{item.supplyStatus || '现货'}} + + + + {{item.name}} + {{item.specification || '无'}} | {{item.yolk || '无'}} + ¥{{item.price}} + + {{item.region}} + 已有{{item.reservedCount || 0}}人收藏 @@ -229,11 +175,6 @@ 暂无商品数据 - - - - {{hasMore ? '下拉加载更多' : '已加载全部商品'}} - @@ -243,15 +184,6 @@ - - - - - diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 328bbcf..9919c57 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -19,19 +19,6 @@ page { background-color: #f5f7fa; } -/* 导航栏固定样式 */ -.nav-bar { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 999; - background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%); - padding: 20rpx 20rpx 0 20rpx; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - box-sizing: border-box; -} - /* 标题样式 */ .title { font-size: 36rpx; @@ -271,40 +258,95 @@ page { font-size: 24rpx; } -/* 侧边栏按钮样式 */ +/* 侧边栏按钮样式 - 白色半透明毛玻璃质感 */ .sidebar-btn { position: fixed; left: 20rpx; z-index: 999; - width: 80rpx; + width: 120rpx; height: 80rpx; - background-color: #1677ff; + background-color: rgba(255, 255, 255, 0.85); /* 白色半透明 */ + backdrop-filter: blur(10rpx); /* 毛玻璃效果 */ + -webkit-backdrop-filter: blur(10rpx); /* 兼容iOS */ border-radius: 40rpx; display: flex; - flex-direction: column; - justify-content: center; + justify-content: space-between; align-items: center; - box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.3); + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15); /* 柔和阴影 */ transition: all 0.3s ease; - border: 2rpx solid #fff; + border: 1rpx solid rgba(255, 255, 255, 0.5); /* 半透明白色边框 */ touch-action: none; /* 禁用浏览器默认的触摸行为 */ } .sidebar-btn:hover { - transform: scale(1.1); - box-shadow: 0 6rpx 20rpx rgba(22, 119, 255, 0.4); + transform: scale(1.05); + box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2); /* 增强阴影 */ + background-color: rgba(255, 255, 255, 0.95); /* 提高透明度 */ +} + +/* 侧边栏按钮隐藏状态 */ +.sidebar-btn.hidden { + left: -80rpx; + transform: scale(1); + opacity: 1; + background-color: rgba(255, 255, 255, 0.85); +} + +/* 侧边栏按钮内容区域 */ +.sidebar-btn-content { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + padding-left: 10rpx; } .sidebar-icon { font-size: 32rpx; - color: white; + color: #333; /* 深色文字 */ font-weight: bold; } .sidebar-text { font-size: 16rpx; - color: white; + color: #666; /* 中深色文字 */ + font-weight: 500; +} + +/* 箭头按钮 */ +.sidebar-arrow { + width: 40rpx; + height: 80rpx; + background-color: rgba(0, 0, 0, 0.05); /* 淡灰色背景 */ + border-radius: 0 40rpx 40rpx 0; + display: flex; + justify-content: center; + align-items: center; + transition: all 0.3s ease; + cursor: pointer; +} + +.sidebar-arrow:hover { + background-color: rgba(0, 0, 0, 0.1); /* 加深背景色 */ +} + +/* 箭头图标 */ +.arrow-icon { + font-size: 20rpx; + color: #666; /* 深色箭头 */ font-weight: bold; + transition: transform 0.3s ease, color 0.3s ease; + display: inline-block; +} + +.arrow-icon.arrow-left { + transform: rotate(0deg); +} + +.arrow-icon.arrow-right { + transform: rotate(180deg); } /* 侧边栏样式 */ @@ -382,14 +424,16 @@ page { font-weight: bold; } -/* 商品区域样式 - 填充完整宽度 */ +/* 商品区域样式 - 调整为占据70%空间 */ .goods-section { - background-color: transparent; - padding: 320rpx 20rpx 0 20rpx; - margin: 0; - flex: 1; + background-color: white; + padding: 20rpx; + border-radius: 10rpx; + margin: 0 20rpx 20rpx 20rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); + flex: 7; overflow-y: auto; - width: 100%; + width: calc(100% - 40rpx); box-sizing: border-box; } @@ -397,7 +441,7 @@ page { font-size: 28rpx; font-weight: bold; color: #333; - margin: 0 0 20rpx 0; + margin-bottom: 20rpx; } .goods-list { @@ -407,50 +451,104 @@ page { .goods-list-container { display: flex; - flex-direction: column; - gap: 0; + flex-wrap: wrap; + gap: 20rpx; + justify-content: flex-start; padding-bottom: 20rpx; } -/* 商品卡片样式,与buyer页面保持一致,但减小间距 */ -.card { - background: white; - border-radius: 12rpx; - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); +.goods-item { + width: calc((100% - 20rpx) / 2); + background-color: #f9f9f9; + border-radius: 10rpx; overflow: hidden; - margin-bottom: 10rpx; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; +} + +.goods-item:hover { + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); + transform: translateY(-2rpx); +} + +.goods-image-container { + position: relative; width: 100%; - box-sizing: border-box; + padding-bottom: 100%; + overflow: hidden; } -.image-swiper { +.goods-image { + position: absolute; + top: 0; + left: 0; width: 100%; height: 100%; + background-color: #eee; } -/* 进一步减小收藏按钮大小并调整位置 */ -.card button { - width: 120rpx !important; - height: 48rpx !important; - font-size: 20rpx !important; - margin-left: 10rpx !important; +.goods-tag { + position: absolute; + top: 10rpx; + left: 10rpx; + background-color: rgba(255, 90, 90, 0.8); + color: white; + font-size: 20rpx; + padding: 5rpx 10rpx; + border-radius: 15rpx; + font-weight: bold; } -/* 加深所有货源的规格信息行字体颜色 */ -.card view:nth-child(2) view:nth-child(2) view:nth-child(1) view:nth-child(2) { - color: #555 !important; - font-weight: 600 !important; +.goods-info { + padding: 15rpx; } -/* 半页空白页样式,与buyer页面保持一致 */ -.half-page-blank { - height: 32vh; - width: 100%; - box-sizing: border-box; +.goods-name { + font-size: 26rpx; + font-weight: bold; + color: #333; + margin-bottom: 10rpx; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + min-height: 60rpx; +} + +.goods-spec { + font-size: 22rpx; + color: #999; + margin-bottom: 10rpx; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.goods-price { + font-size: 32rpx; + font-weight: bold; + color: #ff4d4f; + margin-bottom: 10rpx; +} + +.goods-footer { display: flex; - justify-content: center; - align-items: flex-start; - padding-top: 20rpx; + justify-content: space-between; + font-size: 20rpx; + color: #999; +} + +.goods-region { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.goods-reserved { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } /* 空商品样式 */ @@ -602,36 +700,6 @@ page { color: #1677ff; } -/* 回到顶部按钮样式 */ -.back-to-top-btn { - position: fixed; - right: 40rpx; - bottom: 120rpx; - width: 80rpx; - height: 80rpx; - background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%); - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.4); - z-index: 998; - transition: all 0.3s ease; - border: 2rpx solid rgba(255, 255, 255, 0.8); -} - -.back-to-top-btn:hover { - transform: scale(1.1); - box-shadow: 0 6rpx 20rpx rgba(22, 119, 255, 0.5); -} - -.back-to-top-icon { - font-size: 36rpx; - color: white; - font-weight: bold; - line-height: 1; -} - /* 图片预览样式 */ .image-preview-mask { position: fixed; diff --git a/pages/profile/index.js b/pages/profile/index.js index dbd9d92..1eea16b 100644 --- a/pages/profile/index.js +++ b/pages/profile/index.js @@ -115,8 +115,6 @@ Page({ switch (userType) { case 'buyer': identityLabel = '身份:买家'; break case 'seller': identityLabel = '身份:卖家'; break - case 'both': identityLabel = '身份:买卖家'; break - case 'buyer+seller': identityLabel = '身份:买卖家'; break } filteredTags.push(identityLabel) console.log('加载用户信息 - 根据当前用户类型显示身份标签:', identityLabel)