uniapp-实现购物车弹框

原创

已于 2023-09-11 01:00:33 修改 · 722 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #vue.js

于 2023-09-03 05:41:27 首次发布

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

我们知道，像美团和饿了么，还有淘宝京东这些知名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 '.