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得到网页中所有的div的id
Oct 19 Javascript
FireFox中textNode分片的问题
Apr 10 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 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中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
js自动生成对象的属性示例代码
2013/10/28 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
PHP统计代码行数的小代码
2019/09/19 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
英语自我评价范文
2014/01/24 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
篮球社团活动总结
2014/06/27 职场文书
初中学习计划书范文
2014/09/15 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
2014年科室工作总结
2014/11/20 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
Python图像处理之图像拼接
2021/04/28 Python
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
mysql 索引合并的使用
2021/08/30 MySQL
Python实现抖音热搜定时爬取功能
2022/03/16 Python
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android