uniapp项目简单实现购物车
一个电商项目中能够说购物车功能的实现能够说是很是重要的，此次疫情期间恰好本身作了一个小demo，停工不停学，逆战到天明。话很少说，先看看效果。javascript
1、当咱们进入购物车页面时应该首先判断用户是否是出于登陆状态css
onShow() {
try {
const userid = uni.getStorageSync('userid');
const token = uni.getStorageSync('token');
if(userid && token) {
this.getCartData(userid,token) // methods中方法，后面将讲到
}else {
uni.navigateTo({
url:'/pages/login/login'
})
}
}
catch(e){
//TODO handle the exception
}
},
在uniapp的onShow生命周期函数中拿到存储在storage中的userid和token（前端判断是否是登陆状态），正是登陆状态就调用函数获取购物车数据，不然跳转至登陆界面。html
2、获取购物车数据前端
getCartData(userid,token) {
ajax({
url:"/cart",
data:{
userid, token
}
}).then( res => {
if(res.code === '10012'){
uni.showToast({
title:'购物车空空如也，快去加购吧',icon:'none'
})
} else if( res.code === '10119' ){
uni.showToast({
title:'你尚未登陆，请先登陆',icon:'none'
})
setTimeout(function() {
uni.navigateTo({
url: '/pages/login/login'
});
}, 2000);
} else {
res.data.map( item => {
item.flag = true
})
this.listdata = res.data
})
}
},
（后端验证登陆状态）首先发送ajax请求拿到请求返回值，根据接口的返回值状态码判断数据的状态作相应的操做。若是code码是10012时说明数据库中尚未数据，给用户响应的提示信息。若是code码是10119时说明登陆状态token已通过期，给用户响应的提示信息，并在两秒后跳转至登陆界面。若是都不知足，那就成功拿到了数据。这是咱们观察数据的结构，不能直接用来作单选全选状态，那么咱们就手动给每一条数据加上一个是否是选中状态的标识flag。bind将值赋值给data中的listdata中java
data() {
return {
listdata:[],
allchecked:true
}
},
这时咱们的data中的listdata已经拿到数据了，那么咱们直接渲染到界面ajax
3、渲染界面数据库
<view class="list">
<view class="list-item" v-for="(item,index) in listdata">
<label class="box">
<checkbox-group @change="changeitem(item)"> <checkbox value="item" :checked="item.flag" /> </checkbox-group>
<image :src="item.proimg"></image>
<view class="dec">
<view class="name">
{{item.proname}}
</view>
<view class="price">
{{item.price}}
</view>
<view class="num">
<button type="primary" @click="reduce(item)">-</button>
<text>{{item.num}}</text>
<button type="primary" @click="puls(item)">+</button>
</view>
</view>
<view class="del" @click="del(item,index)">
删除
</view>
</label>
</view>
</view>
<view class="Settlement">
<checkbox-group class="allBtn" @change="allchange">
<checkbox value="cg" :checked="allchecked" />全选
</checkbox-group>
<view class="Settlement-btn">
总价格:¥{{allprice}}
<button type="primary">结算</button>
</view>
</view>
根据类名设置相应的css样式。那么咱们就直接把数据展现出来了。后端
此时：咱们来到了单选，全选，全不选app
4、全选、单选实现函数
咱们给每一项复选框都绑定上事件，给全选的复选框也绑定是上事件。事件处理函数以下：
changeitem( item) {
item.flag = !item.flag
if(item.flag) {
let test = this.listdata.every( item => {
return item.flag === true
})
if(test) {
this.allchecked = true
} else {
this.allchecked = false
}
}else {
this.allchecked = false
}
},
allchange() {
this.allchecked = !this.allchecked
// 若是 allcheckked 为真 全选被选中时，那么设置每一项都被选中
if(this.allchecked) {
this.listdata.map(item => {
item.flag = true
})
}else {
this.listdata.map(item => {
item.flag = false
})
}
},
当点击每一项的复选框时，改变当前flag的状态，若是当前项flag的状态为真，那么判断列表中每一项的状态是否是都为真，若是是那么就设置全选按的状态为真，不然设置全选按钮的状态为假。若是当前项目的flag的状态为假，那么就设置全选状态为假。
当点击全选时，使全选的状态取反，若是全选状态为真，那么设置列表中的每一项的状态都为真，不然设置都为假。
五，数据库的数量加减
实现数量的加减，而且每一提交后台：
reduce(item) {
let { cartid ，num } = item
const token = uni.getStorageSync('token');
if(num > 1){
num -=1
ajax({
url:"/cart/update",
data:{
token,
cartid,
num
}
}).then( res => {
let {code} = res.code
if(code === '10119'){
uni.navigateTo({
url:'/pages/login/login'
})
}else {
toast({title:"修改数量成功"})
item.num -=1
}
})
}else {
num = 1
}
},
点击减号时触发事件，就能够拿到当前商品的id，和数量。判断当前数量大于1是才能减小，不然直接登陆1.
puls(item) {
let { cartid ，num } = item
const token = uni.getStorageSync('token');
num +=1
ajax({
url:"/cart/update",
data:{
token,
cartid,
num
}
}).then( res => {
let {code} = res.code
if(code === '10119'){
uni.navigateTo({
url:'/pages/login/login'
})
}else {
toast({title:"修改数量成功"})
item.num +=1
}
})
},
点击加号时拿到当前项的id和数量，并对数量进行加1，发送给后端。后端判断登陆状态。
6、删除商品：
del(item,index) {
let {cartid } = item
const token = uni.getStorageSync('token');
ajax( {
url:"/cart/delete",
data:{
token:token,
cartid:cartid
}
}).then( res => {
this.listdata.splice(index,1)
})
}
点击删除按钮触发事件，经过事件能够拿到当前商品和下标，在当前项中拿到商品的id，发送后端删除商品，若是当前商品被删除成功了，那么就再删除前端页面上的数据。
7、计算总价格
咱们能够经过计算属性来完成这个功能。
allprice() {
return this.listdata.reduce((prev,cur) => {
return prev + (cur.flag ? cur.num * cur.price : 0)
},0)
}
咱们能够经过数据的reduce方法来实现杰哥的累加。
最后直接调用计算属性就能够了
怎么样，咱们就是这样简单就完成了简单的购物车的逻辑。继续加油吧！生活不易，多才多艺。