丑陋的界面 而且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: [],//存放选中的id
selectAllGoodsInShop: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 = true
this.selectedNum=0
this.selectedGoodsPrice=0
this.cartData.forEach((shop)=>{
shop.selectedList=[]
shop.selectAllGoodsInShop=true
shop.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))
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
