微信小程序购物车代码

// pages/goods/goods.js
Page({
data: {
goods: [
{
"name": "热销榜",
"type": -1,
"foods": [
{
"name": "皮蛋瘦肉粥",
"price": 10,
"oldPrice": "",
"description": "咸粥",
"sellCount": 229,
"Count": 0,
"rating": 100,
"info": "一碗皮蛋瘦肉粥，总是我到粥店心满意足",
"ratings": [
{
"username": "3******c",
"rateTime": 1469281964000,
"rateType": 0,
"text": "很喜欢的粥",
"avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
}

],
"icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
}

],
"icon": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
"image": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"
}

]
}
],
toView: '0',
scrollTop: 100,
foodCounts: 0,
totalPrice: 0,// 总价格
totalCount: 0, // 总商品数
carArray: [],
minPrice: 20,//起送價格
payDesc: '',
deliveryPrice: 4,//配送費
fold: true,
selectFoods: [{ price: 20, count: 2 }],
cartShow: 'none'
},
// selectFoods: function (event) {
// var food = event.currentTarget.dataset.food;
// console.log(food);
// console.log(this.data.goods)
// let foods = [];
// this.data.goods.forEach((good) => {
// good.foods.forEach((food) => {
// // console.log(food)
// if (food.sellCount) {
// foods.push(food);
// console.log(foods);
// }
// })
// })
// },
selectMenu: function (e) {
var index = e.currentTarget.dataset.itemIndex;
this.setData({
toView: 'order' + index.toString()
})
console.log(this.data.toView);
},
//移除商品
decreaseCart: function (e) {
var index = e.currentTarget.dataset.itemIndex;
var parentIndex = e.currentTarget.dataset.parentindex;
this.data.goods.forEach((good) => {
good.foods.forEach((food) => {
var num = this.data.goods[parentIndex].foods[index].Count;
var mark = 'a' + index + 'b' + parentIndex
if (food.Count > 0) {
this.data.goods[parentIndex].foods[index].Count--
var price = this.data.goods[parentIndex].foods[index].price;
var obj = { price: price, num: num, mark: mark, name: name, index: index, parentIndex: parentIndex };
var carArray1 = this.data.carArray.filter(item => item.mark != mark);
carArray1.push(obj);
console.log(carArray1);
this.setData({
carArray: carArray1,
goods: this.data.goods
})
this.calTotalPrice()
this.setData({
payDesc: this.payDesc()
})
}
if (num > 0) {
var carArray1 = this.data.carArray.filter(item => item.num > 0)
console.log(carArray1)
this.setData({
carArray: carArray1,
})
}
})
})
},
decreaseShopCart: function (e) {
this.decreaseCart(e);
},
//添加到购物车
addCart(e) {
var index = e.currentTarget.dataset.itemIndex;
var parentIndex = e.currentTarget.dataset.parentindex;
this.data.goods[parentIndex].foods[index].Count++;
var mark = 'a' + index + 'b' + parentIndex
var price = this.data.goods[parentIndex].foods[index].price;
var num = this.data.goods[parentIndex].foods[index].Count;
var name = this.data.goods[parentIndex].foods[index].name;
var obj = { price: price, num: num, mark: mark, name: name, index: index, parentIndex: parentIndex };
var carArray1 = this.data.carArray.filter(item => item.mark != mark)
carArray1.push(obj)
console.log(carArray1);
this.setData({
carArray: carArray1,
goods: this.data.goods
})
this.calTotalPrice();
this.setData({
payDesc: this.payDesc()
})
},
addShopCart: function (e) {
this.addCart(e);
},
//计算总价
calTotalPrice: function () {
var carArray = this.data.carArray;
var totalPrice = 0;
var totalCount = 0;
for (var i = 0; i < carArray.length; i++) {
totalPrice += carArray[i].price * carArray[i].num;
totalCount += carArray[i].num
}
this.setData({
totalPrice: totalPrice,
totalCount: totalCount,
//payDesc: this.payDesc()
});
},
//差几元起送
payDesc() {
if (this.data.totalPrice === 0) {
return `￥${this.data.minPrice}元起送`;
} else if (this.data.totalPrice < this.data.minPrice) {
let diff = this.data.minPrice - this.data.totalPrice;
return '还差' + diff + '元起送';
} else {
return '去结算';
}
},
//結算
pay() {
if (this.data.totalPrice < this.data.minPrice) {
return;
}
// window.alert('支付' + this.totalPrice + '元');
//确认支付逻辑
var resultType = "success";
wx.redirectTo({
url: '../goods/pay/pay?resultType=' + resultType
})
},
//彈起購物車
toggleList: function () {
if (!this.data.totalCount) {
return;
}
this.setData({
fold: !this.data.fold,
})
var fold = this.data.fold
//console.log(this.data.fold);
this.cartShow(fold)
},
cartShow: function (fold) {
console.log(fold);
if (fold == false) {
this.setData({
cartShow: 'block',
})
} else {
this.setData({
cartShow: 'none',
})
}
console.log(this.data.cartShow);
},
listShow() {
if (!this.data.totalCount) {
this.data.fold = true;
return false;
}
let show = !this.fold;
// if (show) {
// this.$nextTick(() => {
// if (!this.scroll) {
// this.scroll = new BScroll(this.$refs.listContent, {
// click: true
// });
// } else {
// this.scroll.refresh();
// }
// });
// }
return show;
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
this.setData({
payDesc: this.payDesc()
});
},
onReady: function () {
// 页面渲染完成
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
}
})

微信小程序购物车代码相关推荐

微信小程序全选，微信小程序checkbox，微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
微信小程序购物车功能
微信小程序购物车效果购物车是一个比较简单的小功能~ 购物车功能主要运用了微信小程序的缓存机制,在商品页面将需要添加的数据同步传入缓存中,然后在购物页面通过同步方法拿到对应的数据,最后在页面上进行渲染 ...
微信小程序购物车请求服务器数据,微信小程序购物车案例
最近呢,我看到有人在问微信小程序的购物车怎么写,我呢就在这里写一写: 购物车主要的就是全选的判断.勾选单个物品判断是否全选.计算总价效果Gif图: 直接简单粗暴的上代码: wxml代码: 全选 {{ ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
“完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
"完美"解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来. 参考文章: (1)"完美"解决微信小程序购物车抛物动画,在连续点击时出现计 ...
通过调试微信小程序示例代码解析flex布局参数功能(一)
通过调试微信小程序示例代码解析flex布局参数功能官方示例小程序源代码下载地址:https://github.com/wechat-miniprogram/miniprogram-demo 通过调试 ...
原生微信小程序购物车
原生微信小程序购物车!! 效果: html: <view style="background-color: #eeeeee;height: 100vh;"><vi ...
写一个微信小程序的代码
微信小程序是使用小程序框架开发的,主要使用 WXML 和 WXSS 两种语言构建用户界面,使用 JavaScript 来编写逻辑. 以下是一个简单的微信小程序示例代码: <!-- index.w ...
微信小程序开源代码汇总分享【转载】
https://github.com/opendigg/awesome-github-wechat-weapp awesome-github-wechat-weapp 是由OpenDigg整理并维护的 ...
微信小程序购物车弹出层
https://www.jianshu.com/p/a0c2c8712dab 微信小程序购物车数量加减功能 wxml:  <button bin ...

微信小程序购物车代码