Default User 5 days ago
parent
commit
abbe924c7a
  1. BIN
      images/background.png
  2. 205
      pages/compare_price/index.js
  3. 24
      pages/compare_price/index.wxml
  4. 13
      pages/compare_price/index.wxss
  5. 246
      pages/goods-detail/goods-detail.js
  6. 177
      pages/goods-detail/goods-detail.wxml
  7. 480
      pages/goods-detail/goods-detail.wxss

BIN
images/background.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 672 KiB

205
pages/compare_price/index.js

@ -32,6 +32,33 @@ function processMediaUrls(urls) {
}); });
} }
// 处理规格信息,将多个净重信息分割成数组
function processSpecifications(spec) {
if (!spec || typeof spec !== 'string') {
return [];
}
// 分割规格字符串,支持多种分隔符
const specs = spec.split(/[,,、]/).map(s => s.trim()).filter(s => s);
return specs;
}
// 格式化价格,最多显示一位小数
function formatPrice(price) {
if (price === null || price === undefined) {
return price;
}
// 转换为数字
const numPrice = parseFloat(price);
if (isNaN(numPrice)) {
return price;
}
// 格式化到一位小数
return numPrice.toFixed(1);
}
Page({ Page({
data: { data: {
// 页面数据 // 页面数据
@ -100,6 +127,22 @@ Page({
if (Array.isArray(goodsData.price)) { if (Array.isArray(goodsData.price)) {
goodsData.price = goodsData.price[0]; goodsData.price = goodsData.price[0];
} }
// 格式化价格,最多显示一位小数
goodsData.price = formatPrice(goodsData.price);
}
// 处理原始价格
if (goodsData.originalPrice) {
// 如果原始价格是字符串且包含逗号,只取第一个价格
if (typeof goodsData.originalPrice === 'string' && goodsData.originalPrice.includes(',')) {
goodsData.originalPrice = goodsData.originalPrice.split(',')[0].trim();
}
// 如果原始价格是数组,只取第一个价格
if (Array.isArray(goodsData.originalPrice)) {
goodsData.originalPrice = goodsData.originalPrice[0];
}
// 格式化原始价格,最多显示一位小数
goodsData.originalPrice = formatPrice(goodsData.originalPrice);
} }
// 保存选择的种类、规格和当前商品数据到页面数据 // 保存选择的种类、规格和当前商品数据到页面数据
@ -294,6 +337,34 @@ Page({
if (Array.isArray(item.price)) { if (Array.isArray(item.price)) {
item.price = item.price[0]; item.price = item.price[0];
} }
// 格式化价格,最多显示一位小数
item.price = formatPrice(item.price);
}
// 处理原始价格
if (item.originalPrice) {
// 如果原始价格是字符串且包含逗号,只取第一个价格
if (typeof item.originalPrice === 'string' && item.originalPrice.includes(',')) {
item.originalPrice = item.originalPrice.split(',')[0].trim();
}
// 如果原始价格是数组,只取第一个价格
if (Array.isArray(item.originalPrice)) {
item.originalPrice = item.originalPrice[0];
}
// 格式化原始价格,最多显示一位小数
item.originalPrice = formatPrice(item.originalPrice);
}
// 处理规格信息,将多个净重信息分割成数组
item.processedSpecs = [];
if (item.specification) {
item.processedSpecs = processSpecifications(item.specification);
} else if (item.weightSpec) {
item.processedSpecs = processSpecifications(item.weightSpec);
} else if (item.grossWeight) {
item.processedSpecs = processSpecifications(item.grossWeight);
} else if (selectedSpec) {
item.processedSpecs = processSpecifications(selectedSpec);
} }
// 处理库存显示逻辑 // 处理库存显示逻辑
@ -456,63 +527,101 @@ Page({
); );
// 清理 mediaItems 中的 URL,去除反引号和空格 // 清理 mediaItems 中的 URL,去除反引号和空格
// 同时处理 imageUrls 字段,将其转换为 mediaItems 格式 // 同时处理 imageUrls 字段,将其转换为 mediaItems 格式
// 处理库存显示逻辑 // 处理库存显示逻辑
const cleanedGoods = filteredGoods.map(item => { const cleanedGoods = filteredGoods.map(item => {
// 首先清理 imageUrls 字段(如果存在) // 首先清理 imageUrls 字段(如果存在)
if (item.imageUrls && Array.isArray(item.imageUrls)) { if (item.imageUrls && Array.isArray(item.imageUrls)) {
item.imageUrls = item.imageUrls.map(url => { item.imageUrls = item.imageUrls.map(url => {
return url.trim().replace(/[`]/g, ''); return url.trim().replace(/[`]/g, '');
}); });
// 使用processMediaUrls函数处理媒体数据 // 使用processMediaUrls函数处理媒体数据
item.mediaItems = processMediaUrls(item.imageUrls); item.mediaItems = processMediaUrls(item.imageUrls);
// 确保图片优先显示:将图片类型的媒体项移到数组前面 // 确保图片优先显示:将图片类型的媒体项移到数组前面
if (item.mediaItems && item.mediaItems.length > 1) { if (item.mediaItems && item.mediaItems.length > 1) {
const imageItems = item.mediaItems.filter(media => media.type === 'image'); const imageItems = item.mediaItems.filter(media => media.type === 'image');
const videoItems = item.mediaItems.filter(media => media.type === 'video'); const videoItems = item.mediaItems.filter(media => media.type === 'video');
item.mediaItems = [...imageItems, ...videoItems]; item.mediaItems = [...imageItems, ...videoItems];
}
} }
}
// 清理 mediaItems 中的 URL // 清理 mediaItems 中的 URL
if (item.mediaItems && Array.isArray(item.mediaItems)) { if (item.mediaItems && Array.isArray(item.mediaItems)) {
item.mediaItems = item.mediaItems.map(media => { item.mediaItems = item.mediaItems.map(media => {
if (media.url) { if (media.url) {
// 去除 URL 中的反引号和空格 // 去除 URL 中的反引号和空格
media.url = media.url.trim().replace(/[`]/g, ''); media.url = media.url.trim().replace(/[`]/g, '');
// 确保媒体类型正确 // 确保媒体类型正确
if (!media.type) { if (!media.type) {
media.type = isVideoUrl(media.url) ? 'video' : 'image'; media.type = isVideoUrl(media.url) ? 'video' : 'image';
}
} }
return media;
});
}
// 清理价格字段,确保只显示单一价格
if (item.price) {
// 如果价格是字符串且包含逗号,只取第一个价格
if (typeof item.price === 'string' && item.price.includes(',')) {
item.price = item.price.split(',')[0].trim();
} }
return media; // 如果价格是数组,只取第一个价格
}); if (Array.isArray(item.price)) {
} item.price = item.price[0];
}
// 格式化价格,最多显示一位小数
item.price = formatPrice(item.price);
}
// 处理库存显示逻辑(参考首页的处理方式) // 处理原始价格
const quantity = item.quantity || item.minOrder || item.stock || item.inventory || item.availableStock || item.totalAvailable; if (item.originalPrice) {
const totalStock = quantity; // 如果原始价格是字符串且包含逗号,只取第一个价格
if (typeof item.originalPrice === 'string' && item.originalPrice.includes(',')) {
let displayStock; item.originalPrice = item.originalPrice.split(',')[0].trim();
if (totalStock >= 10000) { }
// 库存>=10000时显示"库存充足" // 如果原始价格是数组,只取第一个价格
displayStock = '充足'; if (Array.isArray(item.originalPrice)) {
} else if (totalStock === 0) { item.originalPrice = item.originalPrice[0];
// 库存=0时显示"暂无" }
displayStock = '暂无'; // 格式化原始价格,最多显示一位小数
} else { item.originalPrice = formatPrice(item.originalPrice);
// 其他情况显示具体数字 }
displayStock = totalStock;
} // 处理规格信息,将多个净重信息分割成数组
item.processedSpecs = [];
if (item.specification) {
item.processedSpecs = processSpecifications(item.specification);
} else if (item.weightSpec) {
item.processedSpecs = processSpecifications(item.weightSpec);
} else if (item.grossWeight) {
item.processedSpecs = processSpecifications(item.grossWeight);
}
// 更新商品的库存显示 // 处理库存显示逻辑(参考首页的处理方式)
item.totalStock = displayStock; const quantity = item.quantity || item.minOrder || item.stock || item.inventory || item.availableStock || item.totalAvailable;
item.originalTotalStock = totalStock; const totalStock = quantity;
let displayStock;
if (totalStock >= 10000) {
// 库存>=10000时显示"库存充足"
displayStock = '充足';
} else if (totalStock === 0) {
// 库存=0时显示"暂无"
displayStock = '暂无';
} else {
// 其他情况显示具体数字
displayStock = totalStock;
}
return item; // 更新商品的库存显示
}); item.totalStock = displayStock;
item.originalTotalStock = totalStock;
return item;
});
console.log('过滤后的商品列表:', cleanedGoods); console.log('过滤后的商品列表:', cleanedGoods);
// 检查商品数据结构 // 检查商品数据结构

24
pages/compare_price/index.wxml

@ -23,7 +23,7 @@
</view> </view>
<view wx:else> <view wx:else>
<view wx:if="{{(selectedOption || selectedCategory)}}" style="margin-top: 10rpx; width: 100%; box-sizing: border-box;"> <view wx:if="{{(selectedOption || selectedCategory)}}" style="margin-top: 10rpx; width: 100%; box-sizing: border-box; padding: 0 20rpx;">
<!-- 当前商品信息 --> <!-- 当前商品信息 -->
<view wx:if="{{currentGoods}}" style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx; width: 100%; box-sizing: border-box;"> <view wx:if="{{currentGoods}}" style="background-color: rgba(255, 255, 255, 0.8); border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx; width: 100%; box-sizing: border-box;">
<text style="font-size: 30rpx; font-weight: bold; color: #333; text-align: center; display: block; margin-bottom: 10rpx;">当前商品</text> <text style="font-size: 30rpx; font-weight: bold; color: #333; text-align: center; display: block; margin-bottom: 10rpx;">当前商品</text>
@ -40,13 +40,13 @@
</view> </view>
<!-- 商品信息 --> <!-- 商品信息 -->
<view style="display: flex; flex-direction: column; gap: 12rpx;"> <view style="display: flex; flex-direction: column; gap: 12rpx;">
<view style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;"> <view style="display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap;">
<view style="display: flex; align-items: center; gap: 15rpx; flex: 1;"> <view style="display: flex; align-items: center; gap: 15rpx; flex: 1; overflow: hidden;">
<text style="font-size: 36rpx; font-weight: bold; color: #333; word-break: break-word;">{{currentGoods.name}}</text> <text style="font-size: 36rpx; font-weight: bold; color: #333; word-break: break-word; flex-shrink: 0;">{{currentGoods.name}}</text>
<view style="display: flex; gap: 15rpx; flex-wrap: wrap;"> <view style="display: flex; gap: 15rpx; overflow-x: auto; padding-bottom: 4rpx;">
<view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666;">{{selectedSpec}}</view> <view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666; flex-shrink: 0;">{{selectedSpec}}</view>
<view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666;">{{currentGoods.yolk || '无'}}</view> <view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666; flex-shrink: 0;">{{currentGoods.yolk || '无'}}</view>
<view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666;">库存:{{currentGoods.totalStock || '充足'}}</view> <view style="background-color: #f0f0f0; padding: 8rpx 20rpx; border-radius: 24rpx; font-size: 36rpx; color: #666; flex-shrink: 0;">库存:{{currentGoods.totalStock || '充足'}}</view>
</view> </view>
</view> </view>
<view style="display: flex; flex-direction: column; align-items: flex-end; margin-left: 12rpx; flex-shrink: 0;"> <view style="display: flex; flex-direction: column; align-items: flex-end; margin-left: 12rpx; flex-shrink: 0;">
@ -131,9 +131,9 @@
{{item.sourceType || ''}} {{item.sourceType || ''}}
</view> </view>
<text class="product-title">{{item.name}}</text> <text class="product-title">{{item.name}}</text>
<view style="display: flex; flex-wrap: nowrap; gap: 8rpx; margin-top: 8rpx; overflow-x: auto; padding-bottom: 8rpx;"> <view style="display: flex; flex-wrap: wrap; gap: 8rpx; margin-top: 8rpx; padding-bottom: 8rpx;">
<view wx:if="{{item.category || selectedCategory}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.category || selectedCategory || '无'}}</view> <view wx:if="{{item.category || selectedCategory}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.category || selectedCategory || '无'}}</view>
<view wx:if="{{item.specification || item.weightSpec || item.grossWeight || selectedSpec}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.specification || item.weightSpec || item.grossWeight || selectedSpec || '无'}}</view> <view wx:for="{{item.processedSpecs}}" wx:key="index" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item}}</view>
<view wx:if="{{item.yolk}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.yolk}}</view> <view wx:if="{{item.yolk}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.yolk}}</view>
</view> </view>
</view> </view>
@ -213,9 +213,9 @@
{{item.sourceType || ''}} {{item.sourceType || ''}}
</view> </view>
<text class="product-title">{{item.name}}</text> <text class="product-title">{{item.name}}</text>
<view style="display: flex; flex-wrap: nowrap; gap: 8rpx; margin-top: 8rpx; overflow-x: auto; padding-bottom: 8rpx;"> <view style="display: flex; flex-wrap: wrap; gap: 8rpx; margin-top: 8rpx; padding-bottom: 8rpx;">
<view wx:if="{{item.category || selectedCategory}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.category || selectedCategory || '无'}}</view> <view wx:if="{{item.category || selectedCategory}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.category || selectedCategory || '无'}}</view>
<view wx:if="{{item.specification || item.weightSpec || item.grossWeight || selectedSpec}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.specification || item.weightSpec || item.grossWeight || selectedSpec || '无'}}</view> <view wx:for="{{item.processedSpecs}}" wx:key="index" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item}}</view>
<view wx:if="{{item.yolk}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.yolk}}</view> <view wx:if="{{item.yolk}}" style="background-color: #f0f0f0; padding: 4rpx 12rpx; border-radius: 16rpx; font-size: 24rpx; color: #666;">{{item.yolk}}</view>
</view> </view>
</view> </view>

13
pages/compare_price/index.wxss

@ -4,9 +4,9 @@
/* 瀑布流容器 */ /* 瀑布流容器 */
.waterfall-container { .waterfall-container {
display: flex; display: flex;
gap: 8rpx; gap: 16rpx;
width: 100%; width: 100%;
padding: 0; padding: 0 10rpx;
box-sizing: border-box; box-sizing: border-box;
} }
@ -16,6 +16,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16rpx; gap: 16rpx;
min-width: 0;
} }
/* 瀑布流商品项 */ /* 瀑布流商品项 */
@ -43,6 +44,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
box-sizing: border-box;
} }
.product-card:active { .product-card:active {
@ -122,6 +124,7 @@
justify-content: space-between; justify-content: space-between;
gap: 10rpx; gap: 10rpx;
box-sizing: border-box; box-sizing: border-box;
width: 100%;
} }
/* 第一行布局:货源类型 | 产品名称 | 货源描述 */ /* 第一行布局:货源类型 | 产品名称 | 货源描述 */
@ -136,8 +139,12 @@
font-size: 26rpx; font-size: 26rpx;
color: #000000; color: #000000;
font-weight: 700; font-weight: 700;
display: inline; display: inline-block;
margin-right: 8rpx; margin-right: 8rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
} }
/* 商品描述 */ /* 商品描述 */

