运行结果

主要功能

商品数量的增加与删除
商品的全选以及单件商品的选择
价格与总价的同步

主要代码

<template><div><!--头部区域--><header class="header"><a href="index.html" class="icon-back"></a><h3>购物车</h3><a href="" class="icon-menu"></a></header><!--安全提示--><section class="jd-safe-tip"><p class="tip-word">您正在安全购物环境中，请放心购物</p></section><!--中间内容--><main class="jd-shop-cart-list"><section><div class="shop-cart-list-title"><div class="left"><span class="cart-title">HK自营</span></div><span class="right">您享受满100元免运费服务</span></div><div class="shop-cart-list-con" v-for="(shop,index) in shopListArr" :key="shop.shopId"><div class="left"><ahref="javascript:;"class="cart-check-box":checked="shop.checked"@click="selectedSingleShop(shop)"></a></div><div class="center"><img :src="shop.shopImage" :alt="shop.shopName"></div><div class="right"><a href="#">{{shop.shopName}}</a><div class="shop-price"><div class="single-price">{{shop.shopPrice | moneyFormat}}</div><div class="total-price">总价：{{shop.shopPrice * shop.shopNumber | moneyFormat}}</div></div><div class="shop-deal"><span @click="singleShopPrice(shop,false)">-</span><input disabled="false" type="number" v-model="shop.shopNumber"><span  @click="singleShopPrice(shop,true)">+</span></div><div class="shop-deal-right" @click="clickTrash(shop,$event)"><span></span><span></span></div></div></div></section></main><!--面板--><div class="panel" ref="panel" style="display: none;"><div ref="panelContent" class="panel-content"><div class="panel-title">您确认删除这个商品吗?</div><div class="panel-footer"><ahref="javascript:;"class="cancel"@click.prevent="hidePanel()">取消</a><ahref="javascript:;"class="submit"@click.prevent="delShop()">确定</a></div></div></div><!--底部通栏--><div id="tab_bar"><div class="tab-bar-left"><ahref="javascript:;"class="cart-check-box":checked="isSelectedAll"@click="selectedAll(isSelectedAll)"></a><span style="font-size: 16px;">全选</span><div class="select-all">合计：<span class="total-price">{{totalPrice | moneyFormat}}</span></div></div><div class="tab-bar-right"><a href="index.html" class="pay">去结算</a></div></div></div>
</template><script>import './../assets/css/base.css'import './../assets/css/cart.css'import axios from 'axios'export default {name: "Cart",data(){return {// 购物车中商品数据shopListArr : [],// 总价totalPrice:0,// 用来标识是否全选isSelectedAll:false,// 垃圾盖子up:'',// 要删除商品currentDelShop :{},}},created(){this.getProduct();},methods:{// 1. 获取网络数据getProduct(){axios.get('http://demo.itlike.com/web/jdm/api/shoplist').then((response)=>{console.log(response);if(response.status===200){this.shopListArr = response.data.result.shopList;}}).catch((error)=>{alert('网络出现异常！');})},// 2. 单个商品加减singleShopPrice(shop,flag){// flag = true 加// flag = false 减if(flag){shop.shopNumber += 1;}else{if(shop.shopNumber <= 1){shop.shopNumber = 1;alert('只有一件商品了！');return;}shop.shopNumber -= 1;}// 2.1 计算总价this.getAllShopPrice()},// 3. 全选selectedAll(flag){// 3.1 属性控制this.isSelectedAll = ! flag;// 3.2 遍历购物车所有商品数据this.shopListArr.forEach((value,index)=>{if(typeof value.checked === 'undefined'){// 当前对象没有该属性this.$set(value,'checked',!flag);}else{value.checked = !flag;}});// 3.3 计算总价this.getAllShopPrice()},// 4. 单选和取消选中selectedSingleShop(shop){if(typeof shop.checked === 'undefined'){this.$set(shop,'checked',true);}else{shop.checked = !shop.checked;}// 4.2 判断是否全选this.hasSelectedAll();// 4.3 计算总价this.getAllShopPrice()},// 5. 是否要全选hasSelectedAll(){let flag = true;this.shopListArr.forEach((value,index)=>{if(!value.checked){flag = false;}});this.isSelectedAll = flag && this.shopListArr.length > 0;},// 6. 计算商品总价getAllShopPrice(){let tPrice = 0;this.shopListArr.forEach((value,index)=>{// 6.1 遍历所有商品if(value.checked){// 6.2 判断是否选中tPrice += value.shopNumber * value.shopPrice;}});// 6.3 更新总价格this.totalPrice = tPrice;},// 7. 点击垃圾篓clickTrash(shop,event){// 7.1 获取父标签let trashes = event.target.parentNode;let up = trashes.firstElementChild;// 7.2 加过渡up.style.transition = 'all .2s ease';up.style.webkitTransition = 'all .2s ease';// 7.3 实现动画up.style.transformOrigin = '0 0.5rem';up.style.webkitTransformOrigin = '0 0.5rem';up.style.transform = 'rotate(-45deg)';up.style.webkitTransform = 'rotate(-45deg)';// 7.4 显示面板this.$refs.panel.style.display = 'block';this.$refs.panelContent.className  = 'panel-content jump';// 7.5 赋值全局变量 方便实用this.up = up;// 7.6 记录当前点击商品，方便删除this.currentDelShop = shop;},// 8. 点击取消hidePanel(){// 8.1 隐藏面板this.$refs.panel.style.display = 'none';this.$refs.panelContent.className  = 'panel-content';// 8.2 盖子闭合this.up.style.transform = 'rotate(0deg)';this.up.style.webkitTransform = 'rotate(0deg)';},// 9. 点击确定，删除当前商品delShop(){// 9.1 隐藏面板this.$refs.panel.style.display = 'none';this.$refs.panelContent.className  = 'panel-content';// 9.1.2 获取索引let index = this.shopListArr.indexOf(this.currentDelShop);this.shopListArr.splice(index,1);// 9.2 计算总价this.getAllShopPrice();// 9.3 判断是否全选this.hasSelectedAll();}},filters:{// 格式化金钱moneyFormat(money){return '￥' + Number(money).toFixed(2);}}}
</script><style scoped></style>

完整代码

基于Vue的移动端购物车单界面实现

实战Vue：基于Vue的移动端购物车单界面实现相关推荐

vue | 基于vue的城市选择器和搜索城市对应的小区
城市选择器应该是比较常用的一个组件,用户可以去选择自己的城市,选择城市后返回,又根据自己选择的城市搜索小区. 功能展示这是选择结果这是选择城市这是搜索小区这是搜索小区接口,key为城市名字,i ...
怎么把HTML网页重构为VUE,基于vue cli重构多页面脚手架过程详解
官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考. ...
基于Vue全家桶制作的的高仿美团APP
美团外卖APP ? 项目演示地址:http://39.108.232.27:9000 ? GitHub:github.com/bxm0927/vue- 基于 Vue 全家桶 (2.x) 制作的美团外卖 ...
实战Vue：基于Vue的移动端购物商城
前情提要:文章很长,基本是整个项目完整开发的流程.代码下载后可以直接运行,支付接口慎用,可能会有错误,其他功能都是完整的. 完整项目下载关注一下公众号「代码行间」,回复「商城」可以获取代码- 一.项 ...
基于 Vue 和 TS 的 Web 移动端项目实战心得
关注程序员成长指北,回复"1" 加入我们一起学习,天天进步作者:mcuking(杭州个推) 来源:https://juejin.im/post/5d759f706fb9a06a ...
基于 Vue 的移动端富文本编辑器 vue-quill-editor 实战
优秀的富文本编辑器有很多,比如:UEditor,wangEditor 等,但并不是每个都能在移动端有很好的表现. 我们暂且不讨论移动端是否真的需要富文本,既然有这需求,就把它实现出来. 失败的尝试正 ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...
go+vue——基于gin框架和gorm的web开发实战
go+vue--基于gin框架和gorm的web开发实战 gin框架视频.资料.笔记安装Go环境, 添加环境变量(可能自动添加好) 下载 Go 环境变量 goland 报错: GOROOT is ...
【014】基于Vue.js的移动端购物商城网站(含源码、课设报告)
文章目录一.项目介绍二.代码及报告获取一.项目介绍基于Vue.js的移动端购物商城网站(含源码.课设报告),代码获取放在文末了,码字不易,感谢点赞~ 一.系统概述本部分主要是对项目进行简要描 ...
Vue.js 3.0企业级管理后台开发实战：基于Element Plus UI
Vue.js 3.0企业级管理后台开发实战:基于Element Plus UI - 每天更新前言文章内容项目源码及课件第1章项目启动 1.1 项目原型 1.2 项目UI 1.3 项目开发流程 ...

实战Vue：基于Vue的移动端购物车单界面实现

运行结果

主要功能

主要代码

完整代码

实战Vue：基于Vue的移动端购物车单界面实现相关推荐

最新文章

热门文章