vue写的购物车界面

丑陋的界面而且el-col还是没弄懂，样式都加不上记录一下

支持按店铺分类，以及删除操作(这里应该考虑的挺细的了)

<template>
<!-- ;backgound-color:#fcfcfc  想加这个样式但死活加不上 --><div><el-row><el-col :span="16" :offset="4"><el-row style="width:100%"><div class="cart-header"><div style="float:left"><el-link :underline="false" style="color:#000000;font-size:30px;margin-top:5px"><el-image :url="logoUrl"></el-image><strong>购物车</strong></el-link></div><div style="float:right"><el-input placeholder="请输入商品关键字" v-model="goodsKeywords"><template slot="prepend"><el-dropdown @command="replaceSearchKind"   trigger="click" split-button><span class="el-dropdown-link">{{searchKind}}</span><el-dropdown-menu slot="dropdown"><el-dropdown-item>{{anotherKind}}</el-dropdown-item></el-dropdown-menu></el-dropdown></template><i slot="prefix" class="el-input__icon el-icon-search"></i><el-button slot="append" style="background-color:#f34100;color:#ffffff;">搜索</el-button></el-input></div> </div></el-row><el-row style="border-bottom:1px solid #e6e6e6;height:60px;line-height:60px;width:100%"><el-col :span="12"><el-menu default-active="allGoodsNum" active-text-color="#f34100" style="float:left;margin-top:0px" mode="horizontal"><el-menu-item index="allGoodsNum" style="font-size:20px"><strong>全部商品 {{allGoodsInCartNum}}</strong></el-menu-item></el-menu></el-col><el-col :span="12"><span  style="float:right"><span>已选商品（不含运费）</span><span style="margin-left:10px;color:#f34100;font-size:25px"><strong>{{selectedNum}}件 {{selectedGoodsPrice}}</strong></span><el-button :style="{'background-color':disablePurchaseBtn?'#aaaaaa':'#f34100'}" :disabled=disablePurchaseBtn style="color:white;margin-left:10px"  @click="toPurchasePage()">结算</el-button></span></el-col></el-row> <div style="margin: 15px 0;"></div><div><!-- 顶部 --><el-row><el-col :span="4"><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="1">规格</el-col><el-col :span="3" :offset="1">单价</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,shop)" class="selectAllGoodsInShop"style="margin-bottom:10px;"></el-checkbox><el-link class="shop-name-link" style="font-size:17px;margin-left:10px" :underline="false">{{shop.shopName}}</el-link><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" style="padding-left:30px"><el-checkbox @change="handleSelectGoods($event,shop,goods)"  :label="goods":key="goods.goodsId"class="goods-checkbox"size="medium"><br/></el-checkbox></el-col><el-col :span="2" ><el-image :src="goods.goodsPicUrl" style="height:120px;width:120px"/></el-col><el-col :span="3" :offset="1"><el-link :underline="false" style="font-size:15px">{{goods.goodsName}}</el-link></el-col><el-col :span="3" :offset="5"><el-link disabled style="margin-top:30%;color:black;font-size:19px"><strong>￥{{goods.unitPrice}}</strong></el-link></el-col><el-col :span="2"><el-input-number size="mini" style="margin-top:40%;width:100%;font-size:19px"  v-model="goods.purchaseNum" @change="handleCounterChange" :min="minSelectedNum" :max="goods.goodsPurchaseRestriction"></el-input-number></el-col><el-col :span="3"><el-link disabled style="margin-top:30%;color:black;text-align:center;margin-right:46px;font-size:19px">{{NumberMul(goods.unitPrice,goods.purchaseNum)}}</el-link></el-col><el-col :span="3" style="text-align:center"><el-button style="margin-top:30%;font-size:15px" 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></el-col></el-row></div>
</template><script>export default {data() {return {searchKind:"宝贝",anotherKind:"店铺",goodsKeywords:"",selectedGoodsPrice:0.00,disablePurchaseBtn:false,logoUrl: require('@/assets/image/logo.png'),allGoodsInCartNum:0,selectedNum:0,selectAllGoods:false,//大全选cartData:[{shopId:"1",shopName:"北京华章图书旗舰",selectedList: [],//存放选中的idselectAllGoodsInShop:false,//小全选goodsList: [{isSelected:false,goodsId: "1",goodsName: "229677|正版(特价书)现货java并发编程的艺术",unitPrice:28.32,purchaseNum:5,goodsPurchaseRestriction:9,goodsPicUrl:"https://img.alicdn.com/bao/uploaded/i1/1599634638/TB1CAjXIFXXXXXRXXXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg",},{isSelected:false,goodsId: "2",goodsName: "碧浪洗衣液700g瓶装抑菌除菌去渍日晒清新手洗机洗家用家庭装正品",unitPrice:28333.30,purchaseNum: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: [{isSelected:false,goodsId: "3",goodsName: "【年货价】KeychronK7蓝牙无线机械键盘矮轴超薄68小型便携适配",unitPrice:28.30,purchaseNum:5,goodsPurchaseRestriction:1,goodsPicUrl:"https://img.alicdn.com/bao/uploaded/i1/1599634638/TB1CAjXIFXXXXXRXXXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg",},{isSelected:false,goodsId: "4",goodsName: "【年货价】雷亚游戏官方正版周边授权销售 Rayark Cytus II 手机平板",unitPrice:28.30,purchaseNum: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((shop)=>{this.handleSelectShop(event,shop)})},handleSelectShop(event,shop){ //小全选shop.goodsList.forEach((goods)=>{this.handleSelectGoods(event,shop,goods)})},handleSelectGoods(event,shop,goods){ //每一个商品的选中goods.isSelected=event;this.refreshCart()},refreshCart(){ //所有数据的重新加载let selectedShopGoodsList=[]this.selectAllGoods = truethis.selectedNum=0this.selectedGoodsPrice=0this.cartData.forEach((shop)=>{shop.selectedList=[]shop.selectAllGoodsInShop=trueshop.goodsList.forEach((goods)=>{if(goods.isSelected){this.selectedNum++;this.selectedGoodsPrice+=this.NumberMul(goods.unitPrice,goods.purchaseNum)shop.selectedList.push(goods)}else{shop.selectAllGoodsInShop=false;this.selectAllGoods=false;}})if(shop.selectedList.length>0){selectedShopGoodsList.push({shopId:shop.shopId,shopName:shop.shopName,selectedShopGoodsList:shop.selectedList})}})this.setSelectedCartState(selectedShopGoodsList)},openDeleteConfirm(goodsId,shopIndex,goodsIndex){this.$confirm('确定移除该商品吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {let shop=this.cartData[shopIndex];let deletedGoods=shop.goodsList[goodsIndex];shop.goodsList.splice(goodsIndex,1);if(shop.goodsList.length==0){this.cartData.splice(shopIndex,1)}this.refreshCart()}).catch(() => {})},}
}
</script><style lang='less' scoped>.cart-header{width:100%;height:40px;line-height: 70px;}.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;}.vertical-center{display: flex;align-items: center;justify-content: center;}
</style>

看了别人的博客拿来用的js浮点数乘法
在main.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))
}

