• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

[转]微信小程序之购物车 —— 微信小程序实战商城系列（5） - freeliver54 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

[转]微信小程序之购物车 —— 微信小程序实战商城系列（5）

本文转自：http://blog.csdn.net/michael_ouyang/article/details/70755892

续上一篇的文章：微信小程序之商品属性分类  —— 微信小程序实战商城系列（4）

 

自从认识某人后，我收获了两个成功。登录成功、付款成功，而且还拥有了自己的一辆车：

购物车

也发现了自己的不足之处：

余额不足。

为大家介绍的就是购物车

这里演示从商品列表中添加到购物车

下面先做商品列表页。如下图：

 

 

布局分析：

首先一个list的主盒子，接着是item盒子，这是必须的。       然后把item分成左侧的图片部分，和右侧的说明部分（item盒子使用横向弹性盒）             右侧的说明部分又分上下2部分（右侧说明部分盒子使用纵向弹性盒）                   下面价钱购物车部分（下面价钱购物车部分也使用横向弹性盒，中间使用justify-content: space-between;填充空白）

 

 

index.wxml：

[html] view plain copy print?
  1. <!--主盒子-->  
  2. <view class="container">  
  3.   <!--head-->  
  4.   <view class="tit">  
  5.     <view class="title_val">商品列表</view>  
  6.     <view class="more">更多</view>  
  7.   </view>  
  8.   <!--list-->  
  9.   <view class="goodslist">  
  10.     <!--item-->  
  11.     <block wx:for="{{goodslist}}">  
  12.       <view class="goods">  
  13.         <!--左侧图片盒子-->  
  14.         <view>  
  15.           <image src="{{item.imgUrl}}" class="good-img" />  
  16.         </view>  
  17.         <!--右侧说明部分-->  
  18.         <view class="good-cont">  
  19.           <!--上--文字说明-->  
  20.           <view class="goods-navigator">  
  21.             <text class="good-name">{{item.name}}</text>  
  22.           </view>  
  23.           <!--下--价格部分-->  
  24.           <view class="good-price">  
  25.             <text>￥{{item.price}}</text>  
  26.             <image id="{{item.id}}" class="cart" src="/images/new_73.jpg" bindtap="addcart" />  
  27.           </view>  
  28.         </view>  
  29.       </view>  
  30.     </block>  
  31.   </view>  
  32. </view>  
<!--主盒子-->
<view class="container">
  <!--head-->
  <view class="tit">
    <view class="title_val">商品列表</view>
    <view class="more">更多</view>
  </view>
  <!--list-->
  <view class="goodslist">
    <!--item-->
    <block wx:for="{{goodslist}}">
      <view class="goods">
        <!--左侧图片盒子-->
        <view>
          <image src="{{item.imgUrl}}" class="good-img" />
        </view>
        <!--右侧说明部分-->
        <view class="good-cont">
          <!--上--文字说明-->
          <view class="goods-navigator">
            <text class="good-name">{{item.name}}</text>
          </view>
          <!--下--价格部分-->
          <view class="good-price">
            <text>￥{{item.price}}</text>
            <image id="{{item.id}}" class="cart" src="/images/new_73.jpg" bindtap="addcart" />
          </view>
        </view>
      </view>
    </block>
  </view>
</view>

index.wxss：

