购物车

components/addCartModel/addCartModel.js

@@ -1,3 +1,5 @@
+import { API } from "../../service/api";
+
 // components/addCartModel/addCartModel.js
 Component({
     properties: {
@@ -13,39 +15,57 @@ Component({
   
     data: {
       selectedSpecs: [], // 选择的规格索引 [0,1]表示第一个规格的第0个选项，第二个规格的第1个选项
-      quantity: 1
+      quantity: 1,
+      selectIndex:0, // 属性索引
     },
   
     observers: {
       'product': function(specs) {
-        console.log("888888888888",specs);
+        // console.log("888888888888",specs);
+        specs && this.getProdDetail(specs);
       }
     },
   
     methods: {
+      // 获取商品详情
+      getProdDetail(e){
+        let data = {
+            pageNum:1,
+            pageSize:1,
+            mercId:e.mercId,
+            prodId:e.prodId
+        }  
+        API.getProdDetail(data).then(res=>{
+            this.setData({
+                productDetail:res
+            })
+        })
+      },
+
+      // 关闭模态框
       handleClose() {
         this.triggerEvent('close');
       },
       
+      // 选择属性
       selectSpec(e) {
-        const { specIndex, optionIndex } = e.currentTarget.dataset;
-        const { selectedSpecs } = this.data;
-        
-        selectedSpecs[specIndex] = optionIndex;
-        this.setData({ selectedSpecs });
-      },
-      
-      isSpecSelected(specIndex, optionIndex) {
-        return this.data.selectedSpecs[specIndex] === optionIndex;
+        let index = e.currentTarget.dataset.index;
+        let availQty = this.data.productDetail.prodAttrList[index].availQty;
+        this.setData({ 
+            selectIndex:index,
+            quantity:availQty > 0?1:0
+        });
       },
       
+      // 添加数量
       increaseQuantity() {
-        const { quantity, product } = this.data;
-        if (quantity < product.stock) {
+        const { quantity, productDetail,selectIndex } = this.data;
+        if (quantity < productDetail.prodAttrList[selectIndex].availQty) {
           this.setData({ quantity: quantity + 1 });
         }
       },
       
+      // 减少数量
       decreaseQuantity() {
         const { quantity } = this.data;
         if (quantity > 1) {
@@ -53,37 +73,26 @@ Component({
         }
       },
       
-      handleAddToCart() {
-        const { product, selectedSpecs, quantity } = this.data;
-        
-        // 获取选中的规格文本
-        const selectedSpecText = product.specs.map((spec, index) => {
-          return spec.options[selectedSpecs[index]];
-        }).join('，');
-        
-        // 组装添加到购物车的数据
+      handleAddToCart() { 
+        let {mercId,prodAttrList,prodId} = this.data.productDetail;  
         const cartItem = {
-          productId: product.id,
-          image: product.image,
-          name: product.name,
-          price: product.price,
-          quantity,
-          selectedSpecs: selectedSpecText,
-          stock: product.stock
+            prodAttrId: prodAttrList[this.data.selectIndex].prodAttrId,
+            mercId,
+            prodId,
+            count:this.data.quantity
         };
-        
-        this.triggerEvent('add', { item: cartItem });
+        API.addCarts(cartItem).then(res=>{
+            // 可以显示添加成功的提示
+            wx.showToast({
+                title: '已加入购物车',
+                icon: 'success'
+            });
+            this.triggerEvent('close', { item: cartItem });
+        })
       }
     },
     
     computed: {
-      selectedSpecText() {
-        const { product, selectedSpecs } = this.data;
-        if (!product.specs || product.specs.length === 0) return '';
-        
-        return product.specs.map((spec, index) => {
-          return spec.options[selectedSpecs[index]];
-        }).join('，');
-      }
+      
     }
   });

components/addCartModel/addCartModel.wxml

@@ -10,12 +10,12 @@
     
     <!-- 商品信息 -->
     <view class="product-info">
-      <image class="product-image" src="{{product.prodPicList[0].picUrl}}" mode="aspectFill"></image>
+      <image class="product-image" src="{{productDetail.prodPicList[0].picUrl}}" mode="aspectFill"></image>
       <view class="product-detail">
-        <view class="prodName">{{product.prodName}}</view>
+        <view class="prodName">{{productDetail.prodName}}</view>
         <view class="product-attr">
-            <text class="price">¥{{product.price || 100}}</text>
-            <text class="stock">剩余：{{product.stock || 100}}</text>
+            <text class="price">¥{{productDetail.prodAttrList[selectIndex].prodAttrPrice.price}}</text>
+            <text class="stock">剩余：{{productDetail.prodAttrList[selectIndex].availQty}}</text>
         </view>
       </view>
     </view>
@@ -26,24 +26,15 @@
       <view class="quantity-control">
         <text class="btn-minus" bindtap="decreaseQuantity" disabled="{{quantity <= 1}}">-</text>
         <input class="quantity-input" type="number" value="{{quantity}}" disabled />
-        <text class="btn-plus" bindtap="increaseQuantity" disabled="{{quantity >= product.stock}}">+</text>
+        <text class="btn-plus" bindtap="increaseQuantity" disabled="{{quantity >= productDetail.stock}}">+</text>
       </view>
     </view>
     
     <!-- 规格选择 -->
-    <view class="spec-section" wx:for="{{product.prodAttrList}}" wx:key="name">
-      <view class="spec-title">{{item.prodName}}</view>
-      <view class="spec-options">
-        <view 
-          class="spec-option {{isSpecSelected(index, optionIndex) ? 'selected' : ''}}"
-          wx:for="{{item.options}}"
-          wx:key="value"
-          bindtap="selectSpec"
-          data-spec-index="{{index}}"
-          data-option-index="{{optionIndex}}"
-        >
-          {{item}}
-        </view>
+    <view class="spec-section">
+      <text class="spec-title">规格</text>
+      <view class="spec-option">
+        <text class="spec-name {{index === selectIndex?'selected':''}}" data-index="{{index}}" wx:for="{{productDetail.prodAttrList}}" wx:key="name" bindtap="selectSpec">{{item.attrName}}</text>
       </view>
     </view>
     

components/addCartModel/addCartModel.wxss

@@ -30,13 +30,14 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    max-height: 70vh;
+    max-height: 80vh;
     background: #fff;
     border-radius: 24rpx 24rpx 0 0;
     box-sizing: border-box;
     padding: 32rpx;
     transform: translateY(100%);
     transition: transform 0.3s ease;
+    overflow-y:scroll;
   }
   
   .modal-show .modal-content {
@@ -109,29 +110,32 @@
   .spec-section {
     margin-bottom: 32rpx;
   }
-  
-  .spec-title {
-    font-size: 28rpx;
-    margin-bottom: 16rpx;
-  }
-  
-  .spec-options {
+
+  .spec-option{
     display: flex;
     flex-wrap: wrap;
-    gap: 16rpx;
+    justify-content: space-between;
+  }
+
+  .spec-title{
+    font-size: 28rpx;
+    margin-bottom: 19rpx;
+    display: inline-block;
   }
   
-  .spec-option {
-    padding: 12rpx 24rpx;
-    border: 1rpx solid #eee;
-    border-radius: 8rpx;
-    font-size: 26rpx;
+  .spec-name {
+    width: 45%;
+    line-height: 63rpx;
+    font-size: 28rpx;
+    text-align: center;
+    margin-bottom: 27rpx;
+    background:#EFEFEF;
+    border-radius: 20rpx;
+    display: inline-block;
   }
   
-  .spec-option.selected {
-    border-color: #ff2e4d;
-    color: #ff2e4d;
-    background-color: #fff5f6;
+  .spec-name.selected {
+    background:#F9DFA4;
   }
   
   .quantity-section {

pages/cart/cart.js

@@ -15,19 +15,65 @@ Page({
     // 获取购物车商品
     getCartProds(){
        API.getCartProds().then(res=>{
-           console.log("999999999999",res);
+           let num = 0,checkIds=[];
+           res.carts.forEach(item=>{
+               if(item.checkFlag){
+                   num+=1;
+                   checkIds.push(item.id+'');
+               }
+           })
+           this.setData({
+                cartList:res.carts,
+                totalPrice:res.checkedSumAmount,
+                checkedIds:checkIds,
+                isAllChecked:num === res.carts.length
+           })
        })
     },
+    // 购物车选中/取消
+    handleCheckboxFn(prodId){
+        let {mercProdId,id,prodAttrId,quantity} = this.data.cartList.filter(item=>item.id == prodId)[0];
+        let data = {
+            mercId:mercProdId,
+            prodId:id,
+            prodAttrId,
+            count:quantity
+        }
+       API.checkedCartProds(data).then(res=>{
+
+       })
+    },
+    // 删除选中的商品
+    deleteProd(){
+        let ids = [];
+        this.data.cartList.map(item=>{
+            if(item.checkFlag){
+               ids.push(item.id);
+            }
+        });
+        API.deleteCartProds().then(res=>{
+
+        })
+    },
     // 复选框变化事件
     handleCheckboxChange(e) {
+        const oldCheckIds = this.data.checkedIds;
         const checkedIds = e.detail.value; // 选中的商品id数组（如 ['1', '2']）
         const cartList = this.data.cartList.map(item => {
-        item.checked = checkedIds.includes(item.id.toString());
+        item.checkFlag = checkedIds.includes(item.id.toString());
             return item;
         });
-        
+        console.log("33333333",oldCheckIds,checkedIds);
+        // 取消选中
+        if(oldCheckIds.length > checkedIds.length){
+           let id = oldCheckIds.filter(item=>!checkedIds.includes(item));
+           this.handleCheckboxFn(id[0]);
+        }else{
+           this.handleCheckboxFn(checkedIds.at(-1));
+        }
         this.setData({ 
             cartList,
+            checkedIds,
             isAllChecked: checkedIds.length === this.data.cartList.length
         });
         this.calculateTotal(); // 计算总价
@@ -36,7 +82,7 @@ Page({
     toggleAll() {
         const isAllChecked = !this.data.isAllChecked;
         const cartList = this.data.cartList.map(item => {
-        item.checked = isAllChecked;
+        item.checkFlag = isAllChecked;
             return item;
         });
         this.setData({ cartList, isAllChecked });
@@ -46,7 +92,7 @@ Page({
     increaseCount(e) {
         const id = e.currentTarget.dataset.id;
         const cartList = this.data.cartList.map(item => {
-        if (item.id == id) item.count++;
+        if (item.id == id) item.quantity++;
             return item;
         });
         this.setData({ cartList });
@@ -57,7 +103,7 @@ Page({
     decreaseCount(e) {
         const id = e.currentTarget.dataset.id;
         const cartList = this.data.cartList.map(item => {
-        if (item.id == id && item.count > 1) item.count--;
+        if (item.id == id && item.quantity > 1) item.quantity--;
             return item;
         });
         this.setData({ cartList });
@@ -68,8 +114,8 @@ Page({
         let totalPrice = 0;
         let checkedCount = 0;
         this.data.cartList.forEach(item => {
-        if (item.checked) {
-            totalPrice += item.price * item.count;
+        if (item.checkFlag) {
+            totalPrice += item.price * item.quantity;
             checkedCount++;
         }
         });

pages/cart/cart.wxml

@@ -11,17 +11,17 @@
     <view class="prodsList">
         <checkbox-group bindchange="handleCheckboxChange">
             <view class="itemProd" wx:for="{{cartList}}" wx:key="id">
-                <checkbox value="{{item.id}}" checked="{{item.checked}}"></checkbox>
+                <checkbox value="{{item.id}}" checked="{{item.checkFlag}}"></checkbox>
                 <view class="goods-info">
                     <image src="/images/index/category-item.png" mode="aspectFill"></image>
                     <view class="info">
-                        <text>{{item.name}}</text>
-                        <text>白色/M</text>
+                        <text>{{item.prodName}}</text>
+                        <text>{{item.prodAttrName}}</text>
                         <text>¥{{item.price}}</text>
                     </view>
                     <view class="count">
                         <text class="reduceNum" bindtap="decreaseCount" data-id="{{item.id}}">-</text>
-                        <text class="num">{{item.count}}</text>
+                        <text class="num">{{item.quantity}}</text>
                         <text class="addNum" bindtap="increaseCount" data-id="{{item.id}}">+</text>
                     </view>
                 </view>
@@ -45,6 +45,6 @@
         </label>
         <text wx:if="{{!isManage}}">合计：¥{{totalPrice}}</text>
         <text wx:if="{{!isManage}}">确认下单</text>
-        <view class="delete" wx:if="{{isManage}}">删 除</view>
+        <view class="delete" wx:if="{{isManage}}" catchtap="deleteProd">删 除</view>
     </view>
 </view>

pages/index/index.js

@@ -79,21 +79,6 @@ Page({
   handleCloseAddCartModal() {
     this.setData({ showAddCartModal: false });
   },
-  // 添加购物车
-  handleAddToCart(e) {
-    const cartItem = e.detail.item;
-    // 这里实现添加到购物车的逻辑
-    console.log('添加到购物车:', cartItem);
-    
-    // 可以显示添加成功的提示
-    wx.showToast({
-      title: '已加入购物车',
-      icon: 'success'
-    });
-    
-    // 关闭弹框
-    this.setData({ showAddCartModal: false });
-  },
   methods: {
     onLoad: async function (options) {
 

pages/index/index.wxml

@@ -41,6 +41,6 @@
   <product-list position="index" bindaddCart="showAddCartModal"></product-list>
 
   <!-- 商品属性模态框 -->
-  <addCartModel visible="{{showAddCartModal}}" product="{{currentProduct}}" bindclose="handleCloseAddCartModal" bindadd="handleAddToCart"></addCartModel>
+  <addCartModel visible="{{showAddCartModal}}" product="{{currentProduct}}" bindclose="handleCloseAddCartModal"></addCartModel>
 
 </view>

service/api.js

@@ -233,5 +233,21 @@ export const API = {
     // 添加购物车
     addCart: function(payload){
         return http.post("/api/store/carts/add",payload)
-    }
+    },
+    // 获取商品详情
+    getProdDetail: function(payload){
+        return http.post("/api/store/homepage/prodDetail",payload)
+    },
+    // 添加购物车
+    addCarts: function(playload){
+        return http.post("/api/store/carts/add",playload)
+    },
+    // 选中/取消购物车商品
+    checkedCartProds: function(playload){
+        return http.post("/api/store/carts/checked",playload)
+    },
+    // 删除购物车选中的商品
+    deleteCartProds: function(playload){
+        return http.post("/api/store/carts/delete",playload)
+    },
 }