vue+vant实现购物车全选和反选功能


Posted in Vue.js onNovember 17, 2020

本文实例为大家分享了vue+vant实现购物车全选和反选的具体代码,供大家参考,具体内容如下

这是效果图:

vue+vant实现购物车全选和反选功能

话不多少,直接上代码:

<template>
 <div class="cart">
 <div class="st-spacing-main" v-for="(item) in cartInfoList" :key="item.id">
  <div class="st-item product-item">
  <div class="st-border-bottom store-title">
   <p @click="checkShop(item)">
   <van-checkbox v-model="item.checked">
    <span>
    {{item.shopTitle}}
    <van-icon name="arrow"/>
    </span>
   </van-checkbox>
   </p>
  </div>
  <ul class="commodity-list" v-for="(pros,value) in item.productList" :key="value">
   <li @click="ischeck(item,pros)">
   <van-checkbox v-model="pros.isChecked"></van-checkbox>
   </li>
   <li>
   //这是商品组件
   <product-cart size="mini" type="number" :option="3"></product-cart>
   </li>
  </ul>
  </div>
 </div>
 <van-submit-bar class="settlement" :price="10060" button-text="去结算" @submit="onSubmit">
  <van-checkbox v-model="isCheckAll" @click="checkAll()">全选</van-checkbox>
  <span class="cart-freight" slot="default">不含运费</span>
 </van-submit-bar>
 </div>
</template>

<script>
export default {
 data () {
 return {
  cartInfoList: [
  {
   id: 1,
   shopTitle: '苹果旗舰店', // 商店名
   checked: false, // 商店选择的状态
   checkedCount: 0, // 此商店被选择的商品数量
   productList: [
   {
    isChecked: false, // 商品选择状态
    productTitle: '2019款macbook/苹果/MF893/A国航笔记本', // 产品名
    category: '15寸/2.3/8G/256/土豪金/标准套餐',
    price: 10200, // 价格
    count: 1 // 数量
   }
   ]
  },
  {
   id: 2,
   shopTitle: '锤子科技旗舰店',
   checked: false,
   checkedCount: 0,
   productList: [
   {
    isChecked: false,
    productTitle: '锤子手机手感保护膜',
    category: '登陆月球',
    price: 9.9,
    count: 1
   },
   {
    isChecked: false,
    productTitle: '锤子手机pro割手版',
    category: '128G/割手版',
    price: 1790,
    count: 1
   }
   ]
  }
  ],
  isCheckAll: false, // 是否全选
  allPrice: 0, // 所有价格
  allShops: 0, // 被选中的商店数量
  allCount: 0 // 被选中的产品数量
 }
 },
 methods: {
 // 选中单个商品
 ischeck (item, pro) {
  // 为未选中的时候改变为false,反之为true
  !pro.isChecked ? this._checkTrue(item, pro) : this._checkFalse(item, pro)
 },
 // 修改单个商品的true
 _checkTrue (item, pro) {
  pro.isChecked = true // 将商品选中状态改为true
  // 这里执行了两部,选中商品数量先+1,再与该店铺商品数量比较,如果相等就更改店铺选中状态为true
  if (++item.checkedCount === item.productList.length) {
  item.checked = true
  } else {
  return ''
  }
  // ++item.checkedCount === item.productList.length ? item.checked = true : ''
  // 如果店铺选中状态改为true,选中店铺数量先+1,再与店铺数量比较,如果相等就更改全选选中状态为true
  // // 当商店全选状态,每全选一个商店,被选中商店数加一,数值等于所有商店数,全选状态为true
  if (item.checked) {
  if (++this.allShops === this.cartInfoList.length) {
   this.isCheckAll = true
  } else {
   this.isCheckAll = false
  }
  } else {
  return ''
  }
  // item.checked ? ++this.allShops === this.cartInfoList.length ? this.isCheckAll = true : this.isCheckAll = false : ''
 },
 // 修改单个商品的 false
 _checkFalse (item, pro) {
  pro.isChecked = false // 将商品选中状态改为false
  --item.checkedCount // 被选中的商品数减一
  if (item.checked) {
  // 如果店铺是被选中的,更改店铺选中状态
  item.checked = false // 当商店状态为选中时改变false
  --this.allShops // 商店数减一
  }
  this.isCheckAll = false // 全选状态为false
 },

 // 选择整个商店的商品
 checkShop (item) {
  !item.checked ? this._shopTrue(item) : this._shopFalse(item)
 },
 // 遍历商店每个商品,状态为false的改变为true,又在_checkTrue()方法中将商店状态改为true
 _shopTrue (item) {
  item.productList.forEach(pro => {
  if (pro.isChecked === false) {
   this._checkTrue(item, pro)
  } else {
   return ''
  }
  // pro.isChecked === false ? this._checkTrue(item, pro) : ''
  })
 },
 _shopFalse (item) {
  item.productList.forEach(pro => {
  // 同上
  if (pro.isChecked === true) {
   this._checkFalse(item, pro)
  } else {
   return ''
  }
  // pro.isChecked === true ? this._checkFalse(item, pro) : ''
  })
 },
 // 选择全部商店的商品,已经计算总价和总数量的函数
 checkAll () {
  // 方法内调用方法
  this.isCheckAll = !this.isCheckAll
  this.isCheckAll
  ? this.cartInfoList.forEach(item => {
   this._shopTrue(item)
  })
  : this.cartInfoList.forEach(item => {
   this._shopFalse(item)
  })
 },
 _totalPeice () {
  // 每次调用此方法,将初始值为0,遍历价格并累加
  this.allPrice = 0
  this.cartInfoList.forEach(item => {
  let products = item.productList
  products.forEach(pros => {
   if (pros.isChecked) {
   this.allPrice += pros.price * pros.count
   }
  })
  })
 },
 _totalCount () {
  // 同上
  this.allCount = 0
  this.cartInfoList.forEach(item => {
  this.allCount += item.checkedCount
  })
 },

 onSubmit () {}
 },
 watch: {
 // 深度监听所有数据,每次改变重新计算总价和总数
 cartInfoList: {
  deep: true,
  handler (val, oldval) {
  this._totalPeice()
  this._totalCount()
  }
 }
 }
}
</script>

<style lang="less" scoped>
@import "../assets/less/views/cart.less";
</style>

less文件

@spacing-size: .29rem;

.cart-main {
 .st-item-header {
 padding: @spacing-size;
 justify-content: flex-start;
 .theme-checkbox {
  margin-right: @spacing-size;
 }
 }
 .item-list {
 padding-left: .77rem;
 position: relative;
 .theme-checkbox {
  margin-top: -.24rem;
  position: absolute;
  left: 0;
  top: 50%;
 }
 }
}

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue中音频wavesurfer.js的使用方法
Feb 20 #Vue.js
vue使用vant中的checkbox实现全选功能
Nov 17 #Vue.js
在vue中通过render函数给子组件设置ref操作
Nov 17 #Vue.js
vue+iview分页组件的封装
Nov 17 #Vue.js
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 #Vue.js
vue+iview实现分页及查询功能
Nov 17 #Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
You might like
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
PHP内存缓存Memcached类实例
2014/12/08 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Python中的列表知识点汇总
2015/04/14 Python
浅谈django中的认证与登录
2016/10/31 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
keras打印loss对权重的导数方式
2020/06/10 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
如何用Python徒手写线性回归
2021/01/25 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
附答案的Java面试题
2012/11/19 面试题
服务口号大全
2014/06/11 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
2014年宣传工作总结
2014/11/18 职场文书
给病人的慰问信
2015/03/23 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang