vant实现购物车功能


Posted in Javascript onJune 29, 2020

做一些电商或者支付页面,肯定少不了购物车功能,一方面正反选,另一方面动态价格,全选之后再去加减商品数量(这里必须考虑 里面有很多蛋疼的问题)猛的一想,感觉思路很清晰,但是,真正动起手来就各种bug出来了,说实话 搞这个购物车,浪费我整整一下午的时间,当我回过头捋一遍,其实,半小时就能完事。就是因为全选的时候 我又去更改商品数量,然后调用算价格的方法导致浪费了太多时间,话不多少,还是先上图吧 

先看看需求文档吧

vant实现购物车功能

vant实现购物车功能

代码格式不是很整齐 编辑器没有调整  凑合看吧

<template>
 <div class="pddingTop">
 <van-nav-bar title='购物车' left-text="" fixed></van-nav-bar> 
 <div class="shopContent">
 <ul>
 <li v-for="(item,i) in dataList" :key="i" >
  <div class="shopmain">
  <van-checkbox v-model="item.checked" @change="signchecked(item)"></van-checkbox>
  <div class="shops" @click="todetails(item.productCode)">
  <div class="shopImg"><img :src="item.productUrl" alt=""></div>
  <div class="shopsright">
  <h4>{{item.productName}}</h4>
  <div class="shoprightbot">
   <span>¥{{item.price}}</span>
   <div class="shopradd">
   <button @click.stop="reducebuyNum(item.buyNum,item,item.productCode,i)">-</button>
   <van-field style="width:40px;text-align: center" readonly v-model="item.buyNum" type="number" />
   <button id="button" @click.stop="addbuyNum(item.buyNum,item)">+</button>
   </div>
  </div>
  </div>
  </div>
  </div>
 </li>
 </ul>
 </div>
 <div v-show="!dataList.length" class="shopping">
 <div><img src="./images/shopping.png" alt=""></div>
 <p>暂无商品</p>
 </div>
 <div>
 <van-submit-bar
 :price="total*100"
 button-text="提交订单"
 @submit="onSubmit"
 >
 <van-checkbox v-model="ischecked" disabled="disabled" @click="checkAll">全选</van-checkbox>
 </van-submit-bar>
 </div>
 </div>
