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 相关文章推荐
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
var与Javascript变量隐式声明
Sep 17 Javascript
prettify 代码高亮着色器google出品
Dec 28 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
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 $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
PHP会话处理的10个函数
2015/08/11 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
Python输出9*9乘法表的方法
2015/05/25 Python
python3.x上post发送json数据
2018/03/04 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
如何运行带参数的python脚本
2019/11/15 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
详解如何修改python中字典的键和值
2020/09/29 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
决定成败的关键——创业计划书
2014/01/24 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
无私奉献演讲稿
2014/09/04 职场文书
党员评议思想汇报
2014/10/08 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
Vue深入理解插槽slot的使用
2022/08/05 Vue.js