vue+vant实现购物车全选、单个删除功能_vant购物车全选和单选-程序员宅基地

技术标签: Vue.js  vue  javascript  

vue+vant实现购物车全选、单个删除功能


效果展示

vant+vue购物车全选、单个删除

一、html代码

<div class="cart">
    <ul class="cart-list">
      <li
        class="goods"
        v-for="(item, index) in cartList"
        :key="item._id + index"
      >
        <!-- checked是自己添加 -->
        <van-checkbox v-model="item.checked"></van-checkbox>
        <div class="good_img">
          <img :src="item.product.coverImg" alt="" />
        </div>
        <div class="goods-r">
          <h4>{
   { item.product.name }}</h4>
          <div class="goods-price-num">
            <span class="goods-price"
              ><b>{
   { item.product.price }}</b>
            </span>
            <span class="goods-num">
              <span
                @click="item.quantity > 1 && updatePro(item.product._id, -1)"
                >-</span
              >
              <i> {
   { item.quantity }} </i>
              <span @click="updatePro(item.product._id, 1)">+</span>
              <span v-if="item.checked" class="del" @click="del(item._id)">
                ×
              </span>
            </span>
          </div>
        </div>
      </li>
    </ul>
    <van-submit-bar
      :price="sumPrice * 100"
      button-text="立即结算"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
      <van-icon name="delete" v-show="checked" @click="dels" />
    </van-submit-bar>
  </div>

二、 标题js代码

import {
     reqCartAPI, addCartAPI, deleProAPI } from "../../api/cart"; // 引入购物车数据接口请求
import {
     orderAPI } from "../../api/order"; //引入提交订单接口请求

export default {
    
  components: {
    },
  data() {
    
    return {
    
      cartList: [],
    };
  },
  computed: {
    
    // 计算商品总价
    sumPrice() {
    
      // 先选中勾选中的,然后计算总价钱
      return this.cartList
        .filter((item) => item.checked)
        .reduce((pre, cur) => {
    
          return pre + cur.product.price * cur.quantity; // 商品价格*购物车次商品的数量
        }, 0);
    },
    selectedProduct() {
    
      let selectArr = [];
      this.cartList.forEach((item) => {
    
        if (item.checked) {
    
          selectArr.push({
    
            quantity: item.quantity,
            product: item._id,
            price: item.product.price,
          });
        }
      });
      return selectArr;
    },
    // 全选
    checked: {
    
      // 如果购物车全选按钮式true,就全选。如果是false,那么上面的不选中
      set(flag) {
    
        // return this.cartList.forEach((data) => (data.checked = flag));
        console.log(flag);
        // 动态添加属性
        this.cartList.map((item) => this.$set(item, "checked", flag));
      },
      get() {
    
        // 如果购物车的总长度等于选中的总长度,n那么返回true
        return (
          this.cartList.length ==
          this.cartList.filter((data) => data.checked == true).length
        );
      },
    },
  },
  watch: {
    },

  methods: {
    
    // 获取购物车列表功能
    async getCartData() {
    
      const res = await reqCartAPI();
      if (res.status == 200) {
    
        this.cartList = res.data;
        console.log(this.cartList);
      }
    },
    // 点+或-商品数量
    async updatePro(id, num) {
    
      // 调用接口,添加购物车
      await addCartAPI(id, num);
      // 添加完购物车,可以重新调用一次接口,添加购物车之后,把cartList进行更新
      this.cartList.forEach((item) => {
    
        if (item.product._id == id) {
    
          item.quantity = item.quantity + num;
        }
      });
    },
    // 立即结算=>生成订单
    async onSubmit() {
    
      // 判断有没有收货人,没有添加收货人,有执行提交订单请求
      // 下面是写死的数据
      const res = await orderAPI({
    
        receiver: "xxx",
        regions: "xx省xx市xx县(区)",
        address: "xx街道xx号",
        orderDetails: this.selectedProduct,
      });
      console.log(res);
    },
    // 删除购物车单个商品
    async del(id) {
    
      const res = await deleProAPI(id);
      console.log(res);
      this.getCartData();
    },
    // 删除所有商品
    dels() {
    },
  },
  created() {
    
    this.getCartData();
  },
  mounted() {
    },
};