</template>
<script>
//toast 我全局引用了
import {Checkbox, SubmitBar,Card ,Field,Cell,Dialog, Toast } from 'vant';
import utils from '../utils/utils' //这里是自己封装的方法 获取
export default {
 components:{
 [SubmitBar.name]:SubmitBar,
 [Checkbox.name]:Checkbox,
 [Card.name]:Card,
 [Field.name]:Field,
 [Cell.name]:Cell,
 },
 data(){
 return{
 img:require("./images/gouwuche.png"),
 ischecked:false,
 dataList:[],
 total:0,
 disabled:false,
 }
 },
 methods:{
 todetails(productCode){
   this.$router.push('/commodityDetails?productCode='+productCode)
 },
  //商品加加
 addbuyNum(num,value){
 if(value.buyNum<=98){
 value.buyNum++
 this.shopNumber(value)
 this.amount(value)
 }
 },
  //商品减减
 reducebuyNum(num,value,productCode,i){
 if(value.buyNum<=1){
 Dialog.confirm({
  title: '温馨提示',
  message: '是否删除商品'
  }).then(() => {
  this.https('后台接口',{productCode:productCode})
  .then(data=>{
  Toast({
  message:'删除成功',
       duration:800
  })
  })
  setTimeout(()=>{
       //这里千万不能再调用 要把这个数组里面去除掉 不然问题是很多
  this.dataList.splice(i,1)
  this.amount(value)
  },1000)
  }).catch(() => {
 });
 }else{
 value.buyNum--
 this.shopNumber(value)
 this.amount(value)
 }
 },
 // 提交订单
 onSubmit(){
 let cartIdList = []
 this.dataList.forEach(element => {
 if (element.checked) {
  cartIdList.push(String(element.dataId))
 }
 });
 if (cartIdList.length<1) {
 Toast.fail('请选择订单');
 } else {
 utils.putlocal('cartIdList',JSON.stringify(cartIdList))
 this.$router.push('/placeorder');
 }
 },
 //加减 这里之前是自己手写了 但是参考别的网站后 这里是通过接口加减的
 shopNumber(value){
 let data = {
 dataId :value.dataId,
 buyNum:value.buyNum,
 productCode:value.productCode
 }
 this.https('后台接口',data)
 .then(data=>{
 
 }) 
 },
 // 单选
 signchecked(val){
 this.amount(val)
 },
 amount(val){
 let arr =[]
 let MoneyList=[]
 this.dataList.forEach(item=>{
 if(item.checked===true){
  MoneyList.push(item)
  arr.push(item.checked)
 }
 })
   //这里就是判断时候为全选
 if(arr.length===this.dataList.length){
 this.ischecked = true
 }else{
 this.ischecked = false
 } 
   //价格要置为0 不然一直会累加的 也会又很大的问题
 this.total=0;
 for(var i=0;i<MoneyList.length;i++){
 this.total+=MoneyList[i].price*MoneyList[i].buyNum
 }
 },
 // 全选 这里的事件有两中 一个是click 一个是change 不同的事件用不同的方法
 checkAll(){
 this.dataList.forEach(item=>{
 if(this.ischecked==false){
  item.checked=true
 }else{
  item.checked=false
 }
 })
 },
 // 列表
 shoppingCartlist () {
 this.https('后台接口',{})
   .then(data=>{
    if(data.code=='success'){
     //这里需要手动添加默认的checked 后台没有返
  data.data.forEach(element => {
  element.checked = false
  element.num = null
  });
  this.dataList = data.data 
  if(!this.dataList.length){
  this.disabled=true
  }   
    }else {
     Toast.fail(data.message);
    }
   })
 
 }
 },
 mounted () {
 this.shoppingCartlist ()
 }
}
</script>
<style lang="less" scoped>
.van-submit-bar{
 bottom:49px;
 padding-left:20px;
 
}
.shopContent{
 margin-top:18px;
 padding-bottom:90px;
}
.shopping{
 text-align: center;
 padding-top:99px;
 img{
 width:96px;height:96px;
 margin-bottom: 25px;
 } 
}
li{
 padding:0 15px;
 background:#ffffff;
 margin-bottom:10px;
 position: relative;
 height:103px;
 .shopmain{
 display: flex;
 padding:10px 8px 10px 10px;
 position: relative;
 .shops{
 display: flex;
 .shopImg{
 width:103px;height:83px;
 margin:0 7px 0 11px;
 img{
  width:100%;height:100%;
 }
 }
 .shopsright{
 width:185px;
 display: flex;
 flex-direction:column;
 justify-content: space-between;
 h4{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
 }
 .shoprightbot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 190px;
  span{
  font-size:17px;
  color:#F74022;
  }
 }
 }
 }
 .van-checkbox__icon--checked .van-icon{
 background:red !important;
 }
 }
 button{
 width:24px;height:26px;
 font-size:20px;
 background:#F74022;
 color:#ffffff;
 border:none;
 }
 input{
 width:48px;
 }
} 
.shopradd{
 width: 98px;
 display: flex;
 .van-field__control{
 text-align: center !important;
 }
}
.van-cell{
 padding: 0;
 line-height: 26px
}
.van-field__control{
 height: 26px;
}
</style>

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

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

Javascript 相关文章推荐
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
JavaScript函数柯里化
Nov 07 Javascript
js实现随机点名器精简版
Jun 29 #Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 #Javascript
在Vue中使用antv的示例代码
Jun 29 #Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 #Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 #Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 #Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 #Javascript
You might like
php中http_build_query 的一个问题
2012/03/25 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
jQuery.extend 函数的详细用法
2012/06/27 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
JsChart组件使用详解
2018/03/04 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
完美解决在oj中Python的循环输入问题
2018/06/25 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
大班下学期个人总结
2015/02/13 职场文书
2015年药店工作总结
2015/04/20 职场文书
付款证明模板
2015/06/19 职场文书
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL