购物车

pages/cart/cart.js

@@ -1 +1,70 @@
-Page({})
+Page({
+    data:{
+        cartList: [
+            { id: 1, name: "商品A", price: 100, checked: false, count: 1 },
+            { id: 2, name: "商品B", price: 200, checked: false, count: 2 },
+            { id: 3, name: "商品C", price: 300, checked: false, count: 1 }
+        ],
+        isAllChecked: false, // 全选状态
+        totalPrice:0,
+        checkedCount:0
+    },
+    // 复选框变化事件
+    handleCheckboxChange(e) {
+        const checkedIds = e.detail.value; // 选中的商品id数组（如 ['1', '2']）
+        const cartList = this.data.cartList.map(item => {
+        item.checked = checkedIds.includes(item.id.toString());
+            return item;
+        });
+        
+        this.setData({ 
+            cartList,
+            isAllChecked: checkedIds.length === this.data.cartList.length
+        });
+        this.calculateTotal(); // 计算总价
+    },
+    // 全选/取消全选
+    toggleAll() {
+        const isAllChecked = !this.data.isAllChecked;
+        const cartList = this.data.cartList.map(item => {
+        item.checked = isAllChecked;
+            return item;
+        });
+        this.setData({ cartList, isAllChecked });
+        this.calculateTotal();
+    },
+    // 增加数量
+    increaseCount(e) {
+        const id = e.currentTarget.dataset.id;
+        const cartList = this.data.cartList.map(item => {
+        if (item.id == id) item.count++;
+            return item;
+        });
+        this.setData({ cartList });
+        this.calculateTotal();
+    },
+  
+    // 减少数量
+    decreaseCount(e) {
+        const id = e.currentTarget.dataset.id;
+        const cartList = this.data.cartList.map(item => {
+        if (item.id == id && item.count > 1) item.count--;
+            return item;
+        });
+        this.setData({ cartList });
+        this.calculateTotal();
+    },
+    // 计算总价和选中数量
+    calculateTotal() {
+        let totalPrice = 0;
+        let checkedCount = 0;
+        this.data.cartList.forEach(item => {
+        if (item.checked) {
+            totalPrice += item.price * item.count;
+            checkedCount++;
+        }
+        });
+        this.setData({ totalPrice, checkedCount });
+    }
+
+})

pages/cart/cart.wxml

@@ -1,4 +1,34 @@
 <view>
+    <view class="manage">
+       <text>管  理</text>
+    </view>
+    <!-- 暂无可管理商品 -->
+    <view class="empty" wx:if="{{false}}">
+       <image class="emptyIcon" src="/images/cart/empty.png" alt=""/>
+       <text>暂无可管理商品</text>
+    </view>
+    <!-- 商品列表 -->
+    <view class="prodsList">
+        <checkbox-group bindchange="handleCheckboxChange">
+            <view class="itemProd" wx:for="{{cartList}}" wx:key="id">
+                <checkbox value="{{item.id}}" checked="{{item.checked}}"></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.price}}</text>
+                    </view>
+                </view>
+                <view class="count">
+                    <text class="reduceNum" bindtap="decreaseCount" data-id="{{item.id}}">-</text>
+                    <text class="num">{{item.count}}</text>
+                    <text class="addNum" bindtap="increaseCount" data-id="{{item.id}}">+</text>
+                </view>
+            </view>
+        </checkbox-group>
+    
+    </view>
     <!-- 推荐 -->
     <view class="recommend">
         <view class="divider">
@@ -8,4 +38,12 @@
         </view>
         <product-list position="hot"></product-list>
     </view>
+    <!-- 底部全选和总价 -->
+    <view class="footer">
+        <label>
+            <checkbox value="all" checked="{{isAllChecked}}" bindtap="toggleAll">全选</checkbox>
+        </label>
+        <text>总价：¥{{totalPrice}}</text>
+        <button>结算({{checkedCount}})</button>
+    </view>
 </view>

pages/cart/cart.wxss

@@ -1,4 +1,84 @@
-
+.manage{
+    width: 668rpx;
+    font-size: 25rpx;
+    text-align: right;
+    border-bottom: 2rpx solid #CFCFCF;
+    margin: 50rpx auto 0 auto;
+}
+/* 暂无可管理商品 */
+.empty{
+    text-align: center;
+    padding: 148rpx 0;
+}
+.emptyIcon{
+    width: 107rpx;
+    height: 107rpx;
+}
+.empty text{
+    font-size: 30rpx;
+    margin-top: 20rpx;
+    display: block;
+}
+/* 商品列表 */
+.prodsList{
+   width: 668rpx;
+   margin: auto;
+}
+.itemProd{
+    height: 224rpx;
+    border-bottom: 1rpx solid #EFEFEF;
+    display: flex;
+    align-items: center;
+}
+/* 商品信息 */
+.goods-info {
+    flex: 1;
+    display: flex;
+    margin-left: 10px;
+}
+.goods-info image {
+    width: 170rpx;
+    height: 170rpx;
+}
+.goods-info .info {
+    margin-left: 10px;
+    display: flex;
+    flex-direction: column;
+}
+  
+/* 数量加减按钮 */
+.count {
+    width: 144rpx;
+    height: auto;
+    display: flex;
+    align-items: center;
+}
+.count .addNum,.count .reduceNum {
+    width: 39rpx;
+    line-height: 39rpx;
+    text-align: center;
+    font-size: 16px;
+    display: inline-block;
+    background: #CFCFCF;
+}
+.count .num{
+    width: 66rpx;
+    text-align: center;
+    display: inline-block;
+}
+  
+  /* 底部栏 */
+  .footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    background: #fff;
+    border-top: 1px solid #eee;
+  }
 .divider{
     margin: 30rpx 0;
     display: flex;