Vue之实现⼩⽶商城购物车
实现步骤
1、静态页⾯准备
页⾯使⽤了元件的UI的Icon 图标， ，el-checkbox，el-input-number，el-popover，el-button所有在main.js需要引⼊元件的UI。
import ElementUI from 'element-ui';
import'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
页⾯代码如下：
说明：为了⽅便，此处直接放最终的代码。
<template>
<div class="shoppingCart">
<!--购物车头部-->
<div class="cart-header">
<div class="cart-header-content">
<p>
<i class="el-icon-shopping-cart-full" >
</i>
我的购物车
</p>
<span>温馨提⽰：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
</div>
</div>
<!--购物车头部END -->
<!--购物车主要内容区-->
<div class="content" v-if="getShoppingCart.length>0">
<ul>
<!--购物车表头-->
<li class="header">
<div class="pro-check">
<el-checkbox v-model="isAllCheck">全选</el-checkbox>
</div>
<div class="pro-img"></div>
<div class="pro-name">商品名称</div>
<div class="pro-price">单价</div>
<div class="pro-num">数量</div>
<div class="pro-total">⼩计</div>
<div class="pro-action">操作</div>
</li>
<!--购物车表头END -->
<!--购物车列表-->
<li class="product-list" v-for="(item,index) in getShoppingCart":key="item.id">
<div class="pro-check">
<el-checkbox :value="item.check"@change="checkChange($event,index)">
</el-checkbox>
</div>
<div class="pro-img">
<router-link :to="{
path:'/goods/details',
path:'/goods/details',
query:{productID:item.productID}
}">
<img :src="$target + item.productImg"/>
</router-link>
</div>
<div class="pro-name">
<router-link
:to="{ path: '/goods/details', query: {productID:item.productID} }"
>{{item.productName}}</router-link>
</div>
<div class="pro-price">{{item.price}}元</div>
<div class="pro-num">
<el-input-number
size="small"
:value="item.num"
@change="handleChange($event,index,item.productID)"
:min="1"
:
max="item.maxNum"
></el-input-number>
</div>
<div class="pro-total pro-total-in">{{item.price*item.num}}元</div>
<div class="pro-action">
<el-popover placement="right">
<p>确定删除吗？</p>
<div >
<el-button
type="primary"
size="mini"
@click="deleteItem($event,item.id,item.productID)"
>确定</el-button>
</div>
<i class="el-icon-error" slot="reference" ></i>
</el-popover>
</div>
</li>
<!--购物车列表END -->
</ul>
<div ></div>
<!--购物车底部导航条-->
<div class="cart-bar">
<div class="cart-bar-left">
<span>
<router-link to="/goods">继续购物</router-link>
</span>
<span class="sep">|</span>
<span class="cart-total">
共
<span class="cart-total-num">{{getNum}}</span>件商品，已选择
<span class="cart-total-num">{{getCheckNum}}</span>件
</span>
</div>
<div class="cart-bar-right">
<span>
<span class="total-price-title">合计：</span>
<span class="total-price">{{getTotalPrice}}元</span>
</span>
<router-link :to="getCheckNum > 0 ? '/confirmOrder' : ''">
<div :class="getCheckNum > 0 ? 'btn-primary' : 'btn-primary-disabled'">去结算
</div>
</router-link>
</div>
</div>
<!--购物车底部导航条END -->
</div>
</div>
<!--购物车主要内容区END -->
<!--购物车为空的时候显⽰的内容-->
<div v-else class="cart-empty">
<div class="empty">
<h2>您的购物车还是空的！</h2>
<p>快去购物吧！</p>
</div>
</div>
<!--购物车为空的时候显⽰的内容END -->
</div>
</template>
2、创建Vuex
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import shoppingCart from './modules/shoppingCart'
Vue.use(Vuex)
export default new Vuex.Store({
strict:true,
modules:{
shoppingCart
}
})
/store/modules/shoppingCart.js
export default{
state:{
shoppingCart:[]
// shoppingCart结构
/*
shoppingCart = {
id: "", // 购物车id
productID: "", // 商品id
productName: "", // 商品名称
productImg: "", // 商品图⽚
price: "", // 商品价格
num: "", // 商品数量
maxNum: "", // 商品限购数量
check: false // 是否勾选
}
*/
}
}
3、同步购物车状态
思路：
在根组件App.vue监听⽤户登录状态；
如果⽤户已经登录，从数据库获取⽤户的购物车数据，把获取到数据更新到vuex；⽤户没有登录，把vuex中购物车的状态设置为空。
代码如下：
import{ mapActions } from "vuex";
import{ mapGetters } from "vuex";
computed:{
...mapGetters(["getUser","getNum"])
},
methods:{
...mapActions(["setShoppingCart"]),
}
watch:{
// 获取vuex的登录状态
getUser:function(val){
if(val ===""){
// ⽤户没有登录
this.setShoppingCart([]);
}else{
/
/ ⽤户已经登录，获取该⽤户的购物车信息
this.$axios
.post("/api/user/shoppingCart/getShoppingCart",{
user_id: val.user_id
})
.then(res =>{
if(de ==="001"){
// 001 为成功, 更新vuex购物车状态
this.setShoppingCart(res.data.shoppingCartData);
}else{
// 提⽰失败信息
}
})
.catch(err =>{
ject(err);
});
}
}
}
vuex的变异：
setShoppingCart (state, data){
/
/ 设置购物车状态
state.shoppingCart = data;
},
vuex的动作
setShoppingCart({ commit }, data){
commit('setShoppingCart', data);
}
4、动态⽣成购物车页⾯
思路：
通过vuex中的ShoppingCart获取购物车的状态；使⽤v-if判断购物车是否存在商品；
如果存在，使⽤v-for⽣成购物车列表；
如果不存在，显⽰购物车为空的时候显⽰的内容；
购物车html伪代码：
<div class="shoppingCart">
<div class="content" v-if="getShoppingCart.length>0">
<ul>
<li class="header">
<!--购物车表头部分，省略详细代码-->
网页购物车代码</li>
<li class="product-list" v-for="(item,index) in getShoppingCart":key="item.id">
<!--购物车列表部分，省略详细代码-->
</li>
</ul>
</div>
<!--购物车为空的时候显⽰的内容-->
<div v-else class="cart-empty">
<div class="empty">
<h2>您的购物车还是空的！</h2>
<p>快去购物吧！</p>
</div>
</div>
</div>
vuex的getters：
getShoppingCart(state){
// 获取购物车状态
return state.shoppingCart;
}
5、添加商品到购物车
思路：
⽤户在商品的详情页⾯，通过点击加⼊购物车按钮，调⽤点击事件addShoppingCart；
先向最初发起添加购物车的请求，根据返回信息操作vuex；
该商品第⼀次加⼊购物车：通过vuex的Actions（unshiftShoppingCart）把重新返回的购物车信息插⼊vuex；该商品已经在购物车，通过vuex的Actions（addShoppingCartNum）把该商品数量+1；
商品数量达到限购数量，禁⽌点击加⼊购物车按钮。
html：
<el-button class="shop-cart":disabled="dis"@click="addShoppingCart">
加⼊购物车
</el-button>
逻辑代码如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。