vue 简单购物车实现

Love The Way You Lie 2021-11-14 11:56 520阅读 0赞

**购物车**

数据来源与store

<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>

**商品页**

<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>

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: \{  
\}  
\});

![1483460-20190516212206997-615399158.gif][]

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

[1483460-20190516212206997-615399158.gif]: /images/20211114/79ff44df44fd4161a3c2bec13c56e0bd.png