从零开始，搭建一个简单的购物平台（十七）前端商城部分
从零开始，搭建一个简单的购物平台（十六）前端商城部分：
https://blog.csdn.net/time_____/article/details/108769229
项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping
上篇文章讲到了商品详情页面实现，最后一个功能是加入购物车，也就是通过列表对比商品是否存在，若存在，则对现有商品数据进行修改，若不存在，则初始化商品，并添加至购物车列表中，这篇文章将介绍对购物车数据进行操作功能
购物车功能包括
修改商品数量 删除单个商品 全选/反选 批量删除
这个页面，将其分解成四个组件，分别是顶部的Title，菜单栏Tabbar，单件商品shopCarItem和下面的批量操作shopCarOrder
修改商品数量在上篇文章中已介绍，通过countShopItem方法进行修改
删除单个商品
delShopItem(_id) {
let _shopCar = this.state//获取现有购物车列表
_shopCar.splice(_id, 1)//数组删除第_id项
this.state = _shopCar//刷新购物车列表
this.$events.emitEvent(EventName.CountShop);//刷新界面
}全选/反选，这里有两个注意的地方，全选/反选的实现有两种状态，一是每个商品单选被全选或反选后全选按钮也会跟随状态，二是全选按钮全选或反选后所有单选按钮也会跟随状态
我们首先在store的action加一个方法，用于总计商品的全选状态，商品总数，及总价格。每当商品被选中，就触发这个方法，刷新数据
filterSelect() {//修改商品全选，单个商品驱动全选按钮，刷新数据
let shopConfig = {//所有商品总计初始值
_count: 1,//是否全选
_selCount: 0,//商品总数
_sum: 0//商品总价
}
this.state.forEach(item => {
shopConfig._selCount += item.isSelect ? 1 : 0;
shopConfig._count *= item.isSelect;//判断是否全选，初始值0，若全为false，相乘等于0，若全为true，相乘为1，即等于1是全选，等于0是未全选
shopConfig._sum += item.isSelect ? item.sum : 0
});
this.$events.emitEvent(EventName.SelectParent, shopConfig);
}此外，我们需要再写个方法，用于全选按钮修改各个商品的选中状态
selAllChild(_sel) {//修改商品全选，全选按钮驱动单个商品，刷新数据
this.state = this.state.map(item => {
item.isSelect = _sel;//当全选按钮选中，修改所有商品状态
return item;
});
this.$events.emitEvent(EventName.SelectAllChild);
}于是在单件商品shopCarItem组件中，我们进行调用action中的方法，修改全局state值
<template>
<div>
<ul v-if="shopList.length" class="shopCar">
<li v-for="(item,index) in shopList" :key="index">
<span class="mint-checkbox" @click="selectHandler(index)">
<input class="mint-checkbox-input" type="checkbox" :checked="item.isSelect" />
<span class="mint-checkbox-core"></span>
</span>
<img :src="imgPath+item.shopPic" alt />
<div class="shopInfo">
<div>
<span>{{item.shopName}} {{item.shopScale}}克</span>
<span>￥{{item.shopPrice}}</span>
</div>
<div>
<mt-button class="minus" type="default" @click="minusShopHandler(item)">-</mt-button>
<span>{{item.shopCount}}</span>
<mt-button class="add" type="default" @click="addShopHandler(item)">+</mt-button>
<mt-button class="del" type="default" @click="delShopHandler(index)">×</mt-button>
</div>
</div>
</li>
</ul>
<div v-else class="noShop">
<div class="icon-jiarugouwuche iconfont"></div>
<span>购物车为空</span>
</div>
</div>
</template>
<script>
import Config from "../../config/config";
import { Toast } from "mint-ui";
const { EventName } = Config;
export default {
name: "shopCarItem",
data() {
return {
shopCar: null,//初始化购物车
shopList: [],//购物车列表state
imgPath: Config.RequestPath,//静态文件根目录
selectAll: false,//全选
};
},
created() {
this.shopCar = new this.$store.ShopCar();
this.shopList = this.shopCar.state;
this.$events.onEvent(EventName.CountShop, this.countHandler);//商品数量监听
this.$events.onEvent(EventName.SelectAllChild, this.selAllHandler);//商品全选监听
},
mounted() {
this.shopCar.filterSelect();//初始化全选，商品数量，商品总价
},
destroyed() {
this.$events.offEvent(EventName.CountShop, this.countHandler);
this.$events.offEvent(EventName.SelectAllChild, this.selAllHandler);
},
methods: {
countHandler(res) {//修改商品数量，刷新数据
this.shopList = this.shopCar.state;
this.shopCar.filterSelect();
},
selectHandler(_id) {//修改商品全选，单个商品驱动全选按钮，刷新数据
this.shopList[_id].isSelect = !this.shopList[_id].isSelect;
this.shopCar.state = this.shopList;
this.shopCar.filterSelect();
},
selAllHandler() {//修改商品全选，全选按钮驱动单个商品，刷新数据
this.shopList = this.shopCar.state;
this.shopCar.filterSelect();
},
addShopHandler(_data) {//添加商品，刷新数据
_data.shopCount = 1;
this.shopCar.countShopItem({
..._data,
});
},
minusShopHandler(_data) {//减少商品，刷新数据
_data.shopCount = -1;
this.shopCar.countShopItem({
..._data,
});
},
delShopHandler(_id) {//删除单个商品，刷新数据
this.shopCar.delShopItem(_id);
},
},
};
</script>
<style lang="less" scoped>
@import "../../style/init.less";
.noShop {
width: 100%;
height: 100%;
text-align: center;
span {
.f_s(36);
}
div {
.w(200);
.h(200);
border-radius: 100%;
background: @mainColor;
.titleFont();
box-shadow: 5px 5px 8px #777;
.l_h(200);
text-align: center;
margin: 100px auto 20px;
.f_s(100);
}
}
.shopCar {
.padbottom(130);
width: 100%;
li {
border-bottom: 1px solid #d3d3d3;
padding-left: unit(35 / @pxtorem, rem);
.h(320);
.mint-checkbox {
.h(320);
.l_h(320);
display: inline-block;
vertical-align: middle;
}
.mint-checkbox-input:checked + .mint-checkbox-core {
background: #ea3e3c;
border-color: #ea3e3c;
}
img {
.h(265);
.w(265);
margin-left: unit(20 / @pxtorem, rem);
display: inline-block;
vertical-align: middle;
background: #f5f6f5;
}
.shopInfo {
.h(235);
width: 50%;
.padtop(30);
padding-left: unit(10 / @pxtorem, rem);
display: inline-block;
vertical-align: middle;
div:nth-child(1) {
overflow: hidden;
span {
float: left;
}
span:nth-child(2) {
float: right;
}
}
div:nth-child(2) {
margin-top: unit(85 / @pxtorem, rem);
span {
display: inline-block;
vertical-align: middle;
padding: 0 unit(50 / @pxtorem, rem);
}
.add,
.minus,
.del {
display: inline-block;
vertical-align: middle;
background: white;
box-shadow: none;
.f_s(50);
}
.del {
float: right;
}
}
}
}
}
</style>在批量操作shopCarOrder组件中同理
<template>
<div class="shopOrder">
<span class="mint-checkbox" @click="selectHandler">
<input class="mint-checkbox-input" type="checkbox" :checked="isSelAll" />
<span class="mint-checkbox-core"></span>
</span>
<span>全选({{selCount}})</span>
<span @click="delSelShop">删除({{selCount}})</span>
<span>
<span>￥{{sum}}</span>
<span class="icon-qianjin iconfont" @click="sendOrder"></span>
</span>
</div>
</template>
<script>
import Config from "../../config/config";
import ShopCarOrderBussiness from "./bussiness";
import { Toast } from "mint-ui";
const { EventName } = Config;
export default {
name: "shopCarOrder",
data() {
return {
shopCar: null,
isSelAll: false,//全选
selCount: 0,//商品数量
sum: 0,//商品总价
orderList: null,//提交订单请求参数
shopCarOrderBussiness: null,
};
},
created() {
this.shopCar = new this.$store.ShopCar();
this.shopCarOrderBussiness = new ShopCarOrderBussiness(this);
this.$events.onEvent(EventName.SelectParent, this.selAllHandler);//全选按钮监听，通过监听所有商品都选中或未全选，修改状态
},
destroyed() {
this.$events.offEvent(EventName.SelectParent, this.selAllHandler);
},
methods: {
selectHandler() {//驱动修改所有商品选中状态
this.isSelAll = !this.isSelAll;
this.shopCar.selAllChild(this.isSelAll);
},
selAllHandler({ _count, _selCount, _sum }) {
this.isSelAll = _count;
this.selCount = _selCount;
this.sum = _sum;
},
delSelShop() {//删除选中商品
this.shopCar.delSelShop();
},
sendOrder() {//提交订单
this.shopCarOrderBussiness.sendOrderList();
},
},
};
</script>
<style lang="less" scoped>
@import "../../style/init.less";
.shopOrder {
.f_s(34);
color: #fff;
position: fixed;
.mcolor();
bottom: unit(130 / @pxtorem, rem);
width: 100%;
.h(130);
.l_h(130);
> span:nth-child(1),
> span:nth-child(2) {
padding-left: unit(35 / @pxtorem, rem);
}
> span:nth-child(3) {
padding-left: unit(200 / @pxtorem, rem);
}
> span:nth-child(4) {
float: right;
margin-right: unit(50 / @pxtorem, rem);
> span:nth-child(1) {
padding-left: unit(20 / @pxtorem, rem);
border-left: 1px dashed #fff;
}
> span:nth-child(2) {
padding-left: unit(50 / @pxtorem, rem);
}
}
> span {
display: inline-block;
}
.mint-checkbox-input + .mint-checkbox-core {
background: transparent;
border-color: #fff;
}
.mint-checkbox-input:checked + .mint-checkbox-core {
.mcolor();
}
}
</style>在action中，我们还需要写一个函数，用于删除选中商品
delSelShop() {//直接通过遍历商品选中状态值进行删除，并刷新数据
let _list = []
this.state.map(item => {
if (!item.isSelect) {
_list.push(item)
}
});
this.state = _list
this.$events.emitEvent(EventName.CountShop);
}最后，在shopCar.vue界面中引入这四个组件，页面实现完成
<template>
<div>
<Top title="购物车"></Top>
<div class="content">
<ShopCarItem></ShopCarItem>
<ShopCarOrder></ShopCarOrder>
</div>
<TabBar></TabBar>
</div>
</template>
<script>
import Top from "../../components/top/top";
import ShopCarItem from "../../components/shopCarItem/shopCarItem";
import ShopCarOrder from "../../components/shopCarOrder/shopCarOrder";
import TabBar from "../../components/tabBar/tabBar";
export default {
name: "shopCar",
data() {
return {};
},
components: {
Top,
ShopCarItem,
ShopCarOrder,
TabBar
},
created() {}
};
</script>
<style lang="less" scoped>
@import "../../style/init.less";
</style>本篇文章主要对商品购物车操作进行了介绍，其中运用了数据刷新视图的基本操作，将数据，逻辑，视图三者分开，结合vue的数据绑定渲染页面。下篇文章将实现用户的注册，登录功能（简单的用户名密码注册，登录，和邮箱验证模块）
