购物车

yuan ma/mp-shop/pages/cart/cart.js

@@ -1,54 +1,52 @@
-const { getCart,delGoodsCart } = require("../../api/index.js")
+// 引入获取购物车和删除购物车商品的API方法
+const { getCart, delGoodsCart } = require("../../api/index.js");
 
+// 定义小程序页面对象
 Page({
-
-    /**
-     * 页面的初始数据
-     */
+    // 页面数据对象，初始时cartData为空数组
     data: {
-        cartData:[]
+        cartData: []
     },
-    /**
-     * 每次打开页面，都会执行
-     */
-    onShow(){
-        this.http()
+
+    // 页面显示时触发的方法，调用http方法获取购物车数据
+    onShow() {
+        this.http();
     },
 
+    // 跳转到商品详情页的方法，根据传入的商品ID进行跳转
     goDetail(e) {
-      const id = e.currentTarget.dataset.id;
-      wx.navigateTo({
-          url: `/pages/goodsDetails/goodsDetails?id=${id}`
-      });
-  },
-    // 根源
-    delCartHandle(e){
-      console.log("删除按钮被点击");
-        console.log(e.currentTarget.dataset.id);
-        /**
-         * 这里有两个ID
-         *  1. currentID:商品ID（同一个商品，加入购物车多次的时候，会一次性全删除）
-         *  2. id:每条数据的唯一索引(推荐)课程中选择的方式
-         */
-        delGoodsCart({currentID:e.currentTarget.dataset.id}).then(res =>{
-            if(res.data.status === 200){
-                wx.showToast({
-                  title: '删除成功',
+        const id = e.currentTarget.dataset.id; // 获取当前点击元素的数据集中的id值
+        wx.navigateTo({
+            url: `/pages/goodsDetails/goodsDetails?id=${id}` // 跳转到商品详情页，并传递商品ID参数
+        });
+    },
+
+    // 删除购物车商品的方法，根据传入的商品ID进行删除操作
+    delCartHandle(e) {
+        console.log("删除按钮被点击"); // 打印日志，表示删除按钮被点击
+        console.log(e.currentTarget.dataset.id); // 打印当前点击元素的数据集中的id值
+        // 调用删除购物车商品的API方法，传入当前商品ID
+        delGoodsCart({ currentID: e.currentTarget.dataset.id }).then(res => {
+            if (res.data.status === 200) { // 如果API返回的状态码为200，表示删除成功
+                wx.showToast({ // 显示成功提示框
+                    title: '删除成功',
                 });
-                this.http()
-            }else{
-                wx.showToast({
+                this.http(); // 刷新购物车数据
+            } else { // 如果API返回的状态码不是200，表示删除失败
+                wx.showToast({ // 显示失败提示框
                     title: '删除失败',
-                  });
+                });
             }
         });
     },
-    http(){
-        getCart().then(res =>{
-            console.log(res.data.data);
-            this.setData({
-                cartData:res.data.data
+
+    // 获取购物车数据的方法
+    http() {
+        getCart().then(res => { // 调用获取购物车数据的API方法
+            console.log(res.data.data); // 打印API返回的购物车数据
+            this.setData({ // 更新页面数据对象中的cartData属性
+                cartData: res.data.data
             });
         });
     }
-})
+});

yuan ma/mp-shop/pages/cart/cart.wxml

@@ -1,15 +1,8 @@
 <view class="cart">
     <view class="list" wx:for="{{ cartData }}" wx:key="index">
         <van-swipe-cell right-width="{{ 65 }}">
-            <van-card 
-            price="{{ item.price }}"
-             title="{{ item.title }}" 
-             thumb="{{ item.image }}"
-             bindtap="goDetail"
-            data-id="{{ item.id }}"
-             />
+            <van-card price="{{ item.price }}" title="{{ item.title }}" thumb="{{ item.image }}" />
             <view data-id="{{ item.id }}" bindtap="delCartHandle" slot="right" class="van-swipe-cell-right">删除</view>
-            
         </van-swipe-cell>
     </view>
 </view>

yuan ma/mp-shop/pages/cart/cart.wxss

@@ -4,11 +4,10 @@
 .van-swipe-cell-right{
     height: 100%;
     width: 60px;
-    background-color: rgb(255, 7, 7);
+    background-color: #f00;
     text-align: center;
-    color: rgb(255, 255, 255);
+    color: #fff;
     font-size: 16px;
     font-weight: 700;
     padding-top: 40px;
-    display: block;
-}
+}