基于Vue语法,使用uni-app框架来实现微信小程序中的购物车功能。
实现购物车的全选,多选,计算总价,删除商品等功能。
结合使用Vant Weapp微信小程序前端框架来搭建购物车页面。
效果图如下:
效果视频如下:
微信小程序购物车录屏
百度云视频,链接:https://pan.baidu.com/s/1QQHIIT58woini-ggPmrzIA
提取码:xzs8
其中单个的商品可以使用左滑进行删除,视频没有体现出来,但是功能还是齐全的。
下面是代码部分:
<template>
<view class="catContent">
<!-- 商品卡片栏 -->
<view class="cards">
<view class="checkedStyle">
<van-swipe-cell :right-width="65" :name="item.id" :key="item.id" v-for="(item,index) in cardGoodsList">
<view class="chengboxs">
<van-checkbox-group @change="onCardChange" :value="checkBox">
<van-checkbox :name="item.id" :key="item.id">
</van-checkbox>
</van-checkbox-group>
</view>
<van-card :num="item.num" :origin-price="formatPrice(item.oprice)" :price="formatPrice(item.price)" :desc="item.desc"
:title="item.title" class="goods-card" :thumb="item.thumb">
<view slot="footer">
<van-button :key="item" @click="numIncrease(item.id)" size="mini">+</van-button>
<van-button :key="item" @click="numReduce(item.id)" size="mini">-</van-button>
</view>
</van-card>
<van-button slot="right" @click="cardDelete(index)" type="danger" class="delete-button">删除</van-button>
</van-swipe-cell>
</view>
<!-- 提交订单栏 -->
<view class="submitBar">
<van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onClickButton" :tip="true">
<van-checkbox :value="checked" @change="onChange">全选</van-checkbox>
</van-submit-bar>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
checked: false,
cardChecked: true,
checkBoxs: [],
checkBox: [],
//商品列表
cardGoodsList: [{
id: '1',
title: '进口香蕉',
desc: '约250g,2根',
price: 200,
oprice: 500,
num: 1,
thumb: '/static/images/goodsimg/tu100.png'
},
{
id: '2',
title: '陕西蜜梨',
desc: '约600g',
price: 800,
oprice: 1000,
num: 1,
thumb: '/static/images/goodsimg/tu100.png'
},
{
id: '3',
title: '碧根果',
desc: '约500g,一袋',
price: 2000,
oprice: 2500,
num: 2,
thumb: '/static/images/goodsimg/tu100.png'
},
{
id: '4',
title: '夏威夷果',
desc: '约500g,一袋',
price: 3000,
oprice: 3500,
num: 1,
thumb: '/static/images/goodsimg/tu100.png'
},
{
id: '5',
title: '开心果',
desc: '约1000g,一袋',
price: 2000,
oprice: 2500,
num: 1,
thumb: '/static/images/goodsimg/tu100.png'
},
{
id: '6',
title: '腰果',
desc: '约1000g,一袋',
price: 1000,
oprice: 1200,
num: 2,
thumb: '/static/images/goodsimg/tu100.png'
}
]
}
},
onLoad() {
for (var j = 0; j < this.cardGoodsList.length; j++) {
this.checkBoxs.push(String(j + 1));
}
console.log(this.checkBoxs);
this.getGoodsList()
},
onShow() {
},
computed: {
//计算总价
totalPrice() {
return this.cardGoodsList.reduce((total, item) => total + (this.checkBox.indexOf(item.id) !== -1 ? item.price *
item.num : 0), 0);
}
},
methods: {
//计算价格
formatPrice(price) {
return (price / 100).toFixed(2);
},
//增加数量
numIncrease(id) {
console.log("增加数量")
for (var i = 0; i < this.cardGoodsList.length; i++) {
if (this.cardGoodsList[i].id == id) {
this.cardGoodsList[i].num++;
}
}
},
//减少数量
numReduce(id) {
console.log("减少数量")
for (var i = 0; i < this.cardGoodsList.length; i++) {
if (this.cardGoodsList[i].id == id && this.cardGoodsList[i].num > 0) {
this.cardGoodsList[i].num--;
}
}
},
//删除商品事件
cardDelete(id) {
console.log(id)
this.cardGoodsList.splice(id, 1);
},
//提交事件
onClickButton() {
console.log("提交购物车")
},
//商品单选事件
onCardChange(event) {
console.log(event.detail)
this.checkBox = event.detail
//单选全部商品列表,即勾选全选框
if (this.checkBox.length == this.checkBoxs.length) {
this.checked = true
} else {
this.checked = false
}
},
//全选事件
onChange(event) {
console.log(event.detail)
console.log("全选事件")
this.checked = event.detail
/*
全选/全不选判断
*/
if (this.checkBox == '') {
this.checkBox = this.checkBoxs
} else if (this.checkBox.length != this.checkBoxs.length) {
this.checkBox = this.checkBoxs
} else if (this.checkBox.length == this.checkBoxs.length) {
this.checkBox = []
}
},
// 获取缓存store中购物车数据
getGoodsList() {
var carDatas = [];
try {
this.$store.state.car.forEach(item => {
carDatas.push(item);
})
// carDatas = JSON.parse(uni.getStorageSync('car'));
console.log(carDatas)
if (carDatas != null) {
for (var i = 0; i < this.cardGoodsList.length; i++) {
if (this.cardGoodsList[i].id != carDatas[i].id) {
this.cardGoodsList.push(carDatas[i])
this.checkBoxs.push(String(carDatas[i].id))
} else {
return
}
}
console.log(this.cardGoodsList)
} else {
return
}
} catch (e) {}
},
},
mounted() {
// 进入该页面就要执行的方法;用于加载后台数据
}
}
</script>
<style>
.catContent {
width: 100%;
height: 100%;
margin: 0 auto;
}
.checkedStyle {
width: 100%;
height: 90%;
margin-left: 5px;
margin-bottom: 14%;
}
.cards {
width: 100%;
height: 100%;
}
.submitBar {
width: 100%;
height: 10%;
}
.chengboxs {
width: 20px;
height: 80px;
margin-top: 55px;
float: left
}
.goods-card {
width: 92%;
float: right;
}
.checkedStyle .van-checkbox__label {
width: 100%;
}
.checkedStyle .van-checkbox {
padding-bottom: 5px;
}
.checkedStyle van-button .van-button--normal {
width: 100%;
height: 126px;
}
</style>
数据是自己写的本地数据,如果使用后台数据,可以在mounted(){}中使用axios进行数据的加载。
除了一些基本的全选,计算操作,我还设置了从本地缓冲中获取数据,就是商品如何添加到购物车,首先需要在main.js中引入vuex,然后把商品的信息保存到store中,然后uni.getStorageSync()获取缓存在本地的数据,添加到原有的购物车数组中。
这篇文章就写到这啦~如果文章中不好的地方,望斧正。