小程序饿了么购物车功能

给大家分享一下自己写的一个饿了么小程序的购物车功能

下边是wxml：

<view class="box">
  <view class="header">
    <view class="top">
      <view class="left">
        <image src="https://z3.ax1x.com/2021/06/02/2Qlpfs.jpg"></image>
      </view>
      <view class="right">
        <image src="https://z3.ax1x.com/2021/06/02/2QlPlq.jpg"></image>
        关注
      </view>
    </view>
    <view class="botm">
      <image src="https://z3.ax1x.com/2021/06/02/2QlCpn.jpg"></image>
    </view>
  </view>
  <view class="section">
    <view class="sec1">
      <view>点餐</view>
      <view>评价<text>4.8</text></view>
      <view>商家<text>故事</text></view>
    </view>
    <view class="sec2">
      <view class="left">
        <view class="dan"
        wx:for="{{left}}"
        wx:key="key">
          {{item}}
        </view>
      </view>
      <view class="right">
        <view class="dan"
        wx:for="{{right}}"
        wx:key="key">
          <view class="rig_left">
            <image src="{{item.img_url}}"></image>
          </view>
          <view class="rig_rig">
            <view class="title">{{item.title}}</view>
            <view class="yuanl">{{item.yuanl}}</view>
            <view class="yuex">月售：{{item.yuex}}</view>
            <view class="botm">
              <view class="jiag">
                {{item.qian}}
                {{item.jiage}}
              </view>
              <view class="jiajian">
                <text class="jian"
                bindtap="jian" 
                data-id="{{item.id}}"
                hidden="{{item.flag}}">-</text>
                <text class="num"
                 hidden="{{item.flag}}"
                >{{item.num}}</text>
                <text class="jia"
                bindtap="jia"
                data-id="{{item.id}}">+</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="footer">
    <view class="left">
      <view bindtap="btn">
        <image hidden="{{img_flag}}" src="https://z3.ax1x.com/2021/06/02/2QlSYj.jpg"></image>
        <image hidden="{{!img_flag}}"  src="https://z3.ax1x.com/2021/06/02/2QQXm8.jpg"></image>
      </view>
      <view class="zongs" hidden="{{!img_flag}}">{{zongshu}}</view>
      <view class="rig">
        <view class="zongj">
          ￥ <text>{{zongjia}}</text>
        </view>
        <view>免配送费</view>
      </view>
    </view>
    <view class="{{zongjia >= 20 ? 'lan' : 'hui'}}" bindtap="jiesuan"></view>
  </view>
  <view class="gwc" hidden="{{show}}">
    <view class="top" bindtap="btn"></view>
    <view class="btm">
    <view class="dan"
    wx:for="{{arr}}"
    wx:key="key">
      <view class="rig_left">
        <image src="{{item.img_url}}"></image>
      </view>
      <view class="rig_rig">
        <view class="title">{{item.title}}</view>
        <view class="botm">
          <view class="jiag">
            {{item.qian}}
            {{item.jiage}}
          </view>
          <view class="jiajian">
            <text class="jian"
            bindtap="jian" 
            data-id="{{item.id}}"
            >-</text>
            <text class="num"
            >{{item.num}}</text>
            <text class="jia"
            bindtap="jia"
            data-id="{{item.id}}">+</text>
          </view>
        </view>
      </view>
    </view>
    </view>
  </view>
</view>