[css] view plain copy print?
  1. /**index.wxss**/  
  2. page{  
  3.     height: 100%;  
  4. }  
  5. .container{  
  6.     background: #f5f5f5;  
  7. }  
  8.   
  9. .tit{  
  10.     display: flex;  
  11.     flex-direction: row;  
  12.     justify-content: space-between;  
  13.     height: 30px;  
  14.     position: relative;  
  15. }  
  16. .tit::before{  
  17.     content:\'\';  
  18.     background: #ffcc00;  
  19.     width:5px;  
  20.     height: 100%;  
  21.     position: absolute;  
  22.     left: 0;  
  23.     top: 0;  
  24. }  
  25.   
  26. .title_val{  
  27.     padding: 0 15px;  
  28.     font-size: 14px;  
  29.     color: #555;  
  30.     line-height: 30px;  
  31. }  
  32. .more{  
  33.     font-size: 12px;  
  34.     line-height: 30px;  
  35.     color: #999;  
  36.     padding: 0 5px 0 0 ;  
  37. }  
  38. .goodslist{  
  39.     background: #fff;  
  40.     display: flex;  
  41.     flex-direction: column;  
  42. }  
  43. .goods{  
  44.     display: flex;  
  45.     flex-direction: row;  
  46.     border-bottom: 1px solid #ddd;  
  47. }  
  48. .good-img{  
  49.     padding: 5px;  
  50.     width: 80px;  
  51.     height: 80px;  
  52. }  
  53. .good-cont{  
  54.     display: flex;  
  55.     flex: 1;  
  56.     flex-direction: column;  
  57.     font-size: 14px;  
  58. }  
  59. .goods-navigator{  
  60.     display: flex;  
  61.     flex: 1;  
  62.     flex-direction: column;  
  63.     justify-content: center;  
  64. }  
  65. .good-name{  
  66.     display: flex;  
  67.     flex: 1;  
  68.     flex-direction: column;  
  69.     color: #555;  
  70.     justify-content: center;  
  71. }  
  72. .good-price{  
  73.     display: flex;  
  74.     flex: 1;  
  75.     flex-direction: row;  
  76.     justify-content: space-between;  
  77.     color:#e4393c;  
  78.     font-weight: 600;  
  79. }  
  80. .cart{  
  81.     width: 40px;  
  82.     height: 40px;  
  83.     padding-right: 10px;  
  84. }  
/**index.wxss**/
page{
    height: 100%;
}
.container{
    background: #f5f5f5;
}

