vue案例：商城（二）
3.购物车页面的实现
界面效果：
（1）.用了vant组件van-card，van-checkbox，van-submit-bar来搭建页面。这里主要讲购物车逻辑关系：全选，反选，选择，添加，删除，总计。用了vuex来处理购物车数据。
state.js，存放数据
export default{
cars:[]
}
actions.js,逻辑操作
export default{
initCars({commit}){//初始化购物车数据
let cars=localStorage.cars?JSON.parse(localStorage.cars):[]
commit('changCar',cars)
},
addCar({commit},params){//添加购物车
let cars=localStorage.cars?JSON.parse(localStorage.cars):[]
//如果存在 num+1 如果不存在 push
//array.some 函数 遍历数组 如果内部返回ture 整个表达式就是ture 不返回就是假
let index=0;
let isHas=cars.some((item)=>{
index++
if(item.id===params.id && item.dec==item.dec){
return true
}
})
if (isHas) {
// 已经存在 num++
cars[index-1].num+=1
}else{
//不存在
params.num=1
cars.push(params)
}
//本地缓存模拟的数据进行更新
localStorage.cars=JSON.stringify(cars)
//vuex 进行更新
commit('changCar',cars)
},
addItem({commit},params){//加号按钮
console.log('添加一件');
let cars=JSON.parse(localStorage.cars)
let arr = cars.filter(function (item) {//选择出符合条件，添加到新数组
return item.id === params.id;
});
if(arr[0].num<arr[0].pnum){
arr[0].num +=1;
}
console.log(cars);
//本地缓存模拟的数据进行更新
localStorage.cars=JSON.stringify(cars)
//vuex 进行更新
commit('changCar',cars)
},
remItem({commit},params){//减号按钮
console.log('减少一件');
let cars=JSON.parse(localStorage.cars)
let arr = cars.filter(function (item) {
return item.id === params.id;
});
if(arr[0].num>0){
arr[0].num -=1;
}
if(arr[0].num==0){//到0时，从数组中删除当前值
cars = cars.filter(function (item) {
return item.id !== arr[0].id;
});
}
//本地缓存模拟的数据进行更新
localStorage.cars=JSON.stringify(cars)
//vuex 进行更新
commit('changCar',cars)
},
selectItem({commit},params){//复选框按钮，选中和不选中
let cars=JSON.parse(localStorage.cars)
cars.map(function (item) {//遍历数组，修改属性
if (item.id === params.id) {
item.check = !params.check;
}
})
localStorage.cars = JSON.stringify(cars);
commit('changCar',cars)
},
allItem({commit},params){//全选，不全选
console.log(params)
let cars=JSON.parse(localStorage.cars)
cars.map(function (item) {
item.check = !params;
})
localStorage.cars = JSON.stringify(cars);
commit('changCar',cars)
},
removeItem({commit},params){//当到订单时，去掉选中的数据，购物车此时剩下没有被选中的数据
let cars=JSON.parse(localStorage.cars)
let arr = cars.filter(function (item) {
return item.check==false;
});
localStorage.cars = JSON.stringify(arr);
commit('changCar',arr)
}
}
mutations.js,修改数据
import Vue from 'vue'
export default{
changCar(state,params){
console.log('触发mutations')
Vue.set(state,'cars',params)
// state.cars=params
}
}
getters.js ，扩展数据的变化
export default{
all(state){
let price=0;
console.log(state)
for (var i = 0; i <state.cars.length; i++) {
if(state.cars[i].check){
price+=Number(state.cars[i].num)*Number(state.cars[i].price)
}//总计被选中的数据的价格
}
return price;
}
}
index.js
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
export default{
state,
mutations,
actions,
getters
}
index.js,模块化
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import shopcar from './shopcar'
const store = new Vuex.Store({
modules:{
shopcar:shopcar
}
})
export default store
在组件中的使用
在商品详情页中，添加购物车
<van-goods-action-button type="warning" text="加入购物车" color="#ef5350" @click="addCar(goodsinfo)" />
<script>
import {mapActions} from 'vuex'
export default {
name:"ProductDetail",
data(){
return{
goodsinfo:{
}
}
},
methods: {
onAddCartClicked(skuData){
this.addCar(this.goodsinfo)//商品对象数据
},
...mapActions(['addCar'])
},
在购物页中的逻辑处理
<template>
<div id="shop">
<Header title="购物车" :back="back"></Header>
<div class="content">
<div class="header">
<van-checkbox v-model="checked" checked-color="#f44336" @click="allItem(checked)"></van-checkbox><span class="title">蛋糕精选</span>
<div class="right">
<van-icon name="info-o" />
<span>已免运费</span>
</div>
</div>
<div class="list">
<van-card
v-for="item in cars"
:key="item.id"
:price="item.price"
:desc="item.dec"
:title="item.name"
:thumb="root+item.imgurl"
>
<div slot="tags" class="check">
<van-checkbox v-model="item.check" checked-color="#f44336" @click="selectItem(item)"></van-checkbox>
</div>
<div slot="footer">
<button @click="remItem(item)">-</button>
<span>{{item.num}}</span>
<button @click="addItem(item)">+</button>
</div>
</van-card>
</div>
<van-submit-bar
:price="all*100"
button-text="提交订单"
@submit="onSubmit"
>
<van-checkbox v-model="checked" checked-color="#f44336" @click="allItem(checked)">全选</van-checkbox>
<span slot="tip">
你的收货地址不支持同城送, <span>修改地址</span>
</span>
</van-submit-bar>
</div>
</div>
</template>
<script>
import { mapState, mapGetters ,mapActions} from "vuex";
import Vue from 'vue';
export default {
name:'Shop',
data(){
return{
checked: true,//全选按钮
}
},
created() {
var arr = this.cars.filter(function (item) {
return item.check==false;
});
if(arr.length!==0){//如果有一个没有被选中，就不全选
this.checked=false
}else{
this.checked=true
}
},
updated() {
var arr = this.cars.filter(function (item) {
return item.check==false;
});
console.log(arr)
if(arr.length!==0){
this.checked=false
}else{
this.checked=true
}
},
methods: {
onSubmit(){
this.$router.push({name:'address'})//this.$route.params
},
...mapActions(['addItem','remItem','allItem','selectItem'])//逻辑方法
},
computed: {
...mapState({//得到购物车数据
cars:state => state.shopcar.cars
}),
...mapGetters(['all'])//得到扩展数据
}
}
</script>
<style lang="less" scoped>
@import url('../../../style/main.less');
#shop{
.content{
overflow:hidden;
background:#fafafa;
.m_t(45);
.p_b(100);
.header{
.van-checkbox{
float:left;
}
.title{
.m_l(10);
}
.fs(14);
background:white;
.margin(10,10,0,10);
.padding(5,5,5,5);
.right{
float:right;
display:flex;
align-items:Center;
.fs(12);
color:#646566;
}
}
.list{
.padding(0,10,10,10);
background:#fafafa;
.van-card{
background:white;
.p_l(38);
}
.van-card:not(:first-child){
margin-top:0;
}
.van-card__price{
color:#b71c1c;
}
.check{
position:relative;
.right(122);
}
.van-card__footer{
position:relative;
.top(-26);
button{
border:0;
background:white;
.fs(18);
font-weight:600;
}
span{
display:inline-block;
.h(16);
.w(16);
text-align:center;
background:#fafafa;
}
}
}
.van-submit-bar{
bottom:50px;
}
}
}
</style>
这样就实现了购物车功能。