uniapp-实现购物车弹框

最近在写一个小程序，其中设计到了购买商品的业务

我们知道，像美团和饿了么，还有淘宝京东这些知名app 都是有购物车的功能

下面我讲一下我实现的思路

=>  使用Vuex

=>  在添加删除时触发对应方法 

=>  判断是加还是减，并把数据做逻辑处理储存 

=>  触发Vuex内的方法，去修改或储存item数据 

=>  渲染到购物车的列表从Vuex内去取 

封装组件

因为不止在一个地方使用到了购物车，所以我选择封装一个组件，可以进行复用 

<template>
	<view>
		<view class="my-cart-mask" v-if="myShow" @click="hide"></view>
		<view class="my-cart animated" v-if="myShow" :class="{slideInUp: wrapper,slideOutDown: !wrapper}">
			<view class="title-wrapper">
				<view class="title">购物车</view>
				<view class="iconfont close" @click="hide"></view>
			</view>
			<view class="list-wrapper" v-if="list.length">
				<view class="cart-list">
					<view v-for="(item, index) in list" :key="index" class="cart-item">
						<cartItem :info="item"></cartItem>
					</view>
				</view>
				<view class="price-wrapper">
					<view class="price-item">包装费<text>¥4</text></view>
					<view class="price-item">配送费<text>¥4</text></view>
					<view class="price-item">快递费<text>¥4</text></view>
				</view>
			</view>
			<view class="empty" v-else>您的购物车是空的</view>
		</view>
	</view>
</template>

<script>
import cartItem from '.