.tit{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 30px;
    position: relative;
}
.tit::before{
    content:\'\';
    background: #ffcc00;
    width:5px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.title_val{
    padding: 0 15px;
    font-size: 14px;
    color: #555;
    line-height: 30px;
}
.more{
    font-size: 12px;
    line-height: 30px;
    color: #999;
    padding: 0 5px 0 0 ;
}
.goodslist{
    background: #fff;
    display: flex;
    flex-direction: column;
}
.goods{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #ddd;
}
.good-img{
    padding: 5px;
    width: 80px;
    height: 80px;
}
.good-cont{
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: 14px;
}
.goods-navigator{
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
}
.good-name{
    display: flex;
    flex: 1;
    flex-direction: column;
    color: #555;
    justify-content: center;
}
.good-price{
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    color:#e4393c;
    font-weight: 600;
}
.cart{
    width: 40px;
    height: 40px;
    padding-right: 10px;
}

 

index.js：

数据部分，一般情况都是访问接口获取数据的，这里并没有使用网络访问，为了简化demo，直接把一组数据放在data对象中。同学们可以根据其数据结构自己编写后台接口

[javascript] view plain copy print?
  1. Page({  
  2.     data: {  
  3.         goodslist: [  
  4.             {  
  5.                 id:"001",  
  6.                 imgUrl:"http://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&fm=23&gp=0.jpg",  
  7.                 name:"女装T恤中长款大码摆裙春夏新款",  
  8.                 price:"65.00"  
  9.             },  
  10.             {  
  11.                 id:"002",  
  12.                 imgUrl:"http://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&fm=23&gp=0.jpg",  
  13.                 name:"火亮春秋季 男青年修身款圆领男士T恤",  
  14.                 price:"68.00"  
  15.             },  
  16.             {  
  17.                 id:"003",  
  18.                 imgUrl:"http://img1.imgtn.bdimg.com/it/u=2305064940,3470659889&fm=23&gp=0.jpg",  
  19.                 name:"新款立体挂脖t恤女短袖大码宽松条纹V领上衣显瘦休闲春夏",  
  20.                 price:"86.00"  
  21.             },  
  22.             {  
  23.                 id:"004",  
  24.                 imgUrl:"http://img4.imgtn.bdimg.com/it/u=3986819380,1610061022&fm=23&gp=0.jpg",  
  25.                 name:"男运动上衣春季上新品 上衣流行装青年",  
  26.                 price:"119.00"  
  27.             },  
  28.             {  
  29.                 id:"005",  
  30.                 imgUrl:"http://img1.imgtn.bdimg.com/it/u=3583238552,3525141111&fm=23&gp=0.jpg",  
  31.                 name:"时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",  
  32.                 price:"69.00"  
  33.             },  
  34.             {  
  35.                 id:"006",  
  36.                 imgUrl:"http://img2.imgtn.bdimg.com/it/u=1167272381,3361826143&fm=23&gp=0.jpg",  
  37.                 name:"新款立体挂脖t恤短袖大码宽松条纹V领上衣显瘦休闲春夏",  
  38.                 price:"86.00"  
  39.             },  
  40.             {  
  41.                 id:"007",  
  42.                 imgUrl:"http://img0.imgtn.bdimg.com/it/u=789486313,2033571593&fm=23&gp=0.jpg",  
  43.                 name:"时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",  
  44.                 price:"119.00"  
  45.             },  
  46.             {  
  47.                 id:"008",  
  48.                 imgUrl:"http://img2.imgtn.bdimg.com/it/u=3314044863,3966877419&fm=23&gp=0.jpg",  
  49.                 name:"男运动上衣春季上新品 上衣流行装青年",  
  50.                 price:"69.00"  
  51.             },  
  52.         ]  
  53.     },  
  54.     // 加入购物车  
  55.     addcart:function(e){  
  56.         this.setData({  
  57.             toastHidden:false  
  58.         });  
  59.         // 遍历列表 与 购物车列表  
  60.         for (var i in this.data.goodslist){  
  61.             // 列表中某一项item的id == 点击事件传递过来的id。则是被点击的项  
  62.             if(this.data.goodslist[i].id == e.target.id){  
  63.                 // 给goodsList数组的当前项添加count元素，值为1，用于记录添加到购物车的数量  
  64.                 this.data.goodslist[i].count = 1;  
  65.                 // 获取购物车的缓存数组（没有数据，则赋予一个空数组）  
  66.                 var arr = wx.getStorageSync(\'cart\') || [];  
  67.                 // 如果购物车有数据  
  68.                 if(arr.length>0){  
  69.                     // 遍历购物车数组  
  70.                     for(var j in arr){  
  71.                         // 判断购物车内的item的id，和事件传递过来的id，是否相等  
  72.                         if(arr[j].id == e.target.id){  
  73.                             // 相等的话，给count+1（即再次添加入购物车，数量+1）  
  74.                             arr[j].count = arr[j].count + 1;  
  75.                             // 最后，把购物车数据，存放入缓存（此处不用再给购物车数组push元素进去，因为这个是购物车有的，直接更新当前数组即可）  
  76.                             try {  
  77.                                 wx.setStorageSync(\'cart\', arr)  
  78.                             } catch (e) {  
  79.                                 console.log(e)  
  80.                             }  
  81.                             // 返回（在if内使用return，跳出循环节约运算，节约性能）  
  82.                             return;  
  83.                         }  
  84.                     }  
  85.                     // 遍历完购物车后，没有对应的item项，把goodslist的当前项放入购物车数组  
  86.                     arr.push(this.data.goodslist[i]);  
  87.                 }  
  88.                 // 购物车没有数据，把item项push放入当前数据（第一次存放时）  
  89.                 else{  
  90.                     arr.push(this.data.goodslist[i]);  
  91.                 }  
  92.                 // 最后，把购物车数据，存放入缓存  
  93.                 try {  
  94.                     wx.setStorageSync(\'cart\', arr)  
  95.                     // 返回（在if内使用return，跳出循环节约运算，节约性能）  
  96.                     return;  
  97.                 } catch (e) {  
  98.                     console.log(e)  
  99.                 }  
  100.             }  
  101.         }  
  102.     }  
  103. })  
Page({
    data: {
        goodslist: [
            {
                id:"001",
                imgUrl:"http://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&fm=23&gp=0.jpg",
                name:"女装T恤中长款大码摆裙春夏新款",
                price:"65.00"
            },
            {
                id:"002",
                imgUrl:"http://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&fm=23&gp=0.jpg",
                name:"火亮春秋季 男青年修身款圆领男士T恤",
                price:"68.00"
            },
            {
                id:"003",
                imgUrl:"http://img1.imgtn.bdimg.com/it/u=2305064940,3470659889&fm=23&gp=0.jpg",
                name:"新款立体挂脖t恤女短袖大码宽松条纹V领上衣显瘦休闲春夏",
                price:"86.00"
            },
            {
                id:"004",
                imgUrl:"http://img4.imgtn.bdimg.com/it/u=3986819380,1610061022&fm=23&gp=0.jpg",
                name:"男运动上衣春季上新品 上衣流行装青年",
                price:"119.00"
            },
            {
                id:"005",
                imgUrl:"http://img1.imgtn.bdimg.com/it/u=3583238552,3525141111&fm=23&gp=0.jpg",
                name:"时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",
                price:"69.00"
            },
            {
                id:"006",
                imgUrl:"http://img2.imgtn.bdimg.com/it/u=1167272381,3361826143&fm=23&gp=0.jpg",
                name:"新款立体挂脖t恤短袖大码宽松条纹V领上衣显瘦休闲春夏",
                price:"86.00"
            },
            {
                id:"007",
                imgUrl:"http://img0.imgtn.bdimg.com/it/u=789486313,2033571593&fm=23&gp=0.jpg",
                name:"时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",
                price:"119.00"
            },
            {
                id:"008",
                imgUrl:"http://img2.imgtn.bdimg.com/it/u=3314044863,3966877419&fm=23&gp=0.jpg",
                name:"男运动上衣春季上新品 上衣流行装青年",
                price:"69.00"
            },
        ]
    },
    // 加入购物车
    addcart:function(e){
        this.setData({
            toastHidden:false
        });
        // 遍历列表 与 购物车列表
        for (var i in this.data.goodslist){
            // 列表中某一项item的id == 点击事件传递过来的id。则是被点击的项
            if(this.data.goodslist[i].id == e.target.id){
                // 给goodsList数组的当前项添加count元素，值为1，用于记录添加到购物车的数量
                this.data.goodslist[i].count = 1;
                // 获取购物车的缓存数组（没有数据，则赋予一个空数组）
                var arr = wx.getStorageSync(\'cart\') || [];
                // 如果购物车有数据
                if(arr.length>0){
                    // 遍历购物车数组
                    for(var j in arr){
                        // 判断购物车内的item的id，和事件传递过来的id，是否相等
                        if(arr[j].id == e.target.id){
                            // 相等的话，给count+1（即再次添加入购物车，数量+1）
                            arr[j].count = arr[j].count + 1;
                            // 最后，把购物车数据，存放入缓存（此处不用再给购物车数组push元素进去，因为这个是购物车有的，直接更新当前数组即可）
                            try {
                                wx.setStorageSync(\'cart\', arr)
                            } catch (e) {
                                console.log(e)
                            }
                            // 返回（在if内使用return，跳出循环节约运算，节约性能）
                            return;
                        }
                    }
                    // 遍历完购物车后，没有对应的item项，把goodslist的当前项放入购物车数组
                    arr.push(this.data.goodslist[i]);
                }
                // 购物车没有数据，把item项push放入当前数据（第一次存放时）
                else{
                    arr.push(this.data.goodslist[i]);
                }
                // 最后，把购物车数据，存放入缓存
                try {
                    wx.setStorageSync(\'cart\', arr)
                    // 返回（在if内使用return，跳出循环节约运算，节约性能）
                    return;
                } catch (e) {
                    console.log(e)
                }
            }
        }
    }
})

编写购物车部分，如下图所示：

 

 

布局分析：

首先一个list的主盒子，接着是item盒子，这是必须的。

    然后把item分成左侧的图片部分，和右侧的说明部分（item盒子使用横向弹性盒）

        右侧的说明部分又分上下2部分（右侧说明部分盒子使用纵向弹性盒）

                        下面价钱、购物加减、购物车部分（使用纵向弹性盒）

                最下面的购物加减、购物车部分（使用横向弹性盒，中间使用justify-content: space-between;填充空白）

 

 

cart.wxml：

[html] view plain copy print?
  1. <!--要是够车内没有数据，就行显示没有数据-->  
  2. <view class="cart" hidden="{{iscart}}">  
  3.     <image src="/images/cart.png"/>  
  4.     <view>购物车什么都没有，赶快去购物吧</view>  
  5. </view>  
  6. <!--要是有数据，就显示数据-->  
  7. <view class="cartList" hidden="{{!iscart}}">  
  8.     <!--header-->  
  9.     <view class="baoyou"></view>  
  10.     <!--list item-->  
  11.     <block wx:for="{{cart}}">  
  12.         <view class="goods">  
  13.             <!--左侧图片-->  
  14.             <view>  
  15.                 <image src="{{item.imgUrl}}" class="good-img"/>  
  16.             </view>  
  17.             <!--右侧说明部分-->  
  18.             <view class="good-cont">  
  19.                 <!--文字说明-->  
  20.                 <view class="goods-navigator">  
  21.                     <text class="good-name">{{item.name}}</text>  
  22.                 </view>  
  23.                 <!--价钱和购物加减的父盒子-->  
  24.                 <view class="good-price">  
  25.                     <text class="price">￥{{item.price}}</text>  
  26.                     <view class="btn-box">  
  27.                         <view class="btn">  
  28.                             <button id="del{{index}}" type="default" size="mini" bindtap="delCount">-</button>  
  29.                             <input  value="{{item.count}}"/>  
  30.                             <button id="add{{index}}" type="default" size="mini" bindtap="addCount">+</button>  
  31.                         </view>  
  32.                         <image id="img{{index}}" src="/images/del2.png" bindtap="delGoods"/>  
  33.                     </view>  
  34.                 </view>  
  35.             </view>  
  36.         </view>  
  37.     </block>  
  38.     <!--footer-->  
  39.     <view class="total">  
  40.         <view class="total_text">合计：<text>￥{{total}}</text></view>  
  41.         <button class="total_js" size="mini">去结算({{goodsCount}})</button>  
  42.     </view>  
  43. </view>  
<!--要是够车内没有数据，就行显示没有数据-->
<view class="cart" hidden="{{iscart}}">
    <image src="/images/cart.png"/>
    <view>购物车什么都没有，赶快去购物吧</view>
</view>
<!--要是有数据，就显示数据-->
<view class="cartList" hidden="{{!iscart}}">
    <!--header-->
    <view class="baoyou"></view>
    <!--list item-->
    <block wx:for="{{cart}}">
        <view class="goods">
            <!--左侧图片-->
            <view>
                <image src="{{item.imgUrl}}" class="good-img"/>
            </view>
            <!--右侧说明部分-->
            <view class="good-cont">
                <!--文字说明-->
                <view class="goods-navigator">
                    <text class="good-name">{{item.name}}</text>
                </view>
                <!--价钱和购物加减的父盒子-->
                <view class="good-price">
                    <text class="price">￥{{item.price}}</text>
                    <view class="btn-box">
                        <view class="btn">
                            <button id="del{{index}}" type="default" size="mini" bindtap="delCount">-</button>
                            <input  value="{{item.count}}"/>
                            <button id="add{{index}}" type="default" size="mini" bindtap="addCount">+</button>
                        </view>
                        <image id="img{{index}}" src="/images/del2.png" bindtap="delGoods"/>
                    </view>
                </view>
            </view>
        </view>
    </block>
    <!--footer-->
    <view class="total">
        <view class="total_text">合计：<text>￥{{total}}</text></view>
        <button class="total_js" size="mini">去结算({{goodsCount}})</button>
    </view>
</view>

cart.wxss：

[css] view plain copy print?
  1. page {  
  2.   background: #f2ebe3;  
  3. }  
  4.   
  5. .cart {  
  6.   padding: 100px 0 0 0;  
  7.   display: flex;  
  8.   justify-content: center;  
  9.   flex-direction: column;  
  10.   align-items: center;  
  11.   color: #999;  
  12. }  
  13.   
  14. .cart image {  
  15.   width: 66px;  
  16.   height: 66px;  
  17.   margin-bottom: 20px;  
  18. }  
  19.   
  20. .baoyou {  
  21.   font-size: 18px;  
  22.   color: #db2929;  
  23.   padding: 10px;

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
小程序云开发--第一天（才接触）发布时间：2022-07-18
下一篇：
小程序(试题)全局配置，生命周期，Component,组件通信，behavior,template,wxs ...发布时间：2022-07-18
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap