目录
23.修改GoodsList.vue
<template>
<div class="list">
<div class="item" v-for="goods in goodslist" :key="goods.id">
<div class="item-l">
<img class="item-img" :src="goods.src">
</div>
<div class="item-r">
<div class="item-title">{
{goods.title}}</div>
<div class="item-price">{
{goods.price|currency}}</div>
<div class="item-opt">
<button @click="add(goods)">加入购物车</button>
</div>
</div>
</div>
</div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default{
computed:mapState({
goodslist:state=>state.goods.list
}),
methods:mapActions('shopcart',['add']),
created(){
this.$store.dispatch('goods/getList')
},
filters:{
currency(value){
return '￥'+value
}
}
}
</script>
<style>
.item{
border-bottom:1px dashed #ccc;
padding: 10px;
}
.item::after{
content: '';
display: block;
clear: both;
}
.item-l{
float: left;
font-size: 0;
}
.item-img{
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.item-r{
float: left;
padding-left: 20px;
}
.item-title{
font-size: 14px;
margin-top: 10px;
}
.item-price{
margin-top: 10px;
color: #f00;
font-size: 15px;
}
.item-opt{
margin-top: 10px;
}
.item-opt button{
border: 0;
background: coral;
color:#fff;
padding: 4px 5px;
cursor: pointer;
}
</style>24.购物车页面，修改shopcart.js
const state = {
items: [] //保存购物车列表
}
const getters = { //计算总价
totalPrice:(state)=>{
return state.items.reduce((total,item)=>{
return total+item.price*item.num
},0).toFixed(2) //对前边的小数取两位
}
}
const actions = {
add(context,item){
context.commit("add",item)
},
del(context,id){
context.commit("del",id)
}
}
const mutations = {
add(context,item){
const v=state.items.find(v=>v.id==item.id)
if(v){
++v.num
}
else{
state.items.push({
id:item.id,
title:item.title,
price:item.price,
src:item.src,
num:1
})
}
},
del(context,id){
state.items.forEach((item,index,arr)=>{
if(item.id===id){ //三个等号是恒等
arr.splice(index,1)
}
})
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}25. 修改Shopcart.vue，效果展示
<template>
<div class="list">
<div class="item" v-for="item in items" :key="item.id">
<div class="item-l">
<img class="item-img" :src="item.src">
</div>
<div class="item-r">
<div class="item-title">
{
{item.title}}<small>x{
{item.num}}</small>
</div>
<div class="item-price">{
{item.price|currency}}</div>
<div class="item-opt">
<button @click="del(item.id)">删除</button>
</div>
</div>
</div>
<div class="item-total" v-if="items.length">
商品总价：{
{total|currency}}
</div>
<div class="item-empty" v-else>购物车中没有商品</div>
</div>
</template>
<script>
import {mapGetters,mapState,mapActions} from 'vuex'
export default{
computed:{
...mapState({
items:state=>state.shopcart.items
}),
...mapGetters('shopcart',{total:'totalPrice'})
},
methods:mapActions('shopcart',['del']),
filters:{
currency(value){
return '￥'+value
}
}
}
</script>
<style>
.item{
border-bottom:1px dashed #ccc;
padding: 10px;
}
.item::after{
content: '';
display: block;
clear: both;
}
.item-l{
float: left;
font-size: 0;
}
.item-img{
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.item-r{
float: left;
padding-left: 20px;
}
.item-title{
font-size: 14px;
margin-top: 10px;
}
.item-price{
margin-top: 10px;
color: #f00;
font-size: 15px;
}
.item-opt{
margin-top: 10px;
}
.item-opt button{
border: 0;
background: coral;
color:#fff;
padding: 4px 5px;
cursor: pointer;
}
</style>（1）.添加之前
（2）.添加之后(单击“加入购物车”按钮，即可将商品添加到购物车，在底部的Tab栏中切换到“购物车”页面，可以查看购物车中的商品，并且会在底部显示商品的总价格，效果展示如下图所示)：
a.加入一个商品购物车
b.重复添加同一商品至购物车（显示数量）
c.添加其他商品进入购物车
如果在购物中单击“删除”按钮，则表示删除商品，页面效果如下图所示：
