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 相关文章推荐
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
webpack打包js的方法
Mar 12 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
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/06/10 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
jquery插件开发之实现md5插件
2014/03/17 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python set常用操作函数集锦
2017/11/15 Python
python实现整数的二进制循环移位
2019/03/08 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
浅谈html5 响应式布局
2014/12/24 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
运动会广播稿200字
2014/01/15 职场文书
高考励志标语
2014/06/05 职场文书
三严三实学习心得体会
2014/10/13 职场文书
党性分析材料格式
2014/12/19 职场文书
世界红十字日活动总结
2015/02/10 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
2015年教务工作总结
2015/05/23 职场文书
个人道歉信大全
2019/04/11 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android