购物车流程
一、需求分析
a:全选，单选，根据选中的计算数目和总价
b:单个商品加减
c:删除一个商品
wxml 布局
<view>
<view v-if="flag">
购物车空空如也请<navigator open-type="switchTab" url="/pages/home/home">选购 </navigator> </view>
<view v-else> <view class="container">
<checkbox-group @change="selectedall">
<checkbox value="cb" :checked="isAllchecked" />
</checkbox-group>
<view class="cartitem" v-for="(item,index) of cartlist" :key="index">
<checkbox-group @change="selected(item)">
<checkbox value="cb" :checked="item.flag" />
</checkbox-group> <image class="img" :src="item.proimg" mode=""></image>
<view class="jieshao">
<view class="proname">
{{item.proname}}
</view>
<view class="proprice">
￥{{item.price}}
</view>
<button size="mini"ass="mini-btn" @click="add(item)" > + </button>
{{item.num}}
<button size="mini" class="mini-btn" @click="reduce(item)" > - </button>
<button class="mini-btn del" type="warn" size="mini" @click="del(item,index)">删除</button>
</view> </view>
</view>
</view>
<view> 总数：{{totalNum}}</view>
<view> 总价：{{totalPrice}}</view>
</view>
计算总价
//总价格
totalPrice() {
let totalPrice =0
this.cartlist.map(item=>{
if(item.flag){
totalPrice+=item.num*item.price
}else{
totalPrice+=0
} })
return totalPrice
}
选择事件
点击时选中，再点击又变成没选中状态。在赋值列表数据之前 给每一项添加一个flag字段来控制选中和未选中状态
选择事件
// 单个选中
selected(item){
console.log("test",item)
item.flag = !item.flag
console.log(this.cartlist)
//如果某一项没被选中 那么全选不选中
//如果单独某一先被选中了 检测其他是否选中 如果都选中 全选选中
if(!item.flag){
this.isAllchecked=false
}else{
//检测其余项是否被选中
const test =this.cartlist.every(item=>{
return item.flag===true
})
if(test){
this.isAllchecked=true
}else{
this.isAllchecked=false
}
}
全选事件
全选就是根据全选状态 isAllchecked 去改变每个商品的 selected
// 全选
selectedall() {
this.isAllchecked=!this.isAllchecked
console.log(this.isAllchecked)
//为真 修改数据每一项的值都为真
if(this.isAllchecked){
this.cartlist.map(item=>{
item.flag = true
})
}else{
this.cartlist.map(item=>{
item.flag=false
})
}
},增减数量
// 减少
reduce(item){
let num =item.num
//如果当前个数为1 不操作 如果大于1 减一草错
if(num> 1){
num-=1
}else{
num = 1
}
let userid =uni.getStorageSync("userid")
let token =uni.getStorageSync("token")
request({
url:"/cart/update",
data:{
token,
cartid:item.carrtid,
num
} }).then(res=>{
if(res.data.code==="10019"){
toast({title:"请先登录"})
uni.navigateTo({
url:"/pages/login/login"
})
}else{
toast({title:"修改数量成功"})
if(num>1){
item.num-=1 //更改数量
}else {
item.num=0
} }
}) }, /* 增加 */
add(item){ let num =item.num
//如果当前个数为1 不操作 如果大于1 减一草错
if(num> 1){
num+=1
}else{
num = 1
}
let userid =uni.getStorageSync("userid")
let token =uni.getStorageSync("token")
request({
url:"/cart/update",
data:{
token,
cartid:item.carrtid,
num
} }).then(res=>{
if(res.data.code==="10019"){
toast({title:"请先登录"})
uni.navigateTo({
url:"/pages/login/login"
})
}else{
toast({title:"修改数量成功"})
item.num+=1 //更改数量
}
}) },
删除事件
// 删除
del(item,index){
let token=uni.getStorageSync("token")
console.log(token)
console.log(item.cartid)
request({
url:"/cart/delete",
data:{
token,
cartid:item.cartid
}
}).then(res=>{
console.log(res)
if(res.data.code === "10019"){
uni.navigateTo({
url:"/pages/login/login"
})
toast({title:"请先登录"})
}else{
toast({title:"删除数据成功"})
this.cartlist.splice(index,1)//删除当前的
//全部数据删除后
this.cartlist.length===0 ? this.flag=true : this.flag=false
}
})
},
完成图