From 7b7e2b1ef7d6d76e9110999799893ab4ea899bf8 Mon Sep 17 00:00:00 2001 From: Default User Date: Fri, 26 Dec 2025 10:57:01 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=EF=BC=8C=E7=A7=BB=E9=99=A4=E5=BA=95=E9=83=A8=E9=9A=90=E8=97=8F?= =?UTF-8?q?tabBar=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/index.js | 237 ++++++++++++++++++++++++++++++++++++++--- pages/index/index.wxml | 234 +++++++++++++++++++++++++--------------- pages/index/index.wxss | 128 +++++++--------------- 3 files changed, 406 insertions(+), 193 deletions(-) diff --git a/pages/index/index.js b/pages/index/index.js index dd8c696..c56025d 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -33,6 +33,7 @@ Page({ selectedCategory: '全部', loadingMore: false, hasMoreData: true, + hasMore: true, // 用于显示"已加载全部商品"提示 page: 1, pageSize: 10, @@ -40,6 +41,10 @@ Page({ previewImageUrls: [], // 预览的图片URL列表 previewImageIndex: 0, // 当前预览图片的索引 showImagePreview: false, // 控制图片预览弹窗显示 + + // 导航栏显示控制 + showNavBar: true, // 控制导航栏显示/隐藏 + lastScrollTop: 0, // 上一次滚动位置 }, // 跳转到聊天页面 @@ -333,6 +338,7 @@ Page({ loadingMore: false, page: currentPage + 1, hasMoreData: hasMoreData, + hasMore: hasMoreData, totalGoods: totalGoods, totalPages: totalPages }) @@ -527,6 +533,42 @@ 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() { @@ -587,33 +629,194 @@ Page({ onScroll: function(e) { // 获取滚动信息 const { scrollTop, scrollHeight, clientHeight } = e.detail; - const distanceToBottom = scrollHeight - scrollTop - clientHeight; - // 获取全局状态 - const app = getApp(); - if (!app || !app.globalData) { - return; - } + // 导航栏显示/隐藏逻辑 + const { lastScrollTop } = this.data; - // 当滚动到底部且没有更多数据时，隐藏tabBar - if (distanceToBottom < 100 && !this.data.hasMoreData) { - app.globalData.showTabBar = false; + // 下滑检测：如果当前滚动位置大于上一次滚动位置，且不在顶部（scrollTop > 10），则隐藏导航栏 + if (scrollTop > lastScrollTop && scrollTop > 10) { + this.setData({ + showNavBar: false + }); } - // 当往上滚动不在底部时，立即重新显示tabBar - else { - app.globalData.showTabBar = true; + // 上滑检测：如果当前滚动位置小于上一次滚动位置，或者回到顶部，则显示导航栏 + else if (scrollTop < lastScrollTop || scrollTop <= 10) { + this.setData({ + showNavBar: true + }); } + + // 更新上一次滚动位置 + this.setData({ + lastScrollTop: scrollTop + }); }, // 上拉加载更多 onReachBottom: function() { if (this.data.hasMoreData && !this.data.loadingMore) { this.loadGoods(true) - } else if (!this.data.hasMoreData) { - // 没有更多数据时，隐藏tabBar - const app = getApp(); - if (app && app.globalData) { - app.globalData.showTabBar = false; + } + }, + + // 切换图片 + 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); } } }, diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 344cb08..3d44801 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -1,27 +1,71 @@ - - 专业的鸡蛋现货交易平台 - - - - - - - - {{selectedRegion || '全国'}} - ▼ + + + + 专业的鸡蛋现货交易平台 + + + + + + + + {{selectedRegion || '全国'}} + ▼ + + + 🔍 + + + + + + + + + + + 全部 + + + 粉壳 + + + 红壳 + + + 绿壳 + + + 白壳 - - 🔍 - - @@ -44,47 +88,6 @@ - - - - - 全部 - - - 粉壳 - - - 红壳 - - - 绿壳 - - - 白壳 - - - - - - - - {{item.supplyStatus || '现货'}} - - - - {{item.name}} - {{item.specification || '无'}} | {{item.yolk || '无'}} - ¥{{item.price}} - - {{item.region}} - 已有{{item.reservedCount || 0}}人收藏 + + + + + + + + + + 暂无图片 + + + + + + + + + + + + + {{(item.currentImageIndex || 0) + 1}}/{{item.imageUrls.length}} + + + + + + + + + + + + {{item.supplyStatus || '暂无状态'}} + {{item.name}} + V + + + + + {{item.specification || '无'}} | {{item.yolk || '无'}} | {{item.minOrder || item.quantity || 1}}件 + + + + + + + + + + + 已有 + {{item.reservedCount || 0}} + 人收藏 + + + + + @@ -168,6 +229,11 @@ 暂无商品数据 + + + + {{hasMore ? '下拉加载更多' : '已加载全部商品'}} + diff --git a/pages/index/index.wxss b/pages/index/index.wxss index f29dfc2..890399d 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -13,7 +13,7 @@ page { margin: 0; width: 100%; height: 100vh; - display: flex;z + display: flex; flex-direction: column; box-sizing: border-box; background-color: #f5f7fa; @@ -369,16 +369,14 @@ page { font-weight: bold; } -/* 商品区域样式 - 调整为占据70%空间 */ +/* 商品区域样式 - 填充完整宽度 */ .goods-section { - 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; + background-color: transparent; + padding: 0 20rpx; + margin: 0; + flex: 1; overflow-y: auto; - width: calc(100% - 40rpx); + width: 100%; box-sizing: border-box; } @@ -386,7 +384,7 @@ page { font-size: 28rpx; font-weight: bold; color: #333; - margin-bottom: 20rpx; + margin: 0 0 20rpx 0; } .goods-list { @@ -396,104 +394,50 @@ page { .goods-list-container { display: flex; - flex-wrap: wrap; - gap: 20rpx; - justify-content: flex-start; + flex-direction: column; + gap: 0; padding-bottom: 20rpx; } -.goods-item { - width: calc((100% - 20rpx) / 2); - background-color: #f9f9f9; - border-radius: 10rpx; +/* 商品卡片样式，与buyer页面保持一致，但减小间距 */ +.card { + background: white; + border-radius: 12rpx; + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); overflow: hidden; - 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; + margin-bottom: 10rpx; width: 100%; - padding-bottom: 100%; - overflow: hidden; + box-sizing: border-box; } -.goods-image { - position: absolute; - top: 0; - left: 0; +.image-swiper { width: 100%; height: 100%; - background-color: #eee; -} - -.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; -} - -.goods-info { - padding: 15rpx; } -.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; +/* 进一步减小收藏按钮大小并调整位置 */ +.card button { + width: 120rpx !important; + height: 48rpx !important; + font-size: 20rpx !important; + margin-left: 10rpx !important; } -.goods-price { - font-size: 32rpx; - font-weight: bold; - color: #ff4d4f; - margin-bottom: 10rpx; +/* 加深所有货源的规格信息行字体颜色 */ +.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-footer { +/* 半页空白页样式，与buyer页面保持一致 */ +.half-page-blank { + height: 32vh; + width: 100%; + box-sizing: border-box; display: flex; - 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; + justify-content: center; + align-items: flex-start; + padding-top: 20rpx; } /* 空商品样式 */ From 526fc134fca5947abc2fcc646813257e12733ca7 Mon Sep 17 00:00:00 2001 From: Default User Date: Fri, 26 Dec 2025 11:07:21 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AF=BC=E8=88=AA?= =?UTF-8?q?=E6=A0=8F=E4=B8=BA=E5=9B=BA=E5=AE=9A=E9=A1=B6=E9=83=A8=EF=BC=8C?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=9E=E5=88=B0=E9=A1=B6=E9=83=A8=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/index.js | 31 +++++++++++++++-------------- pages/index/index.wxml | 13 ++++++++++-- pages/index/index.wxss | 45 +++++++++++++++++++++++++++++++++++++++++- 3 files changed, 71 insertions(+), 18 deletions(-) diff --git a/pages/index/index.js b/pages/index/index.js index c56025d..b53e95c 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -45,6 +45,9 @@ Page({ // 导航栏显示控制 showNavBar: true, // 控制导航栏显示/隐藏 lastScrollTop: 0, // 上一次滚动位置 + + // 回到顶部按钮 + showBackToTop: false, // 控制回到顶部按钮显示/隐藏 }, // 跳转到聊天页面 @@ -630,26 +633,16 @@ Page({ // 获取滚动信息 const { scrollTop, scrollHeight, clientHeight } = e.detail; - // 导航栏显示/隐藏逻辑 - const { lastScrollTop } = this.data; - - // 下滑检测：如果当前滚动位置大于上一次滚动位置，且不在顶部（scrollTop > 10），则隐藏导航栏 - if (scrollTop > lastScrollTop && scrollTop > 10) { + // 显示/隐藏回到顶部按钮：当滚动距离超过500rpx时显示 + if (scrollTop > 500) { this.setData({ - showNavBar: false + showBackToTop: true }); - } - // 上滑检测：如果当前滚动位置小于上一次滚动位置，或者回到顶部，则显示导航栏 - else if (scrollTop < lastScrollTop || scrollTop <= 10) { + } else { this.setData({ - showNavBar: true + showBackToTop: false }); } - - // 更新上一次滚动位置 - this.setData({ - lastScrollTop: scrollTop - }); }, // 上拉加载更多 @@ -658,6 +651,14 @@ Page({ this.loadGoods(true) } }, + + // 回到顶部功能 + backToTop: function() { + wx.pageScrollTo({ + scrollTop: 0, + duration: 300 // 动画持续时间，单位ms + }); + }, // 切换图片 swiperChange(e) { diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 3d44801..5efd103 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -1,6 +1,6 @@ - - + + 专业的鸡蛋现货交易平台 @@ -243,6 +243,15 @@ + + + ↑ + + diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 890399d..328bbcf 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -19,6 +19,19 @@ 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; @@ -372,7 +385,7 @@ page { /* 商品区域样式 - 填充完整宽度 */ .goods-section { background-color: transparent; - padding: 0 20rpx; + padding: 320rpx 20rpx 0 20rpx; margin: 0; flex: 1; overflow-y: auto; @@ -589,6 +602,36 @@ 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; From c0bd812a840fa2634706e8fc2a8689e97f16975e Mon Sep 17 00:00:00 2001 From: Default User Date: Fri, 26 Dec 2025 14:03:24 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/index.js | 250 +++++---------------------------------- pages/index/index.wxml | 258 +++++++++++++++-------------------------- pages/index/index.wxss | 246 +++++++++++++++++++++++++-------------- pages/profile/index.js | 2 - 4 files changed, 279 insertions(+), 477 deletions(-) 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) From 8355f56d0f7314af1ebb376d9d0de68af6fe7edb Mon Sep 17 00:00:00 2001 From: Default User Date: Fri, 26 Dec 2025 14:18:30 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=8B=9B=E5=95=86?= =?UTF-8?q?=E5=90=88=E4=BD=9C=E9=A1=B5=E9=9D=A2=EF=BC=8C=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E9=A6=96=E9=A1=B5=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.json | 3 +- pages/cooperation/index.js | 110 +++++++++++++++++++ pages/cooperation/index.json | 4 + pages/cooperation/index.wxml | 93 ++++++++++++++++ pages/cooperation/index.wxss | 207 +++++++++++++++++++++++++++++++++++ pages/index/index.js | 17 ++- pages/index/index.wxml | 8 +- 7 files changed, 430 insertions(+), 12 deletions(-) create mode 100644 pages/cooperation/index.js create mode 100644 pages/cooperation/index.json create mode 100644 pages/cooperation/index.wxml create mode 100644 pages/cooperation/index.wxss diff --git a/app.json b/app.json index a966075..4a170e8 100644 --- a/app.json +++ b/app.json @@ -14,7 +14,8 @@ "pages/chat/index", "pages/chat-detail/index", "pages/message-list/index", - "pages/customer-service/index" + "pages/customer-service/index", + "pages/cooperation/index" ], "subpackages": [ { diff --git a/pages/cooperation/index.js b/pages/cooperation/index.js new file mode 100644 index 0000000..cda09b9 --- /dev/null +++ b/pages/cooperation/index.js @@ -0,0 +1,110 @@ +// pages/cooperation/index.js +Page({ + /** + * 页面的初始数据 + */ + data: { + // 页面数据可以在这里定义 + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function (options) { + // 页面加载时的初始化操作 + console.log('招商合作页面加载'); + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady: function () { + // 页面初次渲染完成时的操作 + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function () { + // 页面显示时的操作 + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide: function () { + // 页面隐藏时的操作 + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload: function () { + // 页面卸载时的操作 + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh: function () { + // 下拉刷新时的操作 + wx.stopPullDownRefresh(); + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function () { + // 上拉触底时的操作 + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage: function () { + // 分享时的配置 + return { + title: '招商合作 - 又鸟蛋平台', + path: '/pages/cooperation/index', + imageUrl: '' + }; + }, + + /** + * 拨打电话 + */ + makePhoneCall: function () { + wx.makePhoneCall({ + phoneNumber: '138XXXXXXXX', + success: function () { + console.log('拨打电话成功'); + }, + fail: function (error) { + console.error('拨打电话失败:', error); + wx.showToast({ + title: '拨打电话失败，请稍后重试', + icon: 'none' + }); + } + }); + }, + + /** + * 跳转到立即合作页面 + */ + navigateToSettlement: function () { + wx.navigateTo({ + url: '/pages/settlement/index', + success: function () { + console.log('成功跳转到立即合作页面'); + }, + fail: function (error) { + console.error('跳转到立即合作页面失败:', error); + wx.showToast({ + title: '跳转失败，请稍后重试', + icon: 'none' + }); + } + }); + } +}); \ No newline at end of file diff --git a/pages/cooperation/index.json b/pages/cooperation/index.json new file mode 100644 index 0000000..4180a8f --- /dev/null +++ b/pages/cooperation/index.json @@ -0,0 +1,4 @@ +{ + "navigationBarTitleText": "招商合作", + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/cooperation/index.wxml b/pages/cooperation/index.wxml new file mode 100644 index 0000000..a329862 --- /dev/null +++ b/pages/cooperation/index.wxml @@ -0,0 +1,93 @@ + + + + 招商合作 + + + + + + 诚邀合作伙伴 + + + + 🤝 + + 成为我们的供应商 + 加入我们的供应链体系，共享平台资源，实现互利共赢 + + + + 📈 + + 海量订单支持 + 平台拥有稳定的客户群体，为您提供持续的订单保障 + + + + 🚚 + + 完善的物流体系 + 专业的物流配送团队，确保货物安全及时送达 + + + + 📊 + + 数据分析支持 + 提供详细的销售数据和市场分析，助力您的业务决策 + + + + + + + + 合作优势 + + + 💪 + 品牌支持 + + + 💰 + 灵活结算 + + + 📱 + 智能管理 + + + 👥 + 专属客服 + + + + + + + 联系方式 + + + 联系电话： + 138-XXXX-XXXX + + + 电子邮箱： + cooperation@example.com + + + 联系地址： + 上海市浦东新区XX路XX号 + + + + + + + + + + 如有任何疑问，欢迎随时联系我们 + + \ No newline at end of file diff --git a/pages/cooperation/index.wxss b/pages/cooperation/index.wxss new file mode 100644 index 0000000..d598363 --- /dev/null +++ b/pages/cooperation/index.wxss @@ -0,0 +1,207 @@ +/* 页面容器 */ +.cooperation-container { + padding: 20rpx; + background-color: #f5f5f5; + min-height: 100vh; +} + +/* 页面标题 */ +.page-title { + text-align: center; + font-size: 36rpx; + font-weight: bold; + color: #333; + margin: 30rpx 0; +} + +/* 广告区域 */ +.ad-section { + background-color: #fff; + border-radius: 16rpx; + padding: 30rpx; + margin-bottom: 20rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); +} + +.ad-title { + font-size: 32rpx; + font-weight: bold; + color: #ff6b81; + margin-bottom: 20rpx; + text-align: center; +} + +.ad-content { + display: flex; + flex-direction: column; + gap: 20rpx; +} + +.ad-item { + display: flex; + align-items: flex-start; + gap: 20rpx; + padding: 20rpx; + background-color: #f9f9f9; + border-radius: 12rpx; +} + +.ad-icon { + font-size: 48rpx; + margin-top: 8rpx; +} + +.ad-text { + flex: 1; +} + +.ad-item-title { + font-size: 28rpx; + font-weight: bold; + color: #333; + margin-bottom: 8rpx; +} + +.ad-item-desc { + font-size: 24rpx; + color: #666; + line-height: 1.5; +} + +/* 合作优势区域 */ +.advantage-section { + background-color: #fff; + border-radius: 16rpx; + padding: 30rpx; + margin-bottom: 20rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); +} + +.section-title { + font-size: 30rpx; + font-weight: bold; + color: #333; + margin-bottom: 20rpx; + text-align: center; +} + +.advantage-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20rpx; +} + +.advantage-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 10rpx; + padding: 20rpx; + background-color: #f9f9f9; + border-radius: 12rpx; + transition: transform 0.3s ease; +} + +.advantage-item:active { + transform: scale(0.98); +} + +.advantage-icon { + font-size: 48rpx; +} + +.advantage-text { + font-size: 24rpx; + color: #333; + font-weight: 500; +} + +/* 联系方式区域 */ +.contact-section { + background-color: #fff; + border-radius: 16rpx; + padding: 30rpx; + margin-bottom: 20rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); +} + +.contact-info { + display: flex; + flex-direction: column; + gap: 16rpx; + margin-bottom: 30rpx; +} + +.contact-item { + display: flex; + align-items: center; + gap: 12rpx; + padding: 16rpx; + background-color: #f9f9f9; + border-radius: 12rpx; +} + +.contact-label { + font-size: 26rpx; + color: #666; + width: 180rpx; +} + +.contact-value { + font-size: 26rpx; + color: #333; + flex: 1; +} + +.contact-value:active { + color: #ff6b81; +} + +/* 立即合作按钮 */ +.cooperate-btn { + background-color: #ff6b81; + color: #fff; + font-size: 28rpx; + font-weight: bold; + border-radius: 50rpx; + height: 80rpx; + line-height: 80rpx; + margin: 0; + box-shadow: 0 4rpx 12rpx rgba(255, 107, 129, 0.3); +} + +.cooperate-btn:active { + background-color: #ff526c; + transform: scale(0.98); +} + +/* 底部提示 */ +.bottom-tip { + text-align: center; + font-size: 22rpx; + color: #999; + margin: 30rpx 0; +} + +/* 响应式设计 */ +@media (max-width: 768rpx) { + .advantage-grid { + grid-template-columns: 1fr; + } + + .ad-item { + flex-direction: column; + align-items: center; + text-align: center; + } + + .contact-item { + flex-direction: column; + align-items: flex-start; + gap: 8rpx; + } + + .contact-label { + width: auto; + } +} \ No newline at end of file diff --git a/pages/index/index.js b/pages/index/index.js index cb00483..26c9e7c 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -79,15 +79,15 @@ Page({ }); }, - // 跳转到立即入驻页面 + // 跳转到我要卖蛋页面 navigateToSettlement() { wx.navigateTo({ url: '/pages/settlement/index', success: function() { - console.log('成功跳转到立即入驻页面'); + console.log('成功跳转到我要卖蛋页面'); }, fail: function(error) { - console.error('跳转到立即入驻页面失败:', error); + console.error('跳转到我要卖蛋页面失败:', error); wx.showToast({ title: '跳转失败，请稍后重试', icon: 'none' @@ -536,13 +536,20 @@ Page({ }) }, - // 跳转到入驻页面 + // 跳转到我要卖蛋页面 navigateToSettlement: function() { wx.navigateTo({ url: '/pages/settlement/index' }) }, - + + // 跳转到招商合作页面 + navigateToCooperation: function() { + wx.navigateTo({ + url: '/pages/cooperation/index' + }) + }, + // 预览图片 previewImage: function(e) { // 阻止事件冒泡，避免触发商品点击事件 diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 70db257..51238c3 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -112,13 +112,9 @@ 🏠 - 立即入驻 + 我要卖蛋 - - 🤝 - 成为供应商 - - + 📢 招商合作 From 734b4b7ba3020c85933b97fa0021dc8fb3c265fd Mon Sep 17 00:00:00 2001 From: Trae AI Date: Fri, 26 Dec 2025 15:26:14 +0800 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E7=8E=BB?= =?UTF-8?q?=E7=92=83=E8=B4=A8=E6=84=9FUI=E5=92=8C=E7=80=91=E5=B8=83?= =?UTF-8?q?=E6=B5=81=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 实现左长右短左短右长交替瀑布流布局 - 商品卡片添加半透明毛玻璃效果和3D悬浮效果 - 将价格替换为货源情况、认证状态、议价状态标签 - 分类标签改为圆角矩形玻璃质感样式 - 搜索页面样式与首页保持一致 - 修复WXSS编译错误 --- pages/buyer/index.wxss | 355 +++++++++++++++++++++++++++--------- pages/index/index.js | 112 +++++++++++- pages/index/index.wxml | 97 +++++++--- pages/index/index.wxss | 303 ++++++++++++++++++++++-------- project.private.config.json | 2 +- 5 files changed, 676 insertions(+), 193 deletions(-) diff --git a/pages/buyer/index.wxss b/pages/buyer/index.wxss index 2d20f4f..a3f846f 100644 --- a/pages/buyer/index.wxss +++ b/pages/buyer/index.wxss @@ -1,93 +1,100 @@ /* pages/buyer/index.wxss */ +page { + height: 100vh; + display: flex; + flex-direction: column; + background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%); + margin: 0; + padding: 0; +} + .container { min-height: 100vh; - background-color: #f5f5f5; + width: 100%; + display: flex; + flex-direction: column; + box-sizing: border-box; + background-color: #f8f8f8; + padding: 0; + margin: 0; } /* 搜索框样式 */ .search-bar { - position: fixed; - top: 0; - left: 0; - right: 0; - padding: 20rpx; - background-color: transparent; - z-index: 100; + width: 100%; + margin: 20rpx; + flex: 0 1 auto; box-sizing: border-box; } .search-container { display: flex; align-items: center; - border: 1rpx solid rgba(0, 0, 0, 0.08); - border-radius: 40rpx; - background-color: white; - padding: 0 30rpx; - margin: 0 auto; - width: 90%; - height: 80rpx; + width: 100%; + border-radius: 50rpx; + background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%); + padding: 6rpx; + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12); box-sizing: border-box; - transition: all 0.3s ease; -} - -.search-container:focus-within { - border-color: #07c160; - background-color: white; - box-shadow: 0 0 0 4rpx rgba(7, 193, 96, 0.1); + border: 1rpx solid rgba(22, 119, 255, 0.2); } .search-icon { - font-size: 30rpx; + margin: 0 15rpx; + font-size: 28rpx; color: #999; - margin-right: 20rpx; } .search-input { flex: 1; - font-size: 30rpx; + height: 70rpx; + font-size: 28rpx; color: #333; - background-color: transparent; + background: transparent; border: none; outline: none; - height: 60rpx; - line-height: 60rpx; } .search-input::placeholder { color: #999; - font-size: 30rpx; + font-size: 28rpx; } .clear-icon { - font-size: 45rpx; - color: #26ba20ff; - padding: 8rpx; - border-radius: 0; - background-color: transparent; - cursor: pointer; - transition: all 0.2s ease; -} - -.clear-icon:hover { - background-color: transparent; - color: #666; + font-size: 32rpx; + color: #999; + padding: 10rpx 20rpx; } -.title { - font-size: 36rpx; - font-weight: bold; - color: #333; - margin-bottom: 20rpx; - width: 100%; - text-align: center; +/* 商品列表样式 */ +.goods-list { + flex: 1; + padding: 20rpx 32rpx; + overflow-y: auto; + -webkit-overflow-scrolling: touch; } .card { - background: white; - border-radius: 12rpx; - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, 0.82); + backdrop-filter: blur(10rpx); + -webkit-backdrop-filter: blur(10rpx); + border-radius: 20rpx; overflow: hidden; - margin-bottom: 20rpx; + box-shadow: + 0 6rpx 24rpx rgba(0, 0, 0, 0.15), + 0 0 0 1rpx rgba(0, 0, 0, 0.08), + inset 0 0 0 1rpx rgba(255, 255, 255, 0.95); + border: 2rpx solid rgba(200, 200, 200, 0.5); + margin-bottom: 16rpx; + transition: all 0.3s ease; +} + +.card:hover { + transform: translateY(-4rpx); + box-shadow: + 0 12rpx 32rpx rgba(0, 0, 0, 0.2), + 0 0 0 2rpx rgba(0, 0, 0, 0.1), + inset 0 0 0 1rpx rgba(255, 255, 255, 1); } .image-swiper { @@ -95,6 +102,175 @@ height: 100%; } +/* 商品卡片内部布局 */ +.goods-card-content { + display: flex; + width: 100%; + height: 200rpx; +} + +.goods-image-section { + width: 40%; + position: relative; + height: 200rpx; +} + +.goods-image { + width: 100%; + height: 100%; +} + +.goods-image-placeholder { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: #f5f5f5; + color: #999; + font-size: 24rpx; +} + +.image-page-indicator { + position: absolute; + bottom: 10rpx; + right: 10rpx; + background-color: rgba(0, 0, 0, 0.5); + color: white; + padding: 4rpx 12rpx; + border-radius: 15rpx; + font-size: 20rpx; +} + +.goods-info-section { + width: 60%; + display: flex; + flex-direction: column; + background: rgba(255, 255, 255, 0.5); + backdrop-filter: blur(5rpx); + border-left: 1rpx solid rgba(240, 240, 240, 0.8); +} + +.goods-info-top { + flex: 0.6; + padding: 16rpx 20rpx; + display: flex; + flex-direction: column; +} + +.goods-name-row { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 8rpx; + margin-bottom: 8rpx; +} + +.supply-tag { + font-size: 20rpx; + padding: 4rpx 10rpx; + border-radius: 8rpx; + font-weight: 600; + white-space: nowrap; +} + +.supply-tag.spot { + background: rgba(82, 196, 26, 0.15); + color: #389e0d; + border: 1rpx solid rgba(82, 196, 26, 0.5); +} + +.supply-tag.presale { + background: rgba(255, 154, 28, 0.15); + color: #d46b08; + border: 1rpx solid rgba(255, 154, 28, 0.5); +} + +.auth-badge { + font-size: 20rpx; + padding: 4rpx 10rpx; + background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); + color: white; + clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%); + font-weight: bold; +} + +.goods-name { + font-size: 30rpx; + font-weight: bold; + color: #333; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; +} + +.goods-spec { + font-size: 24rpx; + color: #888; + margin-top: 8rpx; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.goods-info-bottom { + flex: 0.4; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20rpx; + border-top: 1rpx solid rgba(240, 240, 240, 0.5); +} + +.favorite-count { + display: flex; + align-items: center; + font-size: 24rpx; + color: #999; +} + +.favorite-count .count { + color: #d865d8; + font-weight: bold; + margin: 0 6rpx; +} + +.favorite-button { + font-size: 22rpx; + font-weight: 600; + width: 120rpx; + height: 50rpx; + border-radius: 25rpx; + display: flex; + justify-content: center; + align-items: center; + padding: 0; + border: none; + transition: all 0.3s ease; +} + +.favorite-button.add { + color: #1677ff; + background: rgba(22, 119, 255, 0.15); + border: 1rpx solid rgba(22, 119, 255, 0.3); +} + +.favorite-button.add:hover { + background: rgba(22, 119, 255, 0.25); +} + +.favorite-button.add:active { + transform: scale(0.95); +} + +.favorite-button.canceled { + color: #ff6b6b; + background: rgba(255, 107, 107, 0.15); + border: 1rpx solid rgba(255, 107, 107, 0.3); +} + /* 弹窗样式 */ .modal-overlay { position: fixed; @@ -144,15 +320,15 @@ padding: 0; border-radius: 20rpx 20rpx 0 0; width: 100%; - height: 100vh; /* 改为全屏高度 */ - max-height: 100vh; /* 确保不超过屏幕高度 */ + height: 100vh; + max-height: 100vh; overflow: hidden; box-shadow: 0 -8rpx 40rpx rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; - margin-bottom: 0; /* 导航栏已隐藏，无需间距 */ + margin-bottom: 0; z-index: 9999; - position: absolute; /* 确保弹窗位于遮罩层内 */ + position: absolute; top: 0; left: 0; } @@ -194,13 +370,13 @@ padding: 40rpx; overflow-y: auto; flex: 1; - height: calc(100vh - 120rpx); /* 减去头部高度，实现全屏滚动 */ - -webkit-overflow-scrolling: touch; /* 优化iOS滚动体验 */ - width: 100%; /* 确保宽度100% */ - box-sizing: border-box; /* 确保padding不影响宽度计算 */ + height: calc(100vh - 120rpx); + -webkit-overflow-scrolling: touch; + width: 100%; + box-sizing: border-box; } -.goods-image-section { +.goods-image-section-detail { margin-bottom: 40rpx; border-radius: 12rpx; overflow: hidden; @@ -217,17 +393,11 @@ height: 100%; } -.goods-image { - width: 100%; - height: 100%; - display: block; -} - -.goods-info-section { +.goods-info-section-detail { text-align: left; } -.goods-name { +.goods-name-detail { font-size: 36rpx; font-weight: 600; color: #2c3e50; @@ -304,28 +474,28 @@ } .call-phone-button { - background-color: white; - color: black; - font-size: 24rpx; - width: 120rpx; - height: 60rpx; - line-height: 60rpx; - padding: 0; - border-radius: 20rpx; - border: 1rpx solid #d9d9d9; - transition: all 0.3s; - white-space: nowrap; - text-align: center; + background-color: white; + color: black; + font-size: 24rpx; + width: 120rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + border-radius: 20rpx; + border: 1rpx solid #d9d9d9; + transition: all 0.3s; + white-space: nowrap; + text-align: center; } .call-phone-button:hover { - background-color: #f5f5f5; - transform: translateY(-1rpx); - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); + background-color: #f5f5f5; + transform: translateY(-1rpx); + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .call-phone-button:active { - transform: translateY(0); + transform: translateY(0); } .goods-action-section { @@ -611,4 +781,17 @@ button:after { border-radius: 12rpx; padding: 24rpx 0; border: 2rpx solid #e5e5e5; -} \ No newline at end of file +} + +/* 已加载全部提示 */ +.load-complete { + display: flex; + justify-content: center; + align-items: flex-start; + padding-top: 20rpx; +} + +.load-complete text { + color: #999; + font-size: 26rpx; +} diff --git a/pages/index/index.js b/pages/index/index.js index 26c9e7c..76aafa0 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -31,6 +31,9 @@ Page({ // 商品相关 goods: [], filteredGoods: [], + groupedGoods: [], + leftColumnGoods: [], + rightColumnGoods: [], selectedCategory: '全部', loadingMore: false, hasMoreData: true, @@ -277,13 +280,14 @@ Page({ (reservedCountValue !== undefined && reservedCountValue !== null ? reservedCountValue : (reservationCountValue || 0)); - // 转换supplyStatus字段值 + // 货源情况 - 直接显示数据库字段值 let supplyStatusValue = product.supplyStatus || ''; - if (['平台货源', '三方认证'].includes(supplyStatusValue)) { - supplyStatusValue = '现货'; - } else if (supplyStatusValue === '三方未认证') { - supplyStatusValue = '预售'; - } + + // 认证状态 - 直接显示数据库的sourceType字段值 + let sourceTypeValue = product.sourceType || ''; + + // 处理议价状态 - 全部显示可议价 + let negotiateValue = '可议价'; // 处理图片URL，确保imageUrls字段存在且为数组 const imageUrls = product.imageUrls || product.images || []; @@ -302,7 +306,8 @@ Page({ product_contact: product.product_contact || '', contact_phone: product.contact_phone || '', supplyStatus: supplyStatusValue, - sourceType: product.sourceType || '', + sourceType: sourceTypeValue, + negotiateStatus: negotiateValue, isReserved: false, isFavorite: false, currentImageIndex: 0, @@ -329,6 +334,8 @@ Page({ // 应用筛选条件 const filteredGoods = this.applyFilters(updatedGoods) + const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods) + const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods) // 计算是否还有更多数据 const totalGoods = res.total || 0; @@ -338,6 +345,9 @@ Page({ this.setData({ goods: updatedGoods, filteredGoods: filteredGoods, + groupedGoods: groupedGoods, + leftColumnGoods: leftColumnGoods, + rightColumnGoods: rightColumnGoods, loadingMore: false, page: currentPage + 1, hasMoreData: hasMoreData, @@ -439,6 +449,75 @@ Page({ return filtered }, + // 分组商品用于交错布局（左长右短，左短右长交替） + groupGoodsForStaggeredLayout: function(goods) { + if (!goods || goods.length === 0) { + return [] + } + + const grouped = [] + const len = goods.length + + for (let i = 0; i < len; i += 2) { + const row = [] + + // 第一个商品：如果是偶数行(index为偶数)，则是长商品；如果是奇数行，则是短商品 + if (i < len) { + row.push({ + ...goods[i], + isLong: i % 2 === 0 // 偶数索引为长商品 + }) + } + + // 第二个商品：与第一个相反 + if (i + 1 < len) { + row.push({ + ...goods[i + 1], + isLong: i % 2 !== 0 // 奇数索引为长商品 + }) + } + + grouped.push(row) + } + + return grouped + }, + + // 瀑布流布局：将商品分配到左右两列 + // 规则：左长右短 -> 左短右长 交替排列 + // 偶数行(0,2,4...)：左长右短 + // 奇数行(1,3,5...)：左短右长 + distributeToColumns: function(goods) { + if (!goods || goods.length === 0) { + return { leftColumnGoods: [], rightColumnGoods: [] } + } + + const leftColumn = [] + const rightColumn = [] + const rowCount = Math.ceil(goods.length / 2) + + for (let i = 0; i < goods.length; i += 2) { + const currentRow = Math.floor(i / 2) + const isEvenRow = currentRow % 2 === 0 + + if (i < goods.length) { + leftColumn.push({ + ...goods[i], + isLong: isEvenRow // 偶数行左边为长，奇数行左边为短 + }) + } + + if (i + 1 < goods.length) { + rightColumn.push({ + ...goods[i + 1], + isLong: !isEvenRow // 偶数行右边为短，奇数行右边为长 + }) + } + } + + return { leftColumnGoods: leftColumn, rightColumnGoods: rightColumn } + }, + // 搜索输入 onSearchInput: function(e) { this.setData({ @@ -455,8 +534,13 @@ Page({ } const filteredGoods = this.applyFilters(this.data.goods) + const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods) + const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods) this.setData({ - filteredGoods: filteredGoods + filteredGoods: filteredGoods, + groupedGoods: groupedGoods, + leftColumnGoods: leftColumnGoods, + rightColumnGoods: rightColumnGoods }) }, @@ -484,8 +568,13 @@ Page({ } const filteredGoods = this.applyFilters(this.data.goods) + const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods) + const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods) this.setData({ filteredGoods: filteredGoods, + groupedGoods: groupedGoods, + leftColumnGoods: leftColumnGoods, + rightColumnGoods: rightColumnGoods, showRegionPicker: false }) }, @@ -509,8 +598,13 @@ Page({ }) const filteredGoods = this.applyFilters(this.data.goods) + const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods) + const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods) this.setData({ - filteredGoods: filteredGoods + filteredGoods: filteredGoods, + groupedGoods: groupedGoods, + leftColumnGoods: leftColumnGoods, + rightColumnGoods: rightColumnGoods }) }, diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 51238c3..968629d 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -136,33 +136,80 @@ style="height: calc(100% - 60rpx);" > - - - - + + - {{item.supplyStatus || '现货'}} + bindtap="viewGoodsDetail" + > + + + + + + {{item.name}} + {{item.specification || '无'}} | {{item.yolk || '无'}} + + {{item.supplyStatus || ''}} + {{item.sourceType || ''}} + {{item.negotiateStatus}} + + + + {{item.region}} + + 已有{{item.reservedCount || 0}}人收藏 + + + + - - - {{item.name}} - {{item.specification || '无'}} | {{item.yolk || '无'}} - ¥{{item.price}} - - {{item.region}} - 已有{{item.reservedCount || 0}}人收藏 + + + + + + + + + {{item.name}} + {{item.specification || '无'}} | {{item.yolk || '无'}} + + {{item.supplyStatus || ''}} + {{item.sourceType || ''}} + {{item.negotiateStatus}} + + + + {{item.region}} + + 已有{{item.reservedCount || 0}}人收藏 + + + diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 9919c57..06eb5d7 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -3,7 +3,7 @@ page { height: 100vh; display: flex; flex-direction: column; - background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%); margin: 0; padding: 0; } @@ -16,7 +16,7 @@ page { display: flex; flex-direction: column; box-sizing: border-box; - background-color: #f5f7fa; + background-color: #f8f8f8; } /* 标题样式 */ @@ -192,70 +192,53 @@ page { .category-scroll { display: flex; - gap: 15rpx; - padding: 8rpx 15rpx; + gap: 16rpx; + padding: 12rpx 16rpx; white-space: nowrap; overflow-x: auto; - background-color: transparent; - border-radius: 10rpx; - box-shadow: none; + background: rgba(255, 255, 255, 0.5); + backdrop-filter: blur(10rpx); + -webkit-backdrop-filter: blur(10rpx); + border-radius: 40rpx; + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + border: 1rpx solid rgba(255, 255, 255, 0.5); } -/* 蛋形样式 - 玻璃质感 */ .egg-item { position: relative; - width: 80rpx; - height: 100rpx; - background-color: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(10rpx); - border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; + padding: 16rpx 28rpx; + background: rgba(255, 255, 255, 0.7); + backdrop-filter: blur(8rpx); + -webkit-backdrop-filter: blur(8rpx); + border-radius: 30rpx; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - border: 1rpx solid rgba(255, 255, 255, 0.5); + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); + border: 1rpx solid rgba(200, 200, 200, 0.5); flex-shrink: 0; } -/* 不同品种的颜色 */ -.egg-item:nth-child(2) { /* 粉壳 */ - background-color: rgba(255, 182, 193, 0.3); - border-color: rgba(255, 182, 193, 0.7); -} - -.egg-item:nth-child(3) { /* 红壳 */ - background-color: rgba(255, 105, 180, 0.3); - border-color: rgba(255, 105, 180, 0.7); -} - -.egg-item:nth-child(4) { /* 绿壳 */ - background-color: rgba(144, 238, 144, 0.3); - border-color: rgba(144, 238, 144, 0.7); -} - -.egg-item:nth-child(5) { /* 白壳 */ - background-color: rgba(245, 245, 245, 0.5); - border-color: rgba(245, 245, 245, 0.8); -} - .egg-item.active { - background-color: rgba(22, 119, 255, 0.4); - border-color: rgba(22, 119, 255, 0.8); - box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.3); - transform: scale(1.05); + background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%); + color: white; + box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.35); + border: 1rpx solid transparent; + transform: translateY(-2rpx); } .egg-inner { - font-size: 22rpx; - color: #333; - font-weight: bold; + font-size: 26rpx; + color: #555; + font-weight: 600; text-align: center; + white-space: nowrap; } .egg-item.active .egg-inner { - color: #1677ff; - font-size: 24rpx; + color: #ffffff; + font-size: 28rpx; } /* 侧边栏按钮样式 - 白色半透明毛玻璃质感 */ @@ -450,25 +433,105 @@ page { } .goods-list-container { - display: flex; - flex-wrap: wrap; - gap: 20rpx; - justify-content: flex-start; + padding: 20rpx 24rpx; padding-bottom: 20rpx; } +.waterfall-container { + display: flex; + gap: 32rpx; + width: 100%; +} + +.waterfall-column { + flex: 1; + display: flex; + flex-direction: column; + gap: 16rpx; +} + +.left-column { + align-items: flex-start; +} + +.right-column { + align-items: flex-end; +} + .goods-item { - width: calc((100% - 20rpx) / 2); - background-color: #f9f9f9; - border-radius: 10rpx; + width: 100%; + border-radius: 24rpx; overflow: hidden; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); - transition: all 0.3s ease; + transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + transform-style: preserve-3d; + perspective: 1000rpx; +} + +.goods-card { + width: 100%; + border-radius: 20rpx; + overflow: hidden; + background: rgba(255, 255, 255, 0.82); + backdrop-filter: blur(10rpx); + -webkit-backdrop-filter: blur(10rpx); + box-shadow: + 0 6rpx 24rpx rgba(0, 0, 0, 0.15), + 0 0 0 1rpx rgba(0, 0, 0, 0.08), + inset 0 0 0 1rpx rgba(255, 255, 255, 0.95); + border: 2rpx solid rgba(200, 200, 200, 0.5); + display: flex; + flex-direction: column; } .goods-item:hover { - box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); - transform: translateY(-2rpx); + transform: translateY(-8rpx); + box-shadow: + 0 16rpx 40rpx rgba(0, 0, 0, 0.22), + 0 0 0 2rpx rgba(0, 0, 0, 0.12), + inset 0 0 0 1rpx rgba(255, 255, 255, 1); +} + +.goods-item:active { + transform: translateY(-4rpx); +} + +.goods-item.long-card { + margin-bottom: 24rpx; +} + +.goods-item.long-card .goods-info { + min-height: 200rpx; + padding: 24rpx; +} + +.goods-item.short-card { + margin-bottom: 16rpx; +} + +.goods-item.short-card .goods-info { + min-height: 140rpx; + padding: 16rpx; +} + +.goods-item.short-card .goods-name { + -webkit-line-clamp: 1; + min-height: 40rpx; +} + +.goods-item.short-card .goods-spec { + margin-bottom: 8rpx; +} + +.goods-item.short-card .goods-price { + font-size: 32rpx; +} + +.left-column .goods-item { + transform: translateZ(10rpx); +} + +.right-column .goods-item { + transform: translateZ(-10rpx); } .goods-image-container { @@ -476,6 +539,7 @@ page { width: 100%; padding-bottom: 100%; overflow: hidden; + background: rgba(0, 0, 0, 0.05); } .goods-image { @@ -485,64 +549,159 @@ page { width: 100%; height: 100%; background-color: #eee; + transition: all 0.4s ease; +} + +.goods-item:hover .goods-image { + transform: scale(1.05); } .goods-tag { position: absolute; - top: 10rpx; - left: 10rpx; - background-color: rgba(255, 90, 90, 0.8); + top: 16rpx; + left: 16rpx; + background: rgba(255, 90, 90, 0.85); + backdrop-filter: blur(8rpx); color: white; - font-size: 20rpx; - padding: 5rpx 10rpx; - border-radius: 15rpx; + font-size: 22rpx; + padding: 8rpx 16rpx; + border-radius: 20rpx; font-weight: bold; + box-shadow: 0 2rpx 8rpx rgba(255, 90, 90, 0.3); + border: 1rpx solid rgba(255, 255, 255, 0.3); } .goods-info { - padding: 15rpx; + padding: 20rpx; + flex: 1; + display: flex; + flex-direction: column; + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10rpx); + border-top: 1rpx solid rgba(255, 255, 255, 0.2); } .goods-name { - font-size: 26rpx; + font-size: 28rpx; font-weight: bold; color: #333; - margin-bottom: 10rpx; + margin-bottom: 12rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 60rpx; + line-height: 1.4; + text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); } .goods-spec { - font-size: 22rpx; - color: #999; - margin-bottom: 10rpx; + font-size: 24rpx; + color: #666; + margin-bottom: 12rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); } .goods-price { - font-size: 32rpx; + font-size: 36rpx; font-weight: bold; color: #ff4d4f; - margin-bottom: 10rpx; + margin-bottom: 12rpx; + text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); +} + +.goods-status-row { + display: flex; + flex-wrap: nowrap; + gap: 8rpx; + margin-bottom: 12rpx; +} + +.status-tag { + font-size: 20rpx; + padding: 4rpx 8rpx; + border-radius: 4rpx; + font-weight: 600; + display: inline-block; + white-space: nowrap; + flex-shrink: 0; +} + +.status-tag.supply-spot { + background: rgba(82, 196, 26, 0.15); + color: #389e0d; + border: 1rpx solid rgba(82, 196, 26, 0.5); +} + +.status-tag.supply-presale { + background: rgba(255, 154, 28, 0.15); + color: #d46b08; + border: 1rpx solid rgba(255, 154, 28, 0.5); +} + +.status-tag.auth-verified { + background: rgba(24, 144, 255, 0.15); + color: #096dd9; + border: 1rpx solid rgba(24, 144, 255, 0.5); +} + +.status-tag.auth-unverified { + background: rgba(140, 140, 140, 0.15); + color: #595959; + border: 1rpx solid rgba(140, 140, 140, 0.5); +} + +.status-tag.negotiate-yes { + background: rgba(114, 46, 209, 0.15); + color: #722ed1; + border: 1rpx solid rgba(114, 46, 209, 0.5); +} + +.status-tag.source-yes { + background: rgba(24, 144, 255, 0.15); + color: #096dd9; + border: 1rpx solid rgba(24, 144, 255, 0.5); +} + +.status-tag.negotiate-no { + background: rgba(180, 180, 180, 0.15); + color: #595959; + border: 1rpx solid rgba(180, 180, 180, 0.5); } .goods-footer { display: flex; justify-content: space-between; - font-size: 20rpx; - color: #999; + font-size: 22rpx; + color: #888; + margin-top: auto; + padding-top: 12rpx; + border-top: 1rpx solid rgba(255, 255, 255, 0.2); + text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); +} + +.goods-region-bg { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(4rpx); + -webkit-backdrop-filter: blur(4rpx); + border-radius: 4rpx; + padding: 4rpx 12rpx; + border: 1.5rpx solid #1e3a6e; + box-shadow: 0 1rpx 3rpx rgba(30, 58, 110, 0.08); } .goods-region { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + color: #1e3a6e; + font-weight: 600; + font-size: 23rpx; + letter-spacing: 0.5rpx; } .goods-reserved { diff --git a/project.private.config.json b/project.private.config.json index d1719b1..699244e 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -1,6 +1,6 @@ { "libVersion": "3.10.3", - "projectname": "New2", + "projectname": "Mini-New2", "setting": { "urlCheck": false, "coverView": true,