uni-app-shopping/src/pages/cart/cart.vue

<template>
  <view class="cart">
      <block v-if="cartList.length !== 0">
        <view class="cart_item" v-for="(item, index) in cartList" :key="item.goods_id">
            <!-- 1. 选择按钮 -->
            <radio class="cart_item_radio" @tap="itemSelectChangeHandle(item.goods_id)" :checked="item.goods_select" color="#e03440" />
            <!-- 2. 商品组件 -->
            <goodsItem :item="item" />
            <!-- 3. 计数器 -->
            <view class="count">
                <view @tap="itemChangeCount(index, -1)" class="count_btn iconfont icon-jianshao"></view>
                <text class="count_text">{{ item.goods_count }}</text>
                <view @tap="itemChangeCount(index, 1)" class="count_btn iconfont icon-zengjia"></view>
            </view>
            </view>

            <!-- 底部结算栏 -->
            <view class="bottom">
            <radio @tap="selectAllChange" :checked="selectAll" color="#E03440" class="select_btn" />
            <text class="select_text">全选</text>
            <text class="total_text">合计：</text>
            <text class="price">{{totalPrice}}</text>
            <view @tap="goToPay" class="bottom_btn" :class="{disable: totalCount === 0}">去结算({{totalCount}})</view>
        </view>
      </block>
      <!-- 如果购物车为空 -->
      <view v-else class="cart_empty">
          <image class="cart_empty_image" mode="widthFix" src="/static/cart_empty_image.gif" />
          <navigator class="cart_empty_button" url="/pages/index/index" open-type="switchTab">去首页看看</navigator>
      </view>
  </view>
</template>

<script>
export default {
  data(){
    return {
      cartList: [],
    //   selectAll: false
    } 
  },
  onShow() {
    const cartList = uni.getStorageSync("cartList") || [];
    this.cartList = cartList
    // this.selectAll = this.cartList.every(item=>item.goods_select === true)
  },
  methods: {
      // 商品选择按钮切换
      itemSelectChangeHandle(goods_id){
          // 选中状态取反
        //   this.cartList[index].goods_select = !this.cartList[index].goods_select
        const index = this.cartList.findIndex(item=>item.goods_id === goods_id)
        this.cartList[index].goods_select = !this.cartList[index].goods_select

        // 判断全选
        //  this.selectAll = this.cartList.every(item=>item.goods_select === true)
      },

      // 商品数量的增减
      itemChangeCount(index, num){
          // 如果数量为1 , 并且还减少, 提示删除商品
          if(this.cartList[index].goods_count === 1 && num === -1){
            wx.showModal({
                content: '是否删除该商品',
                success: (res) => {
                    if (res.confirm) {
                        this.cartList.splice(index, 1)
                    }
                }
            })
            return
          }
          this.cartList[index].goods_count += num
      },
      // 更改全选状态
      selectAllChange(){
          let temp = !this.selectAll
          this.cartList.forEach(item=>item.goods_select = temp)
      },
      // 去支付页面
      goToPay(){
          if(this.totalCount===0){
              uni.showToast({
                  title:"请选择结算商品",
                  icon: "none"
              })
          }else{
              console.log("跳转到结算页面")          }
      }
  },
  //深度监听
  watch: {
      cartList: {
          deep: true,
          handler(val){
              uni.setStorageSync("cartList", val)
          }
      }
  },
  // 计算属性
  computed: {
      // 全选状态
      selectAll(){
          return this.cartList.every(item=>item.goods_select === true)
      },
      // 总价格
      totalPrice(){
          let totalPrice = 0
          this.cartList.forEach(item => {
              if(item.goods_select){
                  totalPrice += item.goods_price * item.goods_count
              }
          })
          return totalPrice
      },
      // 总数量
      totalCount(){
          let totalCount = 0
        // 京东规则 
        //   this.cartList.forEach(item => {
        //       if(item.goods_select){
        //           totalCount += item.goods_count
        //       }
        //   })
        // 淘宝规则 
         totalCount = this.cartList.filter(item=>item.goods_select).length
          return totalCount
      }
  }
}
</script>

<style lang="scss">
.cart {
  padding-bottom: 83rpx;
}

.cart_item {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  position: relative;
  .cart_item_radio {
     margin: 0 20rpx;
  }
  .count {
    position: absolute;
    right: 0rpx;
    bottom: 0rpx;
    display: flex;
    padding: 20rpx;
    align-items: center;
    .iconfont {
      font-size: 40rpx;
    }
    .icon-jianshao {
      font-size: 44rpx;
    }
    .count_text {
      // 建议使用最小宽
      min-width: 80rpx;
      text-align: center;
    }
  }
}

.bottom {
  height: 83rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1rpx solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  .select_text {
    margin: 0 20rpx;
    color: #888;
    font-size: 22rpx;
  }

  .total_text {
    font-size: 26rpx;
  }

  .price {
    font-size: 28rpx;
    flex: 1;
  }

  .bottom_btn {
    font-size: 22rpx;
    width: 150rpx;
    height: 52rpx;
    border-radius: 26rpx;
    color: #fff;
    background-color: #ea4350;
    display: flex;
    justify-content: center;
    align-items: center;
    &.disable {
        background-color: #ccc;
    }
  }
}

.cart_empty {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .cart_empty_image {
    width: 400rpx;
  }

  .cart_empty_button {
    margin-top: 20rpx;
    width: 400rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ea4350;
    color: #fff;
    border-radius: 30rpx;
  }
}
</style>