小程序购物车的实现
wxml:
<block wx:for="{{list}}" wx:key="index">
<view data-index='{{index}}' class="list {{item.active?'touch-move':''}}" bindtap="demo" bindtouchstart="touchStart" bindtouchmove="touchMove" >
<view class="item">
<view class="circle">
<icon bindtap="selectedList" data-index="{{index}}" wx:if="{{item.isSeleted}}" type="success" color="#43bf92">icon>
<icon bindtap="selectedList" data-index="{{index}}" wx:else type="circle" color="#999">icon>
view>
<view class="img">
<image src="{{item.pic}}">image>
view>
<view class="content">
<view class="title">{{item.name}}view>
<view class="desc">{{item.info}}view>
<view class="bottom">
<text class="money">￥{{item.price}}text>
<view class="edit">
<text class="reduce" bindtap="reduce" data-index="{{index}}">-text>
<text class="num">{{item.num}}text>
<text class="add" bindtap="add" data-index="{{index}}">+text>
view>
view>
view>
view>
<view class="delete" bindtap="delete" data-index="{{index}}">删除view>
view>
block>
<view class="gao">view>
<view class="myCart-bottom">
<view class="selectedAll">
<icon bindtap="SelectedAll" data-index='{{index}}' wx:if="{{isSelectedAll}}" type="success" color="#43f92">icon>
<icon bindtap="SelectedAll" data-index='{{index}}' wx:else type="circle" color="#999">icon>
<text wx:if="{{!isSelectedAll}}">全选text>
<text wx:if="{{isSelectedAll}}">全不选text>
view>
<view class="heji">合计：{{totalPrice}}view>
<view class="jiesuan {{num>0?'activeAll':''}}" bindtap="jiesuan">结算:{{totalPrice}}view>
view>
css:
/* pages/myCart/myCart.wxss */
page{
background: #f5f5f5;
}
.list{
background:#fff;
display: flex;
width: 100%;
margin-top: 20rpx;
height: 100px;
justify-content: space-between;
overflow: hidden;
}
/* 左侧的内容容器布局 */
.item{
width: 100%;
margin-left: -90px;
transform: translateX(90px);
transition: all 0.4s;
display: flex;
height: 180rpx;
}
.delete{
width: 90px;
background: red;
color: #fff;
text-align: center;
/* 动画 */
transition: all 0.4s;
transform: translateX(90px);
display: flex;
align-items: center;
justify-content: center;
}
/* 动画 */
.touch-move .item,.touch-move .delete{
transform: translateX(0);
}
.circle{
display: flex;
align-items: center;
justify-content: center;
padding: 0 10rpx;
}
/* 图片 */
.img image{
width: 180rpx;
height: 180rpx;
}
.img{
padding-right: 20rpx;
}
.title{
margin-bottom: 10rpx;
}
.desc{
color: #666;
font-size: 28rpx;
line-height: 36rpx;
/* 省略 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.content{
position: relative;
flex: 1;
}
.bottom{
position: absolute;
bottom: 0;
left: 0;
font-size: 26rpx;
display: flex;
}
.money{
color: red;
margin-right: 40rpx;
}
.edit{
margin-top: -6px;
}
.num{
padding-right: 10rpx;
padding-left: 10rpx;
}
.reduce{
border:1px solid #999;
padding:4rpx 10rpx ;
}
.add{
background: #333;
color: #fff;
padding: 4rpx 10rpx;
}
.selectedAll icon{
width: 23px;
height: 23px;
margin-right: 6rpx;
}
.heji{
padding-right: 20rpx;
font-size: 26rpx;
}
.heji text{
color: #43bf92;
}
.jiesuan{
background: #999;
color: #fff;
padding-right: 10rpx;
padding-left: 10rpx;
}
.activeAll{
background: #43bf92;
}
.myCart-bottom{
display: flex;
align-items: center;
margin-top: 10px;
}
.myCart-bottom icon{
vertical-align: middle;
}
.heji{
margin-left: 25%;
}
// pages/myCart/myCart.js
Page({
/**
-
页面的初始数据
/
data: {
active:false,
isSeleted:false,//当前的选择按钮-默认补选中
isSelectedAll:false,
startX:’’,
list:[],
num:0,
toalPrice:‘0.00’,
isShow:false
},
// demo:function(){
// this.setData({
// active:!this.data.active
// })
// },
touchStart:function(e){
console.log(e.touches[0].clientX);
var startX=e.touches[0].clientX;
this.setData({
startX:startX
})
},
touchMove:function(e){//移动事件
console.log(e)
var index=e.currentTarget.dataset.index;
var startX=this.data.startX;
var list =this.data.list;
var moverX=e.touches[0].clientX;
console.log(“移动坐标”,moverX+"||"+startX)
if(moverX
list[index].active=true;
console.log(“输出看看1”,list[index].active)
}else{
list[index].active=false
console.log(“输出看看2”,list[index].active)
}
//设置list
this.setData({
list:list
})
},
/ -
生命周期函数–监听页面加载
*/
onLoad: function (options) {
//获取数据
//this.getshop();
},
//点击选中元素
selectedList:function(e){
console.log(this.data.isSeleted);
console.log(e)
var index=e.currentTarget.dataset.index;
var list=this.data.list;
var num=this.data.num;//个数
//切换当前的元素选中状态
list[index].isSeleted=!list[index].isSeleted;
//全选-----
num=0;
for(var index in list){
if(list[index].isSeleted){
num++;
}
}//全选 num++
console.log(“购物车数据：”,list);
console.log(“购物车数量：”,num);
console.log(“数据长度”,list.length)
if(num==list.length)
{
this.setData({
isSelectedAll:true
})
}else{
this.setData({
isSelectedAll:false
})
}
this.setData({
list:list,
num:num
})
//获取价格的方法
this.gototalPrice();
},
SelectedAll:function(e){//实现全选功能
var list=this.data.list;
var num=0;
if(!this.data.isSelectedAll){
var num=list.length;
for(var key in list){
console.log(this.data.list);
list[key].isSeleted=true;
}
}else{
var num=0;
for(var key in list){
console.log(this.data.list);
list[key].isSeleted=false;
}
}
this.setData({
list:list,
num:num,
isSelectedAll:!this.data.isSelectedAll
})
//获取价格的方法
this.gototalPrice();
},
gototalPrice:function(){
var list=this.data.list;
var sum=0;
for(var i=0;i
sum+=list[i].price*list[i].num;
}
}
//更改价格
this.setData({
totalPrice:sum.toFixed(2)
})
},
//删除购物车
delete:function(e){
var index=e.currentTarget.dataset.index;
var list=this.data.list;
//执行删除接口
wx.request({
url: 'http://iwenwiki.com:3002/api/cart/delete',
data:{
id:list[index].id,
},
success:res=>{
console.log(res.data);
if(res.data.status==200){
wx.showToast({
title: '删除成功',
icon:'none'
})
//数据消失--
//直接删除本地的数据data里面的list容器 对应的这个数据
list.splice(index,1);
//修改list
this.setData({
list:list
})
}
}
})
},
//获取购物车的数据
getshop:function(){
wx.request({
url: ‘http://iwenwiki.com:3002/api/cart/list’,
success:res=>{
console.log(“购物车数据显示”,res);
if(res.data.status==200){
console.log(“购物车数据显示”,res.data.data.result);
this.setData({
list:res.data.data.result
})
}else{
console.log(“购物车没有数据”)
}
}
})
},
//结算 -------
jiesuan:function(){
//1.先判断是否授权登陆 登陆过有openid /user
//2.直接接口 购买
var user=wx.getStorageSync(‘openid’);//之前登陆存储的字段
if(user){
//直接购买
//跳转完成界面
}else{
//弹窗提示 --先授权 --在登陆
wx.switchTab({
url: '/pages/about/about',
})
//直接购买 跳转页面
wx.request({
method:'POST',
url: 'http://iwenwiki.com:3002/api/buy',
data:{
user:'qq',
id:'123'
},
header:{
'content-type':'application/x-www-form-urlencoded'//post默认值
},
success:res=>{
console.log(res);
if(res.data.status==200){
wx.redirectTo({
url: '/pages/complete/complete?mark='+res.data.msg,
})
}
}
})
}
},
///单击++，修改购物车商品数量-----------------------
add:function(e){
//1.获取当前的操作的元素 2. 获取列表容器list
var list=this.data.list;
var index=e.currentTarget.dataset.index;
//获取当前的元素的目前数量
var num=list[index].num;
//2.点击当前的数量 num++ 提交后台接口
num++
console.log("添加的属性",num);
list[index].num=num;
//3.请求接口
wx.request({
url: 'http://iwenwiki.com:3002/api/cart/update',
data:{
id:list[index].id,
num:num
},
success:res=>{
console.log(res.data);
if(res.data.status==200){
this.setData({
list:list
})
}
}
})
},
//点击-- ，，修改数据数量
reduce:function(e){
//1.获取当前的操作的元素 2. 获取列表容器list
var list=this.data.list;
var index=e.currentTarget.dataset.index;
//获取当前的元素的目前数量
var num=list[index].num;
num--;
if(num<1){
wx.showToast({
title: '数量最少为1',
icon:'none'
})
return;
}
//2.点击当前的数量 num-- 提交后台接口
console.log("添加的属性",num);
list[index].num=num;
//3.请求接口
wx.request({
url: 'http://iwenwiki.com:3002/api/cart/update',
data:{
id:list[index].id,
num:num
},
success:res=>{
console.log(res.data);
if(res.data.status==200){
this.setData({
list:list
})
}
}
})
},
//获取结算价格
/**
* 生命周期 监听页面初次渲染完成
*/
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getshop();
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
实现效果：
