vue 简单购物车实现

购物车

数据来源与store

<template>
<div class="home">

<table class="table1">
<tr>
<th>序号</th>
<th>商品名称</th>
<th>商品价格</th>
<th></th>
</tr>
<tr v-for="(iphone,index) in products" :key=index>
<td>{{ index+1 }}</td>
<td>{{ iphone.name }}</td>
<td>{{ iphone.price }}</td>
<td>
</td>
<td>
<button @click="addShopingCart(index)">加入购物车</button>
</td>
</tr>
</table>
</div>
</template>

<script>
import {mapState} from "vuex"
export default {
name: "home",
data(){
return {
}
},
computed:{
...mapState(["ShopingCart","products"]),
},
methods:{
addShopingCart(id){
this.ShopingCart.push( {...this.products[id]});
},
}
};
</script>
<style type="text/css">
.home{
margin: auto;
padding-left: 400px;
}
</style>

商品页

<template>
<div class="home">

<table class="table1">
<tr>
<th><input type="checkbox" name="" @click="handleClick" :checked="inputdata"></th>
<th>序号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<tr v-for="(iphone,index) in ShopingCart" :key=index>
<td><input type="checkbox" name="" @click="handleClickChild(iphone)" :checked="iphone.selectpd"></td>

<td>{{ index+1 }}</td>
<td>{{ iphone.name }}</td>
<td>{{ iphone.price }}</td>
<td>
<button :disabled="iphone.count === 0" v-on:click="iphone.count-=1">-</button>
<input type="number" name="" v-model="iphone.count" >
<button @click="iphone.count=(iphone.count-1)+2">+</button>
</td>
<td>
<button @click="deleteProduct(index)">移除</button>
</td>
</tr>
</table>
总价：${{total}}

</div>
</template>

<script>
// @ is an alias to /src

import {mapState,mapGetters,mapMutations} from "vuex"
export default {
name: "home",
components: {
},
data(){
return {
inputdata:false,
}
},
computed:{
...mapState(["ShopingCart"]),
...mapGetters(["total"]),
},

methods:{
...mapMutations(["addCart","changeShopping"],),
handleClick(e){
this.inputdata=!this.inputdata;
if(this.inputdata){

this.ShopingCart.map(item => {
item.selectpd=true;
});
this.addCart();
}else{

this.ShopingCart.map(item => {
item.selectpd=false;
});
this.addCart();
}
},
handleClickChild(item){
if( typeof item.selectpd===undefined){
item.selectpd=true;
}else{
item.selectpd=!item.selectpd;
}
if(item.selectpd){
this.addCart();
}else{
this.inputdata=false;
this.addCart();
}

},
deleteProduct(id){
this.changeShopping(id);
}
}
};
</script>
<style type="text/css">
.home{
margin: auto;
padding-left: 400px;
}
</style>

公共数据

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
state: {
products:[
{
id: 1,
name: 'iphone 8',
price: 5099,
count: 1
},
{
id: 2,
name: 'iphone xs',
price: 8699,
count: 1
},
{
id: 3,
name: 'iphone xr',
price: 6499,
count: 1
}
],
ShopingCart:[]

},
mutations: {
changeShopping(state,index){
state.ShopingCart.splice(index,1);
},
addCart(state){
state.ShopingCart= [...state.ShopingCart]
}
},
getters:{
total(state){
let total=0;
for(let i=0;i<state.ShopingCart.length;i++){
console.log(state.ShopingCart[i].selectpd);
if(state.ShopingCart[i].selectpd === true){
total+=state.ShopingCart[i].price*state.ShopingCart[i].count;
}
}

return total;
}
},
actions: {
}
});

 

转载于:https://www.cnblogs.com/wly-laowang/p/10878115.html