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 相关文章推荐
js兼容标准的表格变色效果
Jun 28 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
React中的Context应用场景分析
Jun 11 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+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
Js的MessageBox
2006/12/03 Javascript
js select常用操作控制代码
2010/03/16 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
python flask 多对多表查询功能
2017/06/25 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
基于python实现聊天室程序
2018/07/27 Python
对python中的argv和argc使用详解
2018/12/15 Python
python for 循环获取index索引的方法
2019/02/01 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
护理毕业生自荐信范文
2013/12/22 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
绿色出行口号
2014/06/18 职场文书
2014年物流工作总结
2014/11/25 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
财务经理岗位职责
2015/01/31 职场文书
Python基础之元编程知识总结
2021/05/23 Python