最近在写一个小程序,其中设计到了购买商品的业务
我们知道,像美团和饿了么,还有淘宝京东这些知名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 '.

最低0.47元/天 解锁文章
6568

被折叠的 条评论
为什么被折叠?



