购物车

pages/cart/cart.js

@@ -1,13 +1,22 @@
+// 获取应用实例
+const {API} = require('../../service/api.js');
 Page({
     data:{
         cartList: [
-            { id: 1, name: "商品A", price: 100, checked: false, count: 1 },
-            { id: 2, name: "商品B", price: 200, checked: false, count: 2 },
+            { id: 1, name: "商品A商品A商品A商品A商品A", price: 100, checked: false, count: 1 },
+            { id: 2, name: "商品B商品B商品B商品B商品B", price: 200, checked: false, count: 2 },
             { id: 3, name: "商品C", price: 300, checked: false, count: 1 }
         ],
         isAllChecked: false, // 全选状态
         totalPrice:0,
-        checkedCount:0
+        checkedCount:0,
+        isManage:false, // 是否进入管理模式
+    },
+    // 获取购物车商品
+    getCartProds(){
+       API.getCartProds().then(res=>{
+           console.log("999999999999",res);
+       })
     },
     // 复选框变化事件
     handleCheckboxChange(e) {
@@ -65,6 +74,14 @@ Page({
         }
         });
         this.setData({ totalPrice, checkedCount });
+    },
+    // 管理按钮
+    manageBut(){
+        this.setData({
+            isManage:!this.data.isManage
+        })
+    },
+    onLoad(){
+        this.getCartProds();
     }
-
 })

pages/cart/cart.wxml

@@ -1,6 +1,6 @@
 <view>
     <view class="manage">
-       <text>管  理</text>
+       <text bindtap="manageBut">{{isManage?"完 成":"管  理"}}</text>
     </view>
     <!-- 暂无可管理商品 -->
     <view class="empty" wx:if="{{false}}">
@@ -19,11 +19,11 @@
                         <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 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>
             </view>
         </checkbox-group>
@@ -39,11 +39,12 @@
         <product-list position="hot"></product-list>
     </view>
     <!-- 底部全选和总价 -->
-    <view class="footer">
-        <label>
-            <checkbox value="all" checked="{{isAllChecked}}" bindtap="toggleAll">全选</checkbox>
+    <view class="footer {{isManage && 'manageFooter'}}" >
+        <label class="checkBoxAll">
+            <checkbox value="all" checked="{{isAllChecked}}" bindtap="toggleAll">全 选</checkbox>
         </label>
-        <text>总价：¥{{totalPrice}}</text>
-        <button>结算({{checkedCount}})</button>
+        <text wx:if="{{!isManage}}">合计：¥{{totalPrice}}</text>
+        <text wx:if="{{!isManage}}">确认下单</text>
+        <view class="delete" wx:if="{{isManage}}">删 除</view>
     </view>
 </view>

pages/cart/cart.wxss

@@ -35,10 +35,12 @@
     flex: 1;
     display: flex;
     margin-left: 10px;
+    position: relative;
 }
 .goods-info image {
     width: 170rpx;
     height: 170rpx;
+    border-radius: 10rpx;
 }
 .goods-info .info {
     margin-left: 10px;
@@ -49,9 +51,14 @@
 /* 数量加减按钮 */
 .count {
     width: 144rpx;
-    height: auto;
+    height: 39rpx;
     display: flex;
     align-items: center;
+    border: 2rpx solid #CFCFCF;
+    border-radius: 50rpx;
+    position: absolute;
+    right: 10rpx;
+    bottom: 0;
 }
 .count .addNum,.count .reduceNum {
     width: 39rpx;
@@ -59,26 +66,40 @@
     text-align: center;
     font-size: 16px;
     display: inline-block;
-    background: #CFCFCF;
 }
 .count .num{
     width: 66rpx;
     text-align: center;
+    border-left: 2rpx solid #CFCFCF;
+    border-right: 2rpx solid #CFCFCF;
     display: inline-block;
 }
   
-  /* 底部栏 */
-  .footer {
+/* 底部栏 */
+.footer {
     position: fixed;
     bottom: 0;
     width: 100%;
+    color: #FFFFFF;
     display: flex;
     align-items: center;
+    justify-content: space-around;
+    padding: 10px 0;
+    background: #FED279;
+}
+.manageFooter{
+    background: #EA6087;
     justify-content: space-between;
-    padding: 10px;
-    background: #fff;
-    border-top: 1px solid #eee;
-  }
+}
+.manageFooter .checkBoxAll{
+    margin-left: 50rpx;
+}
+.footer .delete{
+    width: 125rpx;
+    text-align: right;
+    border-left: 2rpx solid #FFFFFF;
+    margin-right: 50rpx;
+}
 .divider{
     margin: 30rpx 0;
     display: flex;

project.private.config.json

@@ -1,24 +1,24 @@
 {
-    "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-    "projectname": "GululuQ-mp",
-    "setting": {
-        "compileHotReLoad": true,
-        "urlCheck": false,
-        "coverView": true,
-        "lazyloadPlaceholderEnable": false,
-        "skylineRenderEnable": false,
-        "preloadBackgroundData": false,
-        "autoAudits": false,
-        "useApiHook": true,
-        "useApiHostProcess": true,
-        "showShadowRootInWxmlPanel": true,
-        "useStaticServer": false,
-        "useLanDebug": false,
-        "showES6CompileOption": false,
-        "checkInvalidKey": true,
-        "ignoreDevUnusedFiles": true,
-        "bigPackageSizeSupport": false
-    },
-    "libVersion": "3.8.3",
-    "condition": {}
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "GululuQ-mp",
+  "setting": {
+    "compileHotReLoad": true,
+    "urlCheck": false,
+    "coverView": true,
+    "lazyloadPlaceholderEnable": false,
+    "skylineRenderEnable": false,
+    "preloadBackgroundData": false,
+    "autoAudits": false,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "showShadowRootInWxmlPanel": true,
+    "useStaticServer": false,
+    "useLanDebug": false,
+    "showES6CompileOption": false,
+    "checkInvalidKey": true,
+    "ignoreDevUnusedFiles": true,
+    "bigPackageSizeSupport": false
+  },
+  "libVersion": "3.8.4",
+  "condition": {}
 }

service/api.js

@@ -216,14 +216,18 @@ export const API = {
     ]
   }
   */
-  // 获取商品分类信息
-  getProdClasses: function (payload) {
-    return http.get("/api/store/homepage/prodClasses", {
-      ...payload,
-    });
-  },
- // 获取商品列表
- getProdsList: function(payload = {}){
-     return http.post("/api/store/homepage/prods",payload)
- }
+    // 获取商品分类信息
+    getProdClasses: function (payload) {
+        return http.get("/api/store/homepage/prodClasses", {
+        ...payload,
+        });
+    },
+    // 获取商品列表
+    getProdsList: function(payload = {}){
+        return http.post("/api/store/homepage/prods",payload)
+    },
+    //  获取购物车商品
+    getCartProds: function(){
+        return http.get("/api/store/carts/list",{})
+    }
 }