vue+element-购物车的操作

我心飞翔 分类:javascript
第一种:效果预览

图片预览
预览
移除功能

思路分析

这个其实不麻烦,首先我们被选中的table是属于多选的,也就是说element是提供了一个被选中的行的数组函数的,那么这样我们可以拿到用户是选择了哪些行的,这是第一步,第二步是我们怎么保证每一页选择了以后别的页被选中的选项还在,这个我之前的博客是更新了,这里不说怎么实现的了,也是一个字段就可以了,第三步就是我们将用户选择的数据新加到购物车的那个table里面,第四步就是怎么在上面操作例如删除的时候,对应的原来用户选择的页消除了,这个是麻烦的一个地方。

代码实现
	   /**
* @add_goods 加入结账栏   这个就是加入结账栏的按钮
*/
add_goods(){
let that = this;
if(that.tableData_check_out_transit.length === 0){
that.hintInfo('warning','您还未选择任何账单!');
}else{
that.hintInfo('success','添加成功!');
//tableData_check_out_transit  这个就是主页上的表格,这个数据是用户选择的数  据,触发的函数是@selection-change ,
//tableData_check_out是购物车里面的table 
that.tableData_check_out = that.tableData_check_out_transit;
//to_check_out 进行移除操作的时候可以直接进行计数
that.to_check_out = that.tableData_check_out.length;
}
},
/**
* @open_goods 打开结账栏  用于计算需要支付的账单
*/
open_goods(){
let that = this;
that.calculate();
},
/**
* @calculate 计算总金额
*/
calculate(){
let that = this;
let count = 0;
that.separate_id = [];
that.tableData_check_out.map((res)=>{
count = count + res.charge_amount;
that.separate_id.push(res.id); //将用户选择的当前行的id拿到,作为参数
console.info(res.charge_amount);
});
that.count_settle = count;
console.info(that.count_settle);
console.info(that.separate_id);
},
/**
* @removeRow 待结账栏移除操作   购物车h5 中table的移除的操作
*/
removeRow(index, row, TableData){
let that = this;
TableData.splice(index, 1);
if(that.to_check_out > 0){
that.to_check_out -- ;
that.hintInfo('success', '移除成功!');
that.calculate();//将数据重新计算  这里是计算结账的价格
that.toggleSelection(row); //移除需要的移除的元素  
}else{
that.hintInfo('warning', '没有数据!');
}
},
<!--结账栏H5-->
<el-dialog
title="待结账栏"
:visible.sync="dialog_settle"
width="40%">
<el-table
:data="tableData_check_out"
height="400px"
size="mini"
:cell-style="{textAlign:'center'}"
:header-cell-style="{background:'#303A41',color:'#fff',fontSize:'x-small',textAlign:'center'}"
style="width: 100%">
<el-table-column
prop="account_id"
type="index"
label="序号">
</el-table-column>
<el-table-column
prop="account_id.id"
label="主账id">
</el-table-column>
<el-table-column
prop="code_income_type_id.name"
label="入账代码">
</el-table-column>
<el-table-column
prop="biz_date"
label="营业日期">
</el-table-column>
<el-table-column
prop="charge_amount"
label="消费金额">
</el-table-column>
<el-table-column
prop="pay_status"
label="支付状态">
<template slot-scope="scope">
<span v-if="scope.row.pay_status === 0">未支付</span>
<span v-else-if="scope.row.pay_status === 1">已支付</span>
<span v-else-if="scope.row.pay_status === 2">异常</span>
<span v-else>无数据</span>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<template slot-scope="scope">
<el-button
@click.native.prevent="removeRow(scope.$index, scope.row,tableData_check_out)"
type="text"
size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>

PS:这里将H5也贴出来了,目的是为了更好的理解函数作用。

第二种:效果预览

在这里插入图片描述在这里插入图片描述

思路分析

这种购物车和上面的不一样,相对来说会难一点,难点在怎么在点击相同的物品的时候直接新加一个,而不是新加一列,那么我们需要做的就是,用户点击了某一列的时候,我们拿到这个数据的id,和上面的表格进行比对,判断是不是已经存在了,如果存在,那么直接进行数量加一,不新加一列。反之加一列

代码分析
//merchandise_name 函数是点击切换option的时候触发的函数
merchandise_name(value){
let that =this;
console.log(value);
that.$axios({
url:that.api.api_9530_9503+"/v1/stock/product_product/get/"+value,
method: "get",
}).then(res=>{
if(res.data.message==="success"){
console.log(res);
res.data.data.account_number=1;
res.data.data.money=res.data.data.list_price;//计算价格
let ayy = {};
for(let i of that.account_arr){
ayy[i.id] = i.name;
}
if(value in ayy){
//nothing...
}
else{
that.account_arr.push(res.data.data);
that.merchandise_list_data = that.account_arr;
}
console.log("step");
}
})
.catch(error => {
console.error(error)
});
//处理的是如果存在的话直接进行数字加一
for(let i =0;i< that.account_arr.length;i++){
if(value === that.account_arr[i].id){
console.log("重复");
console.log(that.account_arr[i].account_number);
that.account_arr[i].account_number+=1;
}else {
//nothing....
}
}
that.merchandise_list_data= that.account_arr;
},

PS:这个逻辑的处理我不是我写的,拿来做参考是可以的,但是不难理解的,希望可以记录一下。
喜欢的可以关注一下,鄙人的文采不好,所以写的能看懂就行,不明白的可以直接说问题,我看到会回复的。

回复

我来回复
  • 暂无回复内容