uni-app 模仿美团下单购物车插件需求

当然，针对uni-app模仿美团下单购物车插件的需求，以下是一个简化的购物车功能实现代码示例。这个示例将展示如何管理购物车中的商品，包括添加、删除和更新商品数量。

首先，我们假设有一个商品列表，每个商品有一个唯一的ID、名称和价格。购物车将存储这些商品的ID和对应的数量。

商品列表数据（mock data）

const products = [
    { id: 1, name: '商品A', price: 100 },
    { id: 2, name: '商品B', price: 200 },
    { id: 3, name: '商品C', price: 300 },
];

购物车管理逻辑

export default {
    data() {
        return {
            cart: [], // 存储购物车的商品ID和数量
            products: products, // 商品列表
        };
    },
    methods: {
        // 添加商品到购物车
        addToCart(productId, quantity = 1) {
            let cartItem = this.cart.find(item => item.id === productId);
            if (cartItem) {
                cartItem.quantity += quantity;
            } else {
                this.cart.push({ id: productId, quantity });
            }
        },
        // 从购物车中移除商品
        removeFromCart(productId) {
            this.cart = this.cart.filter(item => item.id !== productId);
        },
        // 更新购物车中商品的数量
        updateCartQuantity(productId, quantity) {
            let cartItem = this.cart.find(item => item.id === productId);
            if (cartItem) {
                cartItem.quantity = quantity;
            }
        },
        // 计算购物车总价
        calculateTotalPrice() {
            return this.cart.reduce((total, item) => {
                const product = this.products.find(p => p.id === item.id);
                return total + (product.price * item.quantity);
            }, 0);
        },
    },
};

示例页面模板

<template>
    <view>
        <block v-for="product in products" :key="product.id">
            <view>
                {{ product.name }} - ¥{{ product.price }}
                <button @click="addToCart(product.id)">添加到购物车</button>
            </view>
        </block>
        
        <view>购物车总价: ¥{{ calculateTotalPrice() }}</view>
        <view>购物车内容:</view>
        <block v-for="item in cart" :key="item.id">
            <view>
                {{ products.find(p => p.id === item.id).name }} - 数量: {{ item.quantity }}
                <button @click="removeFromCart(item.id)">移除</button>
                <button @click="updateCartQuantity(item.id, item.quantity + 1)">+1</button>
                <button @click="updateCartQuantity(item.id, Math.max(item.quantity - 1, 0))">-1</button>
            </view>
        </block>
    </view>
</template>

以上代码展示了如何在uni-app中实现一个简单的购物车插件，包括添加、删除和更新商品数量的功能，以及计算购物车总价。你可以根据实际需求进一步扩展和优化这些功能。