vue写的购物车界面相关推荐

Vue.js搭建移动端购物车界面－基本结构和数据渲染
本文介绍了如何使用Vue搭建一个移动端购物车界面,最终实现的功能包括: 1. 选择要最终购买的物品 2. 选择每件物品购买的数量 3. 实时更新所选择物品的总 ...
Vue实战篇一：使用Vue搭建注册登录界面
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
用angular JS和 bootstrap完成一个简单的购物车界面
初学angularJS,自己做一个简单的demo玩一下. 购物车界面:(1)能显示商品基本信息: (2)能对购买数量进行修改: (3)能够删除不想购买的商品: (4)能够自动计 ...
用 vue 写小程序，基于 mpvue 框架重写 weui
mpvue-weui 前言上周美团开源了 mpvue 框架,他基于Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系.what,小程序可以用vue写了?简直有点不太敢确定, ...
编写高质量代码改善C#程序的157个建议——建议157：从写第一个界面开始，就进行自动化测试...
建议157:从写第一个界面开始,就进行自动化测试如果说单元测试是白盒测试,那么自动化测试就是黑盒测试.黑盒测试要求捕捉界面上的控件句柄,并对其进行编码,以达到模拟人工操作的目的.具体的自动化测试请学 ...
python写前端图形界面_如何Tkinter模块编写Python图形界面
一.为何使用Tkinter而非PyQt 众所周知,在Python中创建图形界面程序有很多种的选择,其中PyQt和wxPython都是很热门的模块包,这些第三方的图形界面模块功能强大.配置丰富,界面美观 ...
[vue] 使用vue写一个tab切换
[vue] 使用vue写一个tab切换 v-for循环,利用下标和v-show显示`<div id="app"><ul class="tabs" ...
[vue] 你有自己用vue写过UI组件库吗？
[vue] 你有自己用vue写过UI组件库吗? {{item.title}}<dl v-if="item.list.length > 0"><dd v-fo ...
[vue] 写出你知道的表单修饰符和事件修饰符
[vue] 写出你知道的表单修饰符和事件修饰符事件修饰符.stop .prevent .capture .self .once .passive 表单修饰符.number .lazy .trim 个 ...

vue写的购物车界面

vue写的购物车界面相关推荐

最新文章

热门文章