vue2.x element-ui實現(xiàn)pc端購物車頁面demo
更新時間：2023年06月20日 14:30:40 作者：風(fēng)中凌亂的男子
這篇文章主要為大家介紹了vue2.x element-ui實現(xiàn)pc端購物車頁面demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
效果圖
完整demo
<template>
<div class="content shopCart">
<div class="breadcrumb">
<el-breadcrumb>
<el-breadcrumb-item :to="{ path: '/dashboard' }">產(chǎn)品</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="數(shù)量" 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="去結(jié)算" label='產(chǎn)品總額：'>
<p class="submitBar">
<span>繼續(xù)購物</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(() => {
//刪除數(shù)組中指定的元素
this.tableData.splice(index, 1);
this.$message({
type: 'success',
message: '刪除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消刪除'
});
});
},
// 數(shù)量變化觸發(fā)
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);//保留兩位小數(shù)
//增加商品數(shù)量也需要重新計算商品總價
this.handleSelectionChange(this.multipleSelection);
},
add(addGood) {
//輸入框輸入值變化時會變?yōu)樽址袷椒祷氐絡(luò)s
//此處要用v-model，實現(xiàn)雙向數(shù)據(jù)綁定
if (typeof addGood.number == 'string') {
addGood.number = parseInt(addGood.number);
};
addGood.number += 1;
addGood.goodTotal = (addGood.number * addGood.price).toFixed(2);//保留兩位小數(shù)
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);//保留兩位小數(shù)
this.handleSelectionChange(this.multipleSelection)
}
},
handleSelectionChange(selection) {
this.multipleSelection = selection;
this.totalPrice = 0;
//此處不支持forEach循環(huán)，只能用原始方法了
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>以上就是vue2.x element-ui實現(xiàn)pc端購物車頁面demo的詳細(xì)內(nèi)容，更多關(guān)于vue element-ui pc端頁面的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
常見的文件上傳方式可能就是new一個FormData，把文件append進(jìn)去以后post給后端就可以了。但如果采用這種方式來上傳大文件就很容易產(chǎn)生上傳超時的問題。所以本文將利用Vue+NodeJS實現(xiàn)大文件上傳，需要的可以參考一下2022-05-05
總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路，Axios是一個開源的可以用在瀏覽器端和Node JS的異步通信框架，主要作用就是實現(xiàn)AJAX異步通信2023-02-02
這篇文章主要給大家介紹的是vue2 vue3中使用Echarts的相關(guān)資料，下面文章 會詳細(xì)介紹該內(nèi)容，感興趣的小伙伴不要錯過喲2021-09-09
移動端Vue2.x Picker的全局調(diào)用實現(xiàn)
這篇文章主要介紹了移動端Vue2.x Picker的全局調(diào)用實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了Vue實現(xiàn)剪貼板復(fù)制功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了Vue 實例事件,結(jié)合簡單示例形勢分析了vue.js事件響應(yīng)與頁面元素相關(guān)操作技巧,需要的朋友可以參考下2019-09-09
后端寫個上傳圖片的接口可不是很簡單，只需要讓這個字段限制為圖片格式，后臺做個保存的邏輯就完事了，前端處理還要牽扯到請求頭，數(shù)據(jù)格式的處理等等問題，按照老傳統(tǒng)把圖片按照字符串往接口put發(fā)現(xiàn)返回的全是400錯誤，直到我知道了前端的FormData方法！2021-05-05
這篇文章主要介紹了vue3中的響應(yīng)式原理-effect，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了解決vue項目router切換太慢問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了Vue的生命周期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02