uni-app仿饿了么购物车

在开发一个仿饿了么购物车的uni-app项目时，你可以利用Vue.js的特性和uni-app提供的跨平台能力来实现。下面是一个简单的购物车功能的代码示例，包括商品列表、添加到购物车、购物车显示以及数量修改等功能。

1. 项目结构

uni-app-demo/
├── pages/
│   ├── index/
│   │   ├── index.vue
│   ├── cart/
│       ├── cart.vue
├── store/
│   ├── index.js
├── App.vue
├── main.js
├── manifest.json
└── pages.json

2. 商品列表页面（index.vue）

<template>
  <view>
    <block v-for="(item, index) in products" :key="index">
      <view>
        <text>{{ item.name }}</text>
        <button @click="addToCart(item)">加入购物车</button>
      </view>
    </block>
    <navigator url="/pages/cart/cart">去购物车</navigator>
  </view>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 10 },
        { id: 2, name: '商品2', price: 20 },
        // 更多商品...
      ]
    };
  },
  methods: {
    ...mapMutations(['addToCart']),
    addToCart(item) {
      this.addToCart({ ...item, quantity: 1 });
    }
  }
};
</script>

3. 购物车页面（cart.vue）

<template>
  <view>
    <block v-for="(item, index) in cartList" :key="item.id">
      <view>
        <text>{{ item.name }}</text>
        <text>￥{{ item.price }}</text>
        <button @click="decreaseQuantity(item.id)">-</button>
        <text>{{ item.quantity }}</text>
        <button @click="increaseQuantity(item.id)">+</button>
      </view>
    </block>
    <text>总价：￥{{ totalPrice }}</text>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['cartList', 'totalPrice'])
  },
  methods: {
    ...mapMutations(['increaseQuantity', 'decreaseQuantity']),
    // 你可以在这里添加更多方法，比如移除商品等
  }
};
</script>

4. Vuex Store（index.js）

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    cartList: [],
  },
  getters: {
    totalPrice(state) {
      return state.cartList.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  },
  mutations: {
    addToCart(state, product) {
      const cartItem = state.cartList.find(item => item.id === product.id);
      if (cartItem) {
        cartItem.quantity += 1;
      } else {
        state.cartList.push({ ...product });
      }
    },
    increaseQuantity(state, id) {
      const cartItem = state.cartList.find(item => item.id === id);
      if (cartItem) {
        cartItem.quantity += 1;
      }
    },
    decreaseQuantity(state, id) {
      const cartItem = state.cartList.find(item => item.id === id);
      if (cartItem && cartItem.quantity > 1) {
        cartItem.quantity -= 1;
      } else if (cartItem && cartItem.quantity === 1) {
        const index = state.cartList.indexOf(cartItem);
        if (index > -1) {
          state.cartList.splice(index, 1);
        }
      }
    }
  }
});

这个简单的示例展示了如何使用Vuex来管理购物车状态，并在页面之间共享数据。你可以根据需求进一步扩展和优化。