SwtTt29
/
Mini-Program
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更新商品详情页面：添加可议价标签并调整爱心按钮布局

pull/1/head
Default User 2 months ago
parent
88ae80e6c4
commit
8e68a5d88c
2 changed files with 225 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 209
      pages/goods-detail/goods-detail.js
  2. 24
      pages/goods-detail/goods-detail.wxml

209
pages/goods-detail/goods-detail.js
View File

@ -71,6 +71,7 @@ Page({
previewImageUrls: [], // 预览的图片URL列表
previewImageIndex: 0, // 当前预览图片的索引
fromSeller: false, // 是否来自seller页面
isFavorite: false, // 当前商品是否已收藏
// 图片缩放相关状态
scale: 1, // 当前缩放比例
lastScale: 1, // 上一次缩放比例
@ -94,7 +95,8 @@ Page({
// 优先使用传入的商品数据中的联系人信息
this.setData({
goodsDetail: goodsData,
fromSeller: options.fromSeller === 'true'
fromSeller: options.fromSeller === 'true',
isFavorite: goodsData.isFavorite || false // 初始化收藏状态
});
} catch (error) {
console.error('解析商品数据失败:', error);
@ -114,6 +116,28 @@ Page({
// 加载商品详情（即使已有goodsData，也调用API获取最新数据）
this.loadGoodsDetail(productId, goodsData);
// 添加收藏状态变化事件监听
const app = getApp();
this.favoriteChangedHandler = (data) => {
console.log('收到收藏状态变化通知:', data);
// 如果通知的商品ID与当前页面的商品ID相同，则更新收藏状态
if (data.productId === String(productId) || data.productId === String(this.data.goodsDetail.id)) {
this.setData({
isFavorite: data.isFavorite
});
}
};
app.eventBus.on('favoriteChanged', this.favoriteChangedHandler);
},
onUnload: function () {
// 页面卸载时移除事件监听
const app = getApp();
if (this.favoriteChangedHandler) {
app.eventBus.off('favoriteChanged', this.favoriteChangedHandler);
console.log('移除收藏状态变化事件监听');
}
},
loadGoodsDetail: function (productId, preloadedData = null) {
@ -252,6 +276,9 @@ Page({
this.setData({
goodsDetail: formattedGoods
});
// 加载商品的收藏状态
this.loadGoodsFavoriteStatus(productIdStr);
} else {
wx.showToast({
title: '获取商品详情失败',
@ -272,6 +299,184 @@ Page({
wx.hideLoading();
});
},
// 加载商品的收藏状态
loadGoodsFavoriteStatus: function (productId) {
const openid = wx.getStorageSync('openid');
const userId = wx.getStorageSync('userId');
// 如果用户未登录，不加载收藏状态
if (!openid || !userId) {
return;
}
// 获取用户手机号
let userPhone = '';
try {
const users = wx.getStorageSync('users') || {};
if (userId && users[userId] && users[userId].phoneNumber) {
userPhone = users[userId].phoneNumber;
} else {
const userInfo = wx.getStorageSync('userInfo');
if (userInfo && userInfo.phoneNumber) {
userPhone = userInfo.phoneNumber;
} else {
userPhone = wx.getStorageSync('phoneNumber');
}
}
} catch (e) {
console.error('获取用户手机号失败:', e);
}
if (!userPhone) {
return;
}
// 调用API获取用户收藏列表
API.getFavorites(userPhone)
.then(res => {
if (res && res.code === 200 && res.data && Array.isArray(res.data)) {
const favoriteProductIds = res.data.map(item => String(item.productId || item.id));
const isFavorite = favoriteProductIds.includes(String(productId));
this.setData({
isFavorite: isFavorite
});
}
})
.catch(err => {
console.error('获取收藏状态失败:', err);
});
},
// 添加收藏
addFavorite: function () {
const productId = String(this.data.goodsDetail.id || this.data.goodsDetail.productId);
console.log('用户点击了收藏按钮，商品ID:', productId);
// 检查用户登录状态
const openid = wx.getStorageSync('openid');
const userId = wx.getStorageSync('userId');
if (!openid || !userId) {
console.log('用户未登录，显示一键登录弹窗');
// 由于商品详情页可能没有登录弹窗，这里直接提示用户登录
wx.showToast({
title: '请先登录',
icon: 'none',
duration: 2000
});
return;
}
wx.showLoading({ title: '正在收藏...' });
// 调用API添加收藏
API.addFavorite(productId)
.then(res => {
wx.hideLoading();
console.log('添加收藏成功:', res);
// 更新商品的收藏状态
this.setData({
isFavorite: true
});
// 触发全局事件，通知其他页面收藏状态已更改
const app = getApp();
app.eventBus.emit('favoriteChanged', {
productId: productId,
isFavorite: true
});
// 显示成功提示
wx.showToast({
title: '收藏成功',
icon: 'success',
duration: 1500
});
})
.catch(err => {
wx.hideLoading();
console.error('添加收藏失败:', err);
// 显示错误提示
wx.showToast({
title: '收藏失败，请稍后重试',
icon: 'none',
duration: 2000
});
});
},
// 取消收藏
cancelFavorite: function () {
const productId = String(this.data.goodsDetail.id || this.data.goodsDetail.productId);
console.log('用户点击了取消收藏按钮，商品ID:', productId);
// 检查用户登录状态
const openid = wx.getStorageSync('openid');
const userId = wx.getStorageSync('userId');
if (!openid || !userId) {
console.log('用户未登录，显示一键登录弹窗');
// 由于商品详情页可能没有登录弹窗，这里直接提示用户登录
wx.showToast({
title: '请先登录',
icon: 'none',
duration: 2000
});
return;
}
wx.showLoading({ title: '正在取消收藏...' });
// 调用API取消收藏
API.cancelFavorite(productId)
.then(res => {
wx.hideLoading();
console.log('取消收藏成功:', res);
// 更新商品的收藏状态
this.setData({
isFavorite: false
});
// 触发全局事件，通知其他页面收藏状态已更改
const app = getApp();
app.eventBus.emit('favoriteChanged', {
productId: productId,
isFavorite: false
});
// 显示成功提示
wx.showToast({
title: '取消收藏成功',
icon: 'success',
duration: 1500
});
})
.catch(err => {
wx.hideLoading();
console.error('取消收藏失败:', err);
// 显示错误提示
wx.showToast({
title: '取消收藏失败，请稍后重试',
icon: 'none',
duration: 2000
});
});
},
// 处理收藏按钮点击事件
onFavoriteClick: function () {
if (this.data.isFavorite) {
this.cancelFavorite();
} else {
this.addFavorite();
}
},
// 预览图片
previewImage(e) {
@ -666,4 +871,4 @@ Page({
goBack() {
wx.navigateBack();
}
});
});

24
pages/goods-detail/goods-detail.wxml
View File

@ -32,18 +32,30 @@
<!-- 商品基本信息 -->
<view class="goods-info" style="margin-top: -40rpx;">
<view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx;">
<view style="display: flex; align-items: center;">
<view style="display: flex; align-items: center; flex: 1;">
<view style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: rgba(218, 165, 32, 0.8); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -20rpx;">{{goodsDetail.supplyStatus || '暂无状态'}}</view>
<text class="goods-name">{{goodsDetail.name}}</text>
<span style="vertical-align: middle; font-size: 20rpx; color: white; background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); padding: 4rpx 8rpx; clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%); margin-left: 8rpx; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5); font-weight: bold; margin-top: -20rpx;">V</span>
</view>
<view class="source-type-badge">
<text style="color: {{goodsDetail.sourceTypeColor}}; font-weight: bold;">{{goodsDetail.sourceType || '暂无'}}</text>
<view style="display: flex; align-items: flex-start;">
<view class="source-type-badge" style="display: flex; align-items: center; justify-content: center;">
<text style="color: {{goodsDetail.sourceTypeColor}}; font-weight: bold;">{{goodsDetail.sourceType || '暂无'}}</text>
</view>
</view>
</view>
<view class="goods-price" style="position: relative; display: flex; align-items: center;">
<text class="price-symbol">价格:</text>
<text class="price-value">{{goodsDetail.price}}</text>
<view class="goods-price" style="position: relative; display: flex; align-items: center; justify-content: space-between;">
<view style="display: flex; align-items: center;">
<text class="price-symbol">价格:</text>
<text class="price-value">{{goodsDetail.price}}</text>
<text style="margin-left: 10rpx; color: #333; font-size: 32rpx;">(可议价)</text>
</view>
<view
class="favorite-button"
bindtap="onFavoriteClick"
style="display: flex; align-items: center;"
>
<text style="font-size: 44rpx; {{isFavorite ? 'color: #ff4d4f;' : 'color: #999;'}} margin-top: -20rpx;">{{isFavorite ? '❤️' : '🤍'}}</text>
</view>
</view>
</view>

Write Preview
Loading…
Cancel
Save