微信小程序电商平台购物车交互功能
微信小程序电商平台购物车交互功能。包括选择，改变数量，删除
cart.wxml页面
<block wx:for="{{items}}" wx:for-index="bindex">
<view class='b_head'>
<image class='b_select' src="{{item.isSelect ? '/images/common/selected.png' : '/images/common/no_select.png'}}" data-bindex="{{bindex}}" bindtap='b_select'>image>
<view class='ruzhu' hidden="{{item.supplier_id>0 ? false :true}}">
<text class='b_flag'>入驻商家text>
<text class="bname">{{item.supplier_name}}text>
view>
<view class='ziying' hidden="{{item.supplier_id == 0 ? false :true}}">-平台自营商品-view>
view>
<block wx:for="{{item.goods_list}}">
<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-bindex="{{bindex}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove">
<view class="content">
<image class='select' src="{{item.isSelect ? '/images/common/selected.png' : '/images/common/no_select.png'}}" bindtap='single_select' data-bindex="{{bindex}}" data-index="{{index}}">image>
<image class='thumb' src="{{item.goods_thumb}}">image>
<view class='name'>{{item.goods_name}}view>
<view class="attr">{{item.goods_attr}}view>
<view class='price'>￥{{item.goods_price}}view>
<view class="buy_num">
<view class="stepper">
<text class="{{minusStatus}}" data-bindex="{{bindex}}" data-index="{{index}}" data-rec_id="{{item.rec_id}}" bindtap="bindMinus">-text>
<input type="number" bindchange="bindManual" data-bindex="{{bindex}}" data-index="{{index}}" data-rec_id="{{item.rec_id}}" value="{{item.goods_number}}" />
<text class="normal" data-bindex="{{bindex}}" data-index="{{index}}" data-rec_id="{{item.rec_id}}" bindtap="bindPlus">+text>
view>
view>
view>
<view class="del" catchtap="del" data-index="{{index}}" data-bindex="{{bindex}}">删除view>
view>
block>
block>
<view class='bottom'>
<view class='l'>
<text>全选text>
<image class='all' src="{{all_select ? '/images/common/selected.png' : '/images/common/no_select.png'}}" data-bindex="{{bindex}}" bindtap='all_select'>image>
view>
<view class='m'>
<text>合计：text>
<text class='price'>￥{{total_price}}text>
view>
<view class='r'>去结算{{cart_count}}件view>
view>cart.wxss 页面
/*头部 */
.b_head{
width: 750rpx;
height: 70rpx;
line-height: 70rpx;
font-size: 24rpx;
border-bottom: 2rpx #ccc solid;
padding: 0 20rpx;
box-sizing: border-box;
background: #F5F5F5;
}
.b_head .b_select{
width: 34rpx;
height: 34rpx;
float: left;
margin-top:16rpx;
}
.b_head .ziying{
margin-left: 50rpx;
color: #C62127;
}
.b_head .ruzhu .b_flag{
margin-left:10rpx;
color: #C62127;
}
.b_head .ruzhu .bname{
margin-left:20rpx;
}
.touch-item {
font-size: 14px;
display: flex;
justify-content: space-between;
border-bottom:2rpx solid #ccc;
width: 750rpx;
overflow: hidden
}
.content {
width: 750rpx;
padding: 20rpx;
line-height: 44rpx;
margin-right:0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(180rpx);
transform: translateX(180rpx);
margin-left: -180rpx;
box-sizing:border-box;
font-size: 24rpx;
}
.content .select{
width: 34rpx;
height: 34rpx;
float: left;
margin-top:80rpx;
}
.content .thumb{
width: 180rpx;
height: 180rpx;
margin-left:10rpx;
float: left;
}
.content .name{
width: 460rpx;
height: 84rpx;
margin-left: 60rpx;
line-height: 42rpx;
margin-top:0rpx;
overflow: hidden;
padding: 10rpx 20rpx;
box-sizing: border-box;
}
.content .attr{
width: 470rpx;
line-height: 21rpx;
margin-top:10rpx;
padding: 10rpx 20rpx;
margin-left:222rpx;
color:#ccc;
}
.content .price{
width: 200rpx;
height: 22rpx;
line-height: 22rpx;
margin-top:10rpx;
color: #C62127;
float: left;
padding: 10rpx 20rpx;
box-sizing: border-box;
}
.del {
background-color: #C62127;
width: 120rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
-webkit-transform: translateX(180rpx);
transform: translateX(180rpx);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.touch-move-active .content,
.touch-move-active .del {
-webkit-transform: translateX(0);
transform: translateX(0);
}
/*购买 */
.content .buy_num {
margin-top:10rpx;
margin-bottom: 10rpx;
font-size: 24rpx;
float: left;
}
.content .buy_num .font_num{
margin-left: 20rpx;
}
/*主容器*/
.content .buy_num .stepper {
width: 200rpx;
height: 52rpx;
/*给主容器设一个边框*/
border: 2rpx solid #ccc;
border-radius: 3px;
margin-left:40rpx;
margin-top:20rpx;
}
/*加号和减号*/
.content .buy_num .stepper text {
width: 58rpx;
line-height: 52rpx;
text-align: center;
float: left;
}
/*数值*/
.content .buy_num .stepper input {
width: 80rpx;
height: 52rpx;
float: left;
margin: 0 auto;
text-align: center;
font-size: 32rpx;
/*给中间的input设置左右边框即可*/
border-left: 2rpx solid #ccc;
border-right: 2rpx solid #ccc;
}
/*普通样式*/
.content .buy_num .stepper .normal{
color: black;
}
/*禁用样式*/
.content .buy_num .stepper .disabled{
color: #ccc;
}
.bottom{
position: fixed;
width:750rpx;
height: 100rpx;
background: #fff;
border: 2rpx #ccc solid;
bottom: 0;
}
.bottom .l{
width: 150rpx;
height: 100rpx;
background:#fff;
float: left;
line-height: 100rpx;
font-size: 28rpx;
display: table-cell;
vertical-align: middle;
padding: 0rpx 10rpx;
box-sizing: border-box;
}
.bottom text{
vertical-align: middle;
}
.bottom .l image{
width: 34rpx;
height: 34rpx;
vertical-align:middle;
margin-left:10rpx;
}
.bottom .m{
width: 360rpx;
height: 100rpx;
background: #fff;
float: left;
font-size: 28rpx;
line-height: 100rpx;
text-align: right;
padding: 0 40rpx;
box-sizing: border-box;
}
.bottom .m .price{
color: #C62127;
}
.bottom .r{
width: 240rpx;
height: 100rpx;
background: #C62127;
margin-left:510rpx;
color: #fff;
line-height: 100rpx;
text-align: center;
font-size: 30rpx;
}cart.js页面
var app = getApp();
app.globalData.binding = 1;
var common = require('../../utils/common.js');
Page({
data: {
items: [{ "supplier_id": "5", "supplier_name": "\u79c0\u8863\u574a", "supplier_phone": "13125374143", "is_self": false, "isSelect": true, "goods_list": [{ "goods_id": "34", "rec_id": "294019", "goods_name": "\u5c0f\u897f\u88c5\u5973\u5916\u5957\u77ed\u6b3e\u957f\u88962016\u6625\u79cb\u4fee\u8eab\u663e\u7626\u97e9\u7248\u5f00\u886b\u4f11\u95f2\u897f\u670d\u4e0a\u8863\u767e\u642d", "goods_price": "176.00", "goods_number": "7", "goods_thumb": "http:\/\/fq89.cn\/images\/201608\/thumb_img\/_thumb_P_1470023358722.jpg", "goods_attr": "\u5c3a\u7801:l[1] \u989c\u8272:\u6d45\u8c46\u7eff[6] ", "isTouchMove": false, "isSelect": true }, { "goods_id": "34", "rec_id": "294007", "goods_name": "\u5c0f\u897f\u88c5\u5973\u5916\u5957\u77ed\u6b3e\u957f\u88962016\u6625\u79cb\u4fee\u8eab\u663e\u7626\u97e9\u7248\u5f00\u886b\u4f11\u95f2\u897f\u670d\u4e0a\u8863\u767e\u642d", "goods_price": "176.00", "goods_number": "1", "goods_thumb": "http:\/\/fq89.cn\/images\/201608\/thumb_img\/_thumb_P_1470023358722.jpg", "goods_attr": "\u5c3a\u7801:xl[4] \u989c\u8272:\u6df1\u7070\u8272[7] ", "isTouchMove": false, "isSelect": true }] }, { "supplier_id": "181", "supplier_name": "ZF\u98df\u54c1\u5c0f\u767e\u8d27", "supplier_phone": "15359855075", "is_self": false, "isSelect": true, "goods_list": [{ "goods_id": "14336", "rec_id": "294008", "goods_name": "\u65e0\u6dfb\u52a0 \u8d35\u5dde\u7279\u4ea7\u9999\u8fa3\u8c46\u74e3\u9171 \u7092\u83dc\u70f9\u996a\u706b\u9505\u8c03\u5473 \u80dc\u90eb\u53bf\u8c46\u74e3\u9171 500g", "goods_price": "40.00", "goods_number": "1", "goods_thumb": "http:\/\/fq89.cn\/images\/201701\/thumb_img\/_thumb_P_1485827377913.jpg", "goods_attr": "\u5c5e\u6027:\u8c46\u74e3\u9171[] ", "isTouchMove": false, "isSelect": true }] }],
startX: 0, //开始坐标
startY: 0,
all_select:true,//全选
cart_count:9,//总数量
total_price: 1448.00,//总金额
},
onLoad: function () {
new app.WeToast();
//未绑定跳转到绑定 暂时注释
// if (app.globalData.binding == 0 || app.globalData.token ==''){
// wx.redirectTo({
// url: '../binding/binding',
// })
// }
//暂时注释
// this.get_cart();
},
//手指触摸动作开始 记录起点X坐标
touchstart: function (e) {
var curBindex = e.currentTarget.dataset.bindex;//当前组索引
var curIndex = e.currentTarget.dataset.index;//当前商品索引
var items = this.data.items;
//遍历修改滑动状态
for(var i=0; ifor(var j=0; jif (items[i].goods_list[j].isTouchMove){
items[i].goods_list[j].isTouchMove = false;
}
}
}
//更新坐标与数据
this.setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY,
items:items
})
},
//滑动事件处理
touchmove: function (e) {
var that = this,
curIndex = e.currentTarget.dataset.index,//当前索引
curBindex = e.currentTarget.dataset.bindex,//当前组索引
startX = that.data.startX,//开始X坐标
startY = that.data.startY,//开始Y坐标
touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
//获取滑动角度
angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
var items = that.data.items;
var len = items[curBindex].goods_list.length;
for (var i = 0; i < len; i++) {
items[curBindex].goods_list[i].isTouchMove = false;
if (Math.abs(angle) > 30) return;//滑动超过30度角return
if (i == curIndex) {
if (touchMoveX > startX){
//右滑
items[curBindex].goods_list[i].isTouchMove =false;
}else{ //左滑
items[curBindex].goods_list[i].isTouchMove = true
}
}
}
//更新数据
that.setData({
items:items
})
},
/**
* 计算滑动角度
* @param {Object} start 起点坐标
* @param {Object} end 终点坐标
*/
angle: function (start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
//返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},
//删除事件
del: function (e) {
var curBindex = e.currentTarget.dataset.bindex;
var curIndex = e.currentTarget.dataset.index;
var items = this.data.items;
items[curBindex].goods_list.splice(curIndex,1);//弹出指定位置元素
this.setData({
items:items
});
this.clear_item();
},
/* 点击减号 */
bindMinus: function (e) {
var items = this.data.items,
curBindex = e.currentTarget.dataset.bindex,
curIndex = e.currentTarget.dataset.index;
// 如果大于1时，才可以减
if (items[curBindex].goods_list[curIndex].goods_number > 1) {
items[curBindex].goods_list[curIndex].goods_number--;
}
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = items[curBindex].goods_list[curIndex].goods_number <= 1 ? 'disabled' : 'normal';
// 将数值与状态写回
this.setData({
items: items,
});
this.re_count();//重新计算
},
bindPlus: function (e) {
var items = this.data.items,
curBindex = e.currentTarget.dataset.bindex,
curIndex = e.currentTarget.dataset.index;
// 不作过多考虑自增1
items[curBindex].goods_list[curIndex].goods_number++;
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = items[curBindex].goods_list[curIndex].goods_number < 1 ? 'disabled' : 'normal';
// 将数值与状态写回
this.setData({
items: items,
});
this.re_count();//重新计算
},
/* 输入框事件 */
bindManual: function (e) {
var items = this.data.items,
curBindex = e.currentTarget.dataset.bindex,
curIndex = e.currentTarget.dataset.index;
var num = e.detail.value;
if (isNaN(num)) {
num = 1;
}
items[curBindex].goods_list[curIndex].goods_number = num;
// 将数值与状态写回
this.setData({
items: items,
});
this.re_count();//重新计算
},
//把该组整体取消选中
b_select:function(e){
var curBindex = e.currentTarget.dataset.bindex;
var items = this.data.items;
var len = items[curBindex].goods_list.length;
var selectStatus = items[curBindex].isSelect;
if(selectStatus === false){
items[curBindex].isSelect = true;
}else{
items[curBindex].isSelect =false;
}
for(var i=0; iif(selectStatus === false){
items[curBindex].goods_list[i].isSelect = true;
}else{
items[curBindex].goods_list[i].isSelect = false;
}
}
//全选按钮
var all_select;
var ilen = items.length;//店数
var num = 0;
for(var j=0;jif(items[j].isSelect === true){
num++;
}
}
if(num == ilen){
all_select = true;
}else{
all_select = false;
}
this.setData({
all_select:all_select,
items:items
});
//重新计算
this.re_count();
},
//单选
single_select:function(e){
var items = this.data.items;
var curBindex = e.currentTarget.dataset.bindex;
var curIndex = e.currentTarget.dataset.index;
//改变当前按钮
if(items[curBindex].goods_list[curIndex].isSelect){
items[curBindex].goods_list[curIndex].isSelect = false;
}else{
items[curBindex].goods_list[curIndex].isSelect = true;
}
console.log(items[curBindex]);
//先改变当前组的状态
var ilen = items.length;
var len = items[curBindex].goods_list.length;
var inum=0,num=0,all_select;
for(var j=0;jif (items[curBindex].goods_list[j].isSelect === true){
num++;
}
}
if(num == len){
items[curBindex].isSelect = true;
}else{
items[curBindex].isSelect = false;
}
//改变全选状态
for(var i=0; iif(items[i].isSelect === true){
inum++;
}
}
if(inum == ilen){
all_select = true;
}else{
all_select = false;
}
this.setData({
items:items,
all_select:all_select,
});
//重新计算
this.re_count();
},
//全选
all_select:function(){
var all_select = this.data.all_select;
var items = this.data.items;
if(all_select === false){
//全选
for (var i = 0; i < items.length; i++) {
items[i].isSelect = true;
for (var j = 0; j < items[i].goods_list.length; j++) {
items[i].goods_list[j].isSelect = true;
}
}
all_select = true;
}else{
//取消全选
for (var i = 0; i < items.length; i++) {
items[i].isSelect = false;
for (var j = 0; j < items[i].goods_list.length; j++) {
items[i].goods_list[j].isSelect = false;
}
}
all_select = false;
}
this.setData({
items:items,
all_select:all_select
});
//重新计算
this.re_count();
},
get_cart:function(){
wx.showLoading({
title: '加载中',
})
var that = this;
wx.request({
url: app.globalData.host +'/index.php/app/cart/get_cart_list',
data: {token: app.globalData.token},
method:'post',
header: { "Content-Type": "application/x-www-form-urlencoded" },
success:function(res){
if(res.data.code === 2000){
console.log(res);
that.setData({
items: res.data.data.cart_list,
total_price: res.data.data.total_price,
cart_count: res.data.data.cart_count
});
}else if(res.data.code == 8003){
that.relogin();
}else{
that.wetoast.toast({
title:res.data.msg,
duration:1000
});
}
wx.hideLoading();
},
fail:function(){
that.wetoast.toast({
title: '网络错误',
duration: 1000
});
}
})
},
//重新登录
relogin: function () {
var that = this;
wx.login({
success: function (res) {
wx.request({
url: app.globalData.host + '/index.php/app/user/login',
data: { code: res.code },
header: { "Content-Type": "application/x-www-form-urlencoded" },
method: 'post',
success: function (res) {
if (res.data.code == 2000) {
app.globalData.token = res.data.token;
app.globalData.binding = res.data.binding;
that.get_cart();
} else {
that.wetoast.toast({
title: '登录过期请退出重新进入',
duration: 1000,
});
}
},
fail: function (res) {
that.wetoast.toast({
title: '通讯失败',
duration: 1000,
});
},
})
}
})
},
clear_item:function(){
var items = this.data.items;
for(var i=0;iif(items[i].goods_list.length==0){
items.splice(i,1);
}
}
this.setData({
items:items
});
this.re_count();
},
//重新计算
re_count:function(){
var items = this.data.items,
total_price=0.00,
cart_count =0;
for(var i=0;ifor(var j=0;jif (items[i].goods_list[j].isSelect===true){
cart_count += parseInt(items[i].goods_list[j].goods_number);
total_price += parseInt(items[i].goods_list[j].goods_number) * parseFloat(items[i].goods_list[j].goods_price);
}
}
}
this.setData({
total_price:common.number_format(total_price,2,'.',','),
cart_count:cart_count,
});
}
})