vue写的购物车界面
2022/1/12 6:06:34
本文主要是介绍vue写的购物车界面,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
丑陋的界面 而且el-col还是没弄懂,样式都加不上 记录一下
支持按店铺分类,以及删除操作(这里应该考虑的挺细的了)
<template> <!-- ;backgound-color:#fcfcfc 想加这个样式但死活加不上 --> <div> <!-- 顶部 --> <el-row> <el-col :span="3"> <el-checkbox v-model="selectAllGoods" @change="handleSelectAll($event)" class="checkSelectAll" > 全选 </el-checkbox> </el-col> <el-col :span="3"> 商品信息 </el-col> <el-col :span="3" :offset="6"> 单价 </el-col> <el-col :span="3"> 数量 </el-col> <el-col :span="3"> 金额 </el-col> <el-col :span="3"> 操作 </el-col> </el-row> <!-- 购物车列表 --> <el-row> <div v-for="(shop,shopIndex) in cartData" :key="shop.shopId"> <el-checkbox v-model="shop.selectAllGoodsInShop" @change="handleSelectShop($event,shopIndex)" class="selectAllGoodsInShop" style="margin-bottom:10px;" > <el-link class="shop-name-link" :underline="false">{{shop.shopName}}</el-link> </el-checkbox> <el-checkbox-group v-model="shop.selectedlist" class="selected-goods"> <div v-for="(goods,goodsIndex) in shop.goodsList" :key="goods.goodsId" style="border:1px solid #cccccc"> <!-- --> <el-row> <el-col :span="1"> <el-checkbox @change="checkSelectAllGoodsInShop(shopIndex)" :label="goods" :key="goods.goodsId" class="goods-checkbox" size="medium" > <br/> </el-checkbox> </el-col> <el-col :span="1" > <el-image :src="goods.goodsPicUrl" style="height:40px;width:30px"/> </el-col> <el-col :span="3"> <el-link :underline="false" style="font-size:10px">{{goods.goodsName}}</el-link> </el-col> <el-col :span="3" :offset="7"> <el-link disabled style="color:black"><strong>¥{{goods.unitPrice}}</strong></el-link> </el-col> <el-col :span="2"> <el-input-number size="mini" style="width:100%" v-model="goods.goodsPurchaseNum" @change="handleCounterChange" :min="minSelectedNum" :max="goods.goodsPurchaseRestriction"></el-input-number> </el-col> <el-col :span="3"> <el-link disabled style="color:black;text-align:center;margin-right:46px">{{NumberMul(goods.unitPrice,goods.goodsPurchaseNum)}}</el-link> </el-col> <el-col :span="3"> <el-button type="text" @click="openDeleteConfirm(goods.goodsId,shopIndex,goodsIndex)" class="options-delete-btn">删除</el-button> </el-col> </el-row> </div> </el-checkbox-group> </div> </el-row> </div> </template> <script> export default { data() { return { selectedNum:0, selectAllGoods:false,//大全选 cartData:[ { shopId:"1", shopName:"北京华章图书旗舰", selectedlist: [],//存放选中的id selectAllGoodsInShop:false,//小全选 goodsList: [{ goodsId: "1", goodsName: "229677|正版(特价书)现货java并发编程的艺术", unitPrice:"28.32", goodsPurchaseNum:5, goodsPurchaseRestriction:9, goodsPicUrl:"https://img.alicdn.com/bao/uploaded/i1/1599634638/TB1CAjXIFXXXXXRXXXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg", },{ goodsId: "2", goodsName: "碧浪洗衣液700g瓶装抑菌除菌去渍日晒清新手洗机洗家用家庭装正品", unitPrice:"28333.30", goodsPurchaseNum:5, goodsPurchaseRestriction:9, goodsPicUrl:"https://img.alicdn.com/bao/uploaded/i1/1599634638/TB1CAjXIFXXXXXRXXXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg", }], }, { shopId:"2", shopName:"雅冠家居专营店", selectedlist: [],//存放选中的商品 selectAllGoodsInShop:false,//小全选 goodsList: [{ goodsId: "3", goodsName: "【年货价】KeychronK7蓝牙无线机械键盘矮轴超薄68小型便携适配", unitPrice:"28.30", goodsPurchaseNum:5, goodsPurchaseRestriction:1, goodsPicUrl:"https://img.alicdn.com/bao/uploaded/i1/1599634638/TB1CAjXIFXXXXXRXXXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg", },{ goodsId: "4", goodsName: "【年货价】雷亚游戏官方正版周边授权销售 Rayark Cytus II 手机平板", unitPrice:"28.30", goodsPurchaseNum:5, goodsPurchaseRestriction:6, goodsPicUrl:"https://img.alicdn.com/bao/uploaded/i1/1599634638/TB1CAjXIFXXXXXRXXXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg", }], }, ], minSelectedNum:1 } }, methods: { handleSelectAll(event){ //大全选 this.cartData.forEach((goods,index)=>{ this.handleSelectShop(event,index) if(event == true){ this.cartData[index].selectAllGoodsInShop = true }else{ this.cartData[index].selectAllGoodsInShop = false } }) this.checkSelectAll() }, handleSelectShop(event,index){ //小全选 let shop=this.cartData[index]; shop.selectedlist = [] if(event == true){ shop.goodsList.forEach((goods)=>{ shop.selectedlist.push(goods) })} this.checkSelectAll() }, checkSelectAllGoodsInShop(index){ //每一项的选中 let shop=this.cartData[index]; let selectedlist=shop.selectedlist; let goodsList=shop.goodsList; if( selectedlist.length == goodsList.length){ this.cartData[index].selectAllGoodsInShop = true }else{ this.cartData[index].selectAllGoodsInShop = false } this.checkSelectAll() }, checkSelectAll(){ //检查大全选是否需要选中 this.selectedNum = 0 let checkSelectAllList = [] this.cartData.find((shop)=>{ if(shop.selectAllGoodsInShop == false){ //如果找出小全选中有false的即代表大全选不能选中 checkSelectAllList.push(shop) } this.selectedNum += shop.selectedlist.length }) if(checkSelectAllList.length>0){ this.selectAllGoods = false }else{ this.selectAllGoods = true } }, handleCounterChange(value){ }, openDeleteConfirm(goodsId,shopIndex,goodsIndex){ this.$confirm('确定移除该商品吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }).then(() => { let shop=this.cartData[shopIndex]; let deletedGoods=shop.goodsList[goodsIndex]; let deletedGoodsId=deletedGoods.goodsId; shop.goodsList.splice(goodsIndex,1); let deletedIndexInSelectedList=-1; shop.selectedlist.forEach((goods,index)=>{ if(goods.goodsId==deletedGoodsId){ deletedIndexInSelectedList=index; } }) if(deletedIndexInSelectedList!=-1){ shop.selectedlist.splice(deletedIndexInSelectedList,1) } if(shop.goodsList.length==0){ this.cartData.splice(shopIndex,1) this.checkSelectAll() this.checkSelectAllGoodsInShop(shopIndex) }else{ if(shop.goodsList.length==shop.selectedlist.length){ shop.selectAllGoodsInShop=true; this.checkSelectAll() } } }).catch(() => {}) } }, computed:{ goodsPrice(unitPrice,purchaseNum){ return (unitPrice,purchaseNum)=>{ return parseInt(unitPrice,10)*parseInt(purchaseNum,10); } }, }, filter:{ floatFilter(value){ let realVal = parseFloat(value).toFixed(2) return realVal } } } </script> <style lang="less" scoped> .shop-name-link{ color: #3d4542; } .shop-name-link:hover{ color: #f34733; } .selected-goods a{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //多行在这里修改数字即可 overflow:hidden; /* autoprefixer: ignore next */ -webkit-box-orient: vertical; } .options-delete-btn{ color: #3d4542; } .options-delete-btn:hover{ color: #f34733; } </style>
看了别人的博客 拿来用的js浮点数乘法
Vue.prototype.NumberMul = function(arg1, arg2) { var m = 0; var s1 = arg1.toString(); var s2 = arg2.toString(); try { m += s1.split(".")[1].length; } catch (e) {} try { m += s2.split(".")[1].length; } catch (e) {} return (Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)).toFixed(2);//两位小数 }
这篇关于vue写的购物车界面的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01Vue.js 是什么-icode9专业技术文章分享
- 2024-11-01Vue3入门教程:从零开始搭建第一个Vue3项目
- 2024-11-01详解vueRouter4基础教程
- 2024-11-01Vuex4课程:初学者的完整入门指南
- 2024-10-31Vue3课程:新手入门到初级掌握
- 2024-10-31Vue3课程:新手入门到初级应用详解
- 2024-10-31VueRouter4课程:新手入门与实战指南
- 2024-10-31Vuex4学习:从入门到初级实战教程
- 2024-10-31Vue3教程:新手入门与基础实战
- 2024-10-31Vue教程:新手快速入门指南