diff --git a/app.json b/app.json index a808d3c..f26ed92 100644 --- a/app.json +++ b/app.json @@ -23,7 +23,8 @@ "pages/order/detail/index", "pages/company/company", "pages/qrcode/index", - "pages/collection/index" + "pages/collection/index", + "pages/compare_price/index" ], "subpackages": [ { diff --git a/images/background.png b/images/background.png new file mode 100644 index 0000000..04267d4 Binary files /dev/null and b/images/background.png differ diff --git a/pages/compare_price/index.js b/pages/compare_price/index.js new file mode 100644 index 0000000..6f54b1c --- /dev/null +++ b/pages/compare_price/index.js @@ -0,0 +1,126 @@ +// pages/compare_price/index.js +const API = require('../../utils/api.js'); + +Page({ + data: { + // 页面数据 + showTips: true, + goods: [], + loading: false, + selectedOption: '' + }, + + onLoad: function (options) { + // 页面加载 + console.log('对比价格页面加载'); + }, + + onShow: function () { + // 页面显示 + }, + + onHide: function () { + // 页面隐藏 + }, + + onUnload: function () { + // 页面卸载 + }, + + onPullDownRefresh: function () { + // 下拉刷新 + }, + + onReachBottom: function () { + // 上拉触底 + }, + + // 图片加载完成事件 + onImageLoad: function (e) { + // 图片加载完成后的处理逻辑 + console.log('图片加载完成:', e); + }, + + // 关闭提示弹窗 + closeTips: function () { + this.setData({ + showTips: false + }); + }, + + // 选择选项 + selectOption: function (e) { + const option = e.currentTarget.dataset.option; + console.log('选择了:', option); + + // 显示加载状态 + this.setData({ + loading: true, + selectedOption: option + }); + + // 调用 API 获取符合条件的商品 + API.getProducts(1, 20, 'all', '') + .then(res => { + console.log('获取商品列表成功:', res); + // 过滤出 category 匹配且 price 不为 null 的商品 + const filteredGoods = res.products.filter(item => + item.category === option && + item.status === 'published' && + item.price !== null && + item.price !== undefined + ); + + // 清理 mediaItems 中的 URL,去除反引号和空格 + // 同时处理 imageUrls 字段,将其转换为 mediaItems 格式 + const cleanedGoods = filteredGoods.map(item => { + // 首先清理 imageUrls 字段(如果存在) + if (item.imageUrls && Array.isArray(item.imageUrls)) { + item.imageUrls = item.imageUrls.map(url => { + return url.trim().replace(/[`]/g, ''); + }); + + // 如果没有 mediaItems 字段,将 imageUrls 转换为 mediaItems 格式 + if (!item.mediaItems || !Array.isArray(item.mediaItems) || item.mediaItems.length === 0) { + item.mediaItems = item.imageUrls.map(url => ({ + type: 'image', + url: url + })); + } + } + + // 清理 mediaItems 中的 URL + if (item.mediaItems && Array.isArray(item.mediaItems)) { + item.mediaItems = item.mediaItems.map(media => { + if (media.url) { + // 去除 URL 中的反引号和空格 + media.url = media.url.trim().replace(/[`]/g, ''); + } + return media; + }); + } + return item; + }); + + console.log('过滤后的商品列表:', cleanedGoods); + // 检查商品数据结构 + if (cleanedGoods.length > 0) { + console.log('第一个商品的媒体数据:', cleanedGoods[0].mediaItems); + } + this.setData({ + goods: cleanedGoods, + loading: false + }); + }) + .catch(err => { + console.error('获取商品列表失败:', err); + this.setData({ + loading: false + }); + wx.showToast({ + title: '获取商品失败,请稍后重试', + icon: 'none' + }); + }); + } +}); \ No newline at end of file diff --git a/pages/compare_price/index.json b/pages/compare_price/index.json new file mode 100644 index 0000000..10cc11b --- /dev/null +++ b/pages/compare_price/index.json @@ -0,0 +1,4 @@ +{ + "navigationBarTitleText": "对比价格", + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/compare_price/index.wxml b/pages/compare_price/index.wxml new file mode 100644 index 0000000..d578c02 --- /dev/null +++ b/pages/compare_price/index.wxml @@ -0,0 +1,170 @@ + + + + + + + + 请选择想要了解的商品 + + + + + + + + + + 加载中... + + + + + + {{selectedOption}}商品列表 + + + + + + + + + + + + + + + 预售 + 现货 + 售空 + + + + + {{item.sourceType || ''}} + + {{item.name}} + {{item.description || ''}} + + + 库存:{{item.totalStock && item.totalStock !== '充足' ? item.totalStock + '件' : (item.totalStock || '充足')}} + 已售:{{item.originalTotalStock || 0}}件 + + + 已有{{item.frequency || 0}}人浏览 + ¥{{item.price}} + + + + + + + + + + + + + + + + 预售 + 现货 + 售空 + + + + + {{item.sourceType || ''}} + + {{item.name}} + {{item.description || ''}} + + + 库存:{{item.totalStock && item.totalStock !== '充足' ? item.totalStock + '件' : (item.totalStock || '充足')}} + 已售:{{item.originalTotalStock || 0}}件 + + + 已有{{item.frequency || 0}}人浏览 + ¥{{item.price}} + + + + + + + + + + 暂无商品数据 + + + + + + + + 提示 + 欢迎使用对比价格功能,此页面用于对比不同商品的价格信息。 + + + + + + \ No newline at end of file diff --git a/pages/compare_price/index.wxss b/pages/compare_price/index.wxss new file mode 100644 index 0000000..9085200 --- /dev/null +++ b/pages/compare_price/index.wxss @@ -0,0 +1,217 @@ +/* pages/compare_price/index.wxss */ +/* 商品卡片样式 */ + +/* 瀑布流容器 */ +.waterfall-container { + display: flex; + gap: 16rpx; + width: 100%; + padding: 0 10rpx; + box-sizing: border-box; +} + +/* 瀑布流列 */ +.waterfall-column { + flex: 1; + display: flex; + flex-direction: column; + gap: 16rpx; +} + +/* 瀑布流商品项 */ +.waterfall-item { + border-radius: 16rpx; + overflow: hidden; + transition: all 0.3s ease; +} + +.waterfall-item:active { + transform: scale(0.98); + opacity: 0.9; +} + +/* 商品卡片 */ +.product-card { + width: 100%; + height: auto; + min-height: 450rpx; + background: #fff; + border-radius: 16rpx; + overflow: hidden; + box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + display: flex; + flex-direction: column; + position: relative; +} + +.product-card:active { + transform: scale(0.98); + box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1); +} + +/* 商品图片区域 */ +.product-image-wrapper { + position: relative; + width: 100%; + height: 320rpx; + background: #f5f5f5; + border-radius: 16rpx 16rpx 0 0; + overflow: hidden; +} + +/* 统一媒体元素样式 */ +.product-media { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + object-position: center; + background-color: #f5f5f5; +} + +/* 售空商品白色覆盖层 - 覆盖整个卡片 */ +.sold-out-overlay-full { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.5); + z-index: 15; + border-radius: 16rpx; + backdrop-filter: none; + -webkit-backdrop-filter: none; +} + +/* 促销标签 */ +.promo-tag { + position: absolute; + top: 0; + left: 0; + padding: 6rpx 12rpx; + font-size: 20rpx; + color: #fff; + border-radius: 0 0 12rpx 0; + z-index: 20; + font-weight: 600; +} + +.promo-tag.presale { + background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%); + box-shadow: 0 2rpx 8rpx rgba(255, 107, 0, 0.3); +} + +.promo-tag.in-stock { + background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%); + box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3); +} + +.promo-tag.sold-out { + background: linear-gradient(135deg, #a92a2aff 0%, #a6a6a6 100%); + box-shadow: 0 2rpx 8rpx rgba(140, 140, 140, 0.3); +} + +/* 商品信息区域 */ +.product-info { + padding: 16rpx; + height: auto; + min-height: 210rpx; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 10rpx; + box-sizing: border-box; +} + +/* 第一行布局:货源类型 | 产品名称 | 货源描述 */ +.product-first-row { + display: block; + width: 100%; + line-height: 1.4; +} + +/* 商品标题 */ +.product-title { + font-size: 26rpx; + color: #000000; + font-weight: 700; + display: inline; + margin-right: 8rpx; +} + +/* 商品描述 */ +.product-description { + font-size: 26rpx; + color: #000000; + font-weight: 700; + display: inline; + word-break: break-word; +} + +/* 状态标签样式 */ +.status-tag { + display: inline; + margin-right: 8rpx; + font-size: 20rpx; + padding: 4rpx 8rpx; + border-radius: 4rpx; + font-weight: 600; + white-space: nowrap; + flex-shrink: 0; +} + +.status-tag.source-third { + background: rgba(24, 144, 255, 0.15); + color: #096dd9; + border: 1rpx solid rgba(24, 144, 255, 0.5); +} + +.status-tag.source-platform { + background: rgba(82, 196, 26, 0.15); + color: #389e0d; + border: 1rpx solid rgba(82, 196, 26, 0.5); +} + +.status-tag.source-unverified { + background: rgba(255, 122, 69, 0.15); + color: #ff7a45; + border: 1rpx solid rgba(255, 122, 69, 0.5); +} + +.status-tag.item-count { + background: rgba(82, 196, 26, 0.15); + color: #389e0d; + border: 1rpx solid rgba(82, 196, 26, 0.5); +} + +/* 商品库存行 */ +.product-stock-row { + display: flex; + align-items: center; +} + +/* 销量和地区 - 淘宝风格 */ +.product-meta { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 22rpx; + color: #999; + margin-top: 8rpx; +} + +.sales-count { + color: #999; + background: rgba(255, 77, 79, 0.08); + padding: 4rpx 10rpx; + border-radius: 6rpx; + font-size: 20rpx; + font-weight: 500; +} + +.product-price { + font-size: 26rpx; + font-weight: bold; + color: #ff6b81; +} diff --git a/pages/index/index.js b/pages/index/index.js index 36920aa..91d20cd 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -415,6 +415,23 @@ Page({ }); }, + // 跳转到对比价格页面 + navigateToComparePrice() { + wx.navigateTo({ + url: '/pages/compare_price/index', + success: function () { + console.log('成功跳转到对比价格页面'); + }, + fail: function (error) { + console.error('跳转到对比价格页面失败:', error); + wx.showToast({ + title: '跳转失败,请稍后重试', + icon: 'none' + }); + } + }); + }, + // 切换侧边栏显示 toggleSidebar() { if (this.data.isDragging) { diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 7315123..b0be7a5 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -202,6 +202,14 @@ 🛒 货源管理 + + 📜 + 合格证 + + + 👓 + 对比价格 + 🥚 我要卖蛋 @@ -214,10 +222,6 @@ 📄 我们 - - 📜 - 合格证 -