GIF.gif
<template>
<div class="cartlist">
<div class="tit_gds_item clearfix">
<div class="tit_gds_check"><input type="checkbox" v-model='isCheckedAll' @change='checkedAll' /></div>
<div class="tit_gds_txt">商品</div>
<div class="tit_gds_num">数量</div>
<div class="tit_gds_price" >价格</div>
<div class="tit_gds_amount">金额</div>
<div class="tit_gds_operate">操作</div>
</div>
<div class="cartitem clearfix" v-for="(product,index) in productList" :key="index">
<div class="cell gds_check">
<input type="checkbox" :value='product.pro_id' v-model="checkboxList" @change="ck_change"/>
</div>
<div class="cell gds_pic">
<img :src="product.pro_img"/>
</div>
<div class="cell gds_detail">
{{product.pro_name}}品牌：{{product.pro_brand}};产地：{{product.pro_place}};规格：{{product.pro_purity}}; 起订量：{{product.pro_min}};配送仓库：{{product.pro_depot}};
</div>
<div class="cell gds_num">
<div class="quantity">
<a href="javascript:;" class="decrement" :class="product.pro_disable ?'disabled':'' " @click=reduceNum({index,num:1}) >-</a>
<input class="iTxt" v-model="product.pro_num" />
<a href="javascript:;" class="increment" @click=addNum({index,num:1}) >+</a>
</div>
</div>
<div class="cell gds_price">
{{product.pro_price}}
</div>
<div class="cell gds_amount">
{{product.pro_num*product.pro_price}}
</div>
<div class="cell gds_operate">
<a href="javascirt:;" class="gds_delete" @click="goods_del(index)">删除</a>
</div>
</div>
<div class="cartfoot">总件数：<strong>{{getGoodsCount}}</strong>,总金额：<strong>{{getGoodsAmount}}</strong>元</div>
</div>
</template>
<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
export default{
computed:{
...mapState({
productList:state => state.cartStatus.productList,
checkboxList:state => state.cartStatus.checkboxList
}),
...mapGetters(['getGoodsCount','getGoodsAmount']),
isCheckedAll:{
get(){
return this.$store.state.cartStatus.isCheckedAll;
},
set(zzz){
this.$store.commit('setCheckAll',zzz)
}
},
checkboxList:{
get(){
return this.$store.state.cartStatus.checkboxList;
},
set(zzz){
this.$store.commit('setCheckboxList',zzz);
}
}
},
methods:{
...mapMutations(['reduceNum','addNum','goods_del','checkedAll','ck_change'])
}
}
</script>
<style>
.tit_gds_item{
height:40px;
line-height:40px;
background:#eee;
text-align:center;
}
.cartitem{
border:1px solid #ccc;
}
.cell{
float:left;
display:inline-block;
height:100px;
line-height:100px;
text-align:center;
}
.gds_check,.tit_gds_check{
position:relative;
float:left;
width:100px;
}
.tit_gds_check:after{
position:absolute;
left:60px;
top:0px;
content:'全选'
}
.tit_gds_txt{
float:left;
width:330px;
}
.gds_pic{
float:left;
width:100px;
}
.gds_pic img{
vertical-align: middle;
}
.gds_detail{
float:left;
width:200px;
line-height:24px;
padding:10px 20px 0px 10px;
text-align:left;
}
.gds_num,.tit_gds_num{
float:left;
width:120px;
}
.increment,.decrement{
display:inline-block;
width:16px;
height:18px;
line-height:18px;
background:#fff;
border:1px solid #ccc;
color:#666;
padding:1px 0;
text-align:center;
}
.increment{
float:right;
border-left:0px;
}
.decrement{
float:left;
border-right:0;
}
.iTxt{
position:absolute;
left:17px;
top:0px;
display:inline-block;
width:42px;
height:18px;
line-height:18px;
border:1px solid #ccc;
text-align:center;
font-size:12px;
padding:1px;
}
.disabled{
color:#eee;
}
.gds_price,.tit_gds_price{
float:left;
width:120px;
}
.gds_amount,.tit_gds_amount{
float:left;
width:120px;
}
.gds_operate,.tit_gds_operate{
float:left;
width:100px;
}
.gds_delete{
color:#666;
}
.cartfoot{
height:60px;
line-height:60px;
background:#eee;
text-align:right;
padding-right:20px;
}
.cartfoot strong{
padding:0px 5px;
color:red;
}
</style>
vuex中-- cartStatus.js模块 存放路径：store/modules/cartStatus.js
const state = {
productList:[
{
'pro_id':1,
'pro_name':'甘油|丙三醇',
'pro_brand':'skc',
'pro_place': '韩国',//产地
'pro_purity': '99.7%',//规格
'pro_min': "215千克",//最小起订量
'pro_depot': '上海仓海仓储',//所在仓库
'pro_num': 1,//数量
'pro_img': require('../../assets/testimg.jpg'),//图片链接
'pro_price': 800,
'pro_disable':true
},
{
'pro_id':2,
'pro_name':'甘油|丙三醇',
'pro_brand':'skc',
'pro_place': '韩国',//产地
'pro_purity': '99.7%',//规格
'pro_min': "215千克",//最小起订量
'pro_depot': '上海仓海仓储',//所在仓库
'pro_num': 1,//数量
'pro_img': require('../../assets/testimg.jpg'),//图片链接
'pro_price': 700,
'pro_disable':true
}
],
checkboxList:[],
isCheckedAll:false
}
const getters = {
getGoodsCount(state){//总共件数
let count = 0;
state.productList.forEach(function(product){
state.checkboxList.filter(function(checkId){
if(checkId == product.pro_id){
count += product.pro_num;
}
})
})
return count;
},
getGoodsAmount(state){//总金额
let amount = 0;
state.productList.forEach(function(product){
state.checkboxList.filter(function(checkId){
if(checkId == product.pro_id){
amount += product.pro_num*product.pro_price;
}
})
})
return amount;
}
}
const mutations = {
addNum(state,{index,num}){ //同上，这里面的参数除了state之外还传了需要增加的值sum
state.productList[index].pro_num += num;
if(state.productList[index].pro_num >1){
state.productList[index].pro_disable = false;
}else{
state.productList[index].pro_disable = true;
}
},
reduceNum(state,{index,num}){
if(state.productList[index].pro_num > 1 ){
state.productList[index].pro_num -= num;
if(state.productList[index].pro_num <= 1 ){
state.productList[index].pro_disable = true;
return false;
}
}
},
goods_del(state,index){//删除商品
state.productList.splice(index,1);
},
checkedAll(state) {//全选
if (state.isCheckedAll) {//实现反选
state.checkboxList = [];
state.productList.forEach( (item) => {
state.checkboxList.push(item.pro_id);
});
} else { //实现全选
state.checkboxList = [];
}
},
setCheckAll(state,zzz){
state.isCheckedAll = zzz
},
setCheckboxList(state,zzz){
state.checkboxList = zzz;
},
ck_change(state){//单选
if(state.productList.length == state.checkboxList.length){
state.isCheckedAll = true
}else{
state.isCheckedAll = false
}
}
}
const actions = {
}
export default{
state,
getters,
mutations,
actions
}
这是store 文件夹下的index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import cartStatus from './modules/cartStatus'
export default new Vuex.Store({
modules:{
cartStatus
}
})
网友评论