我的-购物车 添加删除 修改商品添加购物车回显 删除

src/api/client/business.js

@@ -173,11 +173,10 @@ export function getCartList(id) {
  * @param {*} data
  * @returns
  */
-export function deleteCartItem(data) {
+export function deleteCartItem(ids) {
   return request({
-    url: `/maintain/cartItem/deleteCartItem`,
+    url: `/maintain/cartItem/deleteCartItem/${ids}`,
     method: 'post',
-    data: data,
     header: {
       'Content-Type': 'application/x-www-form-urlencoded',
     },

src/components/settleBottomBtn/settleBottomBtn.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="container">
-    <view class="item-box">
+    <view class="item-box" @click="pop_show = true">
       <view class="item-left">
         <image class="img" src="@/static/images/shopCarts.png"></image>
         <view class="edge-box">
@@ -13,27 +13,70 @@
           </p>
         </view>
       </view>
-      <view class="item-right" @click="handlerSettleBtn"> 去结算 </view>
+      <view class="item-right" @click.stop="handlerSettleBtn"> 去结算 </view>
     </view>
+
+    <u-popup :show="pop_show" @close="pop_show = false" round='20' mode='bottom'>
+      <view class="pop" v-for="(item,index) of goodsCateList" :key='index'>
+        <view class="pop-box">
+          <!-- <u-swipe-action> -->
+          <!-- <u-swipe-action-item :options="options1"> -->
+          <view class="pop-item">
+            <view class="left">
+              <view class="item-left">
+                <image class="left-img" :src='item.goodsPic'></image>
+              </view>
+              <view class="item-right">
+                <view class="right-name">{{ item.goodsName }}</view>
+
+                <view class="right-price"> <span>￥</span> {{ item.price }}</view>
+              </view>
+            </view>
+            <view class="right">
+              <u-number-box v-model="item.quantity" @change="valChange(item,$event)"></u-number-box>
+              <button class="btn" @click.stop="handlerService(item)">删除</button>
+            </view>
+          </view>
+          <!-- </u-swipe-action-item> -->
+          <!-- </u-swipe-action> -->
+
+        </view>
+
+      </view>
+    </u-popup>
   </view>
 </template>
 
 <script>
   import {
-    addShoppingCart
+    addShoppingCart,
+    editGoodsNumb,
+    deleteCartItem
   } from '@/api/client/business.js';
   export default {
     data() {
-      return {}
+      return {
+        pop_show: false,
+        // options1: [{
+        //   text: '删除'
+        // }]
+      }
     },
     props: {
       goodsCateList: {
         type: Array,
         default: []
       },
-      ids:{
-        type:String,
-        default:''
+      ids: {
+        type: String,
+        default: ''
+      }
+    },
+    watch:{
+      goodsCateList(newValue){
+        if(newValue.length == 0){
+          this.pop_show = false
+        }
       }
     },
     computed: {
@@ -42,12 +85,11 @@
         this.goodsCateList.map(rs => {
           sum += Number((rs.price).toFixed(2) * rs.quantity)
         })
-        console.log('@@@@sum', sum);
         return sum
       },
       allNumb() {
         let allNumber = 0
-        this.goodsCateList.map(rs=>{
+        this.goodsCateList.map(rs => {
           allNumber += Number(rs.quantity)
         })
         return allNumber
@@ -56,36 +98,43 @@
     methods: {
       // 结算按钮
       handlerSettleBtn() {
-        // this.goodsCateList.map(rs => {
-        //   addShoppingCart(rs).then(res => {
-        //     if (res.code == 200) {
-        //       wx.showLoading({
-        //         title: '结算中',
-        //       })
-        //     } else {
-        //       uni.showToast({
-        //         title: res.message,
-        //         icon: 'none'
-        //       })
-        //       return
-        //     }
-        //   })
-        // })
-        // setTimeout(()=>{
-        //   wx.hideLoading()
-        //   this.goodsCateList = []
-        if(this.goodsCateList.length == 0){
+        if (this.goodsCateList.length == 0) {
           uni.showToast({
-            title:'请添加购物车',
-            icon:'none'
+            title: '请添加购物车',
+            icon: 'none'
           })
           return
-        }else{
+        } else {
           uni.navigateTo({
-          	url:`/pages/client/clientPackage/uptickOrder?ids=${this.ids}`
+            url: `/pages/client/clientPackage/uptickOrder?ids=${this.ids}`
           })
         }
-        // },1500)
+      },
+      // 修改商品数量
+      valChange(item, e) {
+        editGoodsNumb(item.id, {
+          quantity: e.value
+        }).then(res => {
+          console.log('@@@2res', res)
+        })
+      },
+      // 点击删除按钮
+      handlerService(item, e) {
+        deleteCartItem(item.id).then(res => {
+          if (res.code == 200) {
+            uni.showToast({
+              title: '删除成功',
+              icon: 'none'
+            })
+            this.$emit("handlerDeleteGoods")
+          } else {
+            uni.showToast({
+              title: res.msg,
+              icon: 'none'
+            })
+            return
+          }
+        })
       }
     }
   }
@@ -159,5 +208,73 @@
         justify-content: center;
       }
     }
+
+    .pop {
+      max-height: 700rpx;
+      overflow-y: auto;
+    }
+
+    .pop-box {
+      padding: 20rpx;
+
+      .pop-item {
+        padding: 20rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20rpx;
+        box-shadow: 0 5rpx 12rpx 0rpx rgba(0, 0, 0, 0.2);
+        box-sizing: border-box;
+        height: 100%;
+
+        .left {
+          display: flex;
+        }
+
+        .item-left {
+          .left-img {
+            width: 160rpx;
+            height: 160rpx;
+            border-radius: 20rpx;
+          }
+        }
+
+        .item-right {
+          margin-left: 20rpx;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+
+          .right-name {
+            font-size: 32rpx;
+            font-weight: bold;
+          }
+
+          .right-price {
+            color: #ff4b04;
+            font-size: 30rpx;
+            font-weight: bold;
+
+            span {
+              font-size: 24rpx;
+            }
+          }
+        }
+
+        .right {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+
+          .btn {
+            font-size: 26rpx;
+            border-radius: 40rpx;
+            border: 2rpx solid #ec5729;
+            color: #ec5729;
+            background-color: #fff;
+          }
+        }
+      }
+    }
   }
 </style>

src/components/shopCarItem/shopCarItem.vue

@@ -1,20 +1,97 @@
 <template>
-	<view>
-		123123
-	</view>
+  <view>
+
+
+  </view>
 </template>
 
 <script>
-	export default {
-		name:"shopCarItem",
-		data() {
-			return {
-
-			};
-		}
-	}
+  export default {
+    name: "shopCarItem",
+    data() {
+      return {
+
+      };
+    },
+    props: ['initList']
+  }
 </script>
 
-<style>
+<style lang="scss" scoped>
+  .item-box {
+    background-color: #FFFFFF;
+    padding: 4rpx 20rpx;
+    border-radius: 10rpx;
+    margin-bottom: 20rpx;
+
+    .item-top {
+      padding: 20rpx;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .top-title {
+        font-weight: bold;
+        font-size: 32rpx;
+      }
+    }
+
+  }
+
+  .item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20rpx;
+
+    .item-l {
+      width: 70%;
+      display: flex;
+      align-items: center;
+
+      .l-r {
+        display: flex;
+
+        .r-img {
+          width: 200rpx;
+          height: 200rpx;
+          border-radius: 10rpx;
+        }
+
+        .r-box {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          width: 50%;
+
+          .r-name {
+            font-size: 34rpx;
+            font-weight: bold;
+          }
+
+          .r-discript {
+            max-width: 200rpx;
+            background-color: #F7F8FA;
+            padding: 5rpx 10rpx;
+            border-radius: 10rpx;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          .r-price {
+            color: #FF4D60;
+            font-weight: bold;
+            font-size: 28rpx;
+          }
+        }
+      }
+    }
 
+    .item-r {
+      width: 30%;
+    }
+  }
 </style>

src/pages/client/clientPackage/storeDetail.vue

@@ -83,8 +83,8 @@
               </view>
             </view>
             <view class="btn-box">
-              <button class="btn btn1" @click.stop="handlerService(item, index)">预约</button>
-              <button class="btn btn2" @click.stop="handlerSkipBuy(item, index)">购买</button>
+              <button class="btn" @click.stop="handlerService(item, index)">预约</button>
+              <!-- <button class="btn btn2" @click.stop="handlerSkipBuy(item, index)">购买</button> -->
             </view>
           </view>
         </view>
@@ -97,7 +97,7 @@
 
     <!-- 底部购物车 -->
     <view class="bottom-box">
-      <settleBottomBtn :goodsCateList.sync='goodsCateList' :ids='ids' />
+      <settleBottomBtn :goodsCateList.sync='goodsCateList' :ids='ids' @handlerDeleteGoods='handlerDeleteGoods'/>
     </view>
 
     <!-- 弹窗 -->
@@ -180,12 +180,7 @@
       this.handlerInitLocation();
     },
     onShow() {
-      getCartList(this.ids).then(res => {
-        console.log('getCartList', res);
-        if(res.data.cartItems.length){
-          this.goodsCateList = res.data.cartItems
-        }
-      })
+      this.handletInitShopCarList()
     },
     watch: {
       reserve_show(newValue) {
@@ -198,6 +193,16 @@
     },
 
     methods: {
+      // 初始化购物车列表
+      handletInitShopCarList(){
+        getCartList(this.ids).then(res => {
+            if(res.data.cartItems.length == 0){
+              this.goodsCateList = []
+            }else{
+              this.goodsCateList = res.data.cartItems
+            }
+        })
+      },
       // 获取当前经纬度
       handlerInitLocation() {
         // uni.getLocation({
@@ -366,7 +371,7 @@
         }
         addShoppingCart(params).then(res => {
           if(res.code == 200){
-            this.goodsCateList.push(params)
+            this.handletInitShopCarList()
           }else{
             uni.showToast({
               title:res.msg,
@@ -390,6 +395,9 @@
           this.template_time = this.addParams.appointTime;
         }
       },
+      handlerDeleteGoods(e){
+        this.handletInitShopCarList()
+      }
     },
   };
 </script>
@@ -585,24 +593,14 @@
       }
 
       .btn-box {
-        display: flex;
 
         .btn {
           font-size: 26rpx;
-        }
-
-        .btn1 {
-          border-radius: 40rpx 0 0 40rpx;
+          border-radius: 40rpx ;
           border: 2rpx solid #ec5729;
           color: #ec5729;
           background-color: #fff;
         }
-
-        .btn2 {
-          color: #fff;
-          background-color: #ec5729;
-          border-radius: 0 40rpx 40rpx 0;
-        }
       }
     }
   }

src/pages/client/clientUser/cart/index.vue

@@ -6,27 +6,32 @@
     </view>
     <!-- 列表1 -->
     <!-- <CartList :init_list.sync='init_list' :isAllSecect.sync='isAllSecect' @handlerIsSelectAll='handlerIsSelectAll'></CartList> -->
-    <view class="item-box">
+    <view>
       <u-checkbox-group shape='circle' placement="column" v-model="goodsCheckbox">
-        <shopCarItem />
-        <!-- <view class="item" v-for="(item,index) of init_list" :key='index'>
-          <view class="item-l">
-            <view class="l-l">
-              <u-checkbox :name='item.goodsId'></u-checkbox>
-            </view>
-            <view class="l-r">
-              <image class="r-img" src="@/static/QR57a.jpg" mode="aspectFill"></image>
-              <view class="r-box">
-                <view class="r-name">{{ item.goodsName }}</view>
-                <view class="r-discript">{{ item.goodsSubTitle }}</view>
-                <view class="r-price">￥{{ (item.price * item.quantity).toFixed(2) }}</view>
+        <view class="item-box" v-for="item of init_list">
+          <view class="item-top" @click="handlerSkipShopDetail(item)">
+            <view class="top-title"> {{ item.name }} </view>
+            <u-icon name="arrow-right"></u-icon>
+          </view>
+          <view class="item" v-for="(itm,idx) of item.cartItems" :key='idx' @click="handlerSkipGoodsDetail(item,idx)">
+            <view class="item-l">
+              <view class="l-l">
+                <u-checkbox :name='itm.id'></u-checkbox>
+              </view>
+              <view class="l-r">
+                <image class="r-img" src="@/static/QR57a.jpg" mode="aspectFill"></image>
+                <view class="r-box">
+                  <view class="r-name">{{ itm.goodsName }}</view>
+                  <view class="r-discript">{{ itm.goodsName }}</view>
+                  <view class="r-price">￥{{ (itm.price * itm.quantity).toFixed(2) }}</view>
+                </view>
               </view>
             </view>
+            <view class="item-r">
+              <u-number-box v-model="itm.quantity" @change="valChange(itm,$event)"></u-number-box>
+            </view>
           </view>
-          <view class="item-r">
-            <u-number-box v-model="item.quantity" @change="valChange(item,$event)"></u-number-box>
-          </view>
-        </view> -->
+        </view>
       </u-checkbox-group>
     </view>
 
@@ -54,7 +59,8 @@
         </view>
       </view>
       <view class="settleAccount" @click="handlerSettleBill">
-        {{ !manageShow ? `结算( ${allPrice.goodsNumber} )` : `删除( ${allPrice.goodsNumber} ) ` }} </view>
+        {{ !manageShow ? `结算( ${allPrice.goodsNumber} )` : `删除( ${allPrice.goodsNumber} ) ` }}
+      </view>
     </view>
 
     <u-popup :show="instructionShow" mode='bottom' @close="instructionShow = false" round='20'>
@@ -72,9 +78,7 @@
     editGoodsNumb,
     generateConfirmOrder
   } from "@/api/client/business.js"
-  import shopCarItem from "@/components/shopCarItem/shopCarItem"
   export default {
-    components:{shopCarItem},
     data() {
       return {
         init_list: [],
@@ -84,9 +88,10 @@
         instructionShow: false, // 底部优惠明细
 
         manageShow: false,
-        queryParams:{
-          paging:'1,10'
-        }
+        queryParams: {
+          paging: '1,10'
+        },
+        AllGoods: []
       }
     },
     onShow() {
@@ -94,7 +99,7 @@
     },
     watch: {
       goodsCheckbox(newValue) {
-        if (newValue.length == this.init_list.length) {
+        if (newValue.length == this.AllGoods.length && (newValue.length != 0 || this.AllGoods.length != 0)) {
           this.isAllSecect.push("0")
         } else {
           this.isAllSecect = []
@@ -106,8 +111,8 @@
         let sum = 0
         let goodsNumber = 0
         this.goodsCheckbox.map(rs => {
-          this.init_list.map(rc => {
-            if (rs == rc.goodsId) {
+          this.AllGoods.map(rc => {
+            if (rs == rc.id) {
               rc.allPrice = Number((rc.price * rc.quantity).toFixed(2))
               sum += rc.allPrice
               goodsNumber += rc.quantity
@@ -124,23 +129,40 @@
       // 初始化购物车列表
       handlerInitList() {
         getShoppingCart(this.queryParams).then(res => {
-          this.init_list = res.data
+          this.init_list = res.data.records
+          this.init_list.map(rs => {
+            rs.cartItems.map(rc => {
+              this.AllGoods.push(rc)
+            })
+          })
         })
       },
       // 结算按钮
       handlerSettleBill() {
         if (this.manageShow) {
-          deleteCartItem({
-            ids: this.goodsCheckbox
-          }).then(res => {
-            console.log('@@@@res', res)
+          deleteCartItem( this.goodsCheckbox.join(',')).then(res => {
+            if(res.code == 200){
+              uni.showToast({
+                title:'删除成功',
+                icon:'none'
+              })
+              this.handlerInitList()
+              this.AllGoods = []
+              this.isAllSecect = []
+              this.goodsCheckbox = []
+            }else{
+              uni.showToast({
+                title:res.msg,
+                icon:'none'
+              })
+              return
+            }
           })
         } else {
           generateConfirmOrder({
             cartIds: this.goodsCheckbox,
             payType: 2
           }).then(res => {
-            console.log('@@@@res', res)
             if (res.code == 200) {
               uni.navigateTo({
                 url: '/pages/client/clientPackage/uptickOrder'
@@ -149,9 +171,9 @@
           })
         }
       },
-
+      // 修改商品数量
       valChange(item, e) {
-        editGoodsNumb(item.goodsId, {
+        editGoodsNumb(item.id, {
           quantity: e.value
         }).then(res => {
           console.log('@@@2res', res)
@@ -162,8 +184,8 @@
       isAllChange(e) {
         if (e.length) {
           this.goodsCheckbox = []
-          this.init_list.map(rs => {
-            this.goodsCheckbox.push(rs.goodsId)
+          this.AllGoods.map(rs => {
+            this.goodsCheckbox.push(rs.id)
           })
         } else {
           this.goodsCheckbox = []
@@ -173,6 +195,18 @@
       handlerManage() {
         this.manageShow = !this.manageShow
         this.goodsCheckbox = []
+      },
+      // 跳转到商家详情
+      handlerSkipShopDetail(item){
+        uni.navigateTo({
+          url: `/pages/client/clientPackage/storeDetail?id=${item.id}`,
+        });
+      },
+      // 跳转到商品详情
+      handlerSkipGoodsDetail(item,idx){
+        uni.navigateTo({
+          url: `/pages/client/clientPackage/serviceDetail/index?id=${item.cartItems[idx].goodsId}&shopId=${item.id}`,
+        });
       }
     }
   };
@@ -225,65 +259,80 @@
   }
 
   .item-box {
+    background-color: #FFFFFF;
+    padding: 4rpx 20rpx;
+    border-radius: 10rpx;
+    margin-bottom: 20rpx;
 
-    .item {
+    .item-top {
+      padding: 20rpx;
+      box-sizing: border-box;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      background-color: #FFFFFF;
-      padding: 4rpx 20rpx;
-      border-radius: 10rpx;
-      margin-bottom: 20rpx;
 
-      .item-l {
-        width: 70%;
+      .top-title {
+        font-weight: bold;
+        font-size: 32rpx;
+      }
+    }
+
+  }
+
+  .item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20rpx;
+
+    .item-l {
+      width: 70%;
+      display: flex;
+      align-items: center;
+
+      .l-r {
         display: flex;
-        align-items: center;
 
-        .l-r {
+        .r-img {
+          width: 200rpx;
+          height: 200rpx;
+          border-radius: 10rpx;
+        }
+
+        .r-box {
           display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          width: 50%;
 
-          .r-img {
-            width: 200rpx;
-            height: 200rpx;
-            border-radius: 10rpx;
+          .r-name {
+            font-size: 34rpx;
+            font-weight: bold;
           }
 
-          .r-box {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            width: 50%;
-
-            .r-name {
-              font-size: 34rpx;
-              font-weight: bold;
-            }
-
-            .r-discript {
-              max-width: 200rpx;
-              background-color: #F7F8FA;
-              padding: 5rpx 10rpx;
-              border-radius: 10rpx;
-              display: -webkit-box;
-              -webkit-line-clamp: 2;
-              -webkit-box-orient: vertical;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            }
+          .r-discript {
+            max-width: 200rpx;
+            background-color: #F7F8FA;
+            padding: 5rpx 10rpx;
+            border-radius: 10rpx;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
 
-            .r-price {
-              color: #FF4D60;
-              font-weight: bold;
-              font-size: 28rpx;
-            }
+          .r-price {
+            color: #FF4D60;
+            font-weight: bold;
+            font-size: 28rpx;
           }
         }
       }
+    }
 
-      .item-r {
-        width: 30%;
-      }
+    .item-r {
+      width: 30%;
     }
   }