uniapp中购物车demo（全选反选、计算总价、改变商品数量）
复选框checkbox插件下载地址这个插件可以使用Vue中的双向绑定。（给购物车列表中的数据添加双向绑定的属性即可）源码<template><view class="cart"><view class="c"><view class="list"v-for="item in list" :key='item.id'><view class="l
·
这个插件可以使用Vue中的双向绑定，方便（给购物车列表中的数据添加双向绑定的属性即可）
HTML
<template>
<view class="cart">
<view class="c">
<view class="list" v-for="item in list" :key='item.id'>
<view class="l">
<!-- {{item.isChecked}} -->
<!-- 列表的复选框 -->
<evan-checkbox v-model="item.isChecked"></evan-checkbox>
<image :src="item.img" mode="" class="img"></image>
</view>
<view class="center">
<view class="name">
{{item.name}}
</view>
<view class="size">
尺寸：{{item.size}}
</view>
<view class="count">
数量：x{{item.count}}
</view>
</view>
<view class="r">
<!-- 商品小计 -->
<view class="price">
<!-- ￥{{item.price*item.count}}元 -->
￥{{item.sumPrice}}元
</view>
<view class="update-count">
<view class="reduce" @tap="reduce(item.id)">
-
</view>
<view class="cart-count">
{{item.count}}
</view>
<view class="add" @tap="add(item.id)">
+
</view>
</view>
</view>
</view>
</view>
<!-- 底部导航栏 -->
<view class="tabbar">
<view class="all">
<evan-checkbox v-model="isAllChecked"></evan-checkbox>全选
</view>
<view class="totalPrice">
总价:￥{{cartTotalPrice}}元
</view>
<view class="submitOrder" @tap="submitOrder">
付款
</view>
</view>
</view>
</template>
JavaScript
<script>
export default {
data() {
return {
list:[]
}
},
computed: {
// 全选
isAllChecked:{
// list列表--->全选
get(){
// 列表中是否都选中了
return this.list.every(el=>el.isChecked==true)
},
// 全选---->list列表
set(val){
console.log(val);
this.list.forEach(el=>el.isChecked=val)
}
},
// 购物车商品总价
cartTotalPrice(){
// 计算list列表中所有选中商品的价格
var sum=0
this.list.forEach(el=>{
if(el.isChecked){
sum=el.sumPrice+sum
}
})
console.log(sum)
return sum
}
},
methods: {
// 增加商品数量
add(id) {
this.list.forEach(el=>{
if(el.id==id){
if(el.count<el.stock){
el.count++
// 商品小计价格也要改变
el.sumPrice=el.count*el.price
}else{
uni.showToast({
title:'库存不足哦~',
icon:'none'
})
}
}
})
},
// 减少商品数量
reduce(id) {
this.list.forEach(el=>{
if(el.id==id){
if(el.count>1){
el.count--
// 商品小计价格也要改变
el.sumPrice=el.count*el.price
}else{
uni.showToast({
title:'至少购买一件商品哦',
icon:'none'
})
}
}
})
},
// 提交购物车订单
submitOrder(){
// 判断是否选择购物车商品
var bol=this.list.every(el=>el.isChecked==false)
// 列表中未选中提示……
if(bol){
uni.showToast({
title:'请选择商品',
icon:'none'
})
}else{
// 提交选中的订单列表
var cartList=[];
this.list.forEach(el=>{
if(el.isChecked){
cartList.push(el)
}
})
// 2、过滤选中的列表并返回
//cartList=this.list.filter(el=>el.isChecked)
// 购物车总价
cartList.totalPrice=this.cartTotalPrice;
// 购物车列表（购物车总价、购物车具体商品）
console.log(cartList)
}
}
},
onShow() {
// 模拟从后台拿到的数据
var orginList=[
{
id:'0',
name:'西瓜红红薯',
price:20,
count:1,
size:'小',
sumPrice:20,
stock:22,
img:'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2607533352,3339442344&fm=26&gp=0.jpg'
},
{
id:'1',
name:'南瓜',
price:10,
count:3,
size:'中等',
sumPrice:30,
stock:10,
img:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3387044952,2039738596&fm=26&gp=0.jpg'
},
{
id:'2',
name:'红枣',
price:10,
count:4,
size:'迷你',
sumPrice:40,
stock:11,
img:'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2872794674,3215826466&fm=26&gp=0.jpg'
}
]
// list数组中为每一项添加双向绑定的属性---这个属性要在页面显示(onShow)添加
orginList.forEach(el=>el.isChecked=false);
this.list=orginList;
console.log(this.list)
},
onLoad() {
}
}
</script>
css(用scss写的)
<style lang="scss" scoped>
page {
background: #f1e8e7;
}
.cart {
background: #f1e8e7;
}
.c {
width: 670rpx;
margin: 0 auto;
}
// 居中显示
@mixin textCenter {
display: flex;
align-items: center;
justify-content: center;
}
.list{
width: 672rpx;
height: 208rpx;
background: #f9f9f9;
box-shadow: 0 8rpx 16rpx 0 rgba(83,66,49,0.08);
border-radius: 24rpx;
border-radius: 24rpx;
margin-top: 32rpx;
display: flex;
justify-content: space-around;
align-items: center;
.l{
display: flex;
.img{
width: 136rpx;
height: 136rpx;
background-color: pink;
margin-left: 10rpx;
border-radius: 8%;
}
}
.center{
width: 170rpx;
.name{
font-size: 26rpx;
color: #3E3E3E;
letter-spacing: 1.86rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.size{
font-size: 22rpx;
color: #8D8D8D;
letter-spacing: 1.57rpx;
}
.count{
font-size: 22rpx;
color: #8D8D8D;
letter-spacing: 1.57rpx;
}
}
.r{
.price{
margin-top: 40rpx;
font-size: 26rpx;
color: red;
letter-spacing: 0;
margin-left: 40rpx;
}
// 加减数量
.update-count{
margin-top: 40rpx;
display: flex;
.reduce{
width: 40rpx;
height: 40rpx;
background: #F1ECE7;
border-radius: 21.6rpx;
border-radius: 21.6rpx;
color: #979797;
@include textCenter;
font-size: 50rpx;
}
.add{
width: 40rpx;
height: 40rpx;
background: #F1ECE7;
border-radius: 21.6rpx;
border-radius: 21.6rpx;
color: #979797;
@include textCenter;
font-size: 40rpx;
}
.cart-count{
width: 72rpx;
height: 40rpx;
background: #F1ECE7;
border-radius: 21.6rpx;
border-radius: 21.6rpx;
margin-left: 18rpx;
margin-right: 18rpx;
text-align: center;
line-height: 40rpx;
}
}
}
}
// 底部导航
.tabbar {
width: 100%;
height: 176rpx;
background-color: #f3f3f3;
position: fixed;
bottom: 0rpx;
display: flex;
align-items: center;
justify-content: space-around;
border-radius: 8% 8%;
.all {
font-size: 32rpx;
color: #3E3E3E;
letter-spacing: 2.29rpx;
display: flex;
}
.totalPrice {
font-size: 32rpx;
color: #3E3E3E;
letter-spacing: 2.29rpx;
color:red;
}
.submitOrder {
width: 208rpx;
height: 80rpx;
background: #354E44;
border-radius: 14rpx;
border-radius: 14rpx;
font-size: 36rpx;
color: #FFFFFF;
letter-spacing: 2.57rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
安装过程
- 安装目录
前往低代码交流专区
更多推荐
11
0- 0
已为社区贡献8条内容
所有评论(0)