实现一个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小程序商城购物车代码，可以根据具体需求进行修改和优化。