先看效果图
image.png
image.png
image.png
<template>
<div class="content shopCart">
<div class="breadcrumb">
<el-breadcrumb>
<el-breadcrumb-item :to="{ path: '/dashboard' }">产品</el-breadcrumb-item>
<el-breadcrumb-item>购物车</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!-- Steps -->
<div class="steps">
<el-steps :active="1" align-center>
<el-step title="购物车"></el-step>
<el-step title="订单信息"></el-step>
<el-step title="订单支付"></el-step>
<el-step title="成功提交订单"></el-step>
</el-steps>
</div>
<!-- table -->
<div class="table">
<el-table element-loading-text="正在为您拼命加载中..." :data="tableData" ref="multipleTable" style="width: 100%"
@selection-change="handleSelectionChange" :close-on-click-modal="false" :close-on-press-escape="false"
:header-cell-style="{background:'#f8f8f8',color:'#999'}">
<el-table-column type="selection" width="75" align="center" />
<el-table-column prop="shopImg" align="center" width="150" label="商品">
<template slot-scope="scope">
<img :src="scope.row.shopImg" class="shopImg" alt="">
</template>
</el-table-column>
<el-table-column prop="shop" align="center">
<template slot-scope="scope">
<span class="shop">{{scope.row.shop}}</span>
</template>
</el-table-column>
<el-table-column prop="price" label="单价" align="center">
<template slot-scope="scope">
<span class="price">¥{{scope.row.price}}</span>
</template>
</el-table-column>
<el-table-column prop="number" label="数量" align="center">
<template slot-scope="scope">
<el-input v-model.number="scope.row.number" oninput="value=value.replace(/[^\d]/g,'')" autocomplete="off" style="width:140px" size="mini"
@change="handleInput(scope.row)">
<el-button size="mini" slot="prepend" @click="del(scope.row)"><i class="el-icon-minus"></i></el-button>
<el-button slot="append" size="mini" @click="add(scope.row)"><i class="el-icon-plus"></i></el-button>
</el-input>
</template>
</el-table-column>
<el-table-column prop="count" label="小计" align="center">
<template slot-scope="scope">
<span class="count">¥{{scope.row.goodTotal}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<i class="el-icon-delete" style="font-size:18px;cursor: pointer;" @click="handleDelete(scope.$index, scope.row)"></i>
</template>
</el-table-column>
</el-table>
<div class="submit">
<van-submit-bar :price="totalPrice*100" :disabled='multipleSelection.length<=0' button-color='#bfa548' button-text="去结算" label='产品总额：'>
<p class="submitBar">
<span>继续购物</span>
<span>
共 <b>{{tableData.length}}</b> 件商品,
已选择 <b>{{multipleSelection.length}}</b> 件
</span>
</p>
</van-submit-bar>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ shopImg: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1606288963.72951431.jpg", shop: '小米不能写 红色 10支装', price: 20, number: 1, goodTotal: 20, },
{ shopImg: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1606288963.72951431.jpg", shop: '小米巨能写 黑色 10支装', price: 30, number: 1, goodTotal: 30, }
],
totalPrice: 0,
multipleSelection: [],
}
},
methods: {
// 删除单个商品
handleDelete(index, row) {
this.$confirm('确定删除该商品？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//删除数组中指定的元素
this.tableData.splice(index, 1);
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 数量变化触发
handleInput(value) {
console.log(value);
if (null == value.number || value.number == "" || value.number == 0) {
value.number = 1;
}
value.goodTotal = (value.number * value.price).toFixed(2);//保留两位小数
//增加商品数量也需要重新计算商品总价
this.handleSelectionChange(this.multipleSelection);
},
add(addGood) {
//输入框输入值变化时会变为字符串格式返回到js
//此处要用v-model，实现双向数据绑定
if (typeof addGood.number == 'string') {
addGood.number = parseInt(addGood.number);
};
addGood.number += 1;
addGood.goodTotal = (addGood.number * addGood.price).toFixed(2);//保留两位小数
this.handleSelectionChange(this.multipleSelection)
},
del(delGood) {
if (typeof delGood.number == 'string') {
delGood.number = parseInt(delGood.number);
};
if (delGood.number > 1) {
delGood.number -= 1;
delGood.goodTotal = (delGood.number * delGood.price).toFixed(2);//保留两位小数
this.handleSelectionChange(this.multipleSelection)
}
},
handleSelectionChange(selection) {
this.multipleSelection = selection;
this.totalPrice = 0;
//此处不支持forEach循环，只能用原始方法了
for (var i = 0; i < selection.length; i++) {
//判断返回的值是否是字符串
if (typeof selection[i].goodTotal == 'string') {
selection[i].goodTotal = parseInt(selection[i].goodTotal);
};
this.totalPrice += selection[i].goodTotal;
}
}
},
}
</script>
<style lang="scss" scoped>
.shopCart {
margin-bottom: 50px;
.breadcrumb {
margin: 20px 0;
::v-deep .el-breadcrumb__inner.is-link {
color: #bfa548;
}
}
.steps {
margin-top: 50px;
::v-deep .el-step__head {
border-color: #d8d8d8;
color: #fff;
}
::v-deep .el-step__head.is-finish {
color: #fff;
border-color: #bfa548;
}
::v-deep .el-step__title {
font-size: 15px;
}
::v-deep .el-step__title.is-finish {
color: #bfa548;
}
::v-deep .el-step__title.is-process {
color: #d8d8d8;
}
::v-deep .is-finish {
.is-text {
background: #bfa548;
}
}
::v-deep .is-process {
.is-text {
background: #d8d8d8;
}
}
::v-deep .is-wait {
.is-text {
background: #d8d8d8;
}
}
::v-deep .el-step__line {
height: 5px;
top: 10px;
background-color: #f1f1f1;
}
}
.table {
margin-top: 50px;
position: relative;
padding-bottom: 100px;
::v-deep .el-input__inner {
text-align: center;
}
::v-deep .el-input-group__append {
padding: 0 15px;
}
::v-deep .el-input-group__prepend {
padding: 0 15px;
}
.shopImg {
width: 100%;
}
.price,
.shop {
color: #000733;
}
.count {
color: #bfa548;
}
::v-deep .el-checkbox__inner {
width: 20px;
height: 20px;
border-radius: 50%;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #bfa548;
border-color: #bfa548;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #bfa548;
border-color: #bfa548;
}
::v-deep .el-checkbox__inner::after {
left: 7px;
top: 3px;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
top: 7px;
}
.submit {
position: absolute;
right: 0;
left: 0;
::v-deep .van-submit-bar {
position: absolute;
top: 20px;
.van-submit-bar__bar {
background-color: #f8f8f8;
padding: 30px 20px 30px 28px;
}
}
.submitBar {
color: #757575;
display: flex;
align-items: center;
b {
color: #bfa548;
margin: 0 5px;
}
span {
display: flex;
align-items: center;
&:first-child {
cursor: pointer;
&:hover {
color: #bfa548;
}
&::after {
display: inline-block;
content: "";
width: 1px;
height: 12px;
background: #ccc;
margin: 0 10px;
}
}
}
}
::v-deep .van-submit-bar__price {
color: #bfa548;
}
::v-deep .van-submit-bar__text {
padding-right: 30px;
color: #000733;
}
}
}
}
</style>
网友评论