标题三、css样式

<style scoped>
.goods {
    
  height: 80px;
  display: flex;
  padding: 10px;
}
.goods .good_img {
    
  width: 80px;
  height: 80px;
  margin: 0 8px;
}
.goods .good_img img {
    
  width: 100%;
  height: 100%;
}
.goods-r {
    
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}
.goods .goods-r h4 {
    
  font-weight: normal;
  margin: 0;
  line-height: 1;
}
.goods .goods-r .goods-price-num {
    
  display: flex;
  justify-content: space-between;
}
.goods .goods-r .goods-price-num .goods-price {
    
  color: red;
}

.goods .goods-r .goods-price-num .goods-num i {
    
  font-style: normal;
}
.goods .goods-r .goods-price-num .goods-num .del {
    
  color: red;
}
</style>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_57601349/article/details/119488004

智能推荐

【原创】ARM LINUX 外部RTC实时时钟驱动移植(RX8025)_rx8025驱动-程序员宅基地

文章浏览阅读6.8k次。ARM LINUX 外部RTC实时时钟驱动移植(RX8025) Author: chad Mail: [email protected]开发板:AT91SAM9260 内核版本:linux-2.6.30解决办法如下: 第一步:修改board-sam9260ek.c文件修改/arch/arm/match-at91/board-sam9260ek.c,添加如下代码: 在ek_board__rx8025驱动

CTF Bugku GET_bugku get题-程序员宅基地

文章浏览阅读355次。进入场景后看到一串PHP源代码根据这源代码的提示,很容易想到使用GET方法来传递what参数以此来满足条件语句。所以在地址栏里面构造如下:回车之后,what参数的值就传过去了,flag也就出来了本题总结:难度不大,提示的已经很明确了。本题就是专门训练GET方法的。只要明白GET方法在url里面的呈现形式就可以很容易的做出这道题来。..._bugku get题

【Python CheckiO 题解】Three Words_python判three words-程序员宅基地

文章浏览阅读788次。CheckiO 是面向初学者和高级程序员的编码游戏,使用 Python 和 JavaScript 解决棘手的挑战和有趣的任务,从而提高你的编码技能,传送门:https://checkio.org/,本博客主要记录自己在闯关时的做题思路和实现代码,同时也学习学习其他大神写的代码。题目描述【Three Words】:给定一个字符串,判断其是否为连续的三个单词(单词非单个字母),单词与数字之..._python判three words

Fabricjs使用Group实现组合对象_fabric.group-程序员宅基地

文章浏览阅读3.3k次,点赞2次,收藏4次。场景Fabricjs一个简单强大的Canvas绘图库快速入门:Fabricjs一个简单强大的Canvas绘图库快速入门_BADAO_LIUMANG_QIZHI的博客-程序员宅基地在上面的基础上,可以实现在画布上添加对象,如果需要组合对象,并设置组合对象的功能属性可以使用new fabric.Group():接受两个参数。注:博客:BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_程序员宅基地-C#,SpringBoot,架构之路领域博主关注公众号霸道的程序猿获_fabric.group

【JDBC技术】终于知道Java底层是如何连接数据库了!——(8)Apache-DBUtils实现CRUD操作_如何使用apache dbutils连接数据库-程序员宅基地

文章浏览阅读3.9k次。JDBC 核心技术解析文章目录JDBC 核心技术解析Apache-DBUtils实现CRUD操作1. Apache-DBUtils简介2. 主要API的使用2.1 DbUtils2.2 QueryRunner类2.3 ResultSetHandler接口及实现类Apache-DBUtils实现CRUD操作1. Apache-DBUtils简介commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大_如何使用apache dbutils连接数据库

std::future-程序员宅基地

