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)
+ }}
+
+
+
+
+ 去结算
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.waresName }}
+ {{
+ formatCurrency(item.waresPrice)
+ }}
+
+
+
+
+
+ −
+
+
+ {{ item.quantity }}
+
+
+ +
+
+
+
+ 删除
+
+
+
+
+
+ 购物车空空如也~
+
+
+
+
+
+
@@ -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 }}
-
+ -->