概念 : 提交订单实际上就是把填好的数据去放到一个已经创建好的数组中存起来。
步骤解读 :
1. 写一个提交订单方法:submitOrderHandel
首先 : 判断发票,如果选的是公司,是否填写了公司名称,如果没有,就return。
如果正常填写了,就存起来选中的这条(let recevieInfo = this.receiveInfo[this.receiveIndex]):
1.如果是个人,将发票抬头填写为个人。
2.建立数组,将:商品内容,商品总额,运费,发票抬头,订单日期,收货地址,是否付款都存储起来。
3.将这个填充好的数组信息提交到vuex中。
this.$store.commit('submitOrder',data)
一个问题 : 提交过来的数据要不要使用push方法放到vuex中定义好的数组中去?
提交的时候肯定是最新的订单在最前面,所以应该用unshift。
4.需要将已经提交了的商品从购物车中删除。
===组件中
// 提交订单
submitOrderHandle(){
// 如果是公司,没有填写公司名称,就return
if(!this.invoice.personal && !this.invoice.name){
return
}
//否则就是填写了,此时数据已经填充到了vuex的默认地址中
//选中vuex中默认地址的第this.receiveIndex项
let recevieInfo = this.receiveInfo[this.receiveIndex]
// 如果选中的是个人
if(this.invoice.personal){
this.invoice.name = '个人'
}
//
let iDate = new Date()
let month = iDate.getMonth() //月
let day = iDate.getDate() //日
// 月份是个位数
if(month >=1 && month<=9){
month = '0' + month
}
let date = {
orderId : iDate.getTime(),
//商品内容
goodsData : this.checkedGoods,
// 商品总额
price : this.checkedPrice,
//运费
freight : this.freight,
//发票抬头
invoiceName : this.invoice.name,
//订单日期:年月日
iDate : iDate.getFullYear() + '-' + month + '-' + day,
// 收货地址
receiveInfo : recevieInfo,
//是否付款,默认没付款
isPay : false
}
// 将data提交到vuex中
this.$store.commit('submitOrder',data)
}
======vuex
// 接收提交的订单数据
submitOrder (state,data) {
//orderData是在vuex的state中新建的一个数组变量,存储传递过来的订单数据
state.orderData.unshift(data)
// 将提交了的商品从购物车中删除
let i = state.carPanelData.length
while (i--) {
// 如果循环到的当前数据是被选中的
if (state.carPanelData[i].checked) {
state.splice(i,1) // 删除第i个,删除一个
}
}
}