246
pages/goods-detail/goods-detail.js

@ -338,6 +338,22 @@ function formatDateTime(dateString) {
return dateString; return dateString;
} }
// 格式化价格,解决浮点数精度问题
function formatPrice(price) {
if (price === null || price === undefined) {
return price;
}
// 转换为数字
const numPrice = parseFloat(price);
if (isNaN(numPrice)) {
return price;
}
// 格式化到一位小数
return parseFloat(numPrice.toFixed(1));
}
// 格式化北京时间的函数 // 格式化北京时间的函数
function formatBeijingTime(dateString) { function formatBeijingTime(dateString) {
if (!dateString) return '未知时间'; if (!dateString) return '未知时间';
@ -793,9 +809,9 @@ Page({
} }
const priceRange = middlePrice < 20 ? 1 : 5; const priceRange = middlePrice < 20 ? 1 : 5;
const minPrice = middlePrice - priceRange; const minPrice = formatPrice(middlePrice - priceRange);
const maxPrice = middlePrice + priceRange; const maxPrice = formatPrice(middlePrice + priceRange);
const defaultPrice = parseFloat(middlePrice.toFixed(2)); const defaultPrice = formatPrice(middlePrice);
const priceThreshold = middlePrice < 20 ? 0.1 : 2; const priceThreshold = middlePrice < 20 ? 0.1 : 2;
console.log('计算后的价格数据:', { console.log('计算后的价格数据:', {
@ -855,9 +871,9 @@ Page({
} }
const priceRange = middlePrice < 20 ? 1 : 5; const priceRange = middlePrice < 20 ? 1 : 5;
const minPrice = middlePrice - priceRange; const minPrice = formatPrice(middlePrice - priceRange);
const maxPrice = middlePrice + priceRange; const maxPrice = formatPrice(middlePrice + priceRange);
const currentPrice = parseFloat(middlePrice.toFixed(2)); const currentPrice = formatPrice(middlePrice);
const priceThreshold = middlePrice < 20 ? 0.3 : 2; const priceThreshold = middlePrice < 20 ? 0.3 : 2;
console.log('选择规格 - 价格数据:', { console.log('选择规格 - 价格数据:', {
@ -926,7 +942,7 @@ Page({
if (bargainPrice > minPrice) { if (bargainPrice > minPrice) {
const step = bargainPrice < 20 ? 0.1 : 1; const step = bargainPrice < 20 ? 0.1 : 1;
const newPrice = parseFloat((bargainPrice - step).toFixed(2)); const newPrice = formatPrice(bargainPrice - step);
console.log('计算新价格:', newPrice); console.log('计算新价格:', newPrice);
this.updatePrice(newPrice); this.updatePrice(newPrice);
} }
@ -943,7 +959,7 @@ Page({
if (bargainPrice < maxPrice) { if (bargainPrice < maxPrice) {
const step = bargainPrice < 20 ? 0.1 : 1; const step = bargainPrice < 20 ? 0.1 : 1;
const newPrice = parseFloat((bargainPrice + step).toFixed(2)); const newPrice = formatPrice(bargainPrice + step);
console.log('计算新价格:', newPrice); console.log('计算新价格:', newPrice);
this.updatePrice(newPrice); this.updatePrice(newPrice);
} }
@ -954,7 +970,7 @@ Page({
const { minPrice, maxPrice } = this.data; const { minPrice, maxPrice } = this.data;
const clampedPrice = Math.max(minPrice, Math.min(maxPrice, newPrice)); const clampedPrice = Math.max(minPrice, Math.min(maxPrice, newPrice));
const progress = ((clampedPrice - minPrice) / (maxPrice - minPrice)) * 100; const progress = ((clampedPrice - minPrice) / (maxPrice - minPrice)) * 100;
const finalPrice = parseFloat(clampedPrice.toFixed(2)); const finalPrice = formatPrice(clampedPrice);
console.log('更新价格:', { console.log('更新价格:', {
inputPrice: newPrice, inputPrice: newPrice,
@ -1018,8 +1034,10 @@ Page({
if (!isNaN(price)) { if (!isNaN(price)) {
const clampedPrice = Math.max(minPrice, Math.min(maxPrice, price)); const clampedPrice = Math.max(minPrice, Math.min(maxPrice, price));
const formattedPrice = formatPrice(clampedPrice);
console.log('计算后的价格:', clampedPrice); console.log('计算后的价格:', clampedPrice);
this.updatePrice(clampedPrice); console.log('格式化后的价格:', formattedPrice);
this.updatePrice(formattedPrice);
} }
this.setData({ this.setData({
@ -1056,11 +1074,7 @@ Page({
const priceRange = maxPrice - minPrice; const priceRange = maxPrice - minPrice;
let price = minPrice + (progress / 100) * priceRange; let price = minPrice + (progress / 100) * priceRange;
if (bargainPrice < 20) { price = formatPrice(price);
price = Math.round(price * 10) / 10;
} else {
price = Math.round(price);
}
const clampedPrice = Math.max(minPrice, Math.min(maxPrice, price)); const clampedPrice = Math.max(minPrice, Math.min(maxPrice, price));
@ -1365,6 +1379,15 @@ Page({
initialTouch: null, // 初始触摸点 initialTouch: null, // 初始触摸点
// 对比价格相关状态 // 对比价格相关状态
showCompareModal: false, // 是否显示对比价格弹窗 showCompareModal: false, // 是否显示对比价格弹窗
compareStep: 1, // 当前步骤(1:选择品种,2:选择规格)
categoryOptions: ['全部', '绿壳', '粉壳', '褐壳'], // 品种选项
categoryIcons: ['🥚', '🥚', '🥚', '🥚'], // 品种图标
categoryDescriptions: ['(所有品种)', '(绿壳鸡蛋)', '(粉壳鸡蛋)', '(褐壳鸡蛋)'], // 品种描述
selectedCategoryIndex: 0, // 选中的品种索引
selectedCategory: '', // 选中的品种
selectedSpecIndex: 0, // 选中的规格索引
selectedSpec: null, // 选中的规格
currentSpecifications: [], // 当前商品的规格列表
activeTab: 'home', // 当前激活的选项卡,'home'表示首页数据,'favorite'表示收藏数据 activeTab: 'home', // 当前激活的选项卡,'home'表示首页数据,'favorite'表示收藏数据
homeGoods: [], // 首页商品数据 homeGoods: [], // 首页商品数据
favoriteGoods: [], // 收藏商品数据 favoriteGoods: [], // 收藏商品数据
@ -3745,7 +3768,7 @@ Page({
// 对比价格功能:处理按钮点击事件 // 对比价格功能:处理按钮点击事件
onCompareClick: function () { onCompareClick: function () {
console.log('用户点击了对比价格按钮,准备跳转到对比价格页面'); console.log('用户点击了对比价格按钮,准备显示对比价格弹窗');
// 检查用户登录状态 // 检查用户登录状态
const openid = wx.getStorageSync('openid'); const openid = wx.getStorageSync('openid');
@ -3785,110 +3808,135 @@ Page({
// 即使失败也不影响主流程 // 即使失败也不影响主流程
}); });
// 检查用户身份证认证状态
let idcardstatus = '';
const users = wx.getStorageSync('users') || {};
const userInfo = wx.getStorageSync('userInfo') || {};
if (userId && users[userId] && users[userId].idcardstatus) {
idcardstatus = users[userId].idcardstatus;
} else if (userInfo.idcardstatus) {
idcardstatus = userInfo.idcardstatus;
}
console.log('用户身份证认证状态:', idcardstatus);
// 获取当前商品的信息 // 获取当前商品的信息
const currentGoods = this.data.goodsDetail; const currentGoods = this.data.goodsDetail;
const currentCategory = currentGoods.category || ''; const currentCategory = currentGoods.category || '';
const currentSpecifications = currentGoods.weightQuantityData || []; const currentSpecifications = currentGoods.weightQuantityData || [];
// 定义种类选项
const categoryOptions = ['全部', '绿壳', '粉壳', '褐壳', '土鸡蛋'];
// 找到当前商品种类在选项中的索引,默认为0(全部) // 找到当前商品种类在选项中的索引,默认为0(全部)
let defaultCategoryIndex = 0; let defaultCategoryIndex = 0;
if (currentCategory) { if (currentCategory) {
const index = categoryOptions.indexOf(currentCategory); const index = this.data.categoryOptions.indexOf(currentCategory);
if (index !== -1) { if (index !== -1) {
defaultCategoryIndex = index; defaultCategoryIndex = index;
} }
} }
// 显示种类选择对话框 // 初始化弹窗状态
wx.showActionSheet({ this.setData({
itemList: categoryOptions, showCompareModal: true,
success: (categoryRes) => { compareStep: 1,
const selectedCategoryIndex = categoryRes.tapIndex; selectedCategoryIndex: defaultCategoryIndex,
const selectedCategory = categoryOptions[selectedCategoryIndex]; selectedCategory: this.data.categoryOptions[defaultCategoryIndex],
selectedSpecIndex: 0,
selectedSpec: currentSpecifications.length > 0 ? currentSpecifications[0] : null,
currentSpecifications: currentSpecifications
});
},
// 构建规格选择列表 // 选择品种
const specList = currentSpecifications.map((spec, index) => { selectCategory: function (e) {
return spec.display || spec.weightSpec || `规格${index + 1}`; const index = e.currentTarget.dataset.index;
this.setData({
selectedCategoryIndex: index,
selectedCategory: this.data.categoryOptions[index]
});
},
// 选择规格
selectSpec: function (e) {
const index = e.currentTarget.dataset.index;
this.setData({
selectedSpecIndex: index,
selectedSpec: this.data.currentSpecifications[index]
});
},
// 进入下一步
nextStep: function () {
if (!this.data.selectedCategory) {
wx.showToast({
title: '请选择品种',
icon: 'none'
});
return;
}
this.setData({
compareStep: 2
});
},
// 返回上一步
prevStep: function () {
this.setData({
compareStep: 1
});
},
// 确认对比
confirmCompare: function () {
if (!this.data.selectedSpec) {
wx.showToast({
title: '请选择规格',
icon: 'none'
});
return;
}
const currentGoods = this.data.goodsDetail;
const selectedCategory = this.data.selectedCategory;
const selectedSpec = this.data.selectedSpec;
// 显示提示信息
wx.showToast({
title: `已选择${selectedCategory} ${selectedSpec.display}`,
icon: 'info',
duration: 1500,
success: () => {
setTimeout(() => {
// 关闭弹窗
this.setData({
showCompareModal: false
}); });
// 显示规格选择对话框 // 构建要传递的数据
wx.showActionSheet({ const goodsData = {
itemList: specList, id: currentGoods.id || currentGoods.productId,
success: (specRes) => { name: currentGoods.name || '',
const selectedSpecIndex = specRes.tapIndex; price: currentGoods.price || '',
const selectedSpec = currentSpecifications[selectedSpecIndex]; imageUrls: currentGoods.imageUrls || [],
region: currentGoods.region || '',
weightQuantityData: currentGoods.weightQuantityData || [],
category: selectedCategory,
yolk: currentGoods.yolk || '',
sourceType: currentGoods.sourceType || '',
supplyStatus: currentGoods.supplyStatus || '',
mediaItems: currentGoods.mediaItems || [],
frequency: currentGoods.frequency || 0,
status: currentGoods.status || 'published',
totalStock: currentGoods.totalStock || '充足',
selectedSpec: selectedSpec
};
// 显示提示信息 console.log('准备跳转到对比价格页面,传递的数据:', goodsData);
wx.showToast({
title: `已选择${selectedCategory} ${selectedSpec.display}`,
icon: 'info',
duration: 1500,
success: () => {
setTimeout(() => {
// 构建要传递的数据
const goodsData = {
id: currentGoods.id || currentGoods.productId,
name: currentGoods.name || '',
price: currentGoods.price || '',
imageUrls: currentGoods.imageUrls || [],
region: currentGoods.region || '',
weightQuantityData: currentGoods.weightQuantityData || [],
category: selectedCategory,
yolk: currentGoods.yolk || '',
sourceType: currentGoods.sourceType || '',
supplyStatus: currentGoods.supplyStatus || '',
mediaItems: currentGoods.mediaItems || [],
frequency: currentGoods.frequency || 0,
status: currentGoods.status || 'published',
totalStock: currentGoods.totalStock || '充足',
selectedSpec: selectedSpec
};
console.log('准备跳转到对比价格页面,传递的数据:', goodsData); // 跳转到对比价格页面
wx.navigateTo({
// 跳转到对比价格页面 url: `/pages/compare_price/index?goodsData=${encodeURIComponent(JSON.stringify(goodsData))}`,
wx.navigateTo({ success: function () {
url: `/pages/compare_price/index?goodsData=${encodeURIComponent(JSON.stringify(goodsData))}`, console.log('成功跳转到对比价格页面');
success: function () {
console.log('成功跳转到对比价格页面');
},
fail: function (error) {
console.error('跳转到对比价格页面失败:', error);
wx.showToast({
title: '跳转失败,请稍后重试',
icon: 'none'
});
}
});
}, 1500);
}
});
}, },
fail: (res) => { fail: function (error) {
console.log('选择规格失败:', res); console.error('跳转到对比价格页面失败:', error);
wx.showToast({
title: '跳转失败,请稍后重试',
icon: 'none'
});
} }
}); });
}, }, 1500);
fail: (res) => { }
console.log('选择种类失败:', res); });
}
});
}, },
// 关闭对比价格弹窗 // 关闭对比价格弹窗

177
pages/goods-detail/goods-detail.wxml

@ -73,7 +73,7 @@
<!-- 商品基本信息 --> <!-- 商品基本信息 -->
<view class="goods-info"> <view class="goods-info">
<view style="display: flex; flex-direction: column; margin-bottom: 10rpx;"> <view style="display: flex; flex-direction: column; margin-bottom: 10rpx;">
<view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8rpx;"> <view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0rpx;">
<view style="display: flex; align-items: center; flex: 1;"> <view style="display: flex; align-items: center; flex: 1;">
<view wx:if="{{goodsDetail.status === 'sold_out'}}" style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: linear-gradient(135deg, #8c8c8c 0%, #a6a6a6 100%); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -20rpx;">售空</view> <view wx:if="{{goodsDetail.status === 'sold_out'}}" style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: linear-gradient(135deg, #8c8c8c 0%, #a6a6a6 100%); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -20rpx;">售空</view>
<view wx:elif="{{goodsDetail.supplyStatus}}" style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: rgba(218, 165, 32, 0.8); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -20rpx;">{{goodsDetail.supplyStatus}}</view> <view wx:elif="{{goodsDetail.supplyStatus}}" style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: rgba(218, 165, 32, 0.8); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -20rpx;">{{goodsDetail.supplyStatus}}</view>
@ -86,7 +86,7 @@
</view> </view>
</view> </view>
</view> </view>
<view class="source-description" style="padding: 8rpx 16rpx; background: #f5f5f5; border-radius: 8rpx; font-size: 28rpx; color: #333; margin-top: 4rpx;"> <view class="source-description" style="background: #f5f5f5; font-size: 28rpx; color: #333; height: 43rpx; display: block; box-sizing: border-box">
{{goodsDetail.description || '暂无描述'}} {{goodsDetail.description || '暂无描述'}}
</view> </view>
</view> </view>
@ -307,137 +307,76 @@
<!-- 底部弹出层 - 对比价格 --> <!-- 底部弹出层 - 对比价格 -->
<view wx:if="{{showCompareModal}}" class="compare-modal-overlay" bindtap="closeCompareModal"> <view wx:if="{{showCompareModal}}" class="compare-modal-overlay" bindtap="closeCompareModal">
<view class="compare-modal-container" catchtap="stopPropagation"> <view class="compare-modal-container" catchtap="stopPropagation">
<!-- 步骤指示器 -->
<view class="compare-step-container">
<view class="compare-step-wrapper">
<view class="compare-step {{compareStep === 1 ? 'active' : ''}}">
<view class="compare-step-circle">{{compareStep === 1 ? '✓' : '1'}}</view>
<view class="compare-step-line {{compareStep >= 2 ? 'active' : ''}}"></view>
</view>
<view class="compare-step {{compareStep === 2 ? 'active' : ''}}">
<view class="compare-step-circle">{{compareStep === 2 ? '✓' : '2'}}</view>
</view>
</view>
</view>
<!-- 标题和引导文字 -->
<view class="compare-modal-header"> <view class="compare-modal-header">
<text class="compare-modal-title">对比价格</text> <text class="compare-modal-subtitle">{{compareStep === 1 ? '请选择您想对比的鸡蛋品种' : '请选择您想对比的鸡蛋规格'}}</text>
<text class="compare-modal-close" bindtap="closeCompareModal">×</text>
</view> </view>
<!-- 选项卡 --> <!-- 已选品种提示区 -->
<view class="compare-tabs"> <view wx:if="{{compareStep === 2 && selectedCategory}}" class="compare-selected-category">
<view <text class="compare-selected-icon">✓</text>
class="compare-tab {{activeTab === 'home' ? 'active' : ''}}" <text class="compare-selected-text">已选品种:{{selectedCategory}}</text>
bindtap="switchTab"
data-tab="home"
>
相同规格的同种类型
</view>
<view
class="compare-tab {{activeTab === 'favorite' ? 'active' : ''}}"
bindtap="switchTab"
data-tab="favorite"
>
已收藏数据
</view>
</view> </view>
<!-- 商品列表 --> <!-- 内容区域 -->
<view class="compare-goods-list"> <view class="compare-content">
<block wx:if="{{activeTab === 'home' && homeGoods.length > 0}}"> <!-- 品种选择列表 -->
<view wx:for="{{homeGoods}}" wx:key="id" class="compare-goods-item" bindtap="viewCompareGoodsDetail" data-item="{{item}}"> <block wx:if="{{compareStep === 1}}">
<view class="product-image-wrapper"> <view wx:for="{{categoryOptions}}" wx:key="index" class="compare-option {{selectedCategoryIndex === index ? 'selected' : ''}}" bindtap="selectCategory" data-index="{{index}}">
<!-- 视频处理:根据mediaItems中的类型字段判断 --> <view class="compare-option-icon">{{categoryIcons[index]}}</view>
<video <view class="compare-option-info">
wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}" <text class="compare-option-name">{{item}}</text>
class="product-media" <text class="compare-option-desc">{{categoryDescriptions[index]}}</text>
src="{{item.mediaItems[0].url}}"
mode="aspectFit"
show-center-play-btn="{{true}}"
show-play-btn="{{false}}"
controls="{{true}}"
autoplay="{{true}}"
loop="{{true}}"
muted="{{true}}"
object-fit="contain"
poster=""
></video>
<!-- 图片处理 -->
<image
wx:else
class="product-media"
src="{{item.mediaItems && item.mediaItems.length > 0 ? item.mediaItems[0].url : (item.imageUrls[0] || '')}}"
mode="aspectFill"
lazy-load="true"
></image>
<!-- 已售空标签 -->
<view wx:if="{{item.isSoldOutLabel}}" class="sold-out-label">已售空</view>
</view> </view>
<view class="compare-goods-info"> <view class="compare-option-radio {{selectedCategoryIndex === index ? 'selected' : ''}}">
<text class="compare-goods-name">{{item.name}}</text> <view wx:if="{{selectedCategoryIndex === index}}" class="compare-option-radio-inner"></view>
<view class="compare-goods-spec-quantity">
<block wx:if="{{item.weightQuantityData && item.weightQuantityData.length > 0}}">
<view wx:for="{{item.weightQuantityData}}" wx:for-item="specItem" wx:key="index">
{{specItem.display}}
<text wx:if="{{specItem.isOffShelf}}" style="color: red; margin-left: 20rpx;">已下架</text>
</view>
</block>
<block wx:else>
{{item.specification || item.spec || item.specs || '暂无规格'}}|{{item.quantity || '暂无件数'}}件
</block>
</view>
<text class="compare-goods-region-time">
{{item.province || item.region || '暂无地区'}}{{item.formattedDate ? ' | 售出时间:' + item.formattedDate : ''}}
</text>
</view> </view>
<!-- 右侧售空文字 -->
<view wx:if="{{item.status === 'sold_out'}}" class="sold-out-text">售空</view>
</view> </view>
</block> </block>
<block wx:elif="{{activeTab === 'home' && homeGoods.length === 0}}">
<view class="compare-empty">暂无首页数据</view>
</block>
<block wx:if="{{activeTab === 'favorite' && favoriteGoods.length > 0}}"> <!-- 规格选择列表 -->
<view wx:for="{{favoriteGoods}}" wx:key="id" class="compare-goods-item" bindtap="viewCompareGoodsDetail" data-item="{{item}}"> <block wx:elif="{{compareStep === 2}}">
<view class="product-image-wrapper"> <view wx:for="{{currentSpecifications}}" wx:key="index" class="compare-option {{selectedSpecIndex === index ? 'selected' : ''}}" bindtap="selectSpec" data-index="{{index}}">
<!-- 视频处理:根据mediaItems中的类型字段判断 --> <view class="compare-option-info spec-info">
<video <text class="compare-option-name">{{item.display || item.weightSpec}}</text>
wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}"
class="product-media"
src="{{item.mediaItems[0].url}}"
mode="aspectFit"
show-center-play-btn="{{true}}"
show-play-btn="{{false}}"
controls="{{true}}"
autoplay="{{true}}"
loop="{{true}}"
muted="{{true}}"
object-fit="contain"
poster=""
></video>
<!-- 图片处理 -->
<image
wx:else
class="product-media"
src="{{item.mediaItems && item.mediaItems.length > 0 ? item.mediaItems[0].url : (item.imageUrls[0] || '')}}"
mode="aspectFill"
lazy-load="true"
></image>
<!-- 已售空标签 -->
<view wx:if="{{item.isSoldOutLabel}}" class="sold-out-label">已售空</view>
</view> </view>
<view class="compare-goods-info"> <view class="compare-option-radio {{selectedSpecIndex === index ? 'selected' : ''}}">
<text class="compare-goods-name">{{item.name}}</text> <view wx:if="{{selectedSpecIndex === index}}" class="compare-option-radio-inner"></view>
<view class="compare-goods-spec-quantity">
<block wx:if="{{item.weightQuantityData && item.weightQuantityData.length > 0}}">
<view wx:for="{{item.weightQuantityData}}" wx:for-item="specItem" wx:key="index">
{{specItem.display}}
<text wx:if="{{specItem.isOffShelf}}" style="color: red; margin-left: 20rpx;">已下架</text>
</view>
</block>
<block wx:else>
{{item.specification || item.spec || item.specs || '暂无规格'}}|{{item.quantity || '暂无件数'}}件
</block>
</view>
<text class="compare-goods-region-time">
{{item.province || item.region || '暂无地区'}}{{item.formattedDate ? ' | 售出时间:' + item.formattedDate : ''}}
</text>
</view> </view>
<!-- 右侧售空文字 -->
<view wx:if="{{item.status === 'sold_out'}}" class="sold-out-text">售空</view>
</view> </view>
</block> </block>
<block wx:elif="{{activeTab === 'favorite' && favoriteGoods.length === 0}}"> </view>
<view class="compare-empty">暂无收藏商品</view>
<!-- 底部按钮区域 -->
<view class="compare-modal-footer">
<block wx:if="{{compareStep === 1}}">
<button class="compare-next-button" bindtap="nextStep">
下一步
</button>
</block>
<block wx:elif="{{compareStep === 2}}">
<view class="compare-footer-buttons">
<button class="compare-back-button" bindtap="prevStep">
上一步
</button>
<button class="compare-confirm-button" bindtap="confirmCompare">
确认
</button>
</view>
</block> </block>
</view> </view>
</view> </view>

480
pages/goods-detail/goods-detail.wxss

@ -250,7 +250,7 @@ video.slider-media .wx-video-volume-icon {
/* 商品详细信息网格 */ /* 商品详细信息网格 */
.info-grid { .info-grid {
background-color: #ffffff; background-color: #ffffff;
margin: 8px 0; margin: 8rpx 16rpx;
padding: 12px; padding: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
} }
@ -313,9 +313,9 @@ video.slider-media .wx-video-volume-icon {
/* 联系信息 */ /* 联系信息 */
.contact-info { .contact-info {
margin: 8px 16px; /* 减小外边距 */ margin: 8rpx 16rpx;
padding: 12px; /* 减小内边距 */ padding: 12px;
border-radius: 10px; /* 减小圆角 */ border-radius: 10px;
background: #ffffff; background: #ffffff;
border: 1px solid #d6e4ff; border: 1px solid #d6e4ff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
@ -724,8 +724,8 @@ video.slider-media .wx-video-volume-icon {
/* 净重件数对应信息样式 */ /* 净重件数对应信息样式 */
.weight-quantity-info { .weight-quantity-info {
background-color: #ffffff; background-color: #ffffff;
margin: 16rpx; margin: 8rpx 16rpx;
padding: 24rpx; padding: 16rpx;
border-radius: 12rpx; border-radius: 12rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid #f0f0f0; border: 1rpx solid #f0f0f0;
@ -834,21 +834,20 @@ video.slider-media .wx-video-volume-icon {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-end; align-items: center;
z-index: 9999; z-index: 9999;
animation: fadeIn 0.3s ease-out; animation: fadeIn 0.3s ease-out;
} }
.compare-modal-container { .compare-modal-container {
width: 100%; width: 380px;
background-color: #fff; background-color: #fff;
border-top-left-radius: 32rpx; border-radius: 20px;
border-top-right-radius: 32rpx; box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
padding-bottom: 20rpx;
max-height: 70vh;
animation: slideUp 0.3s ease-out; animation: slideUp 0.3s ease-out;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 600px;
} }
@keyframes fadeIn { @keyframes fadeIn {
@ -869,9 +868,280 @@ video.slider-media .wx-video-volume-icon {
} }
} }
/* 步骤指示器 */
.compare-step-container {
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.compare-step-wrapper {
width: 240px;
display: flex;
align-items: center;
justify-content: space-between;
}
.compare-step {
display: flex;
align-items: center;
position: relative;
width: 50%;
}
.compare-step:first-child {
justify-content: flex-start;
}
.compare-step:last-child {
justify-content: flex-end;
}
.compare-step-circle {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 500;
background-color: #E5E7EB;
color: #9CA3AF;
z-index: 1;
position: relative;
}
.compare-step.active .compare-step-circle {
background-color: #165DFF;
color: #FFFFFF;
}
.compare-step-line {
position: absolute;
top: 50%;
left: 50%;
right: -50%;
height: 2px;
background-color: #E5E7EB;
transform: translateY(-50%);
z-index: 0;
}
.compare-step-line.active {
background-color: #165DFF;
}
/* 标题和引导文字 */
.compare-modal-header {
padding: 0 24px 20px;
text-align: center;
}
.compare-modal-title {
font-size: 20px;
font-weight: 600;
color: #1A1A1A;
line-height: 28px;
margin-bottom: 4px;
}
.compare-modal-subtitle {
font-size: 18px;
font-weight: 600;
color: #666666;
line-height: 28px;
}
/* 已选品种提示区 */
.compare-selected-category {
width: 332px;
height: 48px;
background-color: #F0F7FF;
border-radius: 12px;
margin: 0 24px 16px;
padding: 12px 16px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.compare-selected-icon {
font-size: 20px;
color: #165DFF;
margin-right: 8px;
}
.compare-selected-text {
font-size: 14px;
font-weight: 500;
color: #165DFF;
line-height: 20px;
}
/* 内容区域 */
.compare-content {
flex: 1;
padding: 0 24px 24px;
overflow: hidden;
}
/* 选项样式 */
.compare-option {
height: 80px;
background-color: #FFFFFF;
border: 2px solid #E5E7EB;
border-radius: 12px;
margin-bottom: 12px;
display: flex;
align-items: center;
padding: 0 16px;
/* 移除过渡动画以提高iOS性能 */
}
.compare-option.selected {
border-color: #165DFF;
background-color: #F0F7FF;
}
.compare-option-icon {
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #F0F7FF;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-right: 12px;
}
.compare-option-info {
flex: 1;
}
.compare-option-info.spec-info {
margin-left: 0;
}
.compare-option-name {
font-size: 18px;
font-weight: 500;
color: #666666;
line-height: 24px;
margin-bottom: 4px;
}
.compare-option.selected .compare-option-name {
font-weight: 500;
color: #1A1A1A;
}
.compare-option-desc {
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
.compare-option-radio {
width: 20px;
height: 20px;
border: 2px solid #D1D5DB;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
/* 移除过渡动画以提高iOS性能 */
}
.compare-option-radio.selected {
border-color: #165DFF;
}
.compare-option-radio-inner {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #165DFF;
}
/* 底部按钮区域 */
.compare-modal-footer {
padding: 0 24px 24px;
}
.compare-next-button {
width: 332px;
height: 44px;
background-color: #165DFF;
color: #FFFFFF;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
line-height: 22px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin: 0;
}
.compare-footer-buttons {
display: flex;
gap: 12px;
width: 332px;
}
.compare-back-button {
flex: 1;
height: 44px;
background-color: #FFFFFF;
color: #4B5563;
border: 1px solid #D1D5DB;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
line-height: 22px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin: 0;
}
.compare-back-button:active {
background-color: #F9FAFB;
transform: scale(0.98);
}
.compare-confirm-button {
flex: 1;
height: 44px;
background-color: #165DFF;
color: #FFFFFF;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
line-height: 22px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin: 0;
}
.compare-confirm-button:active {
background-color: #0E47D9;
transform: scale(0.98);
}
/* 内部信息样式 */ /* 内部信息样式 */
.internal-info { .internal-info {
margin: 8px 16px; margin: 8rpx 16rpx;
padding: 16px; padding: 16px;
border-radius: 10px; border-radius: 10px;
background: #f0f5ff; background: #f0f5ff;
@ -996,188 +1266,6 @@ video.slider-media .wx-video-volume-icon {
font-weight: 500; font-weight: 500;
} }
.compare-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 32rpx;
border-bottom: 1rpx solid #f0f0f0;
position: relative;
}
.compare-modal-title {
font-size: 36rpx;
font-weight: bold;
color: #222;
text-align: center;
flex: 1;
}
.compare-modal-close {
font-size: 48rpx;
color: #999;
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.compare-modal-close:active {
background-color: #f0f0f0;
transform: scale(0.9);
}
.compare-tabs {
display: flex;
background-color: #f8f9fa;
padding: 12rpx;
border-radius: 0;
}
.compare-tab {
flex: 1;
text-align: center;
padding: 16rpx 0;
font-size: 32rpx;
color: #666;
border-radius: 12rpx;
transition: all 0.3s ease;
font-weight: 500;
}
.compare-tab.active {
background-color: #fff;
color: #4a90e2;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
font-weight: bold;
}
.compare-goods-list {
flex: 1;
overflow-y: auto;
padding: 12rpx;
}
.compare-goods-item {
display: flex;
align-items: center;
background-color: #fff;
border-radius: 12rpx;
padding: 12rpx;
margin-bottom: 12rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1rpx solid #f0f0f0;
}
.compare-goods-item:active {
transform: translateY(2rpx);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
}
.compare-goods-image {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
margin-right: 12rpx;
object-fit: cover;
background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%);
}
/* 视频和图片容器样式 */
.product-image-wrapper {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
margin-right: 12rpx;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%);
}
/* 视频和图片样式 */
.product-media {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
.compare-goods-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.compare-goods-name {
font-size: 32rpx;
color: #222;
font-weight: 600;
line-height: 1.3;
margin-bottom: 4rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.compare-goods-spec {
font-size: 28rpx;
color: #666;
margin-bottom: 4rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.compare-goods-quantity {
font-size: 28rpx;
color: #666;
margin-bottom: 4rpx;
}
.compare-goods-price {
font-size: 36rpx;
color: #ff4d4f;
font-weight: bold;
margin-bottom: 4rpx;
}
.compare-goods-region {
font-size: 26rpx;
color: #999;
}
.compare-goods-spec-quantity {
font-size: 28rpx;
color: #666;
line-height: 1.1;
margin: 2rpx 0;
}
.compare-goods-region-time {
font-size: 26rpx;
color: #999;
line-height: 1.1;
margin-top: 2rpx;
}
.compare-empty {
text-align: center;
padding: 80rpx 0;
color: #999;
font-size: 32rpx;
}
/* 修复样式冲突 */ /* 修复样式冲突 */
.goods-detail-page { .goods-detail-page {
position: relative; position: relative;
@ -2175,7 +2263,7 @@ video.slider-media .wx-video-volume-icon {
/* 内部信息样式 */ /* 内部信息样式 */
.internal-info { .internal-info {
margin: 8px 16px; margin: 8rpx 16rpx;
padding: 16px; padding: 16px;
border-radius: 10px; border-radius: 10px;
background: #f0f5ff; background: #f0f5ff;

Loading…
Cancel
Save