vue实现单商户购物车功能

vue实现简单的购物车功能：

1、单选/全选选中状态的判断

2、只有选中后才会去计算总价

3、结算需要获取到已选中的数据

4、上拉刷新，下拉加载更多

该项目购物车数据没有做本地存储，加入购物车，数量的加减直接调用的接口，总价格是在前端进行计算

<template><div class="shop_cart"><nav-bar :if_left_arrow="true" title="购物车" slot_right_text="删除" @clickSlotRight="clickSlotRight">nav-bar><mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit"><div class="goods" v-if="dataShow"><div class="title"><van-checkbox v-model="if_all_checked" @click="all_checked">IEPCvan-checkbox>div><div class="item" v-for="(item,index) in goods" :key="index"><van-checkbox v-model="item.checked" @click="change_checked(index,item)">van-checkbox><img class="goods-img" :src="item.goods_picture" alt=""><div class="goods-details"><h2 class="yihang">{{item.goods_name}}h2><div class="img"><img src="@images/mall/cart6.png" alt=""><img src="@images/mall/cart5.png" alt="">div><b>￥{{item.price}}b><div class="addnum"><img src="@images/mall/cart7.png" @click="minus(index,item)"><input :value="item.num" readonly onfocus="this.blur();"><img src="@images/mall/cart8.png" @click="plus(index,item)">div>div>div>div><no-data type="5" v-if="!dataShow">no-data>mescroll-vue><div class="submit"><div class="left"><div class="text"><span>合计：span><div><b>IEPC {{total_IEPC}}b><em>枚em>div>div>div><button @click="submit">去结算button>div>div>
template>

<script>export default {//页面需要用到的数据data() {return {if_all_checked: false, //全选判断goods: [],//购物车列表total_IEPC: '0.0000', //总价格默认0dataShow: true,//是否有数据mescroll: null,mescrollDown: { auto: false, },mescrollUp: { callback: this.upCallback, },}},mounted() {},methods: {//全选all_checked() {if (!this.if_all_checked) {this.if_all_checked = true;//全选开启this.goods.forEach((item, i) => {item.checked = true;//每一项全部选中this.total_IEPC = (Number(this.total_IEPC) + Number(item.goods_iepc_money) * item.num).toFixed(4); //计算总价：总价 = 总价 + 商品单价*商品数量})} else {this.if_all_checked = false;//全选关闭this.total_IEPC = '0.0000';//总价为0this.goods.forEach((item, i) => {item.checked = false;//每一项全部取消})}},//单选change_checked(index,item) {this.goods[index].checked = !this.goods[index].checked; //选中/取消// 只有选中才会计算价格++，否则--if(this.goods[index].checked){this.total_IEPC = (Number(this.total_IEPC) + Number(item.goods_iepc_money) * item.num).toFixed(4); //计算总价：总价 = 总价 + 商品单价*商品数量}else{this.total_IEPC = (Number(this.total_IEPC) - Number(item.goods_iepc_money) * item.num).toFixed(4); //计算总价：总价 = 总价 - 商品单价*商品数量}let flag = true;// flag：判断是否全部选中this.goods.forEach(item => {//未全部选中if (!item.checked) {flag = false;this.if_all_checked = false;}});//全部选中if (flag) {this.if_all_checked = true;}},//数量++plus(index, item) {this.axios.post('/api/cart/cartAdjustNum', {goods_id: item.goods_id,type: 2,cid: item.cart_id,}).then(res => {if (res.status == 1) {//判断必须选中才计算价格++，默认只增加数量if(this.goods[index].checked){this.total_IEPC = (Number(this.total_IEPC) + Number(item.goods_iepc_money)).toFixed(4); //计算总价：总价 = 总价 + 商品单价*商品数量}this.goods[index].num++;}})},//数量--minus(index, item) {if (item.num > 1) {this.axios.post('/api/cart/cartAdjustNum', {goods_id: item.goods_id,type: 1,cid: item.cart_id,}).then(res => {if (res.status == 1) {//判断必须选中才计算价格--，默认只减少数量if(this.goods[index].checked){this.total_IEPC = (Number(this.total_IEPC) - Number(item.goods_iepc_money)).toFixed(4); //计算总价：总价 = 总价 - 商品单价*商品数量}this.goods[index].num--;}})}},//删除clickSlotRight() {if(this.goods.length == 0){this.$toast('没有可删除的数据');}else{//arr:已经选中项let arr = this.goods.filter(item => {return item.checked == true;});let caet_id_Arr=[];//已经选中项的id集合arr.forEach(item=>{caet_id_Arr.push(item.cart_id);})let data = caet_id_Arr.join(',');//需要删除的数据 ： 24，25，26this.$dialog.alert({title: '您是否要删除已选中的商品',showCancelButton:true,confirmButtonText:'删除'}).then(() => {this.total_IEPC='0.0000';this.axios.post('/api/cart/cartDel',{cid:data,}).then(res=>{if(res.status == 1){this.$toast('删除成功');this.mescroll.triggerDownScroll(); // 重新加载列表}})});}},//去结算submit() {// arr:filter方法返回满足条件的新数组：已经选中需要结算的数据let arr = this.goods.filter(item => {return item.checked == true;});if( JSON.parse(localStorage.getItem('userInfo')).pay_status == 0 ){this.$dialog.confirm({title:'你还没有设置交易密码哦',message: '设置交易密码才可以进行下一步',confirmButtonText:'设置密码',showCancelButton: true,confirmButtonColor: '#139BFA',}).then(() => {this.$router.push('pay_pwd');}).catch(() => {});}else if(this.goods.length == 0){this.$toast('没有可结算的商品')} else{this.$store.commit('set_goods_detail',arr);//结算数据存vuex，供下个页面使用this.$router.push('shop_order?total_money='+this.total_IEPC);}},//下拉加载，上拉刷新mescrollInit(mescroll) {this.mescroll = mescroll;},upCallback(page, mescroll) {this.axios.post('/api/cart/cart_list', {page: page.num,}).then(res => {if (res.status == 1) {this.if_all_checked = false; //每次刷新全选关闭this.total_IEPC = '0.0000'; //总价格价格为0let arr = res.data.list;arr.forEach(item => {this.$set(item, "checked", false); //$set方法，给数组添加新属性，判断是否被选中，默认值false})if (page.num === 1) this.goods = [];this.goods = this.goods.concat(arr);this.$nextTick(() => {mescroll.endSuccess(arr.length)})if (this.goods.length == 0) {this.dataShow = false;}}}).catch((e) => {mescroll.endErr();this.dataShow = false;});},}}
</script>