小程序购物车的实现

深藏阁楼爱情的钟 2022-10-27 13:48 156阅读 0赞

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<startX)\{//左滑  
    console.log(‘move是否’,e.touches\[0\]);  
    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<list.length;i++)\{  
    if(list\[i\].isSeleted)\{  
    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 () { 
    
      }
    })

实现效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221024/003530cd195043b2a3c06b8244ce146f.png