uniapp 购物车代码

以下是一个简单的 uniapp 购物车代码示例：

<template>
  <view>
    <view v-if="cartItems.length === 0">购物车为空</view>
    <view v-else>
      <view v-for="(item, index) in cartItems" :key="index">
        <view>{{ item.name }}</view>
        <view>{{ item.price }}</view>
        <view>
          <button @click="decreaseQuantity(index)">-</button>
          <text>{{ item.quantity }}</text>
          <button @click="increaseQuantity(index)">+</button>
        </view>
      </view>
      <view>总价：{{ total }}</view>
      <button @click="checkout">结算</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        { name: "商品1", price: 10, quantity: 1 },
        { name: "商品2", price: 20, quantity: 2 },
      ],
    };
  },
  computed: {
    total() {
      let sum = 0;
      this.cartItems.forEach((item) => {
        sum += item.price * item.quantity;
      });
      return sum;
    },
  },
  methods: {
    decreaseQuantity(index) {
      if (this.cartItems[index].quantity > 1) {
        this.cartItems[index].quantity--;
      }
    },
    increaseQuantity(index) {
      this.cartItems[index].quantity++;
    },
    checkout() {
      // 结算逻辑
    },
  },
};
</script>

该示例演示了一个购物车的基本功能，包括商品名称、价格、数量、减少数量、增加数量、总价和结算逻辑。你可以根据自己的需求进行修改和扩展。