vue+element踩坑记-购物车的操作
vue+element踩坑记-购物车的操作
何处锦绣不灰堆
发布于 2020-05-29 14:49:46
发布于 2020-05-29 14:49:46
第一种：效果预览
图片预览
预览
移除功能
思路分析
这个其实不麻烦，首先我们被选中的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:这个逻辑的处理我不是我写的，拿来做参考是可以的，但是不难理解的，希望可以记录一下。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-07-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读