小程序购物车商品数量加减,单选全选,商品价格累计
2020年注定了是个不平凡的一年,疫情的爆发阻碍前去工作的脚步,只有在家敲着自己的小键盘玩乐了,把每一天当成一个新的开始,牢记心中的理想,微笑面对生活,不断充实自己,就会拥有精彩有意义的人生。逆境中学习,逆战中敲代码。
最近学习小程序,简单的对购物车基本功能做下学习笔记。
本次应用uni-app创建项目
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS,Android,H5,以及各种小程序(微信/支付宝/百度/头条/ QQ /钉钉)等多个平台。
DCloud公司拥有420万开发者,数十万应用案例,10.5亿手机端用户,数十款uni-app插件,70 +微信/ qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为uni-app录制培训课程(详见),开发者可以放心选择。 uni-app在手,做啥都不愁。甚至不跨端,也是更好uni-app的小程序开发框架(详见),更好的App跨平台框架,更方便的H5开发框架。你都可以快速交付,不需要转换开发思维,不需要更改开发习惯。
页面大致内容
在这里插入图片描述
下面是代码
页面模板
1
购物车未添加内容,请
{{ item.proname }} ¥{{ item.price }} -- {{ item.num }}
js部分
import { request, toast } from '../../utils/index.js' //
export default {
data() {
return {
flag: true,
cartlist: [],
allchecked: true
}
},
computed: {
totalNum () { //总数量
let totalNum = 0;
this.cartlist.map(item => {
item.flag ? totalNum += item.num : totalNum += 0
})
return totalNum
},
totalPrice () { //总价格
let totalPrice = 0;
this.cartlist.map(item => {
item.flag ? totalPrice += item.num * item.price : totalPrice += 0
})
return totalPrice
}
},
onLoad () {
},
onShow () { // 不使用 onLoad 以及 mounted 是因为页面被缓存,数据更新不及时
try{
let userid = uni.getStorageSync('userid')
let token = uni.getStorageSync('token')
if (userid && token) {
request({
url: '/cart',
data: {
userid, token
}
}).then(res => {
if (res.data.code === '10019') {
toast({title:'请先登录'})
uni.navigateTo({
url: '/pages/login/login'
})
} else if (res.data.code === '10012') {
toast({title:'请先选购商品'})
this.flag = true
} else {
toast({title:'购物车列表获取成功'})
this.flag = false
// 赋值之前给 数据添加数据项 item.flag
res.data.data.map( item => {
item.flag = true
})
this.cartlist = res.data.data
console.log(this.cartlist)
}
})
} else {
toast({title:'请先登录'})
uni.navigateTo({
url: '/pages/login/login'
})
}
}catch(e){
//TODO handle the exception
}
},
methods: {
allselected () { //全选框
this.allchecked = !this.allchecked
console.log(this.allchecked)
// 如果为真,修改数据的每一项的flag的值都为真,否则都为假
if (this.allchecked) {
this.cartlist.map( item => {
item.flag = true
})
} else {
this.cartlist.map( item => {
item.flag = false
})
}
},
selected (item) { //每条数据选择框
console.log('test', item)
item.flag = !item.flag
console.log(this.cartlist)
// 如果单独某一项没被选中,那么全选一定不被选中
// 如果单独某一项被选中了,检测其他项是否都被选中,如果都选中了,全选被选中
if(!item.flag) {
this.allchecked = false
} else {
// 检测其余项是否被选中 --- 一假则假
const test = this.cartlist.every(item => {
return item.flag === true
})
if (test) {
this.allchecked = true
} else {
this.allchecked = false
}
}
},
reduce (item) { //商品数量减
// 如果当前的个数为1 不操作,如果大于1减1操作
let num = item.num
if (num > 1) {
num -= 1
} else {
num = 1
}
let token = uni.getStorageSync('token')
request({
url: '/cart/update',
data: {
token,
cartid: item.cartid, // item包含购物车记录id
num
}
}).then(res => {
if (res.data.code === '10019') {
toast({title:'请先登录'})
uni.navigateTo({
url: '/pages/login/login'
})
} else {
toast({title:'修改数量成功'})
item.num -= 1 // 服务器返回成功之后 视图才更新
}
})
},
add (item) { //商品数量减
// item.num += 1
// 加1
let num = item.num
num += 1
let token = uni.getStorageSync('token')
request({
url: '/cart/update',
data: {
token,
cartid: item.cartid, // item包含购物车记录id
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')
request({
url: '/cart/delete',
data: {
token,
cartid: item.cartid
}
}).then(res => {
if (res.data.code === '10019') {
toast({title:'请先登录'})
uni.navigateTo({
url: '/pages/login/login'
})
} else {
toast({title:'删除数据成功'})
this.cartlist.splice(index, 1) // 删除当前的数据
// 如果点击删除 删完之后要显示没有数据了
this.cartlist.length === 0 ? this.flag = true : this.flag = false
}
})
}
}
}