文章浏览阅读192次。1. future1. future1.1. future相关结构1.2. async相关结构1.3. packaged_task 相关结构1.4. promise相关结构1.5. 参考资料1.1. future相关结构Member functionsfundescpub/priv(constructor)constructs the future object(public member function)(destructor)destruc_std::future

随便推点

JFinal配置数据库连接池插件和表类映射_jfinal 数据库连接池插件-程序员宅基地

文章浏览阅读1.1k次。配置数据库连接池插件,此处以Druid为例,还需要配置数据库访问插件,即ActiveRecord插件,用于建立数据库中Table和Java Bean的mapping映射:public void configPlugin(Plugins me) { // 配置 druid 数据库连接池插件 DruidPlugin druidPlugin = new DruidPlu..._jfinal 数据库连接池插件

postfix的身份验证-程序员宅基地

文章浏览阅读648次。Postfixpostfix是WietseVenema在IBM的GPL协议之下开发的MTA(邮件传输代理)软件。postfix是WietseVenema想要为使用最广泛的sendmail提供替代品的一个尝试。在Internet世界中,大部分的电子邮件都是通过sendmail来投递的,大约有100万用户使用sendmail,每天投递上亿封邮件。这真是一个让人吃惊的数字。Post..._postfix 身份验证

政府工程项目完工、交工和竣工的区别_项目竣工概念-程序员宅基地

文章浏览阅读3.2k次。政府工程项目完工、交工和竣工的区别完工:承建方按合同完成项目建设将设计文件转化为工程的工作。交工:工程通过业主组织的交工验收,承建方与业主进行工程交接、开始运营进入试运行阶段。竣工:一般是指正常运营一段时间(3年)后,工程通过业务验收合格,业务支付保留我。交工验收主要工作为:检查合同执行情况,评价工程质量,对参建单位进行初步评价。竣工验收主要工作为:对工程质量、参建单位进行综合评价,并对工程项目建设对行整体综合评价,如果项目建设目标是否达到预期效果。..._项目竣工概念

后渗透篇:清理windows入侵痕迹总结【详细】_当入侵主机后,攻击者清楚自己在系统中留下一些记录,现在需要对这些记录进行痕迹清-程序员宅基地

文章浏览阅读1.3w次,点赞6次,收藏61次。当你的才华还撑不起你的野心时那你就应该静下心来学习目录清理windows入侵痕迹0x01 前言了解为什么需要清除入侵痕迹?一、设置跳板二、必不可少的跳板三、代理服务器简介1)http代理服务器2)Sock5代理服务器3)VPN代理服务器四、使用Tor隐身了解需要删除哪些日志?1...._当入侵主机后,攻击者清楚自己在系统中留下一些记录,现在需要对这些记录进行痕迹清

光学时钟“升天”助力卫星精准导航_飞秒光学频率梳-程序员宅基地

文章浏览阅读290次。光学时钟“升天”助力卫星精准导航光学时钟“升天”助力卫星精准导航科学家们对于精准时间的追求从未停止,目前世界上最准的时钟当属光学时钟。虽然早有研究人员提出将光学时钟应用到卫星上,以提升卫星定位的准确程度,但如何保持光学时钟在太空中与地球上一样稳定发挥,一直是争论的焦点。1小时由60分钟组成,1分钟由60秒组成,那么1秒钟有多长?它是时钟上秒针的一格,也是电子时钟上数字的跳跃,但是1秒钟到底是多久,恐怕并没有多少人知道,也没有多少人关心。但科学家们对于精准时间的追求从未停止,目前世界上最准的时钟当属光_飞秒光学频率梳

bootstrap modal 垂直居中对齐_modal-dialog 浏览器居中 backdrop : 'static-程序员宅基地

文章浏览阅读830次。转载自:http://hbiao68.iteye.com/blog/2213168文章参考http://www.bubuko.com/infodetail-666582.htmlhttp://v3.bootcss.com/javascript/#modals Html代码 div class="modal fade" id="sqh_m_modal-dialog 浏览器居中 backdrop : 'static