给大家分享一下自己写的一个饿了么小程序的购物车功能
下边是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 })
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
