当前位置: 首页 > 编程笔记 >

vant实现购物车功能

彭鸿哲
2023-03-14
本文向大家介绍vant实现购物车功能,包括了vant实现购物车功能的使用技巧和注意事项,需要的朋友参考一下

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

先看看需求文档吧

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

<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组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Android实现购物车功能,包括了Android实现购物车功能的使用技巧和注意事项,需要的朋友参考一下 最近看了一些淘宝购物车的demo,于是也写了一个。 效果图如下: 主要代码如下: actvity中的代码: actvity中XML的代码: -XML中头部可以到网上找一个这里就不放上来了 .checkbox和button的样式可以根据个人喜好设置。 Adaper中的代码: Ada

  • 本文向大家介绍Python3实现购物车功能,包括了Python3实现购物车功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Python3实现购物车功能的具体代码,供大家参考,具体内容如下 购物车要求: 1、启动程序后,输入用户名密码后,如果是第一次登录,让用户输入工资,然后打印商品列表 2、允许用户根据商品编号购买商品 3、用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒

  • 本文向大家介绍js实现购物车功能,包括了js实现购物车功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现购物车功能的具体代码,供大家参考,具体内容如下 购物车实现3种方式 1、利用cookie 优点:不占用服务器资源,可以永远保存,不用考虑失效的问题 缺点: 对购买商品的数量是有限制的,存放数据的大小 不可以超过2k,用户如果禁用cookie那么就木有办法购买商品,卓越网实

  • 本文向大家介绍PHP session实现购物车功能,包括了PHP session实现购物车功能的使用技巧和注意事项,需要的朋友参考一下 在wamp环境下,用PHP的session会话控制完成购物车的效果,数据存放在数组里练习,没有连接数据库,效果不错,简单易懂,以下是各部分的代码 common.php index.php action.php spcar.php delete.php 以上就是本文

  • 本文向大家介绍Vuex实现购物车小功能,包括了Vuex实现购物车小功能的使用技巧和注意事项,需要的朋友参考一下 Vuex实现购物车功能(附:效果视频),供大家参考,具体内容如下 功能描述: 加购 删除 加减 全选反选 选中计算总价 存储 整体演示效果如下: 首先介绍一下Vuex: Vuex 实例对象属性 主要有下面5个核心属性: state : 全局访问的state对象,存放要设置的初始状态名及值

  • 本文向大家介绍php实现购物车功能(下),包括了php实现购物车功能(下)的使用技巧和注意事项,需要的朋友参考一下 接着上篇继续学习: 《php实现购物车的功能(上)》 7、实现一个管理界面 登录界面 由以下代码实现: 7.1 admin.php 7.2 user_auth_fns.php文件中的函数login() 7.3 user_auth_fns.php文件中的函数check_admin_us