徐飞洋
3 months ago
7 changed files with 1140 additions and 137 deletions
@ -0,0 +1,440 @@ |
|||||
|
// pages/goods-detail/goods-detail.js
|
||||
|
const API = require('../../utils/api.js') |
||||
|
|
||||
|
// 格式化毛重显示的辅助函数
|
||||
|
function formatGrossWeight(grossWeight, weight) { |
||||
|
console.log('===== formatGrossWeight 函数调用 ====='); |
||||
|
console.log('输入参数:'); |
||||
|
console.log('- grossWeight:', grossWeight, '(类型:', typeof grossWeight, ')'); |
||||
|
console.log('- weight:', weight, '(类型:', typeof weight, ')'); |
||||
|
|
||||
|
// 1. 优先使用grossWeight，只要它不是null、不是undefined、不是空字符串
|
||||
|
if (grossWeight !== null && grossWeight !== undefined && grossWeight !== '') { |
||||
|
console.log('使用grossWeight参数'); |
||||
|
return grossWeight; |
||||
|
} |
||||
|
// 如果grossWeight无效，尝试使用weight字段
|
||||
|
if (weight !== null && weight !== undefined && weight !== '') { |
||||
|
console.log('使用weight参数'); |
||||
|
return weight; |
||||
|
} |
||||
|
|
||||
|
// 3. 新增逻辑：如果grossWeight和weight都无效，返回空字符串以支持文字输入
|
||||
|
console.log('两个参数都无效，返回空字符串'); |
||||
|
return ""; |
||||
|
} |
||||
|
|
||||
|
Page({ |
||||
|
data: { |
||||
|
goodsDetail: {}, // 当前商品详情
|
||||
|
showImagePreview: false, // 控制图片预览弹窗显示
|
||||
|
previewImageUrls: [], // 预览的图片URL列表
|
||||
|
previewImageIndex: 0, // 当前预览图片的索引
|
||||
|
// 图片缩放相关状态
|
||||
|
scale: 1, // 当前缩放比例
|
||||
|
lastScale: 1, // 上一次缩放比例
|
||||
|
startDistance: 0, // 双指起始距离
|
||||
|
doubleTapTimer: null, // 双击计时器
|
||||
|
lastTapTime: 0, // 上一次单击时间
|
||||
|
isScaling: false, // 是否正在缩放中
|
||||
|
offsetX: 0, // X轴偏移量
|
||||
|
offsetY: 0, // Y轴偏移量
|
||||
|
initialTouch: null, // 初始触摸点
|
||||
|
}, |
||||
|
|
||||
|
onLoad(options) { |
||||
|
console.log('商品详情页面加载，参数:', options); |
||||
|
|
||||
|
// 支持两种参数传递方式：直接传递商品数据或仅传递商品ID
|
||||
|
if (options.goodsData) { |
||||
|
try { |
||||
|
// 解析JSON字符串为商品对象
|
||||
|
const goodsData = JSON.parse(decodeURIComponent(options.goodsData)); |
||||
|
console.log('解析后的商品数据:', goodsData); |
||||
|
|
||||
|
// 设置商品详情数据
|
||||
|
this.setData({ |
||||
|
goodsDetail: goodsData |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
console.error('解析商品数据失败:', error); |
||||
|
wx.showToast({ |
||||
|
title: '数据解析错误', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
// 2秒后返回上一页
|
||||
|
setTimeout(() => { |
||||
|
wx.navigateBack(); |
||||
|
}, 2000); |
||||
|
} |
||||
|
} else if (options.id) { |
||||
|
// 如果只传递了商品ID，则从服务器加载商品详情
|
||||
|
this.loadGoodsDetail(options.id); |
||||
|
} else { |
||||
|
wx.showToast({ |
||||
|
title: '参数错误', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
// 2秒后返回上一页
|
||||
|
setTimeout(() => { |
||||
|
wx.navigateBack(); |
||||
|
}, 2000); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加载商品详情
|
||||
|
loadGoodsDetail(goodsId) { |
||||
|
wx.showLoading({ |
||||
|
title: '加载中', |
||||
|
}); |
||||
|
|
||||
|
API.getProductDetail({ productId: goodsId }) |
||||
|
.then(res => { |
||||
|
console.log('获取商品详情成功:', res); |
||||
|
if (res && res.code === 200 && res.data) { |
||||
|
// 从本地存储获取已预约商品ID列表
|
||||
|
const reservedGoodsIds = wx.getStorageSync('reservedGoodsIds') || []; |
||||
|
const product = res.data; |
||||
|
|
||||
|
// 确保商品ID的一致性
|
||||
|
const productIdStr = String(product.productId || product.id); |
||||
|
|
||||
|
// 增强的预约人数计算逻辑
|
||||
|
const selectedValue = product.selected; |
||||
|
const reservedCountValue = product.reservedCount; |
||||
|
const reservationCountValue = product.reservationCount; |
||||
|
|
||||
|
const finalReservationCount = selectedValue !== undefined && selectedValue !== null ? selectedValue : |
||||
|
(reservedCountValue !== undefined && reservedCountValue !== null ? reservedCountValue : |
||||
|
(reservationCountValue || 0)); |
||||
|
|
||||
|
// 处理grossWeight为null或无效的情况，返回空字符串以支持文字输入
|
||||
|
const grossWeightValue = product.grossWeight !== null && product.grossWeight !== undefined ? product.grossWeight : ''; |
||||
|
|
||||
|
// 转换商品数据格式
|
||||
|
const formattedGoods = { |
||||
|
id: productIdStr, |
||||
|
productId: productIdStr, |
||||
|
name: product.productName, |
||||
|
price: product.price, |
||||
|
minOrder: product.quantity, |
||||
|
yolk: product.yolk, |
||||
|
spec: product.specification, |
||||
|
region: product.region, |
||||
|
contact_phone: product.contactPhone, |
||||
|
product_contact: product.contactName, |
||||
|
imageUrls: product.images || [], |
||||
|
displayGrossWeight: formatGrossWeight(grossWeightValue, product.weight), |
||||
|
isReserved: reservedGoodsIds.some(itemId => String(itemId) === productIdStr), |
||||
|
reservedCount: finalReservationCount, |
||||
|
created_at: product.createdAt, |
||||
|
updated_at: product.updatedAt |
||||
|
}; |
||||
|
|
||||
|
this.setData({ |
||||
|
goodsDetail: formattedGoods |
||||
|
}); |
||||
|
} else { |
||||
|
wx.showToast({ |
||||
|
title: '获取商品详情失败', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.error('获取商品详情失败:', err); |
||||
|
wx.showToast({ |
||||
|
title: '获取商品详情失败', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
wx.hideLoading(); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 预览图片
|
||||
|
previewImage(e) { |
||||
|
console.log('预览图片事件:', e); |
||||
|
const { urls, index } = e.currentTarget.dataset; |
||||
|
if (!urls || urls.length === 0) { |
||||
|
wx.showToast({ |
||||
|
title: '没有图片可预览', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.setData({ |
||||
|
showImagePreview: true, |
||||
|
previewImageUrls: urls, |
||||
|
previewImageIndex: index || 0, |
||||
|
// 重置图片缩放状态
|
||||
|
scale: 1, |
||||
|
offsetX: 0, |
||||
|
offsetY: 0, |
||||
|
isScaling: false |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 关闭图片预览
|
||||
|
closeImagePreview() { |
||||
|
this.setData({ |
||||
|
showImagePreview: false, |
||||
|
// 重置图片缩放状态
|
||||
|
scale: 1, |
||||
|
offsetX: 0, |
||||
|
offsetY: 0, |
||||
|
isScaling: false |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 图片预览切换
|
||||
|
onPreviewImageChange(e) { |
||||
|
console.log('图片预览切换:', e); |
||||
|
this.setData({ |
||||
|
previewImageIndex: e.detail.current, |
||||
|
// 重置当前图片的缩放状态
|
||||
|
scale: 1, |
||||
|
offsetX: 0, |
||||
|
offsetY: 0, |
||||
|
isScaling: false |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 处理图片点击事件（双击放大/缩小）
|
||||
|
handleImageTap(e) { |
||||
|
console.log('图片点击事件:', e); |
||||
|
const now = Date.now(); |
||||
|
const DOUBLE_TAP_DELAY = 300; |
||||
|
|
||||
|
// 检查是否为双击
|
||||
|
if (now - this.lastTapTime < DOUBLE_TAP_DELAY) { |
||||
|
// 双击事件
|
||||
|
if (this.doubleTapTimer) { |
||||
|
clearTimeout(this.doubleTapTimer); |
||||
|
} |
||||
|
|
||||
|
// 切换缩放状态
|
||||
|
const newScale = this.data.scale === 1 ? 2 : 1; |
||||
|
this.setData({ |
||||
|
scale: newScale, |
||||
|
isScaling: false |
||||
|
}); |
||||
|
} else { |
||||
|
// 单击事件，设置双击计时器
|
||||
|
if (this.doubleTapTimer) { |
||||
|
clearTimeout(this.doubleTapTimer); |
||||
|
} |
||||
|
|
||||
|
this.doubleTapTimer = setTimeout(() => { |
||||
|
// 单击后300毫秒内没有第二次点击，视为单击
|
||||
|
// 可以在这里添加单击事件的处理逻辑
|
||||
|
}, DOUBLE_TAP_DELAY); |
||||
|
} |
||||
|
|
||||
|
this.lastTapTime = now; |
||||
|
}, |
||||
|
|
||||
|
// 计算两点之间的距离
|
||||
|
getDistance(point1, point2) { |
||||
|
const dx = point2.clientX - point1.clientX; |
||||
|
const dy = point2.clientY - point1.clientY; |
||||
|
return Math.sqrt(dx * dx + dy * dy); |
||||
|
}, |
||||
|
|
||||
|
// 处理触摸开始事件
|
||||
|
handleTouchStart(e) { |
||||
|
console.log('触摸开始事件:', e); |
||||
|
if (e.touches.length === 2) { |
||||
|
// 双指触摸，计算初始距离
|
||||
|
this.setData({ |
||||
|
startDistance: this.getDistance(e.touches[0], e.touches[1]), |
||||
|
lastScale: this.data.scale, |
||||
|
isScaling: true |
||||
|
}); |
||||
|
} else if (e.touches.length === 1) { |
||||
|
// 单指触摸，记录初始位置
|
||||
|
this.setData({ |
||||
|
initialTouch: { |
||||
|
x: e.touches[0].clientX, |
||||
|
y: e.touches[0].clientY |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 处理触摸移动事件
|
||||
|
handleTouchMove(e) { |
||||
|
console.log('触摸移动事件:', e); |
||||
|
const touches = e.touches; |
||||
|
|
||||
|
if (touches.length === 1 && this.data.initialTouch && this.data.scale !== 1) { |
||||
|
// 单指拖动（只有在缩放状态下才允许拖动）
|
||||
|
const deltaX = touches[0].clientX - this.data.initialTouch.x; |
||||
|
const deltaY = touches[0].clientY - this.data.initialTouch.y; |
||||
|
|
||||
|
// 计算新的偏移量
|
||||
|
let newOffsetX = this.data.offsetX + deltaX; |
||||
|
let newOffsetY = this.data.offsetY + deltaY; |
||||
|
|
||||
|
// 边界限制
|
||||
|
const windowWidth = wx.getSystemInfoSync().windowWidth; |
||||
|
const windowHeight = wx.getSystemInfoSync().windowHeight; |
||||
|
const maxOffsetX = (windowWidth * (this.data.scale - 1)) / 2; |
||||
|
const maxOffsetY = (windowHeight * (this.data.scale - 1)) / 2; |
||||
|
|
||||
|
newOffsetX = Math.max(-maxOffsetX, Math.min(maxOffsetX, newOffsetX)); |
||||
|
newOffsetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, newOffsetY)); |
||||
|
|
||||
|
this.setData({ |
||||
|
offsetX: newOffsetX, |
||||
|
offsetY: newOffsetY, |
||||
|
initialTouch: { |
||||
|
x: touches[0].clientX, |
||||
|
y: touches[0].clientY |
||||
|
} |
||||
|
}); |
||||
|
} else if (touches.length === 2) { |
||||
|
// 双指缩放
|
||||
|
const currentDistance = this.getDistance(touches[0], touches[1]); |
||||
|
const scale = (currentDistance / this.data.startDistance) * this.data.lastScale; |
||||
|
|
||||
|
// 限制缩放范围在0.5倍到3倍之间
|
||||
|
const newScale = Math.max(0.5, Math.min(3, scale)); |
||||
|
|
||||
|
this.setData({ |
||||
|
scale: newScale, |
||||
|
isScaling: true |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 处理触摸结束事件
|
||||
|
handleTouchEnd(e) { |
||||
|
console.log('触摸结束事件:', e); |
||||
|
if (e.touches.length === 0) { |
||||
|
// 触摸结束，更新最后缩放比例
|
||||
|
this.setData({ |
||||
|
lastScale: this.data.scale, |
||||
|
isScaling: false, |
||||
|
initialTouch: null |
||||
|
}); |
||||
|
} else if (e.touches.length === 1) { |
||||
|
// 单指触摸结束，保留初始触摸点
|
||||
|
this.setData({ |
||||
|
initialTouch: { |
||||
|
x: e.touches[0].clientX, |
||||
|
y: e.touches[0].clientY |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 拨打电话
|
||||
|
makePhoneCall(e) { |
||||
|
console.log('拨打电话事件:', e); |
||||
|
const phoneNumber = e.currentTarget.dataset.phone; |
||||
|
if (phoneNumber) { |
||||
|
wx.showModal({ |
||||
|
title: '联系人电话', |
||||
|
content: phoneNumber, |
||||
|
showCancel: true, |
||||
|
cancelText: '取消', |
||||
|
confirmText: '拨打', |
||||
|
success: (res) => { |
||||
|
if (res.confirm) { |
||||
|
wx.makePhoneCall({ |
||||
|
phoneNumber: phoneNumber, |
||||
|
success: () => { |
||||
|
console.log('拨打电话成功'); |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
console.error('拨打电话失败', err); |
||||
|
wx.showToast({ |
||||
|
title: '拨打电话失败', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 我想要（预约）
|
||||
|
onClickWantInDetail(e) { |
||||
|
console.log('我想要事件:', e); |
||||
|
const { id } = e.currentTarget.dataset; |
||||
|
if (!id) return; |
||||
|
|
||||
|
// 从本地存储获取openid
|
||||
|
const openid = wx.getStorageSync('openid'); |
||||
|
console.log('openid:', openid); |
||||
|
|
||||
|
// 检查是否已登录
|
||||
|
if (!openid) { |
||||
|
// 如果未登录，显示授权登录弹窗
|
||||
|
this.setData({ showAuthModal: true }); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 获取已预约商品ID列表
|
||||
|
let reservedGoodsIds = wx.getStorageSync('reservedGoodsIds') || []; |
||||
|
|
||||
|
// 检查是否已经预约过
|
||||
|
if (reservedGoodsIds.some(itemId => String(itemId) === String(id))) { |
||||
|
wx.showToast({ |
||||
|
title: '您已经预约过该商品', |
||||
|
icon: 'none', |
||||
|
duration: 1500 |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 添加到已预约列表
|
||||
|
reservedGoodsIds.push(id); |
||||
|
wx.setStorageSync('reservedGoodsIds', reservedGoodsIds); |
||||
|
|
||||
|
// 更新页面状态
|
||||
|
this.setData({ |
||||
|
'goodsDetail.isReserved': true |
||||
|
}); |
||||
|
|
||||
|
// 调用API记录预约
|
||||
|
API.reserveProduct({ id: id }) |
||||
|
.then(res => { |
||||
|
console.log('预约成功:', res); |
||||
|
wx.showToast({ |
||||
|
title: '预约成功', |
||||
|
icon: 'success', |
||||
|
duration: 1500 |
||||
|
}); |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.error('预约失败:', err); |
||||
|
// 如果API调用失败，从本地列表中移除
|
||||
|
reservedGoodsIds = reservedGoodsIds.filter(itemId => String(itemId) !== String(id)); |
||||
|
wx.setStorageSync('reservedGoodsIds', reservedGoodsIds); |
||||
|
// 更新页面状态
|
||||
|
this.setData({ |
||||
|
'goodsDetail.isReserved': false |
||||
|
}); |
||||
|
wx.showToast({ |
||||
|
title: '预约失败，请重试', |
||||
|
icon: 'none', |
||||
|
duration: 1500 |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 返回上一页
|
||||
|
goBack() { |
||||
|
wx.navigateBack(); |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "商品详情", |
||||
|
"enablePullDownRefresh": false |
||||
|
} |
||||
@ -0,0 +1,175 @@ |
|||||
|
<!-- pages/goods-detail/goods-detail.wxml --> |
||||
|
<view class="goods-detail-page"> |
||||
|
<!-- 页面头部 --> |
||||
|
<view class="page-header"> |
||||
|
<view class="header-left"></view> |
||||
|
<view class="header-center"> |
||||
|
<text class="header-title">商品详情</text> |
||||
|
</view> |
||||
|
<view class="header-right" bindtap="goBack"> |
||||
|
<text class="close-icon">×</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 商品详情内容 --> |
||||
|
<view class="goods-detail-content"> |
||||
|
<!-- 商品图片轮播 --> |
||||
|
<view class="goods-image-slider"> |
||||
|
<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="3000" duration="500"> |
||||
|
<block wx:for="{{goodsDetail.imageUrls}}" wx:key="index"> |
||||
|
<swiper-item> |
||||
|
<image |
||||
|
src="{{item}}" |
||||
|
mode="scaleToFill" |
||||
|
class="slider-image" |
||||
|
bindtap="previewImage" |
||||
|
data-urls="{{goodsDetail.imageUrls}}" |
||||
|
data-index="{{index}}" |
||||
|
/> |
||||
|
</swiper-item> |
||||
|
</block> |
||||
|
</swiper> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 商品基本信息 --> |
||||
|
<view class="goods-info"> |
||||
|
<text class="goods-name">{{goodsDetail.name}}</text> |
||||
|
<view class="goods-price"> |
||||
|
<text class="price-symbol">价格:</text> |
||||
|
<text class="price-value">{{goodsDetail.price}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 商品详细信息网格 --> |
||||
|
<view class="info-grid"> |
||||
|
<view class="info-row"> |
||||
|
<view class="info-item"> |
||||
|
<view class="info-label-container"> |
||||
|
<text class="info-label">地区</text> |
||||
|
</view> |
||||
|
<view class="info-value-container"> |
||||
|
<text class="info-value">{{goodsDetail.region || '暂无'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<view class="info-label-container"> |
||||
|
<text class="info-label">规格</text> |
||||
|
</view> |
||||
|
<view class="info-value-container"> |
||||
|
<text class="info-value">{{goodsDetail.spec || '暂无'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="info-row"> |
||||
|
<view class="info-item"> |
||||
|
<view class="info-label-container"> |
||||
|
<text class="info-label">蛋黄</text> |
||||
|
</view> |
||||
|
<view class="info-value-container"> |
||||
|
<text class="info-value">{{goodsDetail.yolk || '暂无'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<view class="info-label-container"> |
||||
|
<text class="info-label">斤重</text> |
||||
|
</view> |
||||
|
<view class="info-value-container"> |
||||
|
<text class="info-value">{{goodsDetail.displayGrossWeight || '暂无'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="info-row"> |
||||
|
<view class="info-item"> |
||||
|
<view class="info-label-container"> |
||||
|
<text class="info-label">件数</text> |
||||
|
</view> |
||||
|
<view class="info-value-container"> |
||||
|
<text class="info-value">{{goodsDetail.minOrder || '暂无'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<view class="info-label-container"> |
||||
|
<text class="info-label">关注人数</text> |
||||
|
</view> |
||||
|
<view class="info-value-container"> |
||||
|
<text class="info-value">{{goodsDetail.reservedCount || '0'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 联系信息 --> |
||||
|
<view class="contact-info"> |
||||
|
<text class="contact-label">联系信息</text> |
||||
|
<view class="contact-content"> |
||||
|
<view class="contact-item"> |
||||
|
<text class="contact-icon user-icon">👤</text> |
||||
|
<text class="contact-label-text">联系人:</text> |
||||
|
<text class="contact-text">{{goodsDetail.product_contact || '暂无'}}</text> |
||||
|
</view> |
||||
|
<view class="contact-item phone-item"> |
||||
|
<text class="contact-icon phone-icon">📞</text> |
||||
|
<view class="phone-info"> |
||||
|
<text class="contact-label-text">联系电话:</text> |
||||
|
<text class="contact-text">{{goodsDetail.contact_phone || '暂无'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 操作按钮区域 --> |
||||
|
<view class="action-buttons"> |
||||
|
<button |
||||
|
class="call-button bottom-button" |
||||
|
bindtap="makePhoneCall" |
||||
|
data-phone="{{goodsDetail.contact_phone}}" |
||||
|
> |
||||
|
拨打电话 |
||||
|
</button> |
||||
|
<button |
||||
|
class="want-button bottom-button" |
||||
|
bindtap="onClickWantInDetail" |
||||
|
data-id="{{goodsDetail.id}}" |
||||
|
disabled="{{goodsDetail.isReserved}}" |
||||
|
> |
||||
|
{{goodsDetail.isReserved ? '已预约' : '我想要'}} |
||||
|
</button> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 图片预览弹窗 --> |
||||
|
<view class="image-preview-container" wx:if="{{showImagePreview}}"> |
||||
|
<view class="preview-header"> |
||||
|
<view class="preview-close" bindtap="closeImagePreview"> |
||||
|
<text class="close-icon">×</text> |
||||
|
</view> |
||||
|
<view class="preview-indicator"> |
||||
|
<text>{{previewImageIndex + 1}} / {{previewImageUrls.length}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<swiper |
||||
|
class="preview-swiper" |
||||
|
current="{{previewImageIndex}}" |
||||
|
bindchange="onPreviewImageChange" |
||||
|
> |
||||
|
<block wx:for="{{previewImageUrls}}" wx:key="index"> |
||||
|
<swiper-item> |
||||
|
<view |
||||
|
class="preview-image-wrapper" |
||||
|
bindtap="handleImageTap" |
||||
|
bindtouchstart="handleTouchStart" |
||||
|
bindtouchmove="handleTouchMove" |
||||
|
bindtouchend="handleTouchEnd" |
||||
|
> |
||||
|
<image |
||||
|
src="{{item}}" |
||||
|
mode="aspectFit" |
||||
|
class="preview-image" |
||||
|
style="transform: scale({{scale}}) translate({{offsetX}}px, {{offsetY}}px); transform-origin: center center; transition: transform 0.1s ease-out;" |
||||
|
/> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</block> |
||||
|
</swiper> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,514 @@ |
|||||
|
/* pages/goods-detail/goods-detail.wxss */ |
||||
|
|
||||
|
/* 页面容器 */ |
||||
|
.goods-detail-page { |
||||
|
min-height: 100vh; |
||||
|
background-color: #f5f7fa; |
||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; |
||||
|
} |
||||
|
|
||||
|
/* 页面头部 */ |
||||
|
.page-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
height: 44px; |
||||
|
background: #ffffff; |
||||
|
padding: 0 16px; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index: 100; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); |
||||
|
} |
||||
|
|
||||
|
.header-left { |
||||
|
width: 40px; |
||||
|
} |
||||
|
|
||||
|
.header-center { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.header-title { |
||||
|
font-size: 17px; |
||||
|
font-weight: 600; |
||||
|
color: #000000; |
||||
|
letter-spacing: 0.5px; |
||||
|
} |
||||
|
|
||||
|
.header-right { |
||||
|
width: 40px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.close-icon { |
||||
|
font-size: 28px; |
||||
|
color: #000000; |
||||
|
font-weight: 300; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
/* 商品详情内容区域 */ |
||||
|
.goods-detail-content { |
||||
|
padding-top: 44px; |
||||
|
padding-bottom: 100px; |
||||
|
} |
||||
|
|
||||
|
/* 商品图片轮播 */ |
||||
|
.goods-image-slider { |
||||
|
width: 100%; |
||||
|
height: 280px; |
||||
|
background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%); |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.goods-image-slider::before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
height: 1px; |
||||
|
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent); |
||||
|
} |
||||
|
|
||||
|
.goods-image-slider swiper { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.goods-image-slider swiper-item { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 20px; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.slider-image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: contain; |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
||||
|
transition: transform 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.slider-image:active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
/* 商品基本信息 */ |
||||
|
.goods-info { |
||||
|
background-color: #ffffff; |
||||
|
padding: 20px 16px 16px; |
||||
|
position: relative; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
||||
|
} |
||||
|
|
||||
|
.goods-info::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 16px; |
||||
|
right: 16px; |
||||
|
height: 1px; |
||||
|
background: linear-gradient(90deg, transparent, #f0f0f0, transparent); |
||||
|
} |
||||
|
|
||||
|
.goods-name { |
||||
|
display: block; |
||||
|
font-size: 20px; |
||||
|
font-weight: 700; |
||||
|
color: #262626; |
||||
|
margin-bottom: 12px; |
||||
|
line-height: 1.4; |
||||
|
letter-spacing: -0.2px; |
||||
|
} |
||||
|
|
||||
|
.goods-price { |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.price-symbol { |
||||
|
font-size: 15px; |
||||
|
color: #666; |
||||
|
margin-right: 4px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.price-value { |
||||
|
font-size: 28px; |
||||
|
color: #ff4d4f; |
||||
|
font-weight: 700; |
||||
|
letter-spacing: -0.5px; |
||||
|
} |
||||
|
|
||||
|
.price-value::before { |
||||
|
content: '¥'; |
||||
|
font-size: 20px; |
||||
|
margin-right: 2px; |
||||
|
} |
||||
|
|
||||
|
/* 商品详细信息网格 */ |
||||
|
.info-grid { |
||||
|
background-color: #ffffff; |
||||
|
margin: 12px 0; |
||||
|
padding: 16px; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
||||
|
} |
||||
|
|
||||
|
.info-row { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
margin-bottom: 16px; |
||||
|
background: #f0f5ff; |
||||
|
border-radius: 10px; |
||||
|
overflow: hidden; |
||||
|
border: 1px solid #d6e4ff; |
||||
|
} |
||||
|
|
||||
|
.info-row:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.info-item { |
||||
|
flex: 0 0 50%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 14px 16px; |
||||
|
box-sizing: border-box; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.info-item:nth-child(odd)::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
width: 1px; |
||||
|
background: linear-gradient(180deg, transparent, #e8e8e8, transparent); |
||||
|
} |
||||
|
|
||||
|
.info-label-container { |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
|
||||
|
.info-label { |
||||
|
font-size: 13px; |
||||
|
color: #8c8c8c; |
||||
|
font-weight: 500; |
||||
|
text-transform: uppercase; |
||||
|
letter-spacing: 0.3px; |
||||
|
} |
||||
|
|
||||
|
.info-value-container { |
||||
|
min-height: 24px; |
||||
|
} |
||||
|
|
||||
|
.info-value { |
||||
|
font-size: 16px; |
||||
|
color: #000000d9; |
||||
|
font-weight: 600; |
||||
|
line-height: 1.3; |
||||
|
} |
||||
|
|
||||
|
/* 联系信息 */ |
||||
|
.contact-info { |
||||
|
margin: 16px; |
||||
|
padding: 16px; |
||||
|
border-radius: 12px; |
||||
|
background: #ffffff; |
||||
|
border: 1px solid #d6e4ff; |
||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
||||
|
} |
||||
|
|
||||
|
.contact-label { |
||||
|
display: block; |
||||
|
font-size: 16px; |
||||
|
font-weight: 600; |
||||
|
color: #2f54eb; |
||||
|
margin-bottom: 16px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.contact-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
|
||||
|
.contact-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 8px 0; |
||||
|
} |
||||
|
|
||||
|
.phone-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 8px 0; |
||||
|
} |
||||
|
|
||||
|
.contact-icon { |
||||
|
font-size: 16px; |
||||
|
margin-right: 10px; |
||||
|
flex-shrink: 0; |
||||
|
width: 20px; |
||||
|
text-align: center; |
||||
|
color: #2f54eb; |
||||
|
} |
||||
|
|
||||
|
.user-icon { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.phone-icon { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.contact-label-text { |
||||
|
font-size: 14px; |
||||
|
color: #595959; |
||||
|
margin-right: 8px; |
||||
|
white-space: nowrap; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.contact-text { |
||||
|
font-size: 14px; |
||||
|
color: #262626; |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 16px; |
||||
|
} |
||||
|
|
||||
|
.phone-info { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex: 1; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.phone-info .contact-label-text { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.call-button { |
||||
|
padding: 0 24px; |
||||
|
height: 36px; |
||||
|
line-height: 36px; |
||||
|
font-size: 14px; |
||||
|
color: #ffffff; |
||||
|
background-color: #2f54eb; |
||||
|
border: 1px solid #2f54eb; |
||||
|
border-radius: 4px; |
||||
|
flex-shrink: 0; |
||||
|
box-shadow: 0 2px 8px rgba(47, 84, 235, 0.2); |
||||
|
} |
||||
|
|
||||
|
.call-button:active { |
||||
|
background-color: #4066ff; |
||||
|
border-color: #4066ff; |
||||
|
box-shadow: 0 4px 12px rgba(47, 84, 235, 0.3); |
||||
|
} |
||||
|
|
||||
|
.call-button:active { |
||||
|
background-color: #1d39c4; |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
/* 操作按钮区域 */ |
||||
|
.action-buttons { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
padding: 16px; |
||||
|
background-color: #ffffff; |
||||
|
border-top: 1px solid #f0f0f0; |
||||
|
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06); |
||||
|
z-index: 99; |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
|
||||
|
.bottom-button { |
||||
|
flex: 1; |
||||
|
height: 52px; |
||||
|
border-radius: 26px; |
||||
|
font-size: 18px; |
||||
|
font-weight: 700; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border: none; |
||||
|
outline: none; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.call-button.bottom-button { |
||||
|
background-color: #ffffff; |
||||
|
color: #2f54eb; |
||||
|
border: 2px solid #2f54eb; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
.want-button.bottom-button { |
||||
|
background: linear-gradient(135deg, #2f54eb 0%, #1d39c4 100%); |
||||
|
color: #ffffff; |
||||
|
box-shadow: 0 4px 12px rgba(47, 84, 235, 0.2); |
||||
|
} |
||||
|
|
||||
|
.call-button.bottom-button:active { |
||||
|
background-color: #f0f4ff; |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
.want-button.bottom-button:active { |
||||
|
transform: translateY(2px) scale(0.98); |
||||
|
box-shadow: 0 2px 6px rgba(47, 84, 235, 0.15); |
||||
|
} |
||||
|
|
||||
|
.want-button.bottom-button[disabled] { |
||||
|
background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%); |
||||
|
color: #ffffff !important; |
||||
|
border: none; |
||||
|
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.2); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.want-button.bottom-button[disabled]:active { |
||||
|
transform: none; |
||||
|
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3); |
||||
|
} |
||||
|
|
||||
|
/* 图片预览弹窗 */ |
||||
|
.image-preview-container { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: #000000; |
||||
|
z-index: 1000; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.preview-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 20px 16px; |
||||
|
color: #ffffff; |
||||
|
z-index: 10; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
backdrop-filter: blur(10px); |
||||
|
} |
||||
|
|
||||
|
.preview-close { |
||||
|
width: 44px; |
||||
|
height: 44px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
border-radius: 22px; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.preview-close:active { |
||||
|
background: rgba(255, 255, 255, 0.2); |
||||
|
transform: scale(0.95); |
||||
|
} |
||||
|
|
||||
|
.close-icon { |
||||
|
font-size: 24px; |
||||
|
color: #ffffff; |
||||
|
font-weight: 300; |
||||
|
} |
||||
|
|
||||
|
.preview-indicator { |
||||
|
font-size: 15px; |
||||
|
color: #ffffff; |
||||
|
font-weight: 500; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
.preview-swiper { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.preview-image-wrapper { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
position: relative; |
||||
|
padding: 20px; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.preview-image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
max-width: 100%; |
||||
|
max-height: 100%; |
||||
|
object-fit: contain; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
/* 添加一些微动画效果 */ |
||||
|
@keyframes fadeIn { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(20px); |
||||
|
} |
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods-info, |
||||
|
.info-grid, |
||||
|
.contact-info { |
||||
|
animation: fadeIn 0.4s ease-out; |
||||
|
} |
||||
|
|
||||
|
.info-grid { |
||||
|
animation-delay: 0.1s; |
||||
|
} |
||||
|
|
||||
|
.contact-info { |
||||
|
animation-delay: 0.2s; |
||||
|
} |
||||
|
|
||||
|
/* 响应式调整 */ |
||||
|
@media (min-height: 800px) { |
||||
|
.goods-image-slider { |
||||
|
height: 320px; |
||||
|
} |
||||
|
|
||||
|
.goods-name { |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
|
||||
|
.price-value { |
||||
|
font-size: 32px; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue