您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vue如何實(shí)現(xiàn)購(gòu)物車功能”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue如何實(shí)現(xiàn)購(gòu)物車功能”吧!
如圖,需要有加入購(gòu)物車的標(biāo)識(shí)思路如下:點(diǎn)擊購(gòu)物車按鈕時(shí)將商品的id,title,imgUrl(海報(bào)圖),flag(標(biāo)識(shí)符,flag非常重要,為以后復(fù)選框判斷是否選中做參考)變成一個(gè)數(shù)組形式,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="購(gòu)物車" @click="onClickIcon" /> <van-goods-action-button type="warning" text="加入購(gòu)物車" @click="onClickButton" /> <van-goods-action-button type="danger" text="立即購(gòu)買" @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('點(diǎn)擊圖標(biāo)'); }, 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('已加入購(gòu)物車'); }, }, } </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{、 //判斷是否已經(jīng)加入過(guò)購(gòu)物車,如果加入過(guò),則該產(chǎn)品數(shù)量加一,若沒(méi)有加入過(guò),將產(chǎn)品加入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) }, //該函數(shù)為數(shù)字+1 addCartNum(state,index){ state.cart[index].num++ }, //該函數(shù)為數(shù)字-1 jianCartNum(state,index){ if(state.cart[index].num==1){return;} state.cart[index].num-- }, }
3.購(gòu)物車
思路如下:若沒(méi)有產(chǎn)品則顯示無(wú)產(chǎn)品,若有產(chǎn)品在購(gòu)物車?yán)?,則可進(jìn)行增刪加減
<template> <div class="bg"> <div class="bgCart" v-if="isGood"> <div class="cartAd"> <h4> 購(gòu)物車 </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> 購(gòu)物車 </h4> <img src="../../../static/img/cart.jpg"/> <span class="add"> 您還沒(méi)有添加任何產(chǎn)品哦 </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: { //選擇單個(gè)復(fù)選框(非常重要) //由于我進(jìn)來(lái)是使復(fù)選框全選,則在第一次點(diǎn)擊的時(shí)候使得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; } //判斷單個(gè)和全部,若單個(gè)全選,則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; } }, //全選狀態(tài) allOrder() { //如果選擇狀態(tài)為選中的時(shí)候,設(shè)置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; } }, //數(shù)字+ add(index) { this.$store.commit('addCartNum', index) }, //數(shù)字減 jian(index) { this.$store.commit('jianCartNum', index) }, //點(diǎn)擊管理 onAdmin() { this.select = false }, //點(diǎn)擊完成 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>
到此,相信大家對(duì)“vue如何實(shí)現(xiàn)購(gòu)物車功能”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。