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 相关文章推荐
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
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变量内存分配问题记录整理
2013/11/27 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
jQuery 入门讲解1
2009/04/15 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
在Windows8上的搭建Python和Django环境
2014/07/03 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Python函数调用追踪实现代码
2020/11/27 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
Java中实现多态的机制
2015/08/09 面试题
日语专业毕业生求职信
2013/12/04 职场文书
护理专科自荐书范文
2014/02/18 职场文书
研讨会主持词
2014/04/02 职场文书
小学作文评语大全
2014/04/21 职场文书
个人求职自荐信范文
2015/03/06 职场文书