下边是wxss：

  1 .box{
  2   width: 100%;
  3 }
  4 .header{
  5   width: 100%;
  6   background-image: url(https://z3.ax1x.com/2021/06/02/2QQj0S.jpg);
  7   background-size: 100% 100%;
  8   position: relative;
  9 }
 10 .header .top{
 11   width: 100%;
 12   height: 250rpx;
 13   position: fixed;
 14   top: 0;
 15   padding-top: 60rpx;
 16   display: flex;
 17   justify-content: space-between;
 18   z-index: 3;
 19 }
 20 .header .top .left{
 21   padding-left: 40rpx;
 22 }
 23 .header .top .left image{
 24   width: 24rpx;
 25   height: 36rpx;
 26 }
 27 .header .top .right{
 28   padding-right: 200rpx;
 29   color: white;
 30   font-size: 30rpx;
 31 }
 32 .header .top .right image{
 33   width: 36rpx;
 34   height: 36rpx;
 35 }
 36 .header .botm{
 37   width: 88%;
 38   height: 230rpx;
 39   padding: 1%;
 40   border-radius: 20rpx;
 41   overflow: hidden;
 42   background: white;
 43   position: relative;
 44   top: 150rpx;
 45   left: 5%;
 46   box-shadow: 0 0 15rpx gainsboro;
 47 }
 48 .header .botm image{
 49   width: 100%;
 50   height: 100%;
 51 }
 52 .section{
 53   width: 100%;
 54   padding-top: 110rpx;
 55   margin-bottom: 200rpx;
 56   margin-top: 60rpx;
 57   overflow: auto;
 58 }
 59 .section .sec1{
 60   width: 100%;
 61   display: flex;
 62 }
 63 .section .sec1 view{
 64   font-size: 30rpx;
 65   font-weight: bold;
 66   margin-left: 20rpx;
 67 }
 68 .section .sec1 view text{
 69   font-size: 20rpx;
 70   font-weight: 100;
 71   position: absolute;
 72 }
 73 .section .sec1 view:nth-child(n+2){
 74   margin-left: 50rpx;
 75 }
 76 .section .sec1 view:nth-child(1){
 77   border-bottom: 4rpx solid #02B7FC;
 78 }
 79 .section .sec2{
 80   width: 95%;
 81   display: flex;
 82 }
 83 .section .sec2 .left{
 84   width: 150rpx;
 85   height: 100%;
 86   background: #F2F2F2;
 87 }
 88 .section .sec2 .left .dan{
 89   width: 110rpx;
 90   padding: 25rpx 30rpx 15rpx 15rpx;
 91   font-size: 24rpx;
 92 }
 93 .section .sec2 .left .dan:nth-child(1){
 94   background: white;
 95 }
 96 .section .sec2 .right{
 97   width: 100%;
 98   padding-left: 15rpx;
 99 }
100 .section .sec2 .right .dan{
101   width: 100%;
102   padding-top: 15rpx;
103   display: flex;  
104 }
105 .section .sec2 .right .dan .rig_left{
106   width: 250rpx;
107   height: 180rpx;
108   border-radius: 15rpx;
109   overflow: hidden;
110 }
111 .section .sec2 .right .dan .rig_left image{
112   width: 100%;
113   height: 100%;
114 }
115 .section .sec2 .right .dan .rig_rig{
116   width: 100%;
117   padding-left: 15rpx;
118 }
119 .section .sec2 .right .dan .rig_rig .title{
120   font-size: 30rpx;
121   font-weight: bold;
122 }
123 .section .sec2 .right .dan .rig_rig .yuanl{
124   font-size: 20rpx;
125 }
126 .section .sec2 .right .dan:nth-child(1) .rig_rig .yuanl{
127   color: #BE874E;
128 }
129 .section .sec2 .right .dan:nth-child(3) .rig_rig .yuanl{
130   color: #BE874E;
131 }
132 .section .sec2 .right .dan .rig_rig .yuex{
133   font-size: 20rpx;
134   color: #999999;
135 }
136 .section .sec2 .right .dan .rig_rig .botm{
137   width: 100%;
138   display: flex;
139   justify-content: space-between;
140   padding-top: 40rpx;
141 }
142 .section .sec2 .right .dan .rig_rig .botm .jiag{
143   color: red;
144 }
145 .section .sec2 .right .dan .rig_rig .botm .jiajian .jian{
146   padding: 0 18rpx;
147   text-align: center;
148   border-radius: 50%;
149   border: 2rpx solid #02B7FC;
150   color: #02B7FC;
151   font-size: 40rpx;
152 }
153 .section .sec2 .right .dan .rig_rig .botm .jiajian .jia{
154   font-size: 40rpx;
155   padding: 0 12rpx;
156   text-align: center;
157   border-radius: 50%;
158   background: #02B7FC;
159   color: white;
160 }
161 .section .sec2 .right .dan .rig_rig .botm .jiajian .num{
162   padding: 0 15rpx;
163 }
164 .footer{
165   width: 90%;
166   height: 100rpx;
167   padding: 20rpx 5%;
168   position: fixed;
169   bottom: 0;
170   background: white;
171   display: flex;
172   justify-content: space-between;
173 }
174 .footer .left{
175   display: flex;
176 }
177 .footer .left image{
178   width: 120rpx;
179   height: 70rpx;
180 }
181 .hui::before{
182   display: block;
183   width: 200rpx;
184   height: 60rpx;
185   text-align: center;
186   line-height: 60rpx;
187   border-radius: 30rpx;
188   color: white;
189   background: #999999;
190   content: "￥20起送";
191 }
192 .lan::before{
193   display: block;
194   width: 200rpx;
195   height: 60rpx;
196   text-align: center;
197   line-height: 60rpx;
198   border-radius: 30rpx;
199   color: white;
200   content: "去结算";
201   background: #02B7FC;
202 }
203 .zongs{
204   width: 30rpx;
205   height: 30rpx;
206   border-radius: 50%;
207   background: red;
208   color: white;
209   font-size: 25rpx;
210   text-align: center;
211   line-height: 30rpx;
212   position: absolute;
213   top: 31rpx;
214   left: 120rpx;
215 }
216 .footer .left .rig .zongj{
217   font-size: 20rpx;
218 }
219 .footer .left .rig .zongj text{
220   font-size: 40rpx;
221 }
222 .footer .left .rig view:nth-child(2){
223   font-size: 20rpx;
224 }
225 page{
226   width: 100%;
227   height: 100%;
228   /* overflow: hidden; */
229 }
230 .gwc{
231   position: fixed;
232   top: 0;
233   width: 100%;
234   height: 90%;
235   z-index: 2;
236 }
237 .gwc .top{
238   width: 100%;
239   height: 100%;
240   background: rgba(0, 0, 0,0.5);
241 }
242 .gwc .btm{
243   width: 100%;
244   height: 40%;
245   overflow: auto;
246   position: absolute;
247   bottom: 0;
248   background: white;
249   z-index: 3;
250 }
251 
252 .gwc .btm .dan{
253   width: 100%;
254   padding-top: 15rpx;
255   display: flex;  
256 }
257 .gwc .btm .dan .rig_left{
258   width: 250rpx;
259   height: 180rpx;
260   border-radius: 15rpx;
261   overflow: hidden;
262 }
263 .gwc .btm .dan .rig_left image{
264   width: 100%;
265   height: 100%;
266 }
267 .gwc .dan .rig_rig{
268   width: 100%;
269   padding-left: 15rpx;
270 }
271 .gwc .dan .rig_rig .title{
272   font-size: 30rpx;
273   font-weight: bold;
274 }
275 .gwc .dan .rig_rig .botm{
276   width: 90%;
277   display: flex;
278   justify-content: space-between;
279   padding-top: 60rpx;
280 }
281 .gwc .dan .rig_rig .botm .jiag{
282   color: red;
283 }
284 .gwc .dan:nth-child(1) .rig_rig .botm .jiajian{
285   display: block;
286 }
287 .gwc .dan .rig_rig .botm .jiajian .jian{
288   padding: 0 18rpx;
289   text-align: center;
290   border-radius: 50%;
291   border: 2rpx solid #02B7FC;
292   color: #02B7FC;
293   font-size: 40rpx;
294 }
295 .gwc .dan .rig_rig .botm .jiajian .jia{
296   font-size: 40rpx;
297   padding: 0 12rpx;
298   text-align: center;
299   border-radius: 50%;
300   background: #02B7FC;
301   color: white;
302 }
303 .gwc .dan .rig_rig .botm .jiajian .num{
304   padding: 0 15rpx;
305 }

下边是js功能代码：

  1 // pages/sjia/sjia.js
  2 Page({
  3 
  4   /**
  5    * 页面的初始数据
  6    */
  7   data: {
  8     left:["热销","福利回馈特惠","满减主食","折扣单品","满减小食","套餐人气精选","套餐超值品质","满减饮料","流量专享"],
  9     right:[
 10       {
 11         img_url:"https://z3.ax1x.com/2021/06/02/2QQj0S.jpg",
 12         title:"至尊板烧堡",
 13         yuanl:"郑州板烧堡人气飙升至第2名",
 14         yuex:"13",
 15         qian:"￥",
 16         jiage:13.9,
 17         id:0,
 18         num:0,
 19         flag:true,
 20         danz:0
 21       },
 22       {
 23         img_url:"https://z3.ax1x.com/2021/06/02/2QQj0S.jpg",
 24         title:"香辣双鸡堡",
 25         yuanl:"原料：鸡肉",
 26         yuex:"13",
 27         qian:"￥",
 28         jiage:13.9,
 29         id:1,
 30         num:0,
 31         flag:true,
 32         danz:0
 33       },
 34       {
 35         img_url:"https://z3.ax1x.com/2021/06/02/2QQj0S.jpg",
 36         title:"香辣鸡腿堡",
 37         yuanl:"汉堡品类优先商品",
 38         yuex:"13",
 39         qian:"￥",
 40         jiage:13.9,
 41         id:2,
 42         num:0,
 43         flag:true,
 44         danz:0
 45       },
 46       {
 47         img_url:"https://z3.ax1x.com/2021/06/02/2QQj0S.jpg",
 48         title:"至尊板烧堡",
 49         yuanl:"原料：鳕鱼",
 50         yuex:"13",
 51         qian:"￥",
 52         jiage:13.9,
 53         id:3,
 54         num:0,
 55         flag:true,
 56         danz:0
 57       },
 58       {
 59         img_url:"https://z3.ax1x.com/2021/06/02/2QQj0S.jpg",
 60         title:"香辣鸡肉堡 ，。",
 61         yuanl:"原料：鳕鱼",
 62         yuex:"13",
 63         qian:"￥",
 64         jiage:13.9,
 65         id:4,
 66         num:0,
 67         flag:true,
 68         danz:0
 69       }
 70     ],
 71     img_flag:false,
 72     zongshu:0,
 73     zongjia:0,
 74     show:true,
 75     arr:[]
 76   },
 77   jia(e){
 78     var that = this;
 79     var index = e.currentTarget.dataset.id;  //获取商品自定义id
 80     var num = that.data.right[index].num;    //通过自定义id获取当前点击元素的数量
 81     var numprop = "right["+index+"].num";   //通过字符串拼接的形式来拿取当前商品的数量用于下边进行更改
 82     var img_flag = that.data.img_flag;  
 83     var flagprop = "right["+index+"].flag";
 84     var arr = that.data.arr;   //用于接收加入购物车中的数据
 85     var arr_id = "";    //通过点击时拿到的id进行判断是否加入购物车
 86     var danzprop = "right["+index+"].danz";  //单个总价
 87 
 88     //计算单个商品加的数量   注意：最开始计算完单个数量时必须要把值先更新，下边才能继续写
 89     num += 1;
 90     that.setData({
 91       [numprop]:num
 92     })
 93 
 94     //计算单个商品的总价，用于下一个确认订单页面
 95     that.data.right[index].danz=that.data.right[index].num*that.data.right[index].jiage;
 96     that.setData({
 97       [danzprop]:that.data.right[index].danz
 98     })
 99 
100     //加入购物车
101     if (that.data.zongshu == 0) {
102       arr.push(that.data.right[index]); //当点击加入 总数为0时 加入第一个购物车
103     }
104     for(let j=0;j<that.data.arr.length;j++){
105       arr_id += String(arr[j].id)  //遍历购物车中商品 并添加id到数组用于添加判断
106     }
107     if (arr_id.indexOf(String(index)) == -1) {
108       arr.push(that.data.right[index]);   //再次点击时判断购物车中是否有这件商品  没有时添加
109     }
110     that.setData({
111       arr:arr
112     })
113 
114     if (num >= 1) {
115       that.setData({   //当商品总数大于等于1时，让减号跟数量显示
116         [flagprop]:false
117       })
118     }
119     //计算总价钱跟总数量
120     var zshu = null;
121     var zjia = null;
122     for(let i=0;i < that.data.right.length;i++){
123       zshu += that.data.right[i].num;
124       zjia += that.data.right[i].num*that.data.right[i].jiage;
125     }
126     that.setData({
127       zongshu:zshu,
128       zongjia:zjia+2
129     })
130     // console.log(that.data.zongjia);
131     if (that.data.zongshu >= 1) {   //购物车的显示隐藏
132       that.setData({
133         img_flag:true
134       })
135     }
136   },
137   jian(e){
138     var that = this;
139     var index = e.currentTarget.dataset.id;
140     var num = that.data.right[index].num;
141     var numprop = "right["+index+"].num"
142     var img_flag = that.data.img_flag;
143     var flagprop = "right["+index+"].flag";
144     var arr = that.data.arr;
145     //单商品数量加减
146     num -= 1;
147     that.setData({
148       [numprop]:num
149     })
150     //当商品数量为0时将这个商品从购物车中删除
151     for(let j=0;j<arr.length;j++){
152       if (arr[j].num == 0) {
153         arr.splice(j,1);
154       }
155     }
156     that.setData({
157       arr:arr
158     })
159 
160     if (num < 1) {   //当单个商品数量小于1时让数量跟减号隐藏
161       that.setData({
162         [flagprop]:true
163       })
164     }
165     //计算总价跟总数
166     var zshu = null;
167     var zjia = null;
168     for(let i=0;i < that.data.right.length;i++){
169       zshu += that.data.right[i].num;
170       zjia += that.data.right[i].num*that.data.right[i].jiage;
171     }
172     that.setData({
173       zongshu:zshu,
174       zongjia:zjia
175     })
176     // console.log(that.data.zongshu);
177     if (that.data.zongshu < 1) {
178       that.setData({
179         img_flag:false
180       })
181     }
182   },
183   
184   btn(){  //购物车的显示隐藏
185     var that = this;
186     that.setData({
187       show:!that.data.show
188     })
189   },
190   jiesuan(){
191     var that = this;
192     if (that.data.zongjia >= 20) {  //当总价大于等于20才能购买配送
193       wx.navigateTo({
194         url: '../../pages/qrdd/qrdd'
195       })
196     }
197   },
198   /**
199    * 生命周期函数--监听页面加载
200    */
201   onLoad: function (options) {
202 
203   },
204 
205   /**
206    * 生命周期函数--监听页面初次渲染完成
207    */
208   onReady: function () {
209 
210   },
211 
212   /**
213    * 生命周期函数--监听页面显示
214    */
215   onShow: function () {
216 
217   },
218 
219   /**
220    * 生命周期函数--监听页面隐藏
221    */
222   onHide: function () {
223 
224   },
225 
226   /**
227    * 生命周期函数--监听页面卸载
228    */
229   onUnload: function () {
230 
231   },
232 
233   /**
234    * 页面相关事件处理函数--监听用户下拉动作
235    */
236   onPullDownRefresh: function () {
237 
238   },
239 
240   /**
241    * 页面上拉触底事件的处理函数
242    */
243   onReachBottom: function () {
244 
245   },
246 
247   /**
248    * 用户点击右上角分享
249    */
250   onShareAppMessage: function () {
251 
252   }
253 })