vue实现单商户购物车功能

vue实现单商户购物车功能

vue实现简单的购物车功能：
1、单选/全选选中状态的判断
2、只有选中后才会去计算总价
3、结算需要获取到已选中的数据
4、mescroll上拉刷新，下拉加载更多
该项目购物车数据没有做本地存储，加入购物车，数量的加减直接调用的接口，总价格是在前端进行计算

<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">IEPC</van-checkbox></div><div class="item" v-for="(item,index) in goods" :key="index"><!-- item.checked为$set方法新增的变量，用来判断单选 --><van-checkbox v-model="item.checked" @click="change_checked(index,item)"></van-checkbox><img class="goods-img" :src=&#ds_picture" alt=""><div class="goods-details"><h2 class="yihang">{{ds_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;//全选开启ds.forEach((item, i) => {item.checked = true;//每一项全部选中al_IEPC = (al_IEPC) + ds_iepc_money) * item.num).toFixed(4); //计算总价：总价 = 总价 + 商品单价*商品数量})} else {this.if_all_checked = false;//全选关闭al_IEPC = '0.0000';//总价为ds.forEach((item, i) => {item.checked = false;//每一项全部取消})}},//单选change_checked(index,item) {ds[index].checked = !ds[index].checked; //选中/取消// 只有选中才会计算价格++，否则--ds[index].checked){al_IEPC = (al_IEPC) + ds_iepc_money) * item.num).toFixed(4); //计算总价：总价 = 总价 + 商品单价*商品数量}else{al_IEPC = (al_IEPC) - ds_iepc_money) * item.num).toFixed(4); //计算总价：总价 = 总价 - 商品单价*商品数量}let flag = true;// flag：判断是否全部选中ds.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: ds_id,type: 2,cid: item.cart_id,}).then(res => {if (res.status == 1) {//判断必须选中才计算价格++，默认只增加数量ds[index].checked){al_IEPC = (al_IEPC) + ds_iepc_money)).toFixed(4); //计算总价：总价 = 总价 + 商品单价*商品数量}ds[index].num++;}})},//数量--minus(index, item) {if (item.num > 1) {this.axios.post('/api/cart/cartAdjustNum', {goods_id: ds_id,type: 1,cid: item.cart_id,}).then(res => {if (res.status == 1) {//判断必须选中才计算价格--，默认只减少数量ds[index].checked){al_IEPC = (al_IEPC) - ds_iepc_money)).toFixed(4); //计算总价：总价 = 总价 - 商品单价*商品数量}ds[index].num--;}})}},//删除clickSlotRight() {ds.length == 0){this.$toast('没有可删除的数据');}else{//arr:已经选中项let arr = ds.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(() => {al_IEPC='0.0000';this.axios.post('/api/cart/cartDel',{cid:data,}).then(res=>{if(res.status == 1){this.$toast('删除成功');iggerDownScroll(); // 重新加载列表}})});}},//去结算submit() {// arr:filter方法返回满足条件的新数组：已经选中需要结算的数据let arr = ds.filter(item => {return item.checked == true;});if( JSON.Item('userInfo')).pay_status == 0 ){this.$firm({title:'你还没有设置交易密码哦',message: '设置交易密码才可以进行下一步',confirmButtonText:'设置密码',showCancelButton: true,confirmButtonColor: '#139BFA',}).then(() => {this.$router.push('pay_pwd');}).catch(() => {});}else ds.length == 0){this.$toast('没有可结算的商品')} else{this.$storemit('set_goods_detail',arr);//结算数据存vuex，供下个页面使用this.$router.push('shop_order?total_money='&#al_IEPC);}},//下拉加载，上拉刷新mescrollInit(mescroll) {scroll = 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; //每次刷新全选关闭al_IEPC = '0.0000'; //总价格价格为0let arr = res.data.list;arr.forEach(item => {this.$set(item, "checked", false); //$set方法，给数组添加新属性，判断是否被选中，默认值false})if (page.num === 1) ds = [];ds = at(arr);this.$nextTick(() => {dSuccess(arr.length)})if (ds.length == 0) {this.dataShow = false;}}}).catch((e) => {dErr();this.dataShow = false;});},}}
</script>