uniapp小程序购物车

uni-app小程序的购物车是一个实现购物功能的核心模块。在uni-app中，可以使用change方法来更新购物车中商品的数量，该方法需要传递商品数量和商品id作为参数。同时，可以使用del方法来删除购物车中的商品，该方法需要传递商品id作为参数。购物车页面的数据渲染可以通过请求接口获取购物车的列表数据，并将数据进行渲染。购物车页面的总结信息可以通过res.send方法来发送给前端。

相关问题

实现一个uniapp小程序商城精美购物车代码

这里提供一个简单的uniapp小程序商城购物车代码，仅供参考：

1. 定义购物车数据结构

在页面的data中定义一个购物车数组，用于存储用户选择的商品信息，包括商品id、名称、价格、数量等。

data: {
  cartList: [
    { id: 1, name: '商品1', price: 10, num: 1 },
    { id: 2, name: '商品2', price: 20, num: 2 }
  ],
  ...
}

2. 显示购物车列表

在页面中使用v-for指令遍历购物车数组，将每个商品的信息展示出来，包括商品名称、价格、数量、小计等。

<view v-for="(item, index) in cartList" :key="item.id">
  <text>{{ item.name }}</text>
  <text>{{ item.price }}</text>
  <text>{{ item.num }}</text>
  <text>{{ item.price * item.num }}</text>
</view>

3. 添加商品到购物车

在商品详情页中添加一个“加入购物车”按钮，点击该按钮将该商品的信息加入到购物车数组中。

addCart() {
  const cartItem = {
    id: this.goods.id,
    name: this.goods.name,
    price: this.goods.price,
    num: 1
  }
  this.$set(this.$parent.cartList, this.$parent.cartList.length, cartItem)
}

4. 修改购物车商品数量

在购物车列表中，用户可以修改每个商品的数量，通过v-model指令实现双向数据绑定，修改数量时同时更新小计。

<view v-for="(item, index) in cartList" :key="item.id">
  <text>{{ item.name }}</text>
  <text>{{ item.price }}</text>
  <input type="number" v-model="item.num" @change="onChangeNum(index)">
  <text>{{ item.price * item.num }}</text>
</view>

onChangeNum(index) {
  const item = this.cartList[index]
  item.num = parseInt(item.num)
  this.$set(this.cartList, index, item)
}

5. 删除购物车商品

在购物车列表中，用户可以删除每个商品，通过数组的splice方法删除对应的元素。

<view v-for="(item, index) in cartList" :key="item.id">
  <text>{{ item.name }}</text>
  <text>{{ item.price }}</text>
  <input type="number" v-model="item.num" @change="onChangeNum(index)">
  <text>{{ item.price * item.num }}</text>
  <button @click="onDelete(index)">删除</button>
</view>

onDelete(index) {
  this.cartList.splice(index, 1)
}

这是一个简单的uniapp小程序商城购物车代码，可以根据具体需求进行修改和优化。

Uniapp小程序用Vue 2语法写出购物车单选全选

可以参考以下代码实现购物车单选全选功能：

<template>
  <div>
    <div v-for="(item, index) in cartList" :key="index">
      <label>
        <input type="checkbox" v-model="item.checked" @change="handleCheckboxChange">
        {{ item.name }}
      </label>
      <span>{{ item.price }}</span>
    </div>
    <div>
      <label>
        <input type="checkbox" v-model="isAllChecked" @change="handleAllCheckboxChange">
        全选
      </label>
      <span>{{ totalPrice }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartList: [
        { name: '商品1', price: 10, checked: false },
        { name: '商品2', price: 20, checked: false },
        { name: '商品3', price: 30, checked: false }
      ]
    }
  },
  computed: {
    isAllChecked() {
      return this.cartList.every(item => item.checked)
    },
    totalPrice() {
      return this.cartList.filter(item => item.checked).reduce((total, item) => total + item.price, 0)
    }
  },
  methods: {
    handleCheckboxChange() {
      this.$nextTick(() => {
        this.isAllChecked = this.cartList.every(item => item.checked)
      })
    },
    handleAllCheckboxChange() {
      this.cartList.forEach(item => {
        item.checked = this.isAllChecked
      })
    }
  }
}
</script>

在上面的代码中，我们首先定义了一个 `cartList` 数组来存储购物车中的商品信息，每个商品包括名称、价格和是否选中三个属性。接着，我们通过 `v-for` 指令遍历 `cartList` 数组，动态生成购物车列表。

在购物车列表中，我们使用了一个复选框来表示每个商品的选中状态，使用了 `v-model` 指令来双向绑定商品的 `checked` 属性。当用户点击某个商品的复选框时，我们通过 `@change` 监听其变化，并在 `handleCheckboxChange` 方法中更新全选复选框的选中状态。

在最后一行，我们使用了一个全选复选框来表示购物车中所有商品的选中状态。与单个商品的复选框类似，我们使用了 `v-model` 指令来双向绑定全选复选框的 `isAllChecked` 属性。当用户点击全选复选框时，我们通过 `@change` 监听其变化，并在 `handleAllCheckboxChange` 方法中更新所有商品的选中状态。同时，我们还使用了计算属性来计算购物车中所有选中商品的总价。