Javascript
vue写的购物车界面
本文主要是介绍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写的购物车界面的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
怎么使用 nvm（Node Version Manager）下载并安装指定版本的 Node.js？-icode9专业技术文章分享11-26
-
Vue CLI资料入门教程11-26
-
Vue CLI资料入门教程11-26
-
Vue3+Vite资料：新手入门教程详解11-26
-
Vue3阿里系UI组件资料入门教程11-26
-
Vue3的阿里系UI组件资料入门指南11-26
-
Vue3公共组件资料详解与实战教程11-26
-
Vue3公共组件资料详解与实战教程11-26
-
Vue3核心功能响应式变量资料入门教程11-26
-
Vue3核心功能响应式变量资料详解11-26
-
Vue3资料：新手入门教程与实战技巧11-26
-
Vue CLI教程：新手入门与实践指南11-26
-
Vue3+Vite教程：新手入门到项目实践11-26
-
Vue3阿里系UI组件教程：新手入门指南11-26
-
Vue3的阿里系UI组件教程：简单易懂的入门指南11-26
栏目导航
