vue实现购物车结算功能


Posted in Javascript onJune 18, 2020

用vue做的购物车结算的功能,供大家参考,具体内容如下

vue实现购物车结算功能

代码:

<!-- 占位 -->
<template>
 <div>
 <div class="product_table">
 <div class="product_info">商品信息</div>
 <div class="product_info">商品金额</div>
 <div class="product_info">商品数量</div>
 <div class="product_info">总金额</div>
 <div class="product_info">编辑</div>
 </div>
 <div class="product_table" v-for="(item,index) in getProductList" :key="index">
 <div style="width:20px;height:20px;border-radius:10px;border:1px solid black;" @click="checkSingle(item)" :class="{checked:item.makeChoose}"></div>
 <div class="product_info">{{item.productName}}</div>
 <div class="product_info">{{item.productPrice}}</div>
 <span @click="changeNumber(item,1)">+</span>
 <input type="text" v-model="item.prductQty" style="width: 30px;">
 <span @click="changeNumber(item,-1)">-</span>
 <div class="product_info">{{item.productPrice*item.prductQty}}</div>
 <div class="product_info" @click="deleteProduct(index)">删除</div>
 </div>
 <div style="width:20px;height:20px;border-radius:10px;border:1px solid black;margin-top:10px" @click="checkAll()" :class="{checked:checkAllItem}"></div>
 <div>总价格:{{totalPrice}}</div>
 </div>
</template>
<script>
 import Vue from 'vue'
 export default {
 name: 'side-bar-placeholder',
 data () {
 return {
 getProductList:[
 {
 productName:'西瓜',
 productPrice:100,
 prductQty:3
 },
 {
 productName:'南瓜',
 productPrice:50,
 prductQty:2
 },
 {
 productName:'苹果',
 productPrice:300,
 prductQty:3
 },
 ],
 totalPrice:0, //总金额
 checkAllItem:false, //全部选中
 checkedList:[] //选中的数
 }
 },
 methods:{
 //删除某一项
 deleteProduct:function (index) {
 this.getProductList.splice(index,1) 
 this.calcTotalPrice() //这里要注意,当某一项删除时,如果你选中了,这里也是要做计算总价格的
 },
 //修改数量
 changeNumber:function (number,add) {
 if(add<0){
 number.prductQty--;
 if(number.prductQty<'1'){ //因为数量最低是1
 number.prductQty=1
 }
 }else{
 number.prductQty++;
 } 
 this.calcTotalPrice() 
 },
 //选中单个的
 checkSingle:function (item){
 if(typeof item.makeChoose=='undefined'){ //这里要注意,因为checked字段根本不在this.getProductList里面,所以你要自己赋值进去
 Vue.set(item, 'makeChoose',true) //这里应该设为true
 }else{
 item.makeChoose=!item.makeChoose
 } 
 this.calcTotalPrice() 
 },
 //选中所有的
 checkAll:function (){ 
 this.checkAllItem=!this.checkAllItem
 var _this=this
 if(this.checkAllItem){
 this.getProductList.forEach(element => {
 if(typeof element.makeChoose=='undefined'){
  Vue.set(element, 'makeChoose',_this.checkAllItem) //让每一小项跟随checkall来变化
 }else{
 element.makeChoose=_this.checkAllItem
 }
 });
 }else{
 this.getProductList.forEach(element => {
 if(typeof element.makeChoose=='undefined'){
  Vue.set(element, 'makeChoose',_this.checkAllItem)
 }else{
 element.makeChoose=_this.checkAllItem
 }
 });
 } 
 this.calcTotalPrice() 
 },
 //计算总金额
 calcTotalPrice:function () {
 var _this=this
 this.totalPrice=0
 this.getProductList.forEach((element,index) => {
 if(element.makeChoose){
 _this.totalPrice+=element.productPrice*element.prductQty //这里是一个累加的过程,所以要用+=
 }
 }); 
 },
 //让页面一进来就处于选中的状态
 makeAllChecked:function () {
 this.getProductList.forEach((item)=>{
 if(typeof item.makeChoose=='undefined'){
 Vue.set(item, 'makeChoose',true)
 }
 }) 
 }
 } ,
 watch:{
 //如果全部选中,那么全部选中的按钮应该变绿,如果一项不是,应该变空
 getProductList:{
 handler:function (item) {
 this.checkedList=this.getProductList.filter((element)=>{
 return element.makeChoose==true;
 }) 
 //选中数<总数据
 if(this.checkedList.length<this.getProductList.length){
 this.checkAllItem=false
 }else{
 this.checkAllItem=true
 } 
 },
 deep:true //这个deep:true一定要写,不然肯定不会时时变化的
 }
 } ,
 created:function (){
 this.makeAllChecked()
 }
 }
</script>
<style lang="less" scoped>
.product_table{
 display: flex;
 width: 100%;
}
.product_info{
 flex:1; 
}
.checked{
 background-color:green;
}
</style>

这个代码实现了什么?

1.在点击加减时每个产品的总价变化,所有产品的总价变化
2.选中时才会结算
3.如果全部选中了每个子项,全部选中按钮会变绿,如果有一项不选中,那么会变白
4.一般的购物车,我希望他一进来就是checked的状态,提高购买性
5.当我删除某一项时,如果这一项是已经checked了的,也要让他在计算总价时重新计算.

ps:最后一行的按钮是全部选中哦,或者是全部取消,忘记写了。

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

Javascript 相关文章推荐
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
javascript的BOM
May 03 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
Vuex提升学习篇
Jan 11 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
vue使用过滤器格式化日期
Jan 20 Vue.js
vue-cli4.x创建企业级项目的方法步骤
Jun 18 #Javascript
javascript实现文字跑马灯效果
Jun 18 #Javascript
node.js +mongdb实现登录功能
Jun 18 #Javascript
VSCode launch.json配置详细教程
Jun 18 #Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 #Javascript
通过实例了解JS执行上下文运行原理
Jun 17 #Javascript
从0搭建vue-cli4脚手架
Jun 17 #Javascript
You might like
php数组的一些常见操作汇总
2011/07/17 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
Python线程同步的实现代码
2018/10/03 Python
python树莓派红外反射传感器
2019/01/21 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
Python二维码生成识别实例详解
2019/07/16 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
双创工作实施方案
2014/03/26 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python