vue3 购物车页面实现(多选,单选,自动计算价格)

直接复制就可以用

<template>
  <view class="cart">

    <view class="cart_header">
      <view class="cart_edit" @click="toggleEditMode">{{ editMode ? '退出管理' : '管理' }}</view>
    </view>

    <view class="cart_list">
      <view v-for="(item, index) in cartItems" :key="index" class="cart_item">

        <checkbox-group @change="toggleItemSelection(item)" style="transform:scale(0.7)">
          <label>
            <checkbox :value="item.selected" :checked="item.selected" />
          </label>
        </checkbox-group>

        <image class="cart_item_image" :src="item.image"></image>
        <view class="cart_item_info">
          <view class="cart_item_name">{{ item.name }}</view>
          <view class="cart_item_desc">{{ item.specification }}</view>
          <view class="cart_item_bottom">
            <view class="cart_item_price">￥{{ item.price }}</view>
            <view class="cart_item_quantity">
              <view class="cart_item_quantity_btn" @click="decreaseQuantity(item)">-</view>
              <view class="cart_item_quantity_value">{{ item.quantity }}</view>
              <view class="cart_item_quantity_btn" @click="increaseQuantity(item)">+</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view style="height:160rpx"></view>

    <view class="cart_footer">
      <checkbox-group @change="selectAll" style="transform:scale(0.7)">
        <label>
          <checkbox :value="allSelected" :checked="allSelected" />
        </label>
      </checkbox-group>
      <view class="cart_total">
        <view class="cart_total_left">合计：</view>
        <view class="cart_total_right">￥{{ getTotalPrice() }}</view>
      </view>
      <view v-if="!editMode" class="cart_pay" @click="pay">立即付款</view>
      <view v-else class="cart_pay" @click="removeSelectedItems">删除</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const cartItems = ref([
  { image: 'https://cdn.uviewui.com/uview/album/1.jpg', name: '商品名称1', specification: '500ml；两瓶装', price: 10, quantity: 1, selected: false },
  { image: 'https://cdn.uviewui.com/uview/album/1.jpg', name: '商品名称2', specification: '500ml；两瓶装', price: 20000, quantity: 2, selected: false },
  { image: 'https://cdn.uviewui.com/uview/album/1.jpg', name: '商品名称3', specification: '500ml；两瓶装', price: 30, quantity: 3, selected: false },
  { image: 'https://cdn.uviewui.com/uview/album/1.jpg', name: '商品名称4', specification: '500ml；两瓶装', price: 30, quantity: 3, selected: false }
])

const allSelected = ref(false)
const editMode = ref(false)

// 切换编辑模式
const toggleEditMode = () => {
  editMode.value = !editMode.value
}

// 增加数量
const increaseQuantity = (item) => {
  item.quantity++
}

// 减少数量
const decreaseQuantity = (item) => {
  if (item.quantity > 1) {
    item.quantity--
  }
}

// 删除选中的商品
const removeSelectedItems = () => {
  const selectedItems = cartItems.value.filter((item) => item.selected)
  selectedItems.forEach((item) => {
    const index = cartItems.value.indexOf(item)
    if (index !== -1) {
      cartItems.value.splice(index, 1)
    }
  })
}

// 切换商品的选中状态
const toggleItemSelection = (item) => {
  item.selected = !item.selected
}

// 全选/取消全选
const selectAll = () => {
  allSelected.value = !allSelected.value
  cartItems.value.forEach((item) => {
    item.selected = allSelected.value
  })
}

// 计算总价
const getTotalPrice = () => {
  let total = 0
  cartItems.value.forEach((item) => {
    if (item.selected) {
      total += item.price * item.quantity
    }
  })
  return total
}

// 立即付款
const pay = () => {
  const selectedItems = cartItems.value.filter((item) => item.selected)
  // 进行支付操作，可以将选中的商品传递给下一个页面进行处理
  console.log('选中的商品：', selectedItems)
}
</script>


<style lang="scss" scoped>
.cart {
  height: 100%;

  /*checkbox选中后样式  */
  ::v-deep checkbox .wx-checkbox-input {
    border-radius: 50% !important;
  }
  /*checkbox选中后图标样式  */
  ::v-deep checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    color: #fff;
    background: #000000;
    border: 1rpx solid #ffffff;
  }
  .cart_header {
    padding: 40rpx;
    text-align: right;
    .cart_edit {
      font-size: 13px;
      color: #007aff;
    }
  }
  .cart_list {
    flex: 1;
    overflow-y: auto;
    .cart_item {
      display: flex;
      align-items: center;
      padding: 20rpx;
      border-bottom: 1px solid #ccc;

      .cart_item_image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
      }
      .cart_item_info {
        flex: 1;
        .cart_item_name {
          font-size: 14px;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
          margin-bottom: 10rpx;
        }
        .cart_item_desc {
          font-size: 12px;
          color: rgba(102, 102, 102, 1);
        }
        .cart_item_bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 30rpx;
          .cart_item_price {
            font-size: 14px;
            color: red;
          }
          .cart_item_quantity {
            display: flex;
            align-items: center;
            .cart_item_quantity_btn {
              width: 36rpx;
              height: 36rpx;
              line-height: 36rpx;
              text-align: center;
              border: 1px solid #8b8d91;
              margin: 0 10rpx;
              color: #8a8d91;
              cursor: pointer;
            }
            .cart_item_quantity_value {
            }
          }
        }
      }
      .cart_item_remove {
        font-size: 14px;
        color: #007aff;
        cursor: pointer;
      }
    }
  }
  .cart_footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999; 
    height: 160rpx;
    display: flex;
    align-items: center;
    padding: 0 40rpx;
    background: #fff;
    border-top: 1px solid rgb(216, 213, 213);
    .cart_select_all {
      flex: 1;
      font-size: 14px;
      color: #007aff;
    }
    .cart_total {
      flex: 1;
      display: flex;
      align-items: center;
      .cart_total_left {
        font-size: 12px;
        font-weight: 500;
        color: #000000;
      }
      .cart_total_right {
        font-size: 20px;
        font-weight: 500;
        color: red;
      }
    }
    .cart_pay {
      margin-left: 20rpx;
      width: 160rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 14px;
      color: #fff;
      background-color: #000000;
      border-radius: 6rpx;
    }
  }
}
</style>