本篇内容主要讲解“vue如何实现购物车功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue如何实现购物车功能”吧!
如图，需要有加入购物车的标识思路如下：点击购物车按钮时将商品的id,title,imgUrl(海报图),flag（标识符，flag非常重要，为以后复选框判断是否选中做参考）变成一个数组形式，cart，传入vuex
<template>
<div>
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
<van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
<van-goods-action-button
type="warning"
text="加入购物车"
@click="onClickButton"
/>
<van-goods-action-button
type="danger"
text="立即购买"
@click="onClickButton"
/>
</van-goods-action>
</div>
</template>
<script>
import { Toast } from 'vant';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
export default {
name: 'tabs',
data(){
return{
}
},
props:{
id:String,
current:String,
title:String,
imgUrl:String
},
components:{
[Toast.name]: Toast,
[GoodsAction.name]: GoodsAction,
[GoodsActionIcon.name]: GoodsActionIcon,
[GoodsActionButton.name]: GoodsActionButton
},
methods: {
onClickIcon() {
Toast('点击图标');
},
onClickButton() {
var cart={id:this.id,current:this.current,num:1,title:this.title,imgUrl:this.imgUrl,flag:true}
this.$store.commit('addCart',cart)
Toast('已加入购物车');
},
},
}
</script>
<style>
</style>2.vuex如下
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations.js'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
cart:[],
money:0,
allchecked:true
},
mutations,
})export default{、
//判断是否已经加入过购物车，如果加入过，则该产品数量加一，若没有加入过，将产品加入cart中
addCart(state,data){
for(var i=0;i<state.cart.length;i++){
if(state.cart[i].id==data.id){
state.cart[i].num+=data.num
return
}
}
state.cart.push(data)
},
//该函数为数字+1
addCartNum(state,index){
state.cart[index].num++
},
//该函数为数字-1
jianCartNum(state,index){
if(state.cart[index].num==1){return;}
state.cart[index].num--
},
}
3.购物车
思路如下：若没有产品则显示无产品，若有产品在购物车里，则可进行增删加减
<template>
<div class="bg">
<div class="bgCart" v-if="isGood">
<div class="cartAd">
<h4>
购物车
</h4>
<div v-if="select">
<div class="admin" @click="onAdmin">管理</div>
</div>
<div v-if="!select">
<div class="admin" @click="onOk">完成</div>
</div>
</div>
<van-checkbox-group v-model="result" ref="checkboxGroup">
<div class="cart" v-for="(item,index) in cartList" :key="index">
<van-checkbox :name="item.id" class="checkbox" checked-color="red" v-model="item.flag" @click="chooseChange(item.id, item)">
</van-checkbox>
<div class="box">
<img class="img" :src="baseUrl+item.imgUrl" />
<div class="wraper">
<div class="title">{{item.title}}</div>
<div class="container">
<div class="money">￥{{item.current}}</div>
<div>
<span class="jian" @click="jian(index)">
<span class="jianAdj"> -</span>
</span>
<span>{{item.num}}</span>
<span class="jia" @click="add(index)">
<span class="jiaAdj"> +</span>
</span>
</div>
</div>
</div>
</div>
</div>
</van-checkbox-group>
<div class="order" v-if="select">
<van-submit-bar :price="getAll" button-text="提交订单">
<van-checkbox v-model="allchecked" checked-color="red" @click="allOrder">全选/取消</van-checkbox>
</van-submit-bar>
</div>
<div class="order" v-if="!select">
<van-submit-bar :price="getAll" button-text="删除" @submit="del">
<van-checkbox v-model="allchecked" checked-color="red" @click="allOrder">全选/取消</van-checkbox>
</van-submit-bar>
</div>
</div>
<div v-if="!isGood" class="noGood">
<h4>
购物车
</h4>
<img src="../../../static/img/cart.jpg"/>
<span class="add">
您还没有添加任何产品哦
</span>
<van-button round type="danger">去逛逛</van-button>
</div>
<bottom></bottom>
</div>
</template>
<script>
import {
Checkbox,
CheckboxGroup
} from 'vant';
import {
SubmitBar
} from 'vant';
import {
Button
} from 'vant';
export default {
name: 'cart',
data() {
return {
result: [],
cartList: [],
select: true,
money: 0,
results: [],
baseUrl: this.common.baseUrl,
allchecked: this.$store.state.allchecked,
isGood:true
}
},
components: {
[SubmitBar.name]: SubmitBar,
[Button.name]: Button,
[Checkbox.name]: Checkbox,
[CheckboxGroup.name]: CheckboxGroup,
bottom: () => import('./components/bottom.vue')
},
computed: {
getAll() {
var money = 0
this.$store.state.cart.forEach(item => {
if (item.flag) {
money += (item.num * item.current) * 100
}
})
return money
}
},
methods: {
//选择单个复选框（非常重要）
//由于我进来是使复选框全选，则在第一次点击的时候使得flag=false
chooseChange(i, item) {
if (this.result.indexOf(i) > -1) {
var arrs = this.result.filter(function(item) {
return item != i;
});
this.result = arrs;
item.flag = false;
} else {
this.result.push(i);
item.flag = true;
}
//判断单个和全部，若单个全选，则this.$store.state.allchecked为true
if (this.result.length < this.$store.state.cart.length) {
this.$store.state.allchecked = false;
this.allchecked = this.$store.state.allchecked;
} else {
this.$store.state.allchecked = true;
this.allchecked = this.$store.state.allchecked;
}
},
//全选状态
allOrder() {
//如果选择状态为选中的时候，设置this.$store.state.allchecked=false变成未选中
if (this.$store.state.allchecked) {
this.$store.state.cart.forEach(item => {
item.flag = false;
})
this.result = [];
this.$store.state.allchecked = false;
this.allchecked = this.$store.state.allchecked;
} else {
this.$store.state.cart.forEach(item => {
item.flag = true;
if (this.result.indexOf(item.id) < 0) {
this.result.push(item.id);
}
})
this.$store.state.allchecked = true;
this.allchecked = this.$store.state.allchecked;
}
},
//数字+
add(index) {
this.$store.commit('addCartNum', index)
},
//数字减
jian(index) {
this.$store.commit('jianCartNum', index)
},
//点击管理
onAdmin() {
this.select = false
},
//点击完成
onOk() {
this.select = true
if(this.result.length==0){
console.log(1)
this.isGood=false
}else{
console.log(this.result)
}
},
//删除
del() {
if (this.result.length == this.$store.state.cart.length) {
this.$store.state.cart.splice(0, this.result.length)
this.result.splice(0, this.result.length)
} else {
this.$store.state.cart.forEach(item => {
if (item.flag) {
this.$store.state.cart.splice(item, 1)
this.result.splice(item.id, 1)
}
})
}
}
},
created() {
this.cartList = this.$store.state.cart
if (this.$store.state.allchecked) {
for (var i = 0; i < this.$store.state.cart.length; i++) {
this.result.push(this.$store.state.cart[i].id)
}
}
if(this.result.length==0){
this.isGood=false
}
}
}
</script>到此，相信大家对“vue如何实现购物车功能”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
