From d7111956ed0f279744c5a1d84fbf141520b1201c Mon Sep 17 00:00:00 2001 From: woody Date: Thu, 30 Oct 2025 13:41:48 +0800 Subject: [PATCH] =?UTF-8?q?feat(share):=20=E5=88=86=E4=BA=AB=E6=B3=A8?= =?UTF-8?q?=E5=86=8C=E5=95=86=E5=93=81=E5=88=97=E8=A1=A8=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E4=B8=B4=E6=97=B6=E8=B4=AD=E7=89=A9=E8=BD=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/shareArea/hiList.vue | 715 +++++++++++++++++++++++++++++------- pages/shareArea/hiOrder.vue | 71 ++-- 2 files changed, 616 insertions(+), 170 deletions(-) diff --git a/pages/shareArea/hiList.vue b/pages/shareArea/hiList.vue index 737f4fc..54c50ea 100644 --- a/pages/shareArea/hiList.vue +++ b/pages/shareArea/hiList.vue @@ -97,34 +97,17 @@ >已售罄 - - - - - - − - - - {{ - item.quantity || 1 - }} - - - + - + + + + - 购买 @@ -160,32 +143,13 @@ {{ formatCurrency(item.waresPrice) }} 已售罄 - - - - - - − - - - {{ item.quantity || 1 }} - - - + - + + + + - 购买 @@ -199,6 +163,112 @@ + + + + + + + + {{ cartTotalCount > 99 ? '99+' : cartTotalCount }} + + + + 总计： + {{ + formatCurrency(cartTotalAmount) + }} + + + + + 去结算 + + + + + + + + 购物车 + ({{ cartTotalCount }}件商品) + + + + + + + + {{ item.waresName }} + {{ + formatCurrency(item.waresPrice) + }} + + + + + + − + + + {{ item.quantity }} + + + + + + + + 删除 + + + + + + 购物车空空如也~ + + + + + + 合计： + {{ + formatCurrency(cartTotalAmount) + }} + + 去结算 + + + @@ -235,8 +305,32 @@ export default { userInfo: {}, // 用户信息 pkCountry: 1, // 国家ID categoryLoaded: false, // 分类是否已加载 + + // 购物车相关数据 - 按tab独立存储 + cartData: { + 43: [], // 北大甄选的购物车 + 41: [], // 精品专区的购物车 + }, + showCartDrawer: false, // 是否显示购物车抽屉 } }, + computed: { + // 当前tab的购物车 + currentCart() { + return this.cartData[this.activeTab] || [] + }, + // 购物车总数量 + cartTotalCount() { + return this.currentCart.reduce((total, item) => total + item.quantity, 0) + }, + // 购物车总金额 + cartTotalAmount() { + return this.currentCart.reduce( + (total, item) => total + item.waresPrice * item.quantity, + 0 + ) + }, + }, onLoad(options) { this.pkParent = options.pkParent this.userInfo = uni.getStorageSync('User') || {} @@ -279,11 +373,7 @@ export default { specialArea: this.activeTab, }) .then(res => { - // 为每个商品初始化quantity字段 - this.goodList = res.data.map(item => ({ - ...item, - quantity: item.quantity || 1, - })) + this.goodList = res.data || [] }) }, switchTab(value) { @@ -304,21 +394,106 @@ export default { } } }, - updateQuantity(item, change) { - const newQuantity = (item.quantity || 1) + change - if (newQuantity >= 1) { - // 使用Vue.set或直接赋值来确保响应式更新 - this.$set(item, 'quantity', newQuantity) + // 加入购物车 + addToCart(item) { + const cart = this.cartData[this.activeTab] + const existingIndex = cart.findIndex( + cartItem => cartItem.waresCode === item.waresCode + ) + + if (existingIndex > -1) { + // 商品已存在，数量+1 + this.$set( + cart[existingIndex], + 'quantity', + cart[existingIndex].quantity + 1 + ) + uni.showToast({ + title: '已添加到购物车', + icon: 'success', + duration: 1500, + }) + } else { + // 商品不存在，添加新商品 + cart.push({ + ...item, + quantity: 1, + }) + uni.showToast({ + title: '添加成功', + icon: 'success', + duration: 1500, + }) } }, - goBuy(item) { - const params = { - ...item, + + // 更新购物车商品数量 + updateCartQuantity(index, change) { + const cart = this.cartData[this.activeTab] + const newQuantity = cart[index].quantity + change + if (newQuantity >= 1) { + this.$set(cart[index], 'quantity', newQuantity) + } else if (newQuantity === 0) { + // 数量为0时移除商品 + this.removeFromCart(index) + } + }, + + // 从购物车删除商品 + removeFromCart(index) { + uni.showModal({ + title: '提示', + content: '确定要删除该商品吗？', + success: res => { + if (res.confirm) { + this.cartData[this.activeTab].splice(index, 1) + uni.showToast({ + title: '删除成功', + icon: 'success', + duration: 1500, + }) + } + }, + zIndex: 10076, // 确保层级高于抽屉 + }) + }, + + // 切换购物车抽屉 + toggleCartDrawer() { + if (this.cartTotalCount === 0) { + uni.showToast({ + title: '购物车是空的', + icon: 'none', + duration: 1500, + }) + return + } + this.showCartDrawer = true + }, + + // 去购买 + goCheckout() { + if (this.currentCart.length === 0) { + uni.showToast({ + title: '购物车是空的', + icon: 'none', + duration: 1500, + }) + return + } + + // 关闭抽屉 + this.showCartDrawer = false + + // 跳转到订单页面，传递购物车数据 + const orderData = { + cartList: this.currentCart, pkParent: this.pkParent, specialArea: this.activeTab, } + uni.navigateTo({ - url: '/pages/shareArea/hiOrder?allData=' + JSON.stringify(item), + url: '/pages/shareArea/hiOrder?allData=' + JSON.stringify(orderData), }) }, // 获取分类列表（一级） @@ -381,11 +556,7 @@ export default { api .queryWares(params) .then(res => { - // 为每个商品初始化quantity字段 - this.goodList = (res.data || []).map(item => ({ - ...item, - quantity: item.quantity || 1, - })) + this.goodList = res.data || [] }) .catch(err => { console.log(err, '...err') @@ -434,7 +605,6 @@ export default { background: #ffffff; border-bottom: 1rpx solid #e2e8f0; flex: 1; - height: 0; display: flex; flex-direction: column; @@ -559,6 +729,7 @@ export default { flex: 1; overflow: hidden; background: #fff; + padding-bottom: 140rpx; .goodList { padding: 0; .goodList_i { @@ -700,7 +871,7 @@ export default { .goods-container { flex: 1; background: #f8fafc; - padding: 24rpx 24rpx 0; + padding: 24rpx 24rpx 140rpx; position: relative; z-index: 3; overflow: hidden; @@ -735,19 +906,7 @@ export default { display: flex; background: #ffffff; border-radius: 24rpx; - margin-bottom: 24rpx; padding: 32rpx; - box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.08); - border: 1rpx solid rgba(102, 126, 234, 0.08); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - animation: slideInUp 0.6s ease-out both; - opacity: 0; - - &:hover { - transform: translateY(-6rpx); - box-shadow: 0 16rpx 40rpx rgba(102, 126, 234, 0.2); - border-color: rgba(102, 126, 234, 0.15); - } .cover { width: 240rpx; @@ -823,69 +982,28 @@ export default { } } - // 数量控制区域 - .quantity-section { + // 加入购物车按钮区域 + .add-cart-section { display: flex; - align-items: center; - justify-content: space-between; - gap: 16rpx; + justify-content: flex-end; + margin-top: 16rpx; - .quantity-control { + .add-cart-btn { + width: 60rpx; + height: 60rpx; display: flex; align-items: center; - background: #f8fafc; - border-radius: 20rpx; - border: 1rpx solid #e2e8f0; - overflow: hidden; + justify-content: center; + background: linear-gradient(135deg, #005bac 0%, #003d7a 100%); + color: #ffffff; + border-radius: 50%; + border: none; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.3); - .quantity-btn { - width: 60rpx; - height: 60rpx; - display: flex; - align-items: center; - justify-content: center; - background: #ffffff; - transition: all 0.2s ease; - cursor: pointer; - - .quantity-icon { - font-size: 32rpx; - font-weight: 600; - color: #667eea; - } - - &.minus { - &.disabled { - opacity: 0.3; - cursor: not-allowed; - - .quantity-icon { - color: #9ca3af; - } - } - } - - &:not(.disabled):active { - background: #f1f5f9; - transform: scale(0.95); - } - } - - .quantity-display { - min-width: 80rpx; - height: 60rpx; - display: flex; - align-items: center; - justify-content: center; - background: #ffffff; - border-left: 1rpx solid #e2e8f0; - border-right: 1rpx solid #e2e8f0; - - .quantity-text { - font-size: 28rpx; - font-weight: 600; - color: #1f2937; - } + &:active { + transform: scale(0.9); + box-shadow: 0 1rpx 4rpx rgba(0, 91, 172, 0.2); } } } @@ -1075,4 +1193,323 @@ export default { .goodList_i:nth-child(n + 6) { animation-delay: 0.6s; } + +// 底部购物车栏样式 +.cart-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 120rpx; + background: #ffffff; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 32rpx; + box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1); + z-index: 1000; + + .cart-bar-left { + display: flex; + align-items: center; + gap: 24rpx; + flex: 1; + cursor: pointer; + + .cart-icon-wrapper { + position: relative; + width: 80rpx; + height: 80rpx; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #005bac 0%, #003d7a 100%); + border-radius: 50%; + transition: all 0.3s ease; + + &:active { + transform: scale(0.95); + } + + .cart-icon { + font-size: 40rpx; + } + + .cart-badge { + position: absolute; + top: -8rpx; + right: -8rpx; + background: #ff4d4f; + color: #ffffff; + font-size: 20rpx; + font-weight: 600; + padding: 4rpx 8rpx; + border-radius: 20rpx; + min-width: 32rpx; + text-align: center; + border: 2rpx solid #ffffff; + } + } + + .cart-price { + display: flex; + align-items: baseline; + + .cart-price-label { + font-size: 28rpx; + color: #64748b; + margin-right: 8rpx; + } + + .cart-price-value { + font-size: 36rpx; + font-weight: 700; + color: #ff6b35; + } + } + } + + .cart-bar-btn { + background: linear-gradient(135deg, #005bac 0%, #003d7a 100%); + color: #ffffff; + padding: 20rpx 48rpx; + border-radius: 60rpx; + font-size: 28rpx; + font-weight: 600; + box-shadow: 0 4rpx 12rpx rgba(0, 91, 172, 0.4); + transition: all 0.3s ease; + + &:active { + transform: scale(0.95); + box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.3); + } + + &.disabled { + background: #cbd5e1; + color: #94a3b8; + box-shadow: none; + cursor: not-allowed; + + &:active { + transform: none; + } + } + } + + .cart-empty-tip { + .cart-empty-text { + font-size: 26rpx; + color: #94a3b8; + } + } +} + +// 购物车抽屉样式 +.cart-drawer { + background: #ffffff; + max-height: 80vh; + display: flex; + flex-direction: column; + + .cart-drawer-header { + padding: 32rpx; + border-bottom: 1rpx solid #f1f5f9; + display: flex; + align-items: center; + justify-content: center; + gap: 16rpx; + + .cart-drawer-title { + font-size: 32rpx; + font-weight: 600; + color: #1e293b; + } + + .cart-drawer-count { + font-size: 28rpx; + color: #64748b; + } + } + + .cart-drawer-content { + flex: 1; + max-height: 60vh; + overflow-y: auto; + + .cart-item { + display: flex; + flex-direction: column; + padding: 24rpx 32rpx; + border-bottom: 1rpx solid #f1f5f9; + gap: 20rpx; + + .cart-item-top { + display: flex; + align-items: center; + gap: 24rpx; + + .cart-item-image { + width: 120rpx; + height: 120rpx; + border-radius: 12rpx; + background: #f8fafc; + border: 1rpx solid #e2e8f0; + flex-shrink: 0; + } + + .cart-item-info { + flex: 1; + min-width: 0; + + .cart-item-name { + font-size: 28rpx; + color: #1e293b; + font-weight: 500; + margin-bottom: 12rpx; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .cart-item-price { + font-size: 32rpx; + color: #ff6b35; + font-weight: 700; + } + } + } + + .cart-item-actions { + display: flex; + align-items: center; + justify-content: space-between; + + .cart-quantity-control { + display: flex; + align-items: center; + background: #f8fafc; + border-radius: 12rpx; + border: 1rpx solid #e2e8f0; + overflow: hidden; + + .cart-quantity-btn { + width: 48rpx; + height: 48rpx; + display: flex; + align-items: center; + justify-content: center; + background: #ffffff; + transition: all 0.2s ease; + + .cart-quantity-icon { + font-size: 28rpx; + font-weight: 600; + color: #005bac; + } + + &.disabled { + opacity: 0.3; + + .cart-quantity-icon { + color: #9ca3af; + } + } + + &:not(.disabled):active { + background: #f1f5f9; + transform: scale(0.9); + } + } + + .cart-quantity-display { + min-width: 60rpx; + height: 48rpx; + display: flex; + align-items: center; + justify-content: center; + background: #ffffff; + border-left: 1rpx solid #e2e8f0; + border-right: 1rpx solid #e2e8f0; + + .cart-quantity-text { + font-size: 26rpx; + font-weight: 600; + color: #1f2937; + } + } + } + + .cart-item-delete { + padding: 12rpx 24rpx; + background: rgba(239, 68, 68, 0.1); + border-radius: 8rpx; + transition: all 0.2s ease; + + .cart-delete-icon { + font-size: 26rpx; + color: #ef4444; + font-weight: 500; + } + + &:active { + background: rgba(239, 68, 68, 0.2); + transform: scale(0.95); + } + } + } + } + + .cart-empty { + padding: 120rpx 0; + text-align: center; + + .cart-empty-text { + font-size: 28rpx; + color: #9ca3af; + } + } + } + + .cart-drawer-footer { + padding: 24rpx 32rpx; + border-top: 1rpx solid #f1f5f9; + display: flex; + align-items: center; + justify-content: space-between; + background: #ffffff; + + .cart-footer-total { + display: flex; + align-items: baseline; + + .cart-footer-label { + font-size: 28rpx; + color: #64748b; + margin-right: 8rpx; + } + + .cart-footer-amount { + font-size: 40rpx; + font-weight: 700; + color: #ff6b35; + } + } + + .cart-footer-btn { + background: linear-gradient(135deg, #005bac 0%, #003d7a 100%); + color: #ffffff; + padding: 20rpx 48rpx; + border-radius: 60rpx; + font-size: 28rpx; + font-weight: 600; + box-shadow: 0 4rpx 12rpx rgba(0, 91, 172, 0.4); + transition: all 0.3s ease; + + &:active { + transform: scale(0.95); + box-shadow: 0 2rpx 8rpx rgba(0, 91, 172, 0.3); + } + } + } +} diff --git a/pages/shareArea/hiOrder.vue b/pages/shareArea/hiOrder.vue index 23b6276..8022767 100644 --- a/pages/shareArea/hiOrder.vue +++ b/pages/shareArea/hiOrder.vue @@ -84,7 +84,7 @@ @@ -124,25 +124,29 @@ 商品信息 - + - + - {{ allData.waresName }} + {{ item.waresName }} - x{{ allData.quantity }} + x{{ item.quantity }} - {{ allData.waresPrice | numberToCurrency }} + {{ item.waresPrice | numberToCurrency }} - x{{ item.quantity }} - + -->