多商家购物车(自用) - 更新日志
1.0.2(2020-12-02)
调整目录结构
1.0.1(2020-12-02)
第一次更新
1.0.0(2020-12-02)
组件开篇
多商家购物车组件,包含购物车常规操作,以及h5,app,小程序统一提示框,适配app、h5、微信小程,其他未测试,理论支持, maskModel组件请从 (https://ext.dcloud.net.cn/plugin?id=3500) 下载
使用方法
<template>
<view class="container">
<car-list ref="mycar" :carList="carList" @allSelBtn="allSelBtn" @selShop="selShop" @selGoods="selGoods" @jsbtn="jsbtn" @delbtn="delbtn" @changeNum="changeNum"></car-list>
</view>
</template>
<script>
import carList from '../../components/car-list/car-list.vue'
export default {
components:{
carList
},
data() {
return {
maskTitle:'',
carList:[
{
shopId: 1,
title: "天猫超市",
total: 2,
goodsAmount: 6051,
selected:true,
glist:[
{
id: 236,
gid: 47,
name: "毛巾(厚)",
img: "https://xthotel.palmbly.com/uploads/images/20201020/fb54b8d699c646908fde0af12def5a5b.png",
gsId: 72,
spec_key_name: "尺寸:M 颜色:黑色",
spec: [{name: "尺寸", value: "M"}, {name: "颜色", value: "黑色"}],
price: 19,
number: 1,
stock: 193,
selected:true,
},
{
id: 237,
gid: 45,
name: "盆栽",
img: "https://xthotel.palmbly.com/uploads/images/20201020/741ff4736f32e9bde91b30f04aff86e5.png",
gsId: 65,
spec_key_name: "件装:1件居家必备:枕头",
spec: [{name: "件装", value: "1件"}, {name: "居家必备", value: "枕头"}],
price: 6001,
number: 1,
stock: 77,
selected:true,
}
]
},
{
shopId: 2,
title: "京东超市",
total: 11,
selected:true,
goodsAmount: 6051,
glist:[
{
id: 188,
gid: 31,
name: "橘子",
img: "https://xthotel.palmbly.com/uploads/images/20201020/af19843b3416a2d81455a91aa99f2a1d.jpg",
gsId: 50,
spec_key_name: "件装:2件",
spec: [{name: "件装", value: "2件"}],
price: 3,
number: 10,
stock: 78,
selected:true,
},
{
id: 235,
gid: 35,
name: "积分购买测试",
img: "https://xthotel.palmbly.com/uploads/images/20201020/4dab5e724b06cbdbd5333585f5473c52.png",
gsId: 56,
spec_key_name: "尺寸:M 颜色:黑色",
spec: [{name: "尺寸", value: "M"}, {name: "颜色", value: "黑色"}],
price: 1,
number: 1,
stock: 97,
selected:true,
}
]
}
]
}
},
onLoad() {
},
onShow() {
},
methods: {
confirm:function(){//确定按钮
console.log('您点击了确定按钮');
},
cancel:function(){//取消按钮
console.log('您点击了取消按钮');
},
selGoods:function(carList){
var that = this;
that.carList = carList;
},
selShop:function(carList){
var that = this;
that.carList = carList;
},
allSelBtn:function(carList){
var that = this;
that.carList = carList;
},
jsbtn:function(ids){//结算按钮
var that = this;
console.log(ids);
var that = this;
/*
跳转结算页面
*/
},
delbtn:function(ids,list){//删除按钮
var that = this;
/*
请求接口数据
*/
for (let i = 0; i < list.length; i++) {
for (let k = 0; k < list[i].glist.length; k++) {
if (list[i].glist[k].selected == true) {
list[i].glist.splice(k,1);
k--
}
}
if(list[i].glist.length==0){//若当前店铺商品删除完,删除当前店铺
list.splice(i,1);
i--
}
}
that.carList = list;
that.$refs.mycar.getAllMount(list);//计算价格展示
},
changeNum:function(total,carList,shopIndex,gIndex,number,id,type){
var that = this;
/*
请求接口数据
*/
carList[shopIndex].glist[gIndex].number = number;
if (type == 0) {
carList[shopIndex].total = total - 1;
} else {
carList[shopIndex].total = total + 1;
}
that.carList = carList;
that.$refs.mycar.getAllMount(carList);//计算价格展示
}
},
onReachBottom() {
},
onShareAppMessage() {
}
}
</script>
<style scoped>
car-list{
width: 100%;
}
</style>