徐飞洋
1 month ago
18 changed files with 3689 additions and 11 deletions
@ -0,0 +1,468 @@ |
|||
Page({ |
|||
data: { |
|||
productName: '', |
|||
specifications: [], |
|||
loading: false, |
|||
error: '' |
|||
}, |
|||
onLoad(options) { |
|||
let productName = ''; |
|||
// 首先检查URL参数
|
|||
if (options.productName) { |
|||
productName = options.productName; |
|||
} else { |
|||
// 然后检查本地存储（用于wx.switchTab导航）
|
|||
productName = wx.getStorageSync('selectedProductName') || ''; |
|||
// 清除本地存储中的商品名称，避免影响下次进入
|
|||
if (productName) { |
|||
wx.removeStorageSync('selectedProductName'); |
|||
} |
|||
} |
|||
|
|||
if (productName) { |
|||
this.setData({ productName: productName }); |
|||
this.loadSpecifications(productName); |
|||
} else { |
|||
// 如果没有商品名称参数，跳转到商品列表页面
|
|||
wx.redirectTo({ |
|||
url: '/pages/evaluate2/product-list' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
loadSpecifications(productName) { |
|||
this.setData({ |
|||
loading: true, |
|||
specifications: [], |
|||
error: '' // 清空错误信息，确保加载时只显示加载状态
|
|||
}); |
|||
|
|||
// 尝试从本地存储获取商品规格映射数据
|
|||
const productSpecsMap = wx.getStorageSync('evaluate2ProductSpecsMap') || {}; |
|||
|
|||
if (productSpecsMap && productSpecsMap[productName]) { |
|||
console.log('从本地存储获取商品规格数据'); |
|||
|
|||
// 提取该商品的规格和价格信息
|
|||
const productSpecs = productSpecsMap[productName]; |
|||
|
|||
// 处理规格数据
|
|||
const specPriceMap = {}; |
|||
productSpecs.forEach(item => { |
|||
const specStr = item.specification; |
|||
const price = item.price; |
|||
|
|||
// 价格为空的不参与计算
|
|||
if (!price || price.trim() === '') { |
|||
return; |
|||
} |
|||
|
|||
if (specStr.length > 0) { |
|||
// 处理逗号分隔的多个规格
|
|||
let specs = specStr.split(',').map(spec => spec.trim()).filter(spec => spec.length > 0); |
|||
|
|||
// 进一步处理规格，确保每个规格都是独立的
|
|||
const processedSpecs = []; |
|||
specs.forEach(spec => { |
|||
if (spec.includes('，')) { |
|||
const subSpecs = spec.split('，').map(s => s.trim()).filter(s => s.length > 0); |
|||
processedSpecs.push(...subSpecs); |
|||
} else { |
|||
processedSpecs.push(spec); |
|||
} |
|||
}); |
|||
|
|||
specs = processedSpecs; |
|||
|
|||
// 处理逗号分隔的多个价格
|
|||
const prices = price.split(',').map(p => p.trim()).filter(p => p && p.trim() !== ''); |
|||
|
|||
// 价格为空的不参与计算
|
|||
if (prices.length === 0) { |
|||
return; |
|||
} |
|||
|
|||
// 将规格和价格配对
|
|||
specs.forEach((spec, index) => { |
|||
if (spec.length > 0) { |
|||
// 确保价格索引不超出范围
|
|||
const priceIndex = index % prices.length; |
|||
const matchedPrice = prices[priceIndex] || ''; |
|||
|
|||
// 只有当价格不为空时才添加该规格
|
|||
if (matchedPrice && matchedPrice.trim() !== '') { |
|||
// 收集相同规格的所有价格，以便计算平均值
|
|||
if (!specPriceMap[spec]) { |
|||
specPriceMap[spec] = []; |
|||
} |
|||
specPriceMap[spec].push(matchedPrice); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
// 转换为规格对象数组
|
|||
const specifications = Object.keys(specPriceMap).map(spec => { |
|||
const prices = specPriceMap[spec]; |
|||
|
|||
// 解析规格
|
|||
const specInfo = this.parseSpecification(spec); |
|||
|
|||
// 处理每个价格
|
|||
const processedPrices = prices.map(price => { |
|||
if (!price || price.trim() === '' || isNaN(parseFloat(price))) { |
|||
return 0; |
|||
} |
|||
|
|||
const priceValue = parseFloat(price); |
|||
|
|||
// 价格<10的需要按照公式计算
|
|||
if (priceValue < 10 && specInfo) { |
|||
if (specInfo.type === '净重') { |
|||
// 净重：规格平均值 × 价格
|
|||
return specInfo.avg * priceValue; |
|||
} else if (specInfo.type === '毛重') { |
|||
// 毛重：(规格平均值 - 5) × 价格
|
|||
return (specInfo.avg - 5) * priceValue; |
|||
} |
|||
} |
|||
// 价格>=10的直接使用
|
|||
return priceValue; |
|||
}).filter(price => price > 0); // 过滤掉0值
|
|||
|
|||
// 计算处理后价格的平均值
|
|||
let finalPrice = 0; |
|||
let finalPriceText = ''; |
|||
|
|||
if (processedPrices.length > 0) { |
|||
const sum = processedPrices.reduce((acc, price) => acc + price, 0); |
|||
finalPrice = sum / processedPrices.length; |
|||
finalPriceText = finalPrice.toFixed(2); |
|||
} |
|||
|
|||
const specObj = { |
|||
name: spec, |
|||
price: finalPriceText, |
|||
priceText: finalPriceText, |
|||
finalPrice: finalPrice, |
|||
finalPriceText: finalPriceText |
|||
}; |
|||
|
|||
return specObj; |
|||
}); |
|||
|
|||
// 对规格进行排序
|
|||
specifications.sort((a, b) => { |
|||
// 解析两个规格
|
|||
const specA = this.parseSpecification(a.name); |
|||
const specB = this.parseSpecification(b.name); |
|||
|
|||
// 如果有一个规格解析失败，保持原顺序
|
|||
if (!specA || !specB) { |
|||
return 0; |
|||
} |
|||
|
|||
// 1. 按类型排序：净重在前，毛重在后
|
|||
if (specA.type !== specB.type) { |
|||
return specA.type === '净重' ? -1 : 1; |
|||
} |
|||
|
|||
// 2. 按规格最小值排序：从小到大
|
|||
return specA.min - specB.min; |
|||
}); |
|||
|
|||
this.setData({ |
|||
specifications: specifications, |
|||
error: '', // 清除之前的错误
|
|||
loading: false |
|||
}); |
|||
|
|||
// 结束下拉刷新
|
|||
wx.stopPullDownRefresh(); |
|||
} else { |
|||
// 如果本地存储中没有数据，尝试从本地存储获取原始商品数据
|
|||
const allProducts = wx.getStorageSync('allProducts') || []; |
|||
|
|||
if (allProducts.length > 0) { |
|||
console.log('从本地存储获取原始商品数据'); |
|||
this.processSpecifications(productName, allProducts); |
|||
} else { |
|||
// 如果本地没有数据，再请求服务器
|
|||
console.log('本地存储中没有数据，请求服务器获取商品数据'); |
|||
const api = require('../../utils/api'); |
|||
api.getProducts(1, 1000, 'all', '').then(result => { |
|||
// 从返回对象中提取products数组
|
|||
const products = result.products || []; |
|||
this.processSpecifications(productName, products); |
|||
}).catch(err => { |
|||
console.error('获取规格失败:', err); |
|||
this.setData({ |
|||
error: '获取规格失败，请稍后重试', |
|||
loading: false |
|||
}); |
|||
|
|||
// 结束下拉刷新
|
|||
wx.stopPullDownRefresh(); |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 解析规格，提取类型（净重/毛重）和数值范围
|
|||
parseSpecification(spec) { |
|||
const weightMatch = spec.match(/(净重|毛重)(\d+)-(\d+)/); |
|||
if (weightMatch) { |
|||
const type = weightMatch[1]; // 净重或毛重
|
|||
const min = parseFloat(weightMatch[2]); |
|||
const max = parseFloat(weightMatch[3]); |
|||
const avg = (min + max) / 2; |
|||
return { |
|||
type: type, |
|||
min: min, |
|||
max: max, |
|||
avg: avg |
|||
}; |
|||
} |
|||
return null; |
|||
}, |
|||
|
|||
processSpecifications(productName, products) { |
|||
console.log('处理的商品数据数量:', products.length); |
|||
console.log('当前处理的商品名称:', productName); |
|||
|
|||
// 检查products是否为空
|
|||
if (!products || products.length === 0) { |
|||
console.error('商品数据为空'); |
|||
this.setData({ |
|||
error: '商品数据为空', |
|||
loading: false |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 过滤出当前商品名称的所有商品
|
|||
const filteredProducts = products.filter(product => { |
|||
const match = product.productName === productName; |
|||
console.log('商品:', product.productName, '规格:', product.specification, '价格:', product.price, '匹配:', match); |
|||
return match; |
|||
}); |
|||
|
|||
console.log('过滤后的商品数量:', filteredProducts.length); |
|||
console.log('过滤后的商品详情:', filteredProducts); |
|||
|
|||
// 检查filteredProducts是否为空
|
|||
if (filteredProducts.length === 0) { |
|||
console.error('未找到商品名称为"' + productName + '"的商品'); |
|||
this.setData({ |
|||
error: '未找到对应商品名称的商品', |
|||
loading: false |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 提取规格和价格，处理可能的空值和空格
|
|||
const specPriceMap = {}; |
|||
filteredProducts.forEach((product, productIndex) => { |
|||
const specStr = (product.specification || product.spec || '').trim(); |
|||
const price = product.price || ''; |
|||
|
|||
console.log(`处理第${productIndex + 1}个商品: 规格字符串='${specStr}', 价格字符串='${price}'`); |
|||
|
|||
// 价格为空的不参与计算
|
|||
if (!price || price.trim() === '') { |
|||
console.log(`商品价格为空，跳过处理`); |
|||
return; |
|||
} |
|||
|
|||
if (specStr.length > 0) { |
|||
// 处理逗号分隔的多个规格，确保每个规格都被正确分割
|
|||
// 首先按逗号分割
|
|||
let specs = specStr.split(',').map(spec => spec.trim()).filter(spec => spec.length > 0); |
|||
|
|||
// 进一步处理规格，确保每个规格都是独立的
|
|||
const processedSpecs = []; |
|||
specs.forEach(spec => { |
|||
// 检查规格是否包含多个规格（例如："净重29-30，净重31-32"）
|
|||
if (spec.includes('，')) { |
|||
// 按中文逗号分割
|
|||
const subSpecs = spec.split('，').map(s => s.trim()).filter(s => s.length > 0); |
|||
processedSpecs.push(...subSpecs); |
|||
} else { |
|||
processedSpecs.push(spec); |
|||
} |
|||
}); |
|||
|
|||
specs = processedSpecs; |
|||
|
|||
// 处理逗号分隔的多个价格
|
|||
const prices = (price || '').split(',').map(p => p.trim()).filter(p => p && p.trim() !== ''); |
|||
|
|||
console.log(`规格数组:`, specs); |
|||
console.log(`价格数组:`, prices); |
|||
|
|||
// 价格为空的不参与计算
|
|||
if (prices.length === 0) { |
|||
console.log(`价格数组为空，跳过处理`); |
|||
return; |
|||
} |
|||
|
|||
// 将规格和价格配对
|
|||
specs.forEach((spec, index) => { |
|||
if (spec.length > 0) { |
|||
// 确保价格索引不超出范围
|
|||
const priceIndex = index % prices.length; |
|||
const matchedPrice = prices[priceIndex] || ''; |
|||
console.log(`规格'${spec}' 配对价格: '${matchedPrice}'`); |
|||
|
|||
// 只有当价格不为空时才添加该规格
|
|||
if (matchedPrice && matchedPrice.trim() !== '') { |
|||
// 收集相同规格的所有价格，以便计算平均值
|
|||
if (!specPriceMap[spec]) { |
|||
specPriceMap[spec] = []; |
|||
} |
|||
specPriceMap[spec].push(matchedPrice); |
|||
} else { |
|||
console.log(`规格'${spec}' 价格为空，不添加`); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
// 转换为规格对象数组
|
|||
const specifications = Object.keys(specPriceMap).map(spec => { |
|||
const prices = specPriceMap[spec]; |
|||
console.log(`规格'${spec}' 的所有原始价格:`, prices); |
|||
|
|||
// 解析规格
|
|||
const specInfo = this.parseSpecification(spec); |
|||
|
|||
// 处理每个价格
|
|||
const processedPrices = prices.map(price => { |
|||
if (!price || price.trim() === '' || isNaN(parseFloat(price))) { |
|||
return 0; |
|||
} |
|||
|
|||
const priceValue = parseFloat(price); |
|||
console.log(`处理价格: ${priceValue}`); |
|||
|
|||
// 价格<10的需要按照公式计算
|
|||
if (priceValue < 10 && specInfo) { |
|||
console.log(`价格 ${priceValue} < 10，按照公式计算`); |
|||
if (specInfo.type === '净重') { |
|||
// 净重：规格平均值 × 价格
|
|||
return specInfo.avg * priceValue; |
|||
} else if (specInfo.type === '毛重') { |
|||
// 毛重：(规格平均值 - 5) × 价格
|
|||
return (specInfo.avg - 5) * priceValue; |
|||
} |
|||
} |
|||
// 价格>=10的直接使用
|
|||
return priceValue; |
|||
}).filter(price => price > 0); // 过滤掉0值
|
|||
|
|||
console.log(`规格'${spec}' 处理后的价格:`, processedPrices); |
|||
|
|||
// 计算处理后价格的平均值
|
|||
let finalPrice = 0; |
|||
let finalPriceText = ''; |
|||
|
|||
if (processedPrices.length > 0) { |
|||
const sum = processedPrices.reduce((acc, price) => acc + price, 0); |
|||
finalPrice = sum / processedPrices.length; |
|||
finalPriceText = finalPrice.toFixed(2); |
|||
console.log(`规格'${spec}' 处理后价格的平均值: ${finalPriceText} (基于 ${processedPrices.length} 个价格)`); |
|||
} else { |
|||
console.log(`规格'${spec}' 没有有效价格`); |
|||
} |
|||
|
|||
const specObj = { |
|||
name: spec, |
|||
price: finalPriceText, |
|||
priceText: finalPriceText, |
|||
finalPrice: finalPrice, |
|||
finalPriceText: finalPriceText |
|||
}; |
|||
|
|||
console.log('创建的规格对象:', specObj); |
|||
|
|||
return specObj; |
|||
}); |
|||
|
|||
console.log('提取的规格和价格:', specifications); |
|||
|
|||
// 对规格进行排序
|
|||
specifications.sort((a, b) => { |
|||
// 解析两个规格
|
|||
const specA = this.parseSpecification(a.name); |
|||
const specB = this.parseSpecification(b.name); |
|||
|
|||
// 如果有一个规格解析失败，保持原顺序
|
|||
if (!specA || !specB) { |
|||
return 0; |
|||
} |
|||
|
|||
// 1. 按类型排序：净重在前，毛重在后
|
|||
if (specA.type !== specB.type) { |
|||
return specA.type === '净重' ? -1 : 1; |
|||
} |
|||
|
|||
// 2. 按规格最小值排序：从小到大
|
|||
return specA.min - specB.min; |
|||
}); |
|||
|
|||
console.log('排序后的规格:', specifications); |
|||
|
|||
this.setData({ |
|||
specifications: specifications, |
|||
error: '', // 清除之前的错误
|
|||
loading: false |
|||
}); |
|||
|
|||
// 结束下拉刷新
|
|||
wx.stopPullDownRefresh(); |
|||
}, |
|||
|
|||
// 跳转到规格详情页面
|
|||
goToSpecDetail(e) { |
|||
const specItem = e.currentTarget.dataset.spec; |
|||
console.log('点击的规格项:', specItem); |
|||
console.log('传递的价格:', specItem.finalPriceText); |
|||
wx.navigateTo({ |
|||
url: `/pages/evaluate2/spec-detail?productName=${encodeURIComponent(this.data.productName)}&specification=${encodeURIComponent(specItem.name)}&price=${encodeURIComponent(specItem.finalPriceText)}` |
|||
}); |
|||
}, |
|||
|
|||
// 返回上一页
|
|||
goBack() { |
|||
wx.navigateBack(); |
|||
}, |
|||
|
|||
// 返回商品列表页面
|
|||
goBackToProductList() { |
|||
// 从本地存储中获取之前选择的分类
|
|||
const selectedCategory = wx.getStorageSync('selectedCategory') || ''; |
|||
console.log('返回商品列表页面，之前选择的分类:', selectedCategory); |
|||
|
|||
// 构建跳转URL，如果有分类参数就传递
|
|||
let url = '/pages/evaluate2/product-list'; |
|||
if (selectedCategory) { |
|||
url += '?category=' + encodeURIComponent(selectedCategory); |
|||
} |
|||
|
|||
wx.redirectTo({ |
|||
url: url |
|||
}); |
|||
}, |
|||
|
|||
// 下拉刷新
|
|||
onPullDownRefresh() { |
|||
console.log('开始下拉刷新'); |
|||
if (this.data.productName) { |
|||
this.loadSpecifications(this.data.productName); |
|||
} else { |
|||
wx.stopPullDownRefresh(); |
|||
} |
|||
} |
|||
}); |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"usingComponents": {}, |
|||
"enablePullDownRefresh": true, |
|||
"backgroundTextStyle": "dark" |
|||
} |
|||
@ -0,0 +1,78 @@ |
|||
<view class="container"> |
|||
<!-- 头部导航栏 --> |
|||
<view class="header"> |
|||
<view class="header-content" style="width: 4200rpx; display: block; box-sizing: border-box; height: 124rpx"> |
|||
<text class="title">规格选择</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="content"> |
|||
<!-- 加载中状态 --> |
|||
<view wx:if="{{loading}}" class="loading"> |
|||
<view class="loading-spinner"></view> |
|||
<text class="loading-text">正在加载规格数据...</text> |
|||
</view> |
|||
|
|||
<!-- 错误提示 --> |
|||
<view wx:if="{{error}}" class="error-card"> |
|||
<view class="error-icon">⚠️</view> |
|||
<text class="error-text">{{error}}</text> |
|||
<view class="button-group"> |
|||
<button bindtap="loadSpecifications" data-product="{{productName}}" class="btn-primary">重新加载</button> |
|||
<button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 商品信息 --> |
|||
<view wx:else class="product-card"> |
|||
<view class="product-info-container"> |
|||
<view class="product-info-row"> |
|||
<text class="product-label">商品名称</text> |
|||
<button bindtap="goBackToProductList" class="btn-back" style="width: 172rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx; height: 87rpx"> |
|||
<text class="btn-back-icon">←</text> |
|||
<text class="btn-back-text">更换商品</text> |
|||
</button> |
|||
</view> |
|||
<text class="product-name">{{productName}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 规格列表 --> |
|||
<view wx:if="{{!loading && !error && specifications.length > 0}}" class="spec-section"> |
|||
<view class="section-header"> |
|||
<text class="section-title">可用规格</text> |
|||
<text class="section-count">{{specifications.length}}个</text> |
|||
</view> |
|||
<view class="spec-grid"> |
|||
<view |
|||
wx:for="{{specifications}}" |
|||
wx:key="item.name" |
|||
class="spec-card" |
|||
data-spec="{{item}}" |
|||
bindtap="goToSpecDetail" |
|||
> |
|||
<view class="spec-info"> |
|||
<text class="spec-name">{{item.name}}</text> |
|||
</view> |
|||
<view class="spec-price"> |
|||
<text class="price-label">参考价格</text> |
|||
<text class="price-value">¥{{item.finalPriceText}}</text> |
|||
</view> |
|||
<view class="spec-arrow">→</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 暂无更多规格提示 --> |
|||
<view wx:if="{{specifications.length > 0}}" class="no-more"> |
|||
<text class="no-more-text">暂无更多规格选择</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 无规格提示 --> |
|||
<view wx:if="{{!loading && !error && specifications.length === 0}}" class="empty-state" style="height: 600rpx; display: flex; box-sizing: border-box"> |
|||
<view class="empty-icon">📋</view> |
|||
<text class="empty-text">该商品暂无可用规格</text> |
|||
<button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,450 @@ |
|||
.container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
min-height: 100vh; |
|||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); |
|||
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; |
|||
} |
|||
|
|||
.header { |
|||
background: #fff; |
|||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08); |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.header-content { |
|||
padding: 30rpx 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
color: #2c3e50; |
|||
letter-spacing: 2rpx; |
|||
} |
|||
|
|||
.content { |
|||
flex: 1; |
|||
padding: 16rpx; |
|||
} |
|||
|
|||
/* 加载状态 */ |
|||
.loading { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 160rpx 0; |
|||
} |
|||
|
|||
.loading-spinner { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border: 8rpx solid rgba(74, 144, 226, 0.2); |
|||
border-top: 8rpx solid #4a90e2; |
|||
border-radius: 50%; |
|||
animation: spin 1s linear infinite; |
|||
margin-bottom: 32rpx; |
|||
} |
|||
|
|||
@keyframes spin { |
|||
0% { transform: rotate(0deg); } |
|||
100% { transform: rotate(360deg); } |
|||
} |
|||
|
|||
.loading-text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 错误提示卡片 */ |
|||
.error-card { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 48rpx; |
|||
margin: 32rpx 0; |
|||
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08); |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
|||
|
|||
.error-icon { |
|||
font-size: 80rpx; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.error-text { |
|||
font-size: 28rpx; |
|||
color: #e74c3c; |
|||
margin-bottom: 32rpx; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
/* 按钮样式 */ |
|||
.button-group { |
|||
display: flex; |
|||
gap: 16rpx; |
|||
width: 100%; |
|||
max-width: 600rpx; |
|||
} |
|||
|
|||
.btn-primary { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
border-radius: 40rpx; |
|||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); |
|||
color: #fff; |
|||
border: none; |
|||
box-shadow: 0 4rpx 12rpx rgba(96, 165, 250, 0.4); |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.btn-primary:hover { |
|||
transform: translateY(-2rpx); |
|||
box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.5); |
|||
} |
|||
|
|||
.btn-secondary { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
border-radius: 40rpx; |
|||
background: #fff; |
|||
color: #4a90e2; |
|||
border: 2rpx solid #4a90e2; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.btn-secondary:hover { |
|||
background: rgba(74, 144, 226, 0.05); |
|||
transform: translateY(-2rpx); |
|||
} |
|||
|
|||
.btn-back { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 8rpx 24rpx; |
|||
font-size: 24rpx; |
|||
color: #4a90e2; |
|||
background: transparent; |
|||
border: 1rpx solid #4a90e2; |
|||
border-radius: 20rpx; |
|||
transition: all 0.3s ease; |
|||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); |
|||
} |
|||
|
|||
.btn-back:hover { |
|||
background: rgba(74, 144, 226, 0.1); |
|||
transform: translateY(-2rpx); |
|||
box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.2); |
|||
} |
|||
|
|||
.btn-back-icon { |
|||
margin-right: 8rpx; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.btn-back-text { |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
/* 商品信息卡片 */ |
|||
.product-card { |
|||
background: rgba(255, 255, 255, 0.95); |
|||
border-radius: 20rpx; |
|||
padding: 32rpx; |
|||
margin-bottom: 24rpx; |
|||
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08); |
|||
backdrop-filter: blur(8rpx); |
|||
border: 1rpx solid rgba(255, 255, 255, 0.3); |
|||
} |
|||
|
|||
.product-info-container { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.product-info-row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 16rpx; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.product-label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
font-weight: 500; |
|||
flex: 1; |
|||
} |
|||
|
|||
.product-name { |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
color: #2c3e50; |
|||
line-height: 1.4; |
|||
word-break: break-word; |
|||
margin-top: 12rpx; |
|||
padding: 12rpx 0; |
|||
border-top: 1rpx solid #f1f5f9; |
|||
} |
|||
|
|||
/* 规格列表区域 */ |
|||
.spec-section { |
|||
margin-top: 24rpx; |
|||
} |
|||
|
|||
.section-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 24rpx; |
|||
padding: 0 8rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 30rpx; |
|||
font-weight: 700; |
|||
color: #2c3e50; |
|||
padding-left: 16rpx; |
|||
border-left: 6rpx solid #4a90e2; |
|||
} |
|||
|
|||
.section-count { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
background: rgba(74, 144, 226, 0.1); |
|||
padding: 6rpx 16rpx; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
/* 规格网格布局 */ |
|||
.spec-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 20rpx; |
|||
margin-top: 16rpx; |
|||
} |
|||
|
|||
/* 规格卡片 */ |
|||
.spec-card { |
|||
background: rgba(255, 255, 255, 0.95); |
|||
border-radius: 20rpx; |
|||
padding: 32rpx 24rpx; |
|||
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08); |
|||
transition: all 0.3s ease; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
backdrop-filter: blur(8rpx); |
|||
border: 1rpx solid rgba(255, 255, 255, 0.3); |
|||
min-height: 200rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.spec-card::before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 6rpx; |
|||
height: 100%; |
|||
background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%); |
|||
} |
|||
|
|||
.spec-card:hover { |
|||
transform: translateY(-6rpx); |
|||
box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.15); |
|||
background: rgba(255, 255, 255, 1); |
|||
} |
|||
|
|||
.spec-card:active { |
|||
transform: translateY(-2rpx); |
|||
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12); |
|||
} |
|||
|
|||
.spec-info { |
|||
margin-bottom: 20rpx; |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.spec-name { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #2c3e50; |
|||
line-height: 1.4; |
|||
word-break: break-word; |
|||
padding-right: 40rpx; |
|||
} |
|||
|
|||
.spec-price { |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin-top: 16rpx; |
|||
} |
|||
|
|||
.price-label { |
|||
font-size: 20rpx; |
|||
color: #999; |
|||
margin-bottom: 4rpx; |
|||
} |
|||
|
|||
.price-value { |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
color: #e74c3c; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.spec-card:hover .price-value { |
|||
transform: scale(1.05); |
|||
} |
|||
|
|||
.spec-arrow { |
|||
position: absolute; |
|||
top: 32rpx; |
|||
right: 28rpx; |
|||
font-size: 32rpx; |
|||
color: #4a90e2; |
|||
font-weight: bold; |
|||
opacity: 0.6; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.spec-card:hover .spec-arrow { |
|||
opacity: 1; |
|||
transform: translateX(4rpx); |
|||
} |
|||
|
|||
/* 空状态 */ |
|||
.empty-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 160rpx 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.empty-icon { |
|||
font-size: 160rpx; |
|||
margin-bottom: 40rpx; |
|||
opacity: 0.6; |
|||
} |
|||
|
|||
.empty-text { |
|||
font-size: 32rpx; |
|||
color: #666; |
|||
margin-bottom: 48rpx; |
|||
line-height: 1.4; |
|||
padding: 0 40rpx; |
|||
} |
|||
|
|||
/* 响应式设计 */ |
|||
@media (max-width: 750rpx) { |
|||
.content { |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.spec-grid { |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 16rpx; |
|||
} |
|||
|
|||
.product-card { |
|||
padding: 28rpx; |
|||
} |
|||
|
|||
.spec-card { |
|||
padding: 28rpx 20rpx; |
|||
min-height: 180rpx; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.product-name { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.price-value { |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.button-group { |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
} |
|||
|
|||
.btn-primary, |
|||
.btn-secondary { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
/* 小屏幕设备适配 */ |
|||
@media (max-width: 414rpx) { |
|||
.spec-grid { |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 12rpx; |
|||
} |
|||
|
|||
.spec-card { |
|||
padding: 24rpx 16rpx; |
|||
min-height: 160rpx; |
|||
} |
|||
|
|||
.spec-name { |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.price-value { |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
/* 暂无更多规格提示 */ |
|||
.no-more { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 48rpx 0; |
|||
margin-top: 16rpx; |
|||
margin-bottom: 100rpx; /* 添加底部边距，避免被导航栏遮挡 */ |
|||
} |
|||
|
|||
.no-more-text { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
background: rgba(0, 0, 0, 0.03); |
|||
padding: 12rpx 32rpx; |
|||
border-radius: 30rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 调整规格网格布局，确保不被导航栏遮挡 */ |
|||
.spec-section { |
|||
margin-bottom: 40rpx; |
|||
} |
|||
@ -0,0 +1,463 @@ |
|||
Page({ |
|||
data: { |
|||
productName: '', |
|||
specifications: [], |
|||
loading: false, |
|||
error: '', |
|||
categories: [], |
|||
selectedCategory: '' |
|||
}, |
|||
onLoad(options) { |
|||
let productName = ''; |
|||
// 首先检查URL参数
|
|||
if (options.productName) { |
|||
productName = options.productName; |
|||
} else { |
|||
// 然后检查本地存储（用于wx.switchTab导航）
|
|||
productName = wx.getStorageSync('selectedProductName') || ''; |
|||
// 清除本地存储中的商品名称，避免影响下次进入
|
|||
if (productName) { |
|||
wx.removeStorageSync('selectedProductName'); |
|||
} |
|||
} |
|||
|
|||
if (productName) { |
|||
this.setData({ productName: productName }); |
|||
this.loadSpecifications(productName); |
|||
} else { |
|||
// 如果没有商品名称参数，加载所有商品数据并计算
|
|||
this.loadAllData(); |
|||
} |
|||
}, |
|||
|
|||
// 下拉刷新
|
|||
onPullDownRefresh() { |
|||
console.log('开始下拉刷新'); |
|||
this.loadAllData(); |
|||
}, |
|||
|
|||
// 加载所有商品数据并计算
|
|||
loadAllData() { |
|||
this.setData({ |
|||
loading: true, |
|||
categories: [] // 清空分类数据，确保加载时只显示加载状态
|
|||
}); |
|||
|
|||
const api = require('../../utils/api'); |
|||
// 使用正确的参数调用getProducts方法
|
|||
api.getProducts(1, 1000, 'all', '').then(result => { |
|||
console.log('API返回结果:', result); |
|||
// 从返回对象中提取products数组，如果不存在则使用空数组
|
|||
const products = result.products || []; |
|||
console.log('提取的products数组:', products); |
|||
console.log('products数组长度:', products.length); |
|||
|
|||
// 存储原始商品数据到本地存储
|
|||
wx.setStorageSync('allProducts', products); |
|||
|
|||
// 过滤出有有效category字段的商品（忽略空字符串和仅包含空格的分类）
|
|||
const productsWithCategory = products.filter(product => { |
|||
if (!product.category) return false; |
|||
const categoryStr = String(product.category).trim(); |
|||
return categoryStr !== ''; |
|||
}); |
|||
console.log('有有效category的商品:', productsWithCategory); |
|||
console.log('有有效category的商品数量:', productsWithCategory.length); |
|||
|
|||
// 提取所有分类（去除前后空格）
|
|||
const categories = [...new Set(productsWithCategory.map(product => { |
|||
return String(product.category).trim(); |
|||
}))]; |
|||
console.log('提取的分类数组:', categories); |
|||
console.log('分类数量:', categories.length); |
|||
|
|||
// 存储分类数据到本地存储
|
|||
wx.setStorageSync('evaluate2Categories', categories); |
|||
|
|||
// 计算每个分类下的商品名称列表
|
|||
const categoryProductsMap = {}; |
|||
categories.forEach(category => { |
|||
// 过滤出该分类下的商品
|
|||
const categoryProducts = productsWithCategory.filter(product => { |
|||
const productCategory = String(product.category).trim(); |
|||
return productCategory === category; |
|||
}); |
|||
|
|||
// 提取商品名称（去除前后空格，去重）
|
|||
const productNames = [...new Set(categoryProducts.map(product => { |
|||
// 尝试从多个字段获取商品名称
|
|||
const nameFields = [product.productName, product.name, product.product]; |
|||
for (const field of nameFields) { |
|||
if (field) { |
|||
const trimmedName = String(field).trim(); |
|||
if (trimmedName !== '') { |
|||
return trimmedName; |
|||
} |
|||
} |
|||
} |
|||
return ''; |
|||
}).filter(name => name !== ''))]; |
|||
|
|||
categoryProductsMap[category] = productNames; |
|||
}); |
|||
|
|||
// 存储分类商品映射到本地存储
|
|||
wx.setStorageSync('evaluate2CategoryProductsMap', categoryProductsMap); |
|||
|
|||
// 计算每个商品的规格和价格信息
|
|||
const productSpecsMap = {}; |
|||
products.forEach(product => { |
|||
// 尝试从多个字段获取商品名称
|
|||
const nameFields = [product.productName, product.name, product.product]; |
|||
let productName = ''; |
|||
for (const field of nameFields) { |
|||
if (field) { |
|||
const trimmedName = String(field).trim(); |
|||
if (trimmedName !== '') { |
|||
productName = trimmedName; |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
|
|||
if (productName) { |
|||
if (!productSpecsMap[productName]) { |
|||
productSpecsMap[productName] = []; |
|||
} |
|||
|
|||
// 提取规格和价格
|
|||
const specStr = (product.specification || product.spec || '').trim(); |
|||
const price = product.price || ''; |
|||
|
|||
if (specStr && price) { |
|||
productSpecsMap[productName].push({ |
|||
specification: specStr, |
|||
price: price |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
// 存储商品规格映射到本地存储
|
|||
wx.setStorageSync('evaluate2ProductSpecsMap', productSpecsMap); |
|||
|
|||
// 加载分类数据到页面
|
|||
this.setData({ |
|||
categories: categories, |
|||
loading: false |
|||
}); |
|||
|
|||
// 结束下拉刷新
|
|||
wx.stopPullDownRefresh(); |
|||
}).catch(err => { |
|||
console.error('获取商品数据失败:', err); |
|||
this.setData({ |
|||
error: '获取商品数据失败，请稍后重试', |
|||
loading: false |
|||
}); |
|||
|
|||
// 结束下拉刷新
|
|||
wx.stopPullDownRefresh(); |
|||
}); |
|||
}, |
|||
|
|||
// 加载商品分类数据
|
|||
loadCategories() { |
|||
this.setData({ loading: true }); |
|||
|
|||
// 尝试从本地存储中获取分类数据
|
|||
const categories = wx.getStorageSync('evaluate2Categories') || []; |
|||
|
|||
if (categories.length > 0) { |
|||
// 如果本地存储中有分类数据，直接使用
|
|||
console.log('从本地存储获取分类数据:', categories); |
|||
this.setData({ |
|||
categories: categories, |
|||
loading: false |
|||
}); |
|||
} else { |
|||
// 如果本地存储中没有分类数据，重新加载所有数据
|
|||
this.loadAllData(); |
|||
} |
|||
}, |
|||
|
|||
loadSpecifications(productName) { |
|||
if (!productName) { |
|||
this.setData({ |
|||
error: '请先选择商品', |
|||
loading: false |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
this.setData({ loading: true, specifications: [] }); |
|||
|
|||
// 直接从本地存储获取商品数据，避免重复请求
|
|||
const localGoods = wx.getStorageSync('goods') || []; |
|||
console.log('从本地存储获取的商品数量:', localGoods.length); |
|||
|
|||
if (localGoods.length > 0) { |
|||
this.processSpecifications(productName, localGoods); |
|||
} else { |
|||
// 如果本地没有数据，再请求服务器
|
|||
const api = require('../../utils/api'); |
|||
// 使用正确的参数调用getProducts方法
|
|||
api.getProducts(1, 1000, 'all', '').then(result => { |
|||
// 从返回对象中提取products数组
|
|||
const products = result.products || []; |
|||
this.processSpecifications(productName, products); |
|||
}).catch(err => { |
|||
console.error('获取规格失败:', err); |
|||
this.setData({ |
|||
error: '获取规格失败，请稍后重试', |
|||
loading: false |
|||
}); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 解析规格，提取类型（净重/毛重）和数值范围
|
|||
parseSpecification(spec) { |
|||
const weightMatch = spec.match(/(净重|毛重)(\d+)-(\d+)/); |
|||
if (weightMatch) { |
|||
const type = weightMatch[1]; // 净重或毛重
|
|||
const min = parseFloat(weightMatch[2]); |
|||
const max = parseFloat(weightMatch[3]); |
|||
const avg = (min + max) / 2; |
|||
return { |
|||
type: type, |
|||
min: min, |
|||
max: max, |
|||
avg: avg |
|||
}; |
|||
} |
|||
return null; |
|||
}, |
|||
|
|||
processSpecifications(productName, products) { |
|||
console.log('处理的商品数据数量:', products.length); |
|||
console.log('当前处理的商品名称:', productName); |
|||
|
|||
// 检查products是否为空
|
|||
if (!products || products.length === 0) { |
|||
console.error('商品数据为空'); |
|||
this.setData({ |
|||
error: '商品数据为空', |
|||
loading: false |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 过滤出当前商品名称的所有商品
|
|||
const filteredProducts = products.filter(product => { |
|||
const match = product.productName === productName; |
|||
console.log('商品:', product.productName, '规格:', product.specification, '价格:', product.price, '匹配:', match); |
|||
return match; |
|||
}); |
|||
|
|||
console.log('过滤后的商品数量:', filteredProducts.length); |
|||
console.log('过滤后的商品详情:', filteredProducts); |
|||
|
|||
// 检查filteredProducts是否为空
|
|||
if (filteredProducts.length === 0) { |
|||
console.error('未找到商品名称为"' + productName + '"的商品'); |
|||
this.setData({ |
|||
error: '未找到对应商品名称的商品', |
|||
loading: false |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 提取规格和价格，处理可能的空值和空格
|
|||
const specPriceMap = {}; |
|||
filteredProducts.forEach((product, productIndex) => { |
|||
const specStr = (product.specification || product.spec || '').trim(); |
|||
const price = product.price || ''; |
|||
|
|||
console.log(`处理第${productIndex + 1}个商品: 规格字符串='${specStr}', 价格字符串='${price}'`); |
|||
|
|||
// 价格为空的不参与计算
|
|||
if (!price || price.trim() === '') { |
|||
console.log(`商品价格为空，跳过处理`); |
|||
return; |
|||
} |
|||
|
|||
if (specStr.length > 0) { |
|||
// 处理逗号分隔的多个规格，确保每个规格都被正确分割
|
|||
// 首先按逗号分割
|
|||
let specs = specStr.split(',').map(spec => spec.trim()).filter(spec => spec.length > 0); |
|||
|
|||
// 进一步处理规格，确保每个规格都是独立的
|
|||
const processedSpecs = []; |
|||
specs.forEach(spec => { |
|||
// 检查规格是否包含多个规格（例如："净重29-30，净重31-32"）
|
|||
if (spec.includes('，')) { |
|||
// 按中文逗号分割
|
|||
const subSpecs = spec.split('，').map(s => s.trim()).filter(s => s.length > 0); |
|||
processedSpecs.push(...subSpecs); |
|||
} else { |
|||
processedSpecs.push(spec); |
|||
} |
|||
}); |
|||
|
|||
specs = processedSpecs; |
|||
|
|||
// 处理逗号分隔的多个价格
|
|||
const prices = (price || '').split(',').map(p => p.trim()).filter(p => p && p.trim() !== ''); |
|||
|
|||
console.log(`规格数组:`, specs); |
|||
console.log(`价格数组:`, prices); |
|||
|
|||
// 价格为空的不参与计算
|
|||
if (prices.length === 0) { |
|||
console.log(`价格数组为空，跳过处理`); |
|||
return; |
|||
} |
|||
|
|||
// 将规格和价格配对
|
|||
specs.forEach((spec, index) => { |
|||
if (spec.length > 0) { |
|||
// 确保价格索引不超出范围
|
|||
const priceIndex = index % prices.length; |
|||
const matchedPrice = prices[priceIndex] || ''; |
|||
console.log(`规格'${spec}' 配对价格: '${matchedPrice}'`); |
|||
|
|||
// 只有当价格不为空时才添加该规格
|
|||
if (matchedPrice && matchedPrice.trim() !== '') { |
|||
// 收集相同规格的所有价格，以便计算平均值
|
|||
if (!specPriceMap[spec]) { |
|||
specPriceMap[spec] = []; |
|||
} |
|||
specPriceMap[spec].push(matchedPrice); |
|||
} else { |
|||
console.log(`规格'${spec}' 价格为空，不添加`); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
// 转换为规格对象数组
|
|||
const specifications = Object.keys(specPriceMap).map(spec => { |
|||
const prices = specPriceMap[spec]; |
|||
console.log(`规格'${spec}' 的所有原始价格:`, prices); |
|||
|
|||
// 解析规格
|
|||
const specInfo = this.parseSpecification(spec); |
|||
|
|||
// 处理每个价格
|
|||
const processedPrices = prices.map(price => { |
|||
if (!price || price.trim() === '' || isNaN(parseFloat(price))) { |
|||
return 0; |
|||
} |
|||
|
|||
const priceValue = parseFloat(price); |
|||
console.log(`处理价格: ${priceValue}`); |
|||
|
|||
// 价格<10的需要按照公式计算
|
|||
if (priceValue < 10 && specInfo) { |
|||
console.log(`价格 ${priceValue} < 10，按照公式计算`); |
|||
if (specInfo.type === '净重') { |
|||
// 净重：规格平均值 × 价格
|
|||
return specInfo.avg * priceValue; |
|||
} else if (specInfo.type === '毛重') { |
|||
// 毛重：(规格平均值 - 5) × 价格
|
|||
return (specInfo.avg - 5) * priceValue; |
|||
} |
|||
} |
|||
// 价格>=10的直接使用
|
|||
return priceValue; |
|||
}).filter(price => price > 0); // 过滤掉0值
|
|||
|
|||
console.log(`规格'${spec}' 处理后的价格:`, processedPrices); |
|||
|
|||
// 计算处理后价格的平均值
|
|||
let finalPrice = 0; |
|||
let finalPriceText = ''; |
|||
|
|||
if (processedPrices.length > 0) { |
|||
const sum = processedPrices.reduce((acc, price) => acc + price, 0); |
|||
finalPrice = sum / processedPrices.length; |
|||
finalPriceText = finalPrice.toFixed(2); |
|||
console.log(`规格'${spec}' 处理后价格的平均值: ${finalPriceText} (基于 ${processedPrices.length} 个价格)`); |
|||
} else { |
|||
console.log(`规格'${spec}' 没有有效价格`); |
|||
} |
|||
|
|||
const specObj = { |
|||
name: spec, |
|||
price: finalPriceText, |
|||
priceText: finalPriceText, |
|||
finalPrice: finalPrice, |
|||
finalPriceText: finalPriceText |
|||
}; |
|||
|
|||
console.log('创建的规格对象:', specObj); |
|||
|
|||
return specObj; |
|||
}); |
|||
|
|||
console.log('提取的规格和价格:', specifications); |
|||
|
|||
// 对规格进行排序
|
|||
specifications.sort((a, b) => { |
|||
// 解析两个规格
|
|||
const specA = this.parseSpecification(a.name); |
|||
const specB = this.parseSpecification(b.name); |
|||
|
|||
// 如果有一个规格解析失败，保持原顺序
|
|||
if (!specA || !specB) { |
|||
return 0; |
|||
} |
|||
|
|||
// 1. 按类型排序：净重在前，毛重在后
|
|||
if (specA.type !== specB.type) { |
|||
return specA.type === '净重' ? -1 : 1; |
|||
} |
|||
|
|||
// 2. 按规格最小值排序：从小到大
|
|||
return specA.min - specB.min; |
|||
}); |
|||
|
|||
console.log('排序后的规格:', specifications); |
|||
|
|||
this.setData({ |
|||
specifications: specifications, |
|||
error: '', // 清除之前的错误
|
|||
loading: false |
|||
}); |
|||
}, |
|||
|
|||
// 跳转到规格详情页面
|
|||
goToSpecDetail(e) { |
|||
const specItem = e.currentTarget.dataset.spec; |
|||
console.log('点击的规格项:', specItem); |
|||
console.log('传递的价格:', specItem.finalPriceText); |
|||
wx.navigateTo({ |
|||
url: `/pages/evaluate1/spec-detail?productName=${encodeURIComponent(this.data.productName)}&specification=${encodeURIComponent(specItem.name)}&price=${encodeURIComponent(specItem.finalPriceText)}` |
|||
}); |
|||
}, |
|||
|
|||
// 返回上一页
|
|||
goBack() { |
|||
wx.navigateBack(); |
|||
}, |
|||
|
|||
// 返回商品列表页面
|
|||
goBackToProductList() { |
|||
wx.redirectTo({ |
|||
url: '/pages/evaluate1/product-list' |
|||
}); |
|||
}, |
|||
|
|||
// 选择分类，跳转到商品列表页面
|
|||
selectCategory(e) { |
|||
const category = e.currentTarget.dataset.category; |
|||
console.log('选择分类:', category); |
|||
|
|||
// 跳转到商品列表页面，并传递分类参数
|
|||
wx.redirectTo({ |
|||
url: `/pages/evaluate2/product-list?category=${encodeURIComponent(category)}` |
|||
}); |
|||
} |
|||
}); |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"usingComponents": {}, |
|||
"enablePullDownRefresh": true, |
|||
"backgroundTextStyle": "dark" |
|||
} |
|||
@ -0,0 +1,100 @@ |
|||
<view class="container"> |
|||
<!-- 头部导航栏 --> |
|||
<view class="header"> |
|||
<view class="header-content" style="width: 800rpx; display: block; box-sizing: border-box"> |
|||
<text class="title">分类选择</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="content" style="width: 600rpx; display: block; box-sizing: border-box"> |
|||
<!-- 加载中状态 --> |
|||
<view wx:if="{{loading}}" class="loading"> |
|||
<view class="loading-spinner"></view> |
|||
<text class="loading-text">正在加载数据...</text> |
|||
</view> |
|||
|
|||
<!-- 错误提示 --> |
|||
<view wx:if="{{error}}" class="error-card"> |
|||
<view class="error-icon">⚠️</view> |
|||
<text class="error-text">{{error}}</text> |
|||
<view class="button-group"> |
|||
<button bindtap="loadCategories" class="btn-primary">重新加载</button> |
|||
<button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 分类选择区域 --> |
|||
<view wx:else class="category-section"> |
|||
<view class="section-header"> |
|||
<text class="section-title">商品分类</text> |
|||
<text class="section-count">{{categories.length}}个</text> |
|||
</view> |
|||
<view class="category-grid"> |
|||
<view |
|||
wx:for="{{categories}}" |
|||
wx:key="item" |
|||
class="category-card" |
|||
data-category="{{item}}" |
|||
bindtap="selectCategory" |
|||
> |
|||
<view class="category-info"> |
|||
<text class="category-name">{{item}}</text> |
|||
</view> |
|||
<view class="category-arrow">→</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 商品信息 (当有productName时显示) --> |
|||
<view wx:if="{{productName}}" class="product-card"> |
|||
<view class="product-info-container"> |
|||
<view class="product-info-row"> |
|||
<text class="product-label">商品名称</text> |
|||
<button bindtap="goBackToProductList" class="btn-back"> |
|||
<text class="btn-back-icon">←</text> |
|||
<text class="btn-back-text">更换商品</text> |
|||
</button> |
|||
</view> |
|||
<text class="product-name">{{productName}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 规格列表 (当有specifications时显示) --> |
|||
<view wx:if="{{!loading && !error && specifications.length > 0}}" class="spec-section"> |
|||
<view class="section-header"> |
|||
<text class="section-title">可用规格</text> |
|||
<text class="section-count">{{specifications.length}}个</text> |
|||
</view> |
|||
<view class="spec-grid"> |
|||
<view |
|||
wx:for="{{specifications}}" |
|||
wx:key="item.name" |
|||
class="spec-card" |
|||
data-spec="{{item}}" |
|||
bindtap="goToSpecDetail" |
|||
> |
|||
<view class="spec-info"> |
|||
<text class="spec-name">{{item.name}}</text> |
|||
</view> |
|||
<view class="spec-price"> |
|||
<text class="price-label">参考价格</text> |
|||
<text class="price-value">¥{{item.finalPriceText}}</text> |
|||
</view> |
|||
<view class="spec-arrow">→</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 暂无更多规格提示 --> |
|||
<view wx:if="{{specifications.length > 0}}" class="no-more"> |
|||
<text class="no-more-text">暂无更多规格选择</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 无规格提示 --> |
|||
<view wx:if="{{!loading && !error && specifications.length === 0 && productName}}" class="empty-state"> |
|||
<view class="empty-icon">📋</view> |
|||
<text class="empty-text">该商品暂无可用规格</text> |
|||
<button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,560 @@ |
|||
.container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
min-height: 100vh; |
|||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); |
|||
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; |
|||
} |
|||
|
|||
.header { |
|||
background: #fff; |
|||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08); |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.header-content { |
|||
padding: 30rpx 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
color: #2c3e50; |
|||
letter-spacing: 2rpx; |
|||
} |
|||
|
|||
.content { |
|||
flex: 1; |
|||
padding: 16rpx; |
|||
} |
|||
|
|||
/* 加载状态 */ |
|||
.loading { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 160rpx 0; |
|||
} |
|||
|
|||
.loading-spinner { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border: 8rpx solid rgba(74, 144, 226, 0.2); |
|||
border-top: 8rpx solid #4a90e2; |
|||
border-radius: 50%; |
|||
animation: spin 1s linear infinite; |
|||
margin-bottom: 32rpx; |
|||
} |
|||
|
|||
@keyframes spin { |
|||
0% { transform: rotate(0deg); } |
|||
100% { transform: rotate(360deg); } |
|||
} |
|||
|
|||
.loading-text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 错误提示卡片 */ |
|||
.error-card { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 48rpx; |
|||
margin: 32rpx 0; |
|||
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08); |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
|||
|
|||
.error-icon { |
|||
font-size: 80rpx; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.error-text { |
|||
font-size: 28rpx; |
|||
color: #e74c3c; |
|||
margin-bottom: 32rpx; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
/* 按钮样式 */ |
|||
.button-group { |
|||
display: flex; |
|||
gap: 16rpx; |
|||
width: 100%; |
|||
max-width: 600rpx; |
|||
} |
|||
|
|||
.btn-primary { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
border-radius: 40rpx; |
|||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); |
|||
color: #fff; |
|||
border: none; |
|||
box-shadow: 0 4rpx 12rpx rgba(96, 165, 250, 0.4); |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.btn-primary:hover { |
|||
transform: translateY(-2rpx); |
|||
box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.5); |
|||
} |
|||
|
|||
.btn-secondary { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
border-radius: 40rpx; |
|||
background: #fff; |
|||
color: #4a90e2; |
|||
border: 2rpx solid #4a90e2; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.btn-secondary:hover { |
|||
background: rgba(74, 144, 226, 0.05); |
|||
transform: translateY(-2rpx); |
|||
} |
|||
|
|||
.btn-back { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 8rpx 24rpx; |
|||
font-size: 24rpx; |
|||
color: #4a90e2; |
|||
background: transparent; |
|||
border: 1rpx solid #4a90e2; |
|||
border-radius: 20rpx; |
|||
transition: all 0.3s ease; |
|||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); |
|||
} |
|||
|
|||
.btn-back:hover { |
|||
background: rgba(74, 144, 226, 0.1); |
|||
transform: translateY(-2rpx); |
|||
box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.2); |
|||
} |
|||
|
|||
.btn-back-icon { |
|||
margin-right: 8rpx; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
.btn-back-text { |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
/* 商品信息卡片 */ |
|||
.product-card { |
|||
background: rgba(255, 255, 255, 0.95); |
|||
border-radius: 20rpx; |
|||
padding: 32rpx; |
|||
margin-bottom: 24rpx; |
|||
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08); |
|||
backdrop-filter: blur(8rpx); |
|||
border: 1rpx solid rgba(255, 255, 255, 0.3); |
|||
} |
|||
|
|||
.product-info-container { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.product-info-row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 16rpx; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.product-label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
font-weight: 500; |
|||
flex: 1; |
|||
} |
|||
|
|||
.product-name { |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
color: #2c3e50; |
|||
line-height: 1.4; |
|||
word-break: break-word; |
|||
margin-top: 12rpx; |
|||
padding: 12rpx 0; |
|||
border-top: 1rpx solid #f1f5f9; |
|||
} |
|||
|
|||
/* 规格列表区域 */ |
|||
.spec-section { |
|||
margin-top: 24rpx; |
|||
} |
|||
|
|||
.section-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 24rpx; |
|||
padding: 0 8rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 30rpx; |
|||
font-weight: 700; |
|||
color: #2c3e50; |
|||
padding-left: 16rpx; |
|||
border-left: 6rpx solid #4a90e2; |
|||
} |
|||
|
|||
.section-count { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
background: rgba(74, 144, 226, 0.1); |
|||
padding: 6rpx 16rpx; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
/* 规格网格布局 */ |
|||
.spec-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 20rpx; |
|||
margin-top: 16rpx; |
|||
} |
|||
|
|||
/* 规格卡片 */ |
|||
.spec-card { |
|||
background: rgba(255, 255, 255, 0.95); |
|||
border-radius: 20rpx; |
|||
padding: 32rpx 24rpx; |
|||
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08); |
|||
transition: all 0.3s ease; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
backdrop-filter: blur(8rpx); |
|||
border: 1rpx solid rgba(255, 255, 255, 0.3); |
|||
min-height: 200rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.spec-card::before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 6rpx; |
|||
height: 100%; |
|||
background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%); |
|||
} |
|||
|
|||
.spec-card:hover { |
|||
transform: translateY(-6rpx); |
|||
box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.15); |
|||
background: rgba(255, 255, 255, 1); |
|||
} |
|||
|
|||
.spec-card:active { |
|||
transform: translateY(-2rpx); |
|||
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12); |
|||
} |
|||
|
|||
.spec-info { |
|||
margin-bottom: 20rpx; |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.spec-name { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #2c3e50; |
|||
line-height: 1.4; |
|||
word-break: break-word; |
|||
padding-right: 40rpx; |
|||
} |
|||
|
|||
.spec-price { |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin-top: 16rpx; |
|||
} |
|||
|
|||
.price-label { |
|||
font-size: 20rpx; |
|||
color: #999; |
|||
margin-bottom: 4rpx; |
|||
} |
|||
|
|||
.price-value { |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
color: #e74c3c; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.spec-card:hover .price-value { |
|||
transform: scale(1.05); |
|||
} |
|||
|
|||
.spec-arrow { |
|||
position: absolute; |
|||
top: 32rpx; |
|||
right: 28rpx; |
|||
font-size: 32rpx; |
|||
color: #4a90e2; |
|||
font-weight: bold; |
|||
opacity: 0.6; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.spec-card:hover .spec-arrow { |
|||
opacity: 1; |
|||
transform: translateX(4rpx); |
|||
} |
|||
|
|||
/* 空状态 */ |
|||
.empty-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 160rpx 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.empty-icon { |
|||
font-size: 160rpx; |
|||
margin-bottom: 40rpx; |
|||
opacity: 0.6; |
|||
} |
|||
|
|||
.empty-text { |
|||
font-size: 32rpx; |
|||
color: #666; |
|||
margin-bottom: 48rpx; |
|||
line-height: 1.4; |
|||
padding: 0 40rpx; |
|||
} |
|||
|
|||
/* 响应式设计 */ |
|||
@media (max-width: 750rpx) { |
|||
.content { |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.spec-grid { |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 16rpx; |
|||
} |
|||
|
|||
.product-card { |
|||
padding: 28rpx; |
|||
} |
|||
|
|||
.spec-card { |
|||
padding: 28rpx 20rpx; |
|||
min-height: 180rpx; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.product-name { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.price-value { |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.button-group { |
|||
flex-direction: column; |
|||
gap: 12rpx; |
|||
} |
|||
|
|||
.btn-primary, |
|||
.btn-secondary { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
/* 小屏幕设备适配 */ |
|||
@media (max-width: 414rpx) { |
|||
.spec-grid { |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 12rpx; |
|||
} |
|||
|
|||
.spec-card { |
|||
padding: 24rpx 16rpx; |
|||
min-height: 160rpx; |
|||
} |
|||
|
|||
.spec-name { |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.price-value { |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
/* 暂无更多规格提示 */ |
|||
.no-more { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 48rpx 0; |
|||
margin-top: 16rpx; |
|||
margin-bottom: 100rpx; /* 添加底部边距，避免被导航栏遮挡 */ |
|||
} |
|||
|
|||
.no-more-text { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
background: rgba(0, 0, 0, 0.03); |
|||
padding: 12rpx 32rpx; |
|||
border-radius: 30rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 分类选择区域 */ |
|||
.category-section { |
|||
margin-top: 24rpx; |
|||
margin-bottom: 40rpx; |
|||
} |
|||
|
|||
.category-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
gap: 20rpx; |
|||
margin-top: 16rpx; |
|||
} |
|||
|
|||
.category-card { |
|||
background: rgba(255, 255, 255, 0.95); |
|||
border-radius: 20rpx; |
|||
padding: 32rpx 24rpx; |
|||
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08); |
|||
transition: all 0.3s ease; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
backdrop-filter: blur(8rpx); |
|||
border: 1rpx solid rgba(255, 255, 255, 0.3); |
|||
min-height: 150rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.category-card::before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 6rpx; |
|||
height: 100%; |
|||
background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%); |
|||
} |
|||
|
|||
.category-card:hover { |
|||
transform: translateY(-6rpx); |
|||
box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.15); |
|||
background: rgba(255, 255, 255, 1); |
|||
} |
|||
|
|||
.category-card:active { |
|||
transform: translateY(-2rpx); |
|||
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12); |
|||
} |
|||
|
|||
.category-info { |
|||
flex: 1; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.category-name { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #2c3e50; |
|||
line-height: 1.4; |
|||
word-break: break-word; |
|||
} |
|||
|
|||
.category-arrow { |
|||
font-size: 32rpx; |
|||
color: #4a90e2; |
|||
font-weight: bold; |
|||
opacity: 0.6; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.category-card:hover .category-arrow { |
|||
opacity: 1; |
|||
transform: translateX(4rpx); |
|||
} |
|||
|
|||
/* 响应式设计 - 分类区域 */ |
|||
@media (max-width: 750rpx) { |
|||
.category-grid { |
|||
grid-template-columns: repeat(2, 1fr); |
|||
gap: 16rpx; |
|||
} |
|||
|
|||
.category-card { |
|||
padding: 28rpx 20rpx; |
|||
min-height: 130rpx; |
|||
} |
|||
|
|||
.category-name { |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 414rpx) { |
|||
.category-grid { |
|||
grid-template-columns: 1fr; |
|||
gap: 12rpx; |
|||
} |
|||
|
|||
.category-card { |
|||
padding: 24rpx 16rpx; |
|||
min-height: 110rpx; |
|||
} |
|||
|
|||
.category-name { |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
/* 调整规格网格布局，确保不被导航栏遮挡 */ |
|||
.spec-section { |
|||
margin-bottom: 40rpx; |
|||
} |
|||
@ -0,0 +1,486 @@ |
|||
Page({ |
|||
data: { |
|||
productNames: [], |
|||
loading: false, |
|||
error: '', |
|||
category: '', |
|||
priceRange: { // 价格范围
|
|||
min: 0, |
|||
max: 0, |
|||
hasPrice: false |
|||
} |
|||
}, |
|||
|
|||
// 解析规格，提取类型（净重/毛重）和数值范围
|
|||
parseSpecification(spec) { |
|||
const weightMatch = spec.match(/(净重|毛重)(\d+)-(\d+)/); |
|||
if (weightMatch) { |
|||
const type = weightMatch[1]; // 净重或毛重
|
|||
const min = parseFloat(weightMatch[2]); |
|||
const max = parseFloat(weightMatch[3]); |
|||
const avg = (min + max) / 2; |
|||
return { |
|||
type: type, |
|||
min: min, |
|||
max: max, |
|||
avg: avg |
|||
}; |
|||
} |
|||
return null; |
|||
}, |
|||
onLoad(options) { |
|||
// 对分类参数进行 URL 解码
|
|||
const category = options.category ? decodeURIComponent(options.category) : ''; |
|||
this.setData({ category: category }); |
|||
console.log('解码后的分类:', category); |
|||
this.loadProductNames(); |
|||
}, |
|||
|
|||
loadProductNames() { |
|||
this.setData({ |
|||
loading: true, |
|||
error: '', |
|||
productNames: [] // 清空商品名称数据，确保加载时只显示加载状态
|
|||
}); |
|||
|
|||
console.log('开始加载商品列表，当前分类:', this.data.category); |
|||
|
|||
// 尝试从本地存储中获取分类商品映射数据
|
|||
const categoryProductsMap = wx.getStorageSync('evaluate2CategoryProductsMap') || {}; |
|||
|
|||
if (categoryProductsMap && Object.keys(categoryProductsMap).length > 0) { |
|||
console.log('从本地存储获取分类商品映射数据'); |
|||
|
|||
// 获取当前分类下的商品名称列表
|
|||
let productNames = []; |
|||
if (this.data.category) { |
|||
productNames = categoryProductsMap[this.data.category] || []; |
|||
console.log(`分类"${this.data.category}"下的商品数量:`, productNames.length); |
|||
console.log('商品名称列表:', productNames); |
|||
} else { |
|||
// 如果没有分类参数，获取所有商品名称
|
|||
const allProductNames = []; |
|||
Object.values(categoryProductsMap).forEach(names => { |
|||
allProductNames.push(...names); |
|||
}); |
|||
// 去重
|
|||
productNames = [...new Set(allProductNames)]; |
|||
console.log('所有商品数量:', productNames.length); |
|||
} |
|||
|
|||
// 计算价格范围
|
|||
let priceRange = { min: 0, max: 0, hasPrice: false }; |
|||
|
|||
// 从原始商品数据中计算价格范围
|
|||
const allProducts = wx.getStorageSync('allProducts') || []; |
|||
if (allProducts.length > 0) { |
|||
// 过滤出当前分类下的商品
|
|||
const categoryProducts = allProducts.filter(product => { |
|||
if (!product.category) return false; |
|||
const productCategory = String(product.category).trim(); |
|||
return productCategory === this.data.category; |
|||
}); |
|||
|
|||
// 按规格分组计算平均价格
|
|||
const specPriceMap = {}; |
|||
categoryProducts.forEach(product => { |
|||
if (product.price && (product.specification || product.spec)) { |
|||
const priceStr = String(product.price).trim(); |
|||
const specStr = String(product.specification || product.spec).trim(); |
|||
|
|||
// 处理逗号分隔的多个价格
|
|||
const priceArray = priceStr.split(',').map(p => p.trim()).filter(p => p && p.trim() !== ''); |
|||
|
|||
// 处理逗号分隔的多个规格
|
|||
let specs = specStr.split(',').map(spec => spec.trim()).filter(spec => spec.length > 0); |
|||
|
|||
// 进一步处理规格，确保每个规格都是独立的
|
|||
const processedSpecs = []; |
|||
specs.forEach(spec => { |
|||
if (spec.includes('，')) { |
|||
// 按中文逗号分割
|
|||
const subSpecs = spec.split('，').map(s => s.trim()).filter(s => s.length > 0); |
|||
processedSpecs.push(...subSpecs); |
|||
} else { |
|||
processedSpecs.push(spec); |
|||
} |
|||
}); |
|||
specs = processedSpecs; |
|||
|
|||
// 将规格和价格配对
|
|||
specs.forEach((spec, index) => { |
|||
if (spec.length > 0 && index < priceArray.length) { |
|||
const price = priceArray[index]; |
|||
if (price && price.trim() !== '') { |
|||
const priceValue = parseFloat(price); |
|||
if (!isNaN(priceValue)) { |
|||
// 解析规格
|
|||
const specInfo = this.parseSpecification(spec); |
|||
|
|||
// 价格<10的需要按照公式计算
|
|||
let finalPrice = priceValue; |
|||
if (priceValue < 10 && specInfo) { |
|||
if (specInfo.type === '净重') { |
|||
// 净重：规格平均值 × 价格
|
|||
finalPrice = specInfo.avg * priceValue; |
|||
} else if (specInfo.type === '毛重') { |
|||
// 毛重：(规格平均值 - 5) × 价格
|
|||
finalPrice = (specInfo.avg - 5) * priceValue; |
|||
} |
|||
} |
|||
|
|||
// 按规格分组存储价格
|
|||
if (!specPriceMap[spec]) { |
|||
specPriceMap[spec] = []; |
|||
} |
|||
specPriceMap[spec].push(finalPrice); |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
// 计算每个规格的平均价格，然后找出最低和最高
|
|||
const specAvgPrices = []; |
|||
Object.keys(specPriceMap).forEach(spec => { |
|||
const prices = specPriceMap[spec]; |
|||
if (prices.length > 0) { |
|||
const avgPrice = prices.reduce((sum, price) => sum + price, 0) / prices.length; |
|||
specAvgPrices.push(avgPrice); |
|||
} |
|||
}); |
|||
|
|||
if (specAvgPrices.length > 0) { |
|||
priceRange.min = Math.round(Math.min(...specAvgPrices) * 100) / 100; |
|||
priceRange.max = Math.round(Math.max(...specAvgPrices) * 100) / 100; |
|||
priceRange.hasPrice = true; |
|||
} |
|||
} |
|||
|
|||
this.setData({ |
|||
productNames: productNames, |
|||
priceRange: priceRange, |
|||
loading: false |
|||
}); |
|||
|
|||
// 结束下拉刷新
|
|||
wx.stopPullDownRefresh(); |
|||
} else { |
|||
// 如果本地存储中没有数据，尝试从本地存储获取原始商品数据
|
|||
const allProducts = wx.getStorageSync('allProducts') || []; |
|||
|
|||
if (allProducts.length > 0) { |
|||
console.log('从本地存储获取原始商品数据'); |
|||
|
|||
// 过滤出有有效category字段的商品
|
|||
const productsWithCategory = allProducts.filter(product => { |
|||
if (!product.category) return false; |
|||
const categoryStr = String(product.category).trim(); |
|||
return categoryStr !== ''; |
|||
}); |
|||
|
|||
// 移除价格过滤，获取所有商品
|
|||
let filteredProducts = productsWithCategory; |
|||
|
|||
// 如果有分类参数，过滤出该分类下的商品
|
|||
if (this.data.category) { |
|||
console.log('当前分类:', this.data.category); |
|||
const targetCategory = String(this.data.category).trim(); |
|||
filteredProducts = filteredProducts.filter(product => { |
|||
if (!product.category) return false; |
|||
const productCategory = String(product.category).trim(); |
|||
return productCategory === targetCategory; |
|||
}); |
|||
} |
|||
|
|||
// 提取商品名称，支持多种字段
|
|||
const productNames = filteredProducts.map(product => { |
|||
// 尝试从多个字段获取商品名称
|
|||
const nameFields = [product.productName, product.name, product.product]; |
|||
for (const field of nameFields) { |
|||
if (field) { |
|||
const trimmedName = String(field).trim(); |
|||
if (trimmedName !== '') { |
|||
return trimmedName; |
|||
} |
|||
} |
|||
} |
|||
return ''; |
|||
}).filter(name => name !== ''); |
|||
|
|||
// 去重
|
|||
const uniqueProductNames = [...new Set(productNames)]; |
|||
console.log('最终商品名称列表:', uniqueProductNames); |
|||
|
|||
// 计算价格范围
|
|||
let priceRange = { min: 0, max: 0, hasPrice: false }; |
|||
|
|||
// 从过滤后的商品中计算价格范围，按规格分组计算平均价格
|
|||
const specPriceMap = {}; |
|||
filteredProducts.forEach(product => { |
|||
if (product.price && (product.specification || product.spec)) { |
|||
const priceStr = String(product.price).trim(); |
|||
const specStr = String(product.specification || product.spec).trim(); |
|||
|
|||
// 处理逗号分隔的多个价格
|
|||
const priceArray = priceStr.split(',').map(p => p.trim()).filter(p => p && p.trim() !== ''); |
|||
|
|||
// 处理逗号分隔的多个规格
|
|||
let specs = specStr.split(',').map(spec => spec.trim()).filter(spec => spec.length > 0); |
|||
|
|||
// 进一步处理规格，确保每个规格都是独立的
|
|||
const processedSpecs = []; |
|||
specs.forEach(spec => { |
|||
if (spec.includes('，')) { |
|||
// 按中文逗号分割
|
|||
const subSpecs = spec.split('，').map(s => s.trim()).filter(s => s.length > 0); |
|||
processedSpecs.push(...subSpecs); |
|||
} else { |
|||
processedSpecs.push(spec); |
|||
} |
|||
}); |
|||
specs = processedSpecs; |
|||
|
|||
// 将规格和价格配对
|
|||
specs.forEach((spec, index) => { |
|||
if (spec.length > 0 && index < priceArray.length) { |
|||
const price = priceArray[index]; |
|||
if (price && price.trim() !== '') { |
|||
const priceValue = parseFloat(price); |
|||
if (!isNaN(priceValue)) { |
|||
// 解析规格
|
|||
const specInfo = this.parseSpecification(spec); |
|||
|
|||
// 价格<10的需要按照公式计算
|
|||
let finalPrice = priceValue; |
|||
if (priceValue < 10 && specInfo) { |
|||
if (specInfo.type === '净重') { |
|||
// 净重：规格平均值 × 价格
|
|||
finalPrice = specInfo.avg * priceValue; |
|||
} else if (specInfo.type === '毛重') { |
|||
// 毛重：(规格平均值 - 5) × 价格
|
|||
finalPrice = (specInfo.avg - 5) * priceValue; |
|||
} |
|||
} |
|||
|
|||
// 按规格分组存储价格
|
|||
if (!specPriceMap[spec]) { |
|||
specPriceMap[spec] = []; |
|||
} |
|||
specPriceMap[spec].push(finalPrice); |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
// 计算每个规格的平均价格，然后找出最低和最高
|
|||
const specAvgPrices = []; |
|||
Object.keys(specPriceMap).forEach(spec => { |
|||
const prices = specPriceMap[spec]; |
|||
if (prices.length > 0) { |
|||
const avgPrice = prices.reduce((sum, price) => sum + price, 0) / prices.length; |
|||
specAvgPrices.push(avgPrice); |
|||
} |
|||
}); |
|||
|
|||
if (specAvgPrices.length > 0) { |
|||
priceRange.min = Math.round(Math.min(...specAvgPrices) * 100) / 100; |
|||
priceRange.max = Math.round(Math.max(...specAvgPrices) * 100) / 100; |
|||
priceRange.hasPrice = true; |
|||
} |
|||
|
|||
this.setData({ |
|||
productNames: uniqueProductNames, |
|||
priceRange: priceRange, |
|||
loading: false |
|||
}); |
|||
|
|||
// 结束下拉刷新
|
|||
wx.stopPullDownRefresh(); |
|||
} else { |
|||
// 如果本地存储中也没有原始商品数据，调用API获取数据
|
|||
console.log('本地存储中没有数据，调用API获取商品数据...'); |
|||
const api = require('../../utils/api'); |
|||
// 使用正确的参数调用getProducts方法
|
|||
api.getProducts(1, 1000, 'all', '').then(result => { |
|||
console.log('API返回结果:', result); |
|||
|
|||
// 从返回对象中提取products数组，如果不存在则使用空数组
|
|||
const products = result.products || []; |
|||
|
|||
// 过滤出有有效category字段的商品
|
|||
const productsWithCategory = products.filter(product => { |
|||
if (!product.category) return false; |
|||
const categoryStr = String(product.category).trim(); |
|||
return categoryStr !== ''; |
|||
}); |
|||
|
|||
// 移除价格过滤，获取所有商品
|
|||
let filteredProducts = productsWithCategory; |
|||
|
|||
// 如果有分类参数，过滤出该分类下的商品
|
|||
if (this.data.category) { |
|||
console.log('当前分类:', this.data.category); |
|||
const targetCategory = String(this.data.category).trim(); |
|||
filteredProducts = filteredProducts.filter(product => { |
|||
if (!product.category) return false; |
|||
const productCategory = String(product.category).trim(); |
|||
return productCategory === targetCategory; |
|||
}); |
|||
} |
|||
|
|||
// 提取商品名称，支持多种字段
|
|||
const productNames = filteredProducts.map(product => { |
|||
// 尝试从多个字段获取商品名称
|
|||
const nameFields = [product.productName, product.name, product.product]; |
|||
for (const field of nameFields) { |
|||
if (field) { |
|||
const trimmedName = String(field).trim(); |
|||
if (trimmedName !== '') { |
|||
return trimmedName; |
|||
} |
|||
} |
|||
} |
|||
return ''; |
|||
}).filter(name => name !== ''); |
|||
|
|||
// 去重
|
|||
const uniqueProductNames = [...new Set(productNames)]; |
|||
console.log('最终商品名称列表:', uniqueProductNames); |
|||
|
|||
// 计算价格范围
|
|||
let priceRange = { min: 0, max: 0, hasPrice: false }; |
|||
|
|||
// 从过滤后的商品中计算价格范围，按规格分组计算平均价格
|
|||
const specPriceMap = {}; |
|||
filteredProducts.forEach(product => { |
|||
if (product.price && (product.specification || product.spec)) { |
|||
const priceStr = String(product.price).trim(); |
|||
const specStr = String(product.specification || product.spec).trim(); |
|||
|
|||
// 处理逗号分隔的多个价格
|
|||
const priceArray = priceStr.split(',').map(p => p.trim()).filter(p => p && p.trim() !== ''); |
|||
|
|||
// 处理逗号分隔的多个规格
|
|||
let specs = specStr.split(',').map(spec => spec.trim()).filter(spec => spec.length > 0); |
|||
|
|||
// 进一步处理规格，确保每个规格都是独立的
|
|||
const processedSpecs = []; |
|||
specs.forEach(spec => { |
|||
if (spec.includes('，')) { |
|||
// 按中文逗号分割
|
|||
const subSpecs = spec.split('，').map(s => s.trim()).filter(s => s.length > 0); |
|||
processedSpecs.push(...subSpecs); |
|||
} else { |
|||
processedSpecs.push(spec); |
|||
} |
|||
}); |
|||
specs = processedSpecs; |
|||
|
|||
// 将规格和价格配对
|
|||
specs.forEach((spec, index) => { |
|||
if (spec.length > 0 && index < priceArray.length) { |
|||
const price = priceArray[index]; |
|||
if (price && price.trim() !== '') { |
|||
const priceValue = parseFloat(price); |
|||
if (!isNaN(priceValue)) { |
|||
// 解析规格
|
|||
const specInfo = this.parseSpecification(spec); |
|||
|
|||
// 价格<10的需要按照公式计算
|
|||
let finalPrice = priceValue; |
|||
if (priceValue < 10 && specInfo) { |
|||
if (specInfo.type === '净重') { |
|||
// 净重：规格平均值 × 价格
|
|||
finalPrice = specInfo.avg * priceValue; |
|||
} else if (specInfo.type === '毛重') { |
|||
// 毛重：(规格平均值 - 5) × 价格
|
|||
finalPrice = (specInfo.avg - 5) * priceValue; |
|||
} |
|||
} |
|||
|
|||
// 按规格分组存储价格
|
|||
if (!specPriceMap[spec]) { |
|||
specPriceMap[spec] = []; |
|||
} |
|||
specPriceMap[spec].push(finalPrice); |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
// 计算每个规格的平均价格，然后找出最低和最高
|
|||
const specAvgPrices = []; |
|||
Object.keys(specPriceMap).forEach(spec => { |
|||
const prices = specPriceMap[spec]; |
|||
if (prices.length > 0) { |
|||
const avgPrice = prices.reduce((sum, price) => sum + price, 0) / prices.length; |
|||
specAvgPrices.push(avgPrice); |
|||
} |
|||
}); |
|||
|
|||
if (specAvgPrices.length > 0) { |
|||
priceRange.min = Math.round(Math.min(...specAvgPrices) * 100) / 100; |
|||
priceRange.max = Math.round(Math.max(...specAvgPrices) * 100) / 100; |
|||
priceRange.hasPrice = true; |
|||
} |
|||
|
|||
this.setData({ |
|||
productNames: uniqueProductNames, |
|||
priceRange: priceRange, |
|||
loading: false |
|||
}); |
|||
|
|||
// 结束下拉刷新
|
|||
wx.stopPullDownRefresh(); |
|||
}).catch(err => { |
|||
console.error('获取商品列表失败:', err); |
|||
this.setData({ |
|||
error: '获取商品列表失败，请稍后重试', |
|||
loading: false |
|||
}); |
|||
|
|||
// 结束下拉刷新
|
|||
wx.stopPullDownRefresh(); |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
selectProduct(e) { |
|||
const productName = e.currentTarget.dataset.product; |
|||
console.log('选择商品:', productName); |
|||
// 将商品名称和当前分类存储到本地存储
|
|||
wx.setStorageSync('selectedProductName', productName); |
|||
wx.setStorageSync('selectedCategory', this.data.category); // 存储当前分类
|
|||
// 使用wx.switchTab导航到tabBar页面
|
|||
wx.switchTab({ |
|||
url: '/pages/evaluate2/index', |
|||
success: function(res) { |
|||
console.log('跳转成功:', res); |
|||
}, |
|||
fail: function(err) { |
|||
console.error('跳转失败:', err); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 返回分类选择页面
|
|||
goBackToCategories() { |
|||
console.log('返回分类选择页面'); |
|||
wx.redirectTo({ |
|||
url: '/pages/evaluate2/one' |
|||
}); |
|||
}, |
|||
|
|||
// 下拉刷新
|
|||
onPullDownRefresh() { |
|||
console.log('开始下拉刷新'); |
|||
this.loadProductNames(); |
|||
} |
|||
}); |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"usingComponents": {}, |
|||
"enablePullDownRefresh": true, |
|||
"backgroundTextStyle": "dark" |
|||
} |
|||
@ -0,0 +1,72 @@ |
|||
<view class="container"> |
|||
<!-- 头部导航栏 --> |
|||
<view class="header"> |
|||
<view class="header-content" style="width: 800rpx; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 0 20rpx;"> |
|||
<button class="title" bindtap="goBackToCategories">返回分类</button> |
|||
<text class="title">商品选择</text> |
|||
<view style="width: 120rpx;"></view> <!-- 占位，保持标题居中 --> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="content"> |
|||
<!-- 加载中状态 --> |
|||
<view wx:if="{{loading}}" class="loading"> |
|||
<view class="loading-spinner"></view> |
|||
<text class="loading-text">正在加载商品数据...</text> |
|||
</view> |
|||
|
|||
<!-- 错误提示 --> |
|||
<view wx:if="{{error}}" class="error-card"> |
|||
<view class="error-icon">⚠️</view> |
|||
<text class="error-text">{{error}}</text> |
|||
<button bindtap="loadProductNames" class="btn-primary">重新加载</button> |
|||
</view> |
|||
|
|||
<!-- 商品名称列表 --> |
|||
<view wx:else class="product-section"> |
|||
<!-- 当前选择的分类 --> |
|||
<view wx:if="{{category}}" class="current-category"> |
|||
<text class="current-category-label">当前分类：</text> |
|||
<text class="current-category-name">{{category}}</text> |
|||
<!-- 价格范围 --> |
|||
<view wx:if="{{priceRange.hasPrice}}" class="price-range"> |
|||
<text class="price-range-label">价格范围：</text> |
|||
<text class="price-range-value">¥{{priceRange.min}} - ¥{{priceRange.max}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="section-header"> |
|||
<text class="section-title">商品列表</text> |
|||
<text class="section-count">{{productNames.length}}个商品</text> |
|||
</view> |
|||
|
|||
<!-- 有商品时显示网格 --> |
|||
<view wx:if="{{productNames.length > 0}}" class="product-grid"> |
|||
<view |
|||
wx:for="{{productNames}}" |
|||
wx:key="*this" |
|||
class="product-card" |
|||
data-product="{{item}}" |
|||
bindtap="selectProduct" |
|||
> |
|||
<view class="product-icon">🛍️</view> |
|||
<text class="product-name">{{item}}</text> |
|||
<view class="product-arrow">→</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 无商品时显示空状态 --> |
|||
<view wx:if="{{productNames.length === 0}}" class="empty-state"> |
|||
<view class="empty-icon">📦</view> |
|||
<text class="empty-text"> |
|||
{{category ? '该分类下暂无商品' : '暂无商品'}} |
|||
</text> |
|||
<button bindtap="loadProductNames" class="btn-secondary">重新加载</button> |
|||
</view> |
|||
|
|||
<!-- 暂无更多商品提示 --> |
|||
<view wx:if="{{productNames.length > 0}}" class="no-more"> |
|||
<text class="no-more-text">暂无更多商品选择</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,415 @@ |
|||
.container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
min-height: 100vh; |
|||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); |
|||
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; |
|||
overflow-x: hidden; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.header { |
|||
background: #fff; |
|||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08); |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.header-content { |
|||
padding: 30rpx 0; |
|||
text-align: center; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 返回按钮样式 */ |
|||
.back-button { |
|||
width: 120rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
font-size: 24rpx; |
|||
color: #4a90e2; |
|||
background: transparent; |
|||
border: none; |
|||
padding: 0; |
|||
margin: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.back-button:hover { |
|||
color: #3b82f6; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
color: #2c3e50; |
|||
letter-spacing: 2rpx; |
|||
} |
|||
|
|||
.content { |
|||
flex: 1; |
|||
padding: 16rpx; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
/* 加载状态 */ |
|||
.loading { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 160rpx 0; |
|||
} |
|||
|
|||
.loading-spinner { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border: 8rpx solid rgba(74, 144, 226, 0.2); |
|||
border-top: 8rpx solid #4a90e2; |
|||
border-radius: 50%; |
|||
animation: spin 1s linear infinite; |
|||
margin-bottom: 32rpx; |
|||
} |
|||
|
|||
@keyframes spin { |
|||
0% { transform: rotate(0deg); } |
|||
100% { transform: rotate(360deg); } |
|||
} |
|||
|
|||
.loading-text { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 错误提示卡片 */ |
|||
.error-card { |
|||
background: #fff; |
|||
border-radius: 16rpx; |
|||
padding: 48rpx; |
|||
margin: 32rpx 0; |
|||
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08); |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
|||
|
|||
.error-icon { |
|||
font-size: 80rpx; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
.error-text { |
|||
font-size: 28rpx; |
|||
color: #e74c3c; |
|||
margin-bottom: 32rpx; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
/* 按钮样式 */ |
|||
.btn-primary { |
|||
width: 240rpx; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
border-radius: 40rpx; |
|||
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); |
|||
color: #fff; |
|||
border: none; |
|||
box-shadow: 0 4rpx 12rpx rgba(96, 165, 250, 0.4); |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.btn-primary:hover { |
|||
transform: translateY(-2rpx); |
|||
box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.5); |
|||
} |
|||
|
|||
/* 商品列表区域 */ |
|||
.product-section { |
|||
margin-top: 24rpx; |
|||
} |
|||
|
|||
/* 当前选择的分类 */ |
|||
.current-category { |
|||
display: flex; |
|||
align-items: center; |
|||
background: rgba(74, 144, 226, 0.1); |
|||
padding: 16rpx 20rpx; |
|||
border-radius: 12rpx; |
|||
margin-bottom: 20rpx; |
|||
border-left: 6rpx solid #4a90e2; |
|||
} |
|||
|
|||
.current-category-label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
.current-category-name { |
|||
font-size: 26rpx; |
|||
font-weight: 600; |
|||
color: #4a90e2; |
|||
} |
|||
|
|||
/* 价格范围 */ |
|||
.price-range { |
|||
margin-top: 8rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.price-range-label { |
|||
font-size: 22rpx; |
|||
color: #666; |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
.price-range-value { |
|||
font-size: 22rpx; |
|||
font-weight: 500; |
|||
color: #ff6b81; |
|||
} |
|||
|
|||
.section-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 24rpx; |
|||
padding: 0 8rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 30rpx; |
|||
font-weight: 700; |
|||
color: #2c3e50; |
|||
padding-left: 16rpx; |
|||
border-left: 6rpx solid #4a90e2; |
|||
} |
|||
|
|||
.section-count { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
background: rgba(74, 144, 226, 0.1); |
|||
padding: 6rpx 16rpx; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
/* 商品网格布局 */ |
|||
.product-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 20rpx; |
|||
margin-top: 16rpx; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
/* 商品卡片 */ |
|||
.product-card { |
|||
background: rgba(255, 255, 255, 0.95); |
|||
border-radius: 20rpx; |
|||
padding: 32rpx 24rpx; |
|||
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08); |
|||
transition: all 0.3s ease; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
text-align: center; |
|||
min-height: 180rpx; |
|||
backdrop-filter: blur(8rpx); |
|||
border: 1rpx solid rgba(255, 255, 255, 0.3); |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.product-card::before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 6rpx; |
|||
background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%); |
|||
} |
|||
|
|||
.product-card:hover { |
|||
transform: translateY(-6rpx); |
|||
box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.15); |
|||
background: rgba(255, 255, 255, 1); |
|||
} |
|||
|
|||
.product-card:active { |
|||
transform: translateY(-2rpx); |
|||
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12); |
|||
} |
|||
|
|||
.product-icon { |
|||
font-size: 72rpx; |
|||
margin-bottom: 20rpx; |
|||
opacity: 0.9; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.product-card:hover .product-icon { |
|||
transform: scale(1.1); |
|||
opacity: 1; |
|||
} |
|||
|
|||
.product-name { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #2c3e50; |
|||
line-height: 1.4; |
|||
word-break: break-word; |
|||
margin-bottom: 20rpx; |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 0 8rpx; |
|||
} |
|||
|
|||
.product-arrow { |
|||
position: absolute; |
|||
bottom: 20rpx; |
|||
right: 24rpx; |
|||
font-size: 28rpx; |
|||
color: #4a90e2; |
|||
font-weight: bold; |
|||
opacity: 0.6; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.product-card:hover .product-arrow { |
|||
opacity: 1; |
|||
transform: translateX(4rpx); |
|||
} |
|||
|
|||
/* 响应式设计 */ |
|||
@media (max-width: 750rpx) { |
|||
.content { |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.product-grid { |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 16rpx; |
|||
} |
|||
|
|||
.product-card { |
|||
padding: 28rpx 20rpx; |
|||
min-height: 160rpx; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.product-name { |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.product-icon { |
|||
font-size: 60rpx; |
|||
} |
|||
} |
|||
|
|||
/* 小屏幕设备适配 */ |
|||
@media (max-width: 414rpx) { |
|||
.product-grid { |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 12rpx; |
|||
} |
|||
|
|||
.product-card { |
|||
padding: 20rpx 16rpx; |
|||
min-height: 140rpx; |
|||
} |
|||
|
|||
.product-name { |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.product-icon { |
|||
font-size: 50rpx; |
|||
} |
|||
} |
|||
|
|||
/* 暂无更多商品提示 */ |
|||
.no-more { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 48rpx 0; |
|||
margin-top: 16rpx; |
|||
} |
|||
|
|||
.no-more-text { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
background: rgba(0, 0, 0, 0.03); |
|||
padding: 12rpx 32rpx; |
|||
border-radius: 30rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 空状态 */ |
|||
.empty-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 160rpx 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.empty-icon { |
|||
font-size: 160rpx; |
|||
margin-bottom: 40rpx; |
|||
opacity: 0.6; |
|||
} |
|||
|
|||
.empty-text { |
|||
font-size: 32rpx; |
|||
color: #666; |
|||
margin-bottom: 48rpx; |
|||
line-height: 1.4; |
|||
padding: 0 40rpx; |
|||
} |
|||
|
|||
.btn-secondary { |
|||
width: 200rpx; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
border-radius: 40rpx; |
|||
background: #fff; |
|||
color: #4a90e2; |
|||
border: 2rpx solid #4a90e2; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.btn-secondary:hover { |
|||
background: rgba(74, 144, 226, 0.05); |
|||
transform: translateY(-2rpx); |
|||
} |
|||
@ -0,0 +1,102 @@ |
|||
Page({ |
|||
data: { |
|||
productName: '', |
|||
specification: '', |
|||
price: 0, |
|||
quantity: 1, |
|||
totalPrice: 0, |
|||
loading: false, |
|||
error: '' |
|||
}, |
|||
onLoad(options) { |
|||
console.log('接收到的参数:', options); |
|||
// 即使参数不完整，也要尝试获取并设置
|
|||
const productName = options.productName ? decodeURIComponent(options.productName) : ''; |
|||
const specification = options.specification ? decodeURIComponent(options.specification) : ''; |
|||
let price = 0; |
|||
|
|||
if (options.price) { |
|||
const decodedPrice = decodeURIComponent(options.price); |
|||
console.log('解码后的价格:', decodedPrice); |
|||
price = parseFloat(decodedPrice) || 0; |
|||
} |
|||
|
|||
console.log('解析后的参数:', { productName, specification, price }); |
|||
|
|||
this.setData({ |
|||
productName: productName, |
|||
specification: specification, |
|||
price: price, |
|||
totalPrice: 0 // 初始时总价为0，不显示
|
|||
}); |
|||
}, |
|||
|
|||
// 件数输入变化
|
|||
onQuantityChange(e) { |
|||
const quantity = parseInt(e.detail.value) || 1; |
|||
this.setData({ |
|||
quantity: quantity |
|||
// 只更新件数，不更新总价，等待点击计算按钮
|
|||
}); |
|||
}, |
|||
|
|||
// 减少数量
|
|||
decreaseQuantity() { |
|||
if (this.data.quantity > 1) { |
|||
this.setData({ |
|||
quantity: this.data.quantity - 1 |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 增加数量
|
|||
increaseQuantity() { |
|||
this.setData({ |
|||
quantity: this.data.quantity + 1 |
|||
}); |
|||
}, |
|||
|
|||
// 计算价格
|
|||
calculatePrice() { |
|||
const totalPrice = Math.round(this.data.price * this.data.quantity * 10) / 10; |
|||
this.setData({ |
|||
totalPrice: totalPrice |
|||
}); |
|||
wx.showToast({ |
|||
title: '计算完成', |
|||
icon: 'success', |
|||
duration: 1000 |
|||
}); |
|||
}, |
|||
|
|||
// 返回上一页
|
|||
goBack() { |
|||
wx.navigateBack(); |
|||
}, |
|||
|
|||
// 下拉刷新
|
|||
onPullDownRefresh() { |
|||
console.log('开始下拉刷新'); |
|||
// 重新加载页面数据
|
|||
// 由于spec-detail页面的数据是通过URL参数传递的，这里可以重新获取参数并设置数据
|
|||
const options = this.options || {}; |
|||
const productName = options.productName ? decodeURIComponent(options.productName) : ''; |
|||
const specification = options.specification ? decodeURIComponent(options.specification) : ''; |
|||
let price = 0; |
|||
|
|||
if (options.price) { |
|||
const decodedPrice = decodeURIComponent(options.price); |
|||
price = parseFloat(decodedPrice) || 0; |
|||
} |
|||
|
|||
this.setData({ |
|||
productName: productName, |
|||
specification: specification, |
|||
price: price, |
|||
totalPrice: 0 // 初始时总价为0，不显示
|
|||
}); |
|||
|
|||
// 结束下拉刷新
|
|||
wx.stopPullDownRefresh(); |
|||
} |
|||
}); |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"usingComponents": {}, |
|||
"enablePullDownRefresh": true, |
|||
"backgroundTextStyle": "dark" |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
<view class="page-container"> |
|||
<!-- 头部导航栏 --> |
|||
<view class="page-header"> |
|||
<text class="header-title">{{productName || '规格详情'}}</text> |
|||
</view> |
|||
|
|||
<!-- 主要内容区域 --> |
|||
<view class="main-content"> |
|||
<!-- 规格信息卡片 --> |
|||
<view class="info-card"> |
|||
<text class="card-subtitle">规格信息</text> |
|||
<view class="info-row"> |
|||
<text class="info-label">规格</text> |
|||
<text class="info-value">{{specification}}</text> |
|||
</view> |
|||
<view class="info-row"> |
|||
<text class="info-label">单价</text> |
|||
<text class="info-value price">¥{{price || 0}}</text> |
|||
</view> |
|||
<text class="info-hint">您已选择此规格进行估价</text> |
|||
</view> |
|||
|
|||
<!-- 数量设置卡片 --> |
|||
<view class="control-card"> |
|||
<text class="card-subtitle">数量设置</text> |
|||
<view class="quantity-box"> |
|||
<button bindtap="decreaseQuantity" class="quantity-btn minus" style="width: 180rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">-</button> |
|||
<input style="width: 420rpx; display: block; box-sizing: border-box" |
|||
class="quantity-input" |
|||
type="number" |
|||
value="{{quantity}}" |
|||
bindinput="onQuantityChange" |
|||
min="1" |
|||
/> |
|||
<button bindtap="increaseQuantity" class="quantity-btn plus" style="width: 180rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">+</button> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 计算按钮 --> |
|||
<view class="button-section"> |
|||
<button bindtap="calculatePrice" class="primary-btn" style="height: 120rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx">计算预估价格</button> |
|||
</view> |
|||
|
|||
<!-- 结果展示卡片 --> |
|||
<view class="result-card" wx:if="{{totalPrice > 0}}"> |
|||
<text class="card-subtitle">预估结果</text> |
|||
<view class="result-row"> |
|||
<text class="result-label">预估总价</text> |
|||
<text class="result-value">¥{{totalPrice}}</text> |
|||
</view> |
|||
<text class="result-hint">此价格为预估价格，实际价格可能会有所变动</text> |
|||
</view> |
|||
|
|||
<!-- 返回按钮 --> |
|||
<view class="button-section bottom"> |
|||
<button bindtap="goBack" class="secondary-btn" style="height: 120rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx">返回规格列表</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,401 @@ |
|||
/* 页面容器 */ |
|||
.page-container { |
|||
min-height: 100vh; |
|||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); |
|||
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; |
|||
display: flex; |
|||
flex-direction: column; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 头部样式 */ |
|||
.page-header { |
|||
background: rgba(255, 255, 255, 0.95); |
|||
backdrop-filter: blur(10rpx); |
|||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05); |
|||
padding: 28rpx 0; |
|||
text-align: center; |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.header-title { |
|||
font-size: 30rpx; |
|||
font-weight: 700; |
|||
color: #2c3e50; |
|||
letter-spacing: 1rpx; |
|||
} |
|||
|
|||
/* 主要内容区域 */ |
|||
.main-content { |
|||
flex: 1; |
|||
padding: 24rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 24rpx; |
|||
padding-bottom: 48rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 卡片基础样式 */ |
|||
.info-card, |
|||
.control-card, |
|||
.result-card { |
|||
background: rgba(255, 255, 255, 0.95); |
|||
border-radius: 24rpx; |
|||
padding: 32rpx; |
|||
box-shadow: 0 6rpx 24rpx rgba(0,0,0,0.08); |
|||
backdrop-filter: blur(12rpx); |
|||
border: 1rpx solid rgba(255, 255, 255, 0.4); |
|||
transition: all 0.3s ease; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.info-card:hover, |
|||
.control-card:hover, |
|||
.result-card:hover { |
|||
box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12); |
|||
transform: translateY(-4rpx); |
|||
background: rgba(255, 255, 255, 0.98); |
|||
} |
|||
|
|||
/* 卡片标题 */ |
|||
.card-subtitle { |
|||
font-size: 26rpx; |
|||
font-weight: 600; |
|||
color: #64748b; |
|||
margin-bottom: 24rpx; |
|||
padding-bottom: 16rpx; |
|||
border-bottom: 1rpx solid #f1f5f9; |
|||
} |
|||
|
|||
/* 信息行样式 */ |
|||
.info-row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 16rpx 0; |
|||
border-bottom: 1rpx solid #f8fafc; |
|||
} |
|||
|
|||
.info-row:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.info-label { |
|||
font-size: 26rpx; |
|||
color: #64748b; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 26rpx; |
|||
font-weight: 600; |
|||
color: #2c3e50; |
|||
} |
|||
|
|||
.info-value.price { |
|||
color: #ef4444; |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
/* 提示信息 */ |
|||
.info-hint { |
|||
font-size: 22rpx; |
|||
color: #94a3b8; |
|||
text-align: center; |
|||
margin-top: 20rpx; |
|||
padding-top: 20rpx; |
|||
border-top: 1rpx solid #f1f5f9; |
|||
} |
|||
|
|||
/* 数量控制 */ |
|||
.quantity-box { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 24rpx; |
|||
margin-top: 12rpx; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.quantity-btn { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 40rpx; |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
background: rgba(255, 255, 255, 0.9); |
|||
color: #3b82f6; |
|||
border: 2rpx solid rgba(96, 165, 250, 0.4); |
|||
backdrop-filter: blur(12rpx); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
transition: all 0.3s ease; |
|||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08); |
|||
} |
|||
|
|||
.quantity-btn:hover { |
|||
background: rgba(59, 130, 246, 0.1); |
|||
border-color: rgba(59, 130, 246, 0.6); |
|||
transform: scale(1.1); |
|||
} |
|||
|
|||
.quantity-btn.minus:hover { |
|||
background: rgba(239, 68, 68, 0.1); |
|||
border-color: rgba(239, 68, 68, 0.6); |
|||
color: #ef4444; |
|||
} |
|||
|
|||
.quantity-btn.plus:hover { |
|||
background: rgba(16, 185, 129, 0.1); |
|||
border-color: rgba(16, 185, 129, 0.6); |
|||
color: #10b981; |
|||
} |
|||
|
|||
.quantity-input { |
|||
width: 160rpx; |
|||
height: 80rpx; |
|||
border: 2rpx solid rgba(96, 165, 250, 0.4); |
|||
border-radius: 16rpx; |
|||
padding: 0 24rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
text-align: center; |
|||
color: #2c3e50; |
|||
background: rgba(255, 255, 255, 0.95); |
|||
backdrop-filter: blur(12rpx); |
|||
box-shadow: inset 0 2rpx 8rpx rgba(0,0,0,0.08); |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/* 按钮区域 */ |
|||
.button-section { |
|||
margin-top: 12rpx; |
|||
} |
|||
|
|||
.button-section.bottom { |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
/* 按钮样式 */ |
|||
.primary-btn { |
|||
width: 100%; |
|||
height: 92rpx; |
|||
line-height: 92rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
border-radius: 46rpx; |
|||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); |
|||
color: #fff; |
|||
border: none; |
|||
box-shadow: 0 6rpx 24rpx rgba(59, 130, 246, 0.4); |
|||
transition: all 0.3s ease; |
|||
text-align: center; |
|||
} |
|||
|
|||
.primary-btn:hover { |
|||
transform: translateY(-4rpx); |
|||
box-shadow: 0 8rpx 32rpx rgba(59, 130, 246, 0.5); |
|||
} |
|||
|
|||
.secondary-btn { |
|||
width: 100%; |
|||
height: 84rpx; |
|||
line-height: 84rpx; |
|||
font-size: 26rpx; |
|||
font-weight: 600; |
|||
border-radius: 42rpx; |
|||
background: rgba(255, 255, 255, 0.95); |
|||
color: #3b82f6; |
|||
border: 2rpx solid rgba(59, 130, 246, 0.4); |
|||
backdrop-filter: blur(12rpx); |
|||
transition: all 0.3s ease; |
|||
text-align: center; |
|||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08); |
|||
} |
|||
|
|||
.secondary-btn:hover { |
|||
background: rgba(59, 130, 246, 0.08); |
|||
border-color: rgba(59, 130, 246, 0.6); |
|||
transform: translateY(-4rpx); |
|||
box-shadow: 0 6rpx 24rpx rgba(59, 130, 246, 0.3); |
|||
} |
|||
|
|||
/* 结果卡片 */ |
|||
.result-card { |
|||
animation: fadeInUp 0.6s ease-out; |
|||
} |
|||
|
|||
@keyframes fadeInUp { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(30rpx); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* 结果行 */ |
|||
.result-row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 20rpx 0; |
|||
} |
|||
|
|||
.result-label { |
|||
font-size: 26rpx; |
|||
color: #64748b; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.result-value { |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
color: #ef4444; |
|||
text-shadow: 0 2rpx 4rpx rgba(239, 68, 68, 0.2); |
|||
} |
|||
|
|||
/* 结果提示 */ |
|||
.result-hint { |
|||
font-size: 22rpx; |
|||
color: #94a3b8; |
|||
text-align: center; |
|||
margin-top: 16rpx; |
|||
padding-top: 16rpx; |
|||
border-top: 1rpx solid #f1f5f9; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
/* 响应式设计 */ |
|||
@media (max-width: 750rpx) { |
|||
.main-content { |
|||
padding: 20rpx; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.info-card, |
|||
.control-card, |
|||
.result-card { |
|||
padding: 28rpx; |
|||
} |
|||
|
|||
.header-title { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.card-subtitle { |
|||
font-size: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.info-label, |
|||
.info-value { |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.info-value.price { |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
.result-value { |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.quantity-box { |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.quantity-btn { |
|||
width: 72rpx; |
|||
height: 72rpx; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.quantity-input { |
|||
width: 140rpx; |
|||
height: 72rpx; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.primary-btn { |
|||
height: 84rpx; |
|||
line-height: 84rpx; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.secondary-btn { |
|||
height: 76rpx; |
|||
line-height: 76rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
|
|||
/* 小屏幕设备适配 */ |
|||
@media (max-width: 375rpx) { |
|||
.main-content { |
|||
padding: 16rpx; |
|||
gap: 16rpx; |
|||
} |
|||
|
|||
.info-card, |
|||
.control-card, |
|||
.result-card { |
|||
padding: 24rpx; |
|||
} |
|||
|
|||
.header-title { |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.card-subtitle { |
|||
font-size: 22rpx; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.info-label, |
|||
.info-value { |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
.info-value.price { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.result-value { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.quantity-box { |
|||
gap: 16rpx; |
|||
} |
|||
|
|||
.quantity-btn { |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.quantity-input { |
|||
width: 120rpx; |
|||
height: 64rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.primary-btn { |
|||
height: 76rpx; |
|||
line-height: 76rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.secondary-btn { |
|||
height: 68rpx; |
|||
line-height: 68rpx; |
|||
font-size: 22rpx; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue