Table of contents
24. Shopping cart page, modify shopcart.js
25. Modify Shopcart.vue, the effect display
23. Modify 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. Shopping cart page, modify 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. Modify Shopcart.vue, the effect display
<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). Before adding
(2). After adding (click the "Add to Cart" button, you can add the product to the shopping cart, switch to the "Shopping Cart" page in the Tab bar at the bottom, you can view the products in the shopping cart, and will be in The total price of the product is displayed at the bottom, and the effect is shown in the figure below):
a. Add a product to the shopping cart
b. Repeatedly add the same product to the shopping cart (display quantity)
c. Add other products to the shopping cart
If you click the "Delete" button in shopping, it means to delete the product, and the page effect is as shown in the following figure:
