vue前端之基于vant-ui的card卡片组件的商品购物车修改的简单实现、复选框批量选择、全选反选按钮

vue前端之基于vant-ui的card卡片组件的商品购物车修改的简单实现、复选框批量选择、全选按钮

1、要达到的效果
vue前端之基于vant-ui的card卡片组件的商品购物车修改的简单实现、复选框批量选择、全选反选按钮_第1张图片
2、整体代码:

<template>
<div>
  <home-header class="TOP" :message='topTitle'>home-header>
  <div class="cart">
    <van-checkbox-group class="card-goods" v-model="checkedGoods" ref="checkboxGroup" v-if="cartList.length>0">
      <div v-for="(item,index) in cartList" :key="index" class="card-goods__item">
        
        <van-checkbox :name="index">van-checkbox>
        <van-card
          style="margin-left:20px;"
          :title="item.title"
          :price="item.price"
        >
        
        <template #desc>
          <span class="desc">2020年第{{item.weekNum}}周开始span>
        template>
        
        <template #tags>
          <span class="tags">
              <van-tag plain size="medium"  v-if="item.dayOfWeek1.length>0" type="primary">{{item.dayOfWeek1}}van-tag>
              <van-tag plain size="medium"  v-if="item.dayOfWeek2.length>0" type="primary">{{item.dayOfWeek2}}van-tag>
              <van-tag plain size="medium"  v-if="item.dayOfWeek3.length>0" type="primary">{{item.dayOfWeek3}}van-tag>
              <van-tag plain size="medium"  v-if="item.dayOfWeek4.length>0" type="primary">{{item.dayOfWeek4}}van-tag>
              <van-tag plain size="medium"  v-if="item.dayOfWeek5.length>0" type="primary">{{item.dayOfWeek5}}van-tag>
              <van-tag plain size="medium"  v-if="item.dayOfWeek6.length>0" type="primary">{{item.dayOfWeek6}}van-tag>
              <van-tag plain size="medium"  v-if="item.dayOfWeek7.length>0" type="primary">{{item.dayOfWeek7}}van-tag>
          span>   
        template>
        
        <div slot="price-top" style="vertical-align: middle;">
            <van-stepper style="display: inline;" v-model="item.num" name='周数' @change="changeNum(item.num,item.id)" disableInput/>
        div>
        
        <template #footer>
          <van-button type="warning" round size="mini" @click="order(item.num,item.id,index)" >结算van-button>
          <van-button type="danger" round size="mini" @click="delCar(item.id,index)">删除van-button>
        template>  
      van-card>
      div>
      <br>


      
    van-checkbox-group>
    
    <van-submit-bar
      :disabled="!checkedGoods.length"
      :button-text="submitBarText"
      @submit="submit"
      v-if="cartList.length>0"
    >
    
     <van-checkbox v-model="checkedAll" @click="checkAll" style="padding: 0 10px">全选van-checkbox>
     <van-button round size="small" style="margin-right:130px" @click="clear" type="info">清空van-button>
    van-submit-bar>
    
    <div class="no-data" v-if="cartList.length ===0 ">
      <p style="text-align: center;color:lightgray">
        <van-icon name="cart-o" style="text-align: center" size="3rem"/><br>
        购物车还是空的p>
      <van-button type="default" block round @click="toHome">去逛逛van-button>
    div>
    
  div>
  div>
template>
<script>
import { Dialog,Tag,Checkbox, CheckboxGroup, Card, SubmitBar, Toast, NavBar, Tabbar, TabbarItem,Stepper, Button, Icon  } from 'vant';
import HomeHeader from "@/components/common/header"
export default {
    components: {
        HomeHeader,
        [Card.name]: Card,
        [Checkbox.name]: Checkbox,
        [SubmitBar.name]: SubmitBar,
        [CheckboxGroup.name]: CheckboxGroup,
        [NavBar.name]: NavBar,
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem,
        [Stepper.name]: Stepper,
        [Button.name]: Button,
        [Icon.name]: Icon,
        [Tag.name]:Tag,
        [Dialog.name]:Dialog
    },

    data() {
        return {
          topTitle: '购物车',
            checkedGoods: [],
            checkeAllCarts:[],
            cartList: [],
            checkedAll: false,
            token:'',
            // 更新购物车所需参数
            oneOfWeek: 0,
	          sevenOfWeek: 0,
	          sixOfWeek: 0,
	          threeOfWeek: 0,
            twoOfWeek: 0,
            fiveOfWeek: 0,
            fourOfWeek: 0,
            weekNum:'',
            wid:''

        }
    },
    mounted(){
      this.init()
    },
    computed: {
        submitBarText() {
            const count = this.checkedGoods.length;
            return '结算' + (count ? `(${count})` : '');
        }
    },

    methods: {
      //初始化获得购物车
        init(){
          this.$axios({
            method: 'get',
            url: '/demo/job-car/get',
            headers: {
              'Content-Type': "application/json;charset=UTF-8",
              'Authorization': 'Bearer ' + this.token,
            }
          })
          .then(res=>{                    //请求成功后执行函数
            if(res.data.code === 0){
            var res = res.data.data
            this.cartList = res
            console.log("获取购物车成功")
          }else{
            console.log("获取购物车失败")
          }
          })
          .catch(err=>{                   //请求错误后执行函
            console.log("请求错误")
          })     
        },

        //修改购物车的数量
        changeNum(num,id) {
          console.log(num); //数量
          console.log(id); //id
          //找到数组cartlist里对应id的对象
          var obj=this.cartList.find(function (x) {
              return x.id === id
          });
          // console.log(obj);
          //后端传的是dayofweek,而这个接口需要oneofweek,通过if进行转换
              if(!obj.dayOfWeek1==""){
                this.oneOfWeek=1
              }
              if(!obj.dayOfWeek2==''){
                this.twoOfWeek=1
              }
              if(!obj.dayOfWeek3==''){
                this.threeOfWeek=1
              }
              if(!obj.dayOfWeek4==''){
                this.fourOfWeek=0
              }
              if(!obj.dayOfWeek5==''){
                this.fiveOfWeek=0
              }
              if(!obj.dayOfWeek6==''){
                this.sixOfWeek=0
              }
              if(!obj.dayOfWeek7==''){
                this.sevenOfWeek=0
              }
              this.weekNum=obj.weekNum;
              this.wid=obj.wid;
           
          this.$axios({
            method: 'PUT',
            url: '/demo/job-car/update',
            headers: {
              'Content-Type': "application/json;charset=UTF-8",
              'Authorization': 'Bearer ' + this.token,
            },
            data:{
              oneOfWeek: this.oneOfWeek,
              twoOfWeek: this.twoOfWeek,
              threeOfWeek: this.threeOfWeek,
              fourOfWeek: this.fourOfWeek,
              fiveOfWeek: this.fiveOfWeek,
              sixOfWeek: this.sixOfWeek,
              sevenOfWeek: this.sevenOfWeek, 
              id:id,
              num:num,
              weekNum:this.weekNum,
              wid:this.wid
            }
          })
          .then(res=>{                    //请求成功后执行函数
            if(res.data.code === 0){
            var res = res.data.data
            this.init
            console.log("更新成功")
          }else{
            console.log("更新失败")
          }
          })
          .catch(err=>{                   //请求错误后执行函
            console.log("请求错误")
          })     
        },
      //清空购物车
        clear(){
          this.cartList=[];
          this.$axios({
            method: 'delete',
            url: '/demo/job-car/deleteAll',
            headers: {
              'Content-Type': "application/json;charset=UTF-8",
              'Authorization': 'Bearer ' + this.token,
            }
          })
          .then(res=>{                    //请求成功后执行函数
            if(res.data.code === 0){
              console.log("清空成功")
            }else{
              console.log("清空失败")
            }
          })
          .catch(err=>{                   //请求错误后执行函
            console.log("请求错误")
          })
        },

        //单笔订单的删除按钮,根据订单id删除
        delCar(id,index){
          this.cartList.splice(index,1)//'1' 代表删除一个
          console.log(id); //id
          this.$axios({
            method: 'delete',
            url: '/demo/job-car/delete',
            headers: {
              'Content-Type': "application/json;charset=UTF-8",
            },
            params:{
              id:id
            }
          })
          .then(res=>{                    //请求成功后执行函数
            if(res.data.code === 0){
              console.log("删除成功")
            }else{
              console.log("删除失败")
            }
          })
          .catch(err=>{                   //请求错误后执行函
            console.log("请求错误")
          })
        },

        //单个结算按钮
        order(num,id,index){
          console.log(num); //数量
          console.log(id); //id
          //找到数组cartlist里对应id的对象
          var obj=this.cartList.find(function (x) {
              return x.id === id
          });
          // console.log(obj);
          //后端传的是dayofweek,而这个接口需要oneofweek,通过if进行转换
              if(!obj.dayOfWeek1==""){
                this.oneOfWeek=1
              }
              if(!obj.dayOfWeek2==''){
                this.twoOfWeek=1
              }
              if(!obj.dayOfWeek3==''){
                this.threeOfWeek=1
              }
              if(!obj.dayOfWeek4==''){
                this.fourOfWeek=0
              }
              if(!obj.dayOfWeek5==''){
                this.fiveOfWeek=0
              }
              if(!obj.dayOfWeek6==''){
                this.sixOfWeek=0
              }
              if(!obj.dayOfWeek7==''){
                this.sevenOfWeek=0
              }
              this.weekNum=obj.weekNum;
              this.wid=obj.wid;
          this.$axios({
            method: 'post',
            url: '/demo/week/chooseInJobCar',
            headers: {
              'Content-Type': "application/json;charset=UTF-8",
              'Authorization': 'Bearer ' + this.token
            },
            params:{
              num:num,
              weekNum:this.weekNum,
              wid:this.wid,
              oneOfWeek: this.oneOfWeek,
              twoOfWeek: this.twoOfWeek,
              threeOfWeek: this.threeOfWeek,
              fourOfWeek: this.fourOfWeek,
              fiveOfWeek: this.fiveOfWeek,
              sixOfWeek: this.sixOfWeek,
              sevenOfWeek: this.sevenOfWeek, 
              id:id
            }  
          })
          .then(res=>{                    //请求成功后执行函数
            if(res.data.message === 'SUCCESS'){
                this.cartList.splice(index,1)
                Dialog.alert({
                  message: '下单成功'
                }).then(() => {});
            console.log("拼兼职成功")
            }else{
              console.log("拼兼职失败")
            } 
          })
          .catch(() => {
             console.log("请求错误")
            })
        },

        // 最下面那个结算按钮,因为后端不好实现批量结算,此按钮仅做装饰用
        submit() {
            this.$router.push('/')
        },
       
        //购物车是空的,去主页逛逛
        toHome() {
            this.$router.push('/')
        },
        
        //全选和反选按钮,利用vant-ui简单实现
        checkAll( ) {
          if(this.checkedGoods.length === this.cartList.length){
            this.$refs.checkboxGroup.toggleAll();
          }else{
            this.$refs.checkboxGroup.toggleAll(true);
          }
        },
    },
    created(){
      this.token =  localStorage.getItem('token')     
    },
};

script>

<style lang="scss">
  
  .TOP {
        position: fixed;
    }  
  .cart{
    padding-top: 45px;
    padding-bottom: 80px;
  }
  .van-submit-bar{
   bottom:48px;
  }
.card-goods {
  background-color: #fff;
  

  &__item {
    position: relative;
    background-color: #fafafa;

    .van-checkbox__label {
      width: 100%;
      height: auto; // temp
      padding: 0 10px 0 15px;
      box-sizing: border-box;
    }

    .van-checkbox__icon {
      top: 50%;
      left: 10px;
      z-index: 1;
      position: absolute;
      margin-top: -10px;
    }

    .van-card__title {
      // padding-top: 5px;
      font-family: 微软雅黑;
      font-size: 16px;
      font-weight: bold;
      // text-overflow: ellipsis;
      display: -webkit-box;
      margin-bottom: 5px;
      overflow:auto;
    }
    .van-card__price {
      vertical-align: middle;
      color: #f44;
    }
    .desc {
      font-size: 15px;
      margin-top: 7px;
      margin-bottom: 15px;
      font-family: 微软雅黑;
    }
    .tags{
      margin-left: 5px;
    }
  }
}
style>

2、vant-ui步进器的使用与绑定:修改购物车数量

  • html

        <div slot="price-top" style="vertical-align: middle;">
            <van-stepper style="display: inline;" v-model="item.num" name='周数' @change="changeNum(item.num,item.id)" disableInput/>
        div>
  • 步进器绑定了changeNum(item.num,item.id)这个事件,并且传入的两个值。一个是这个商品加入购物车的时候最初的数量,一个是商品在购物车的唯一id。
  • script:
