From 05c9e21bd1e11b503a41e73d301d834769d39307 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E9=A3=9E=E6=B4=8B?= <15778543+xufeiyang6017@user.noreply.gitee.com> Date: Wed, 31 Dec 2025 10:41:29 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81=E8=AF=A6?= =?UTF-8?q?=E6=83=85=E9=A1=B5=E5=92=8C=E9=A6=96=E9=A1=B5=E7=99=BB=E5=BD=95?= =?UTF-8?q?=E6=B5=81=E7=A8=8B=201.=20=E5=B0=86=E7=99=BB=E5=BD=95=E6=A3=80?= =?UTF-8?q?=E6=9F=A5=E7=A7=BB=E8=87=B3=20viewGoodsDetail=20=E5=87=BD?= =?UTF-8?q?=E6=95=B0=E6=9C=AB=E5=B0=BE=202.=20=E5=9C=A8=E8=AF=A6=E6=83=85?= =?UTF-8?q?=E9=A1=B5=E6=98=BE=E7=A4=BA=E7=99=BB=E5=BD=95=E5=BC=B9=E7=AA=97?= =?UTF-8?q?=E8=80=8C=E9=9D=9E=E5=9C=A8=E9=A6=96=E9=A1=B5=203.=20=E4=B8=BA?= =?UTF-8?q?=E6=94=B6=E8=97=8F=E5=92=8C=E5=9C=A8=E7=BA=BF=E5=92=A8=E8=AF=A2?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=B7=BB=E5=8A=A0=E7=99=BB=E5=BD=95=E6=A3=80?= =?UTF-8?q?=E6=9F=A5=204.=20=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7=E4=BD=93?= =?UTF-8?q?=E9=AA=8C=EF=BC=8C=E7=A1=AE=E4=BF=9D=E5=85=88=E6=B5=8F=E8=A7=88?= =?UTF-8?q?=E5=86=8D=E6=8F=90=E7=A4=BA=E7=99=BB=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/goods-detail/goods-detail.js | 100 ++++++++++++++-- pages/goods-detail/goods-detail.wxml | 27 ++++- pages/goods-detail/goods-detail.wxss | 105 +++++++++++++++++ pages/index/index.js | 93 +++++++-------- pages/index/index.wxml | 170 ++++++--------------------- pages/index/index.wxss | 94 ++++++--------- 6 files changed, 337 insertions(+), 252 deletions(-) diff --git a/pages/goods-detail/goods-detail.js b/pages/goods-detail/goods-detail.js index 5dbc74c..b488fc0 100644 --- a/pages/goods-detail/goods-detail.js +++ b/pages/goods-detail/goods-detail.js @@ -94,6 +94,8 @@ Page({ previewImageIndex: 0, // 当前预览图片的索引 fromSeller: false, // 是否来自seller页面 isFavorite: false, // 当前商品是否已收藏 + // 登录弹窗状态 + showOneKeyLoginModal: false, // 是否显示登录弹窗 // 图片缩放相关状态 scale: 1, // 当前缩放比例 lastScale: 1, // 上一次缩放比例 @@ -108,6 +110,18 @@ Page({ onLoad: function (options) { console.log('商品详情页面加载，参数:', options); + + // 处理登录状态检查 + if (options.needLogin === 'true' || options.needLogin === true) { + console.log('检测到需要登录，显示登录提示弹窗'); + // 延迟显示登录弹窗，确保页面完全加载 + setTimeout(() => { + this.setData({ + showOneKeyLoginModal: true + }); + }, 500); + } + // 解析传入的商品数据 let goodsData = null; if (options.goodsData) { @@ -435,11 +449,9 @@ Page({ if (!openid || !userId) { console.log('用户未登录，显示一键登录弹窗'); - // 由于商品详情页可能没有登录弹窗，这里直接提示用户登录 - wx.showToast({ - title: '请先登录', - icon: 'none', - duration: 2000 + // 显示登录弹窗 + this.setData({ + showOneKeyLoginModal: true }); return; } @@ -773,6 +785,18 @@ Page({ return; } + // 检查用户登录状态 + const openid = wx.getStorageSync('openid'); + const userId = wx.getStorageSync('userId'); + + if (!openid || !userId) { + console.log('用户未登录，显示登录弹窗'); + this.setData({ + showOneKeyLoginModal: true + }); + return; + } + // 跳转到聊天界面或打开客服窗口 wx.showModal({ title: '在线咨询', @@ -799,14 +823,8 @@ Page({ userPhone = wx.getStorageSync('phoneNumber'); } } - // 如果都获取不到，使用默认登录手机号 - if (!userPhone) { - userPhone = '18482694520'; - } } catch (e) { console.error('获取用户手机号失败:', e); - // 如果获取失败，使用默认登录手机号 - userPhone = '18482694520'; } 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() { wx.navigateBack(); diff --git a/pages/goods-detail/goods-detail.wxml b/pages/goods-detail/goods-detail.wxml index aab45ee..8bee961 100644 --- a/pages/goods-detail/goods-detail.wxml +++ b/pages/goods-detail/goods-detail.wxml @@ -38,7 +38,7 @@ V - + {{goodsDetail.sourceType || '暂无'}} @@ -90,7 +90,7 @@ - 斤重 + 产品包装 {{goodsDetail.displayGrossWeight || '暂无'}} @@ -134,8 +134,31 @@ + + + + + + 授权登录 + 授权您的手机号后才能使用完整功能 + + + + + diff --git a/pages/goods-detail/goods-detail.wxss b/pages/goods-detail/goods-detail.wxss index 342175f..0d5519e 100644 --- a/pages/goods-detail/goods-detail.wxss +++ b/pages/goods-detail/goods-detail.wxss @@ -560,4 +560,109 @@ .price-value { 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; } \ No newline at end of file diff --git a/pages/index/index.js b/pages/index/index.js index 494d08b..15abb62 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -40,8 +40,6 @@ Page({ // 商品相关 - 淘宝风格 goods: [], filteredGoods: [], - leftColumnGoods: [], - rightColumnGoods: [], selectedCategory: '全部', categories: ['全部', '粉壳', '褐壳', '绿壳', '白壳'], loadingMore: false, @@ -279,16 +277,13 @@ Page({ this.setData({ goods: updatedGoods - }, () => { - // 重新应用筛选条件，确保显示的商品收藏状态也更新 - const filteredGoods = this.applyFilters(this.data.goods, false); - const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods); - this.setData({ - filteredGoods: filteredGoods, - leftColumnGoods: leftColumnGoods, - rightColumnGoods: rightColumnGoods + }, () => { + // 重新应用筛选条件，确保显示的商品收藏状态也更新 + const filteredGoods = this.applyFilters(this.data.goods, false); + this.setData({ + filteredGoods: filteredGoods, + }); }); - }); }; app.eventBus.on('favoriteChanged', this.favoriteChangedHandler); }, @@ -367,8 +362,6 @@ Page({ hasMoreData: true, goods: existingGoods, filteredGoods: [], - leftColumnGoods: [], - rightColumnGoods: [] }) const timestamp = new Date().getTime(); @@ -529,17 +522,9 @@ Page({ 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({ goods: updatedGoods, filteredGoods: filteredGoods, - leftColumnGoods: leftColumnGoods, - rightColumnGoods: rightColumnGoods, loadingMore: false, isLoading: false, page: this.data.page + 1 @@ -585,13 +570,9 @@ Page({ const filteredGoods = this.applyFilters(updatedGoods, false) - const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods) - this.setData({ goods: updatedGoods, filteredGoods: filteredGoods, - leftColumnGoods: leftColumnGoods, - rightColumnGoods: rightColumnGoods, loadingMore: false, isLoading: false, page: this.data.page + 1 @@ -806,16 +787,11 @@ Page({ this.updateGoodsFavoriteStatus(processedGoods, false); // 应用筛选条件 - let filteredGoods = this.applyFilters(processedGoods, false); - - // 分配到两列 - const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods); + const filteredGoods = this.applyFilters(processedGoods, false); this.setData({ goods: processedGoods, filteredGoods: filteredGoods, - leftColumnGoods: leftColumnGoods, - rightColumnGoods: rightColumnGoods, loadingMore: false, isLoading: 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) { let filtered = [...goods] @@ -874,6 +878,9 @@ Page({ }) } + // 统一字段长度 + filtered = filtered.map(item => this.normalizeFieldLength(item)) + return filtered }, @@ -1019,12 +1026,9 @@ Page({ const filteredGoods = this.applyFilters(this.data.goods, false) const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods) - const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods) this.setData({ filteredGoods: filteredGoods, groupedGoods: groupedGoods, - leftColumnGoods: leftColumnGoods, - rightColumnGoods: rightColumnGoods }) }, @@ -1059,12 +1063,9 @@ Page({ // 否则仅对本地商品进行筛选 const filteredGoods = this.applyFilters(this.data.goods, false) const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods) - const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods) this.setData({ filteredGoods: filteredGoods, groupedGoods: groupedGoods, - leftColumnGoods: leftColumnGoods, - rightColumnGoods: rightColumnGoods }) } }, @@ -1093,8 +1094,6 @@ Page({ hasMoreData: true, goods: [], filteredGoods: [], - leftColumnGoods: [], - rightColumnGoods: [], loadingMore: false, isLoading: true }) @@ -1120,15 +1119,8 @@ Page({ // 查看商品详情 viewGoodsDetail: function(e) { - // 检查登录状态 - if (this.data.needPhoneAuth) { - this.setData({ - showOneKeyLoginModal: true - }) - return; - } - const item = e.currentTarget.dataset.item + // 确保productId存在，优先使用id，其次使用productId const productId = String(item.id || item.productId || '') @@ -1143,8 +1135,10 @@ Page({ } // 将完整的商品数据传递给详情页，包含联系人信息，与buyer页面保持一致 + // 同时传递登录状态信息，让详情页决定是否显示登录弹窗 + const needLogin = this.data.needPhoneAuth; 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 { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods); this.setData({ filteredGoods: filteredGoods, - leftColumnGoods: leftColumnGoods, - rightColumnGoods: rightColumnGoods }); }); } diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 84e6455..76cda77 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -109,25 +109,13 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + @@ -150,124 +138,40 @@ bindrefresherrestore="onRestore" > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 预售 - 现货 - - - {{item.name}} - {{item.specification || '无'}} | {{item.yolk}} - - {{item.sourceType || ''}} - {{item.negotiateStatus}} - - - 已有{{item.reservedCount || 0}}人收藏 - {{item.region || ''}} - - - - - - - - - - - - - - - + + + + + + 预售 + 现货 - - - - - - - - 预售 - 现货 + + {{item.name}} + {{item.specification || '无'}} | {{item.yolk}} + + {{item.sourceType || ''}} + {{item.negotiateStatus}} + 库存：{{item.minOrder || item.quantity || '暂无'}} - - {{item.name}} - {{item.specification || '无'}} | {{item.yolk}} - - {{item.sourceType || ''}} - {{item.negotiateStatus}} - - - 已有{{item.reservedCount || 0}}人收藏 - {{item.region || ''}} - + + 已有{{item.reservedCount || 0}}人收藏 + {{item.region || ''}} diff --git a/pages/index/index.wxss b/pages/index/index.wxss index a9d0581..65b0eeb 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -617,25 +617,18 @@ wx-button:not([size=mini]) { padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx); } -.waterfall-container { +.grid-container { display: flex; - gap: 32rpx; - width: 100%; -} - -.waterfall-column { - flex: 1; - display: flex; - flex-direction: column; + flex-wrap: wrap; gap: 16rpx; + width: 100%; + padding: 0 10rpx; + box-sizing: border-box; } -.left-column { - align-items: flex-start; -} - -.right-column { - align-items: flex-end; +.grid-item { + width: calc((100% - 16rpx) / 2); + /* 每个商品项占50%宽度，留出16rpx的间距 */ } .goods-item { @@ -874,6 +867,12 @@ wx-button:not([size=mini]) { 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 { display: flex; justify-content: space-between; @@ -1153,24 +1152,18 @@ wx-button:not([size=mini]) { margin-top: 180rpx; } -.skeleton-waterfall { +.skeleton-grid { display: flex; + flex-wrap: wrap; gap: 16rpx; width: 100%; } -.skeleton-column { - flex: 1; - display: flex; - flex-direction: column; - gap: 16rpx; -} - -.skeleton-item { +.skeleton-grid-item { + width: calc((100% - 16rpx) / 2); background: #fff; border-radius: 16rpx; overflow: hidden; - padding-bottom: 20rpx; } .skeleton-image { @@ -1226,40 +1219,25 @@ wx-button:not([size=mini]) { padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx); } -/* 瀑布流容器 */ -.waterfall-container { +/* 网格容器 */ +.grid-container { display: flex; - gap: 32rpx; + flex-wrap: wrap; + gap: 16rpx; width: 100%; - margin-top: 20rpx; /* 增加上边距，避免被分类区域遮挡 */ + margin-top: 20rpx; background: transparent; } -/* 瀑布流列 */ -.waterfall-column { - flex: 1; - display: flex; - flex-direction: column; - gap: 16rpx; -} - -.left-column { - align-items: flex-start; -} - -.right-column { - align-items: flex-end; -} - -/* 瀑布流商品项 */ -.waterfall-item { - width: 100%; +/* 网格商品项 */ +.grid-item { + width: calc((100% - 16rpx) / 2); border-radius: 16rpx; overflow: hidden; transition: all 0.3s ease; } -.waterfall-item:active { +.grid-item:active { transform: scale(0.98); opacity: 0.9; } @@ -1267,6 +1245,7 @@ wx-button:not([size=mini]) { /* 商品卡片 */ .product-card { width: 100%; + height: 450rpx; /* 固定高度 */ background: #fff; border-radius: 16rpx; overflow: hidden; @@ -1274,7 +1253,6 @@ wx-button:not([size=mini]) { transition: all 0.3s ease; display: flex; flex-direction: column; - /* 移除固定最小高度，让卡片高度根据内容自动调整 */ } .product-card:active { @@ -1286,6 +1264,7 @@ wx-button:not([size=mini]) { .product-image-wrapper { position: relative; width: 100%; + height: 320rpx; /* 固定图片高度 */ background: #f5f5f5; border-radius: 16rpx 16rpx 0 0; overflow: hidden; @@ -1293,7 +1272,9 @@ wx-button:not([size=mini]) { .product-image { width: 100%; + height: 100%; /* 图片占满整个图片容器 */ display: block; + object-fit: cover; /* 图片按比例填充，裁剪多余部分 */ } /* 促销标签 */ @@ -1327,9 +1308,10 @@ wx-button:not([size=mini]) { /* 商品信息区域 */ .product-info { padding: 16rpx; - flex: 1; /* 自动拉伸，占据剩余空间 */ + height: 210rpx; /* 固定信息区域高度 (600 - 350 - 40 = 210) */ display: flex; flex-direction: column; + justify-content: space-between; /* 内容均匀分布 */ } /* 商品标题 */ @@ -1337,12 +1319,12 @@ wx-button:not([size=mini]) { font-size: 26rpx; color: #000000ff; line-height: 1.4; + height: 72rpx; /* 固定标题高度 */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - min-height: 72rpx; margin-bottom: 8rpx; font-weight: 500; } @@ -1351,15 +1333,17 @@ wx-button:not([size=mini]) { .product-spec { font-size: 22rpx; color: #797878ff; - margin-bottom: 12rpx; + height: 32rpx; /* 固定规格高度 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + margin-bottom: 8rpx; } /* 价格区域 - 淘宝风格突出显示 */ .product-price-row { - margin-bottom: 12rpx; + height: 48rpx; /* 固定价格区域高度 */ + margin-bottom: 8rpx; display: flex; align-items: baseline; justify-content: space-between; @@ -1392,12 +1376,12 @@ wx-button:not([size=mini]) { /* 销量和地区 - 淘宝风格 */ .product-meta { + height: 32rpx; /* 固定元信息高度 */ display: flex; justify-content: space-between; align-items: center; font-size: 22rpx; color: #999; - margin-top: 8rpx; } .sales-count {