//修改购物车的数量
        changeNum(num,id) {
          console.log(num); //数量
          console.log(id); //id
          //找到数组cartlist里对应id的对象
          var obj=this.cartList.find(function (x) {
              return x.id === id
          });
          // console.log(obj);
          //后端传的是dayofweek,而这个接口需要oneofweek,通过if进行转换
              if(!obj.dayOfWeek1==""){
                this.oneOfWeek=1
              }
              if(!obj.dayOfWeek2==''){
                this.twoOfWeek=1
              }
              if(!obj.dayOfWeek3==''){
                this.threeOfWeek=1
              }
              if(!obj.dayOfWeek4==''){
                this.fourOfWeek=0
              }
              if(!obj.dayOfWeek5==''){
                this.fiveOfWeek=0
              }
              if(!obj.dayOfWeek6==''){
                this.sixOfWeek=0
              }
              if(!obj.dayOfWeek7==''){
                this.sevenOfWeek=0
              }
              this.weekNum=obj.weekNum;
              this.wid=obj.wid;
           
          this.$axios({
            method: 'PUT',
            url: '/demo/job-car/update',
            headers: {
              'Content-Type': "application/json;charset=UTF-8",
              'Authorization': 'Bearer ' + this.token,
            },
            data:{
              oneOfWeek: this.oneOfWeek,
              twoOfWeek: this.twoOfWeek,
              threeOfWeek: this.threeOfWeek,
              fourOfWeek: this.fourOfWeek,
              fiveOfWeek: this.fiveOfWeek,
              sixOfWeek: this.sixOfWeek,
              sevenOfWeek: this.sevenOfWeek, 
              id:id,
              num:num,
              weekNum:this.weekNum,
              wid:this.wid
            }
          })
          .then(res=>{                    //请求成功后执行函数
            if(res.data.code === 0){
            var res = res.data.data
            this.init
            console.log("更新成功")
          }else{
            console.log("更新失败")
          }
          })
          .catch(err=>{                   //请求错误后执行函
            console.log("请求错误")
          })     
        },

3、全选和反选以及批量选择的实现:利用vant-ui

  • html见上面的代码,是利用了vant-ui的/van-checkbox-group组件。这里我主要分析方法。
//全选和反选按钮,利用vant-ui简单实现
        checkAll( ) {
          if(this.checkedGoods.length === this.cartList.length){
            this.$refs.checkboxGroup.toggleAll();
          }else{
            this.$refs.checkboxGroup.toggleAll(true);
          }
        },
  • vant-ui绑定的这个方法真的是非常强大,如果做的是vue移动端的webapp,给大家强烈安利这个ui,连全选按钮的实现都这么简单。

4、总结

  • 到这里我目前在做的这个项目就算是结束了,所以关于这个项目给大家的分享和启示就到此为止了,如果以后emmm出于兴趣我再有新的项目,还会在这里给大家分享滴。然后感谢CSDN,真程序员学习笔记,为我项目的完成提供了巨大的帮助,也因为在这里受到别人的帮助,所以俺也写了这些文章,说不定有用,顺便捞一波访问量,捞一些关注嘿嘿。

本篇文章如有错的地方,欢迎在评论指正。喜欢在微信看技术文章,可以微信搜索「胡录乱影」,回复【Python】【前端基础】【vue开发】即可获得视频资源,回复【答辩PPT】【演讲PPT】即可获得超级实用PPT模板,还有更多资料,建议后台留言或者直接私信我。

另,如果觉得这本篇文章写得不错,有点东西的话,各位人才记得来个三连【点赞+关注+分享】。

你可能感兴趣的:(前端)