logo头像
Snippet 博客主题

微信小程序电商实战-购物车(上)

好久没更新小程序电商实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 小程序电商教程推出,先透露一下 新版将会以 https 的方式请求动态获取数据来展现,不再是目前的静态页面了 新版也更贴近于实战。这篇购物车因为内容比较多 特别是中间有用到 template 模板的只是点,所以会分文 上下两部分。大家耐心看完哦

####购物车效果

购物车效果图.gif

####cart.wxml

#####购物车商品列表布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<view class="scroll" hidden="{{hidden}}">
<scroll-view class="scroll" scroll-y="true">
<view class="separate"></view>
<view wx:for="{{carts}}">
<view class="cart_container">
<view wx:if="{{!item.isSelect}}">
<icon class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}" type="circle" size="20"></icon>
</view>
<view wx:elif="{{item.isSelect}}">
<icon class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}" type="success" color="#f0145a" size="20"></icon>
</view>

<image class="item-image" src="{{item.pic}}"></image>
<import src="../template/template.wxml" />
<view class="column">
<text class="title">{{item.name}}</text>
<view class="row">
<text class="sku-price">¥{{item.price * item.count}}</text>
<view class="sku">
<template is="quantity" data="{{ ...item,index:index}}" />
</view>
</view>

</view>
</view>
<view class="separate"></view>
</view>
</scroll-view>
</view>

#####购物车下方合计结算布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<view class="bottom_total" hidden="{{hidden}}">
<view class="bottom_line"></view>

<view class="row">

<view wx:if="{{!isAllSelect}}">
<icon class="item-allselect" bindtap="allSelect" type="circle" size="20"></icon>
</view>
<view wx:elif="{{isAllSelect}}">
<icon class="item-allselect" bindtap="allSelect" type="success" color="#f0145a" size="20"></icon>
</view>
<text class="small_text">全选</text>
<text>合计:¥ </text>
<text class="price">{{totalMoney}}</text>
<button class="button-red" bindtap="toBuy" formType="submit">去结算 </button>
</view>
</view>

备注: 引用的 template 模板部分先不用管 可以注释掉,可以继续往下面看

####cart.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
@import "../template/template.wxss";
page{
background: #f5f5f5;
}
.cart_container {
display: flex;
flex-direction: row;
background-color: #FFFFFF;
margin-bottom: 10rpx;
}
.scroll {
margin-bottom: 120rpx;
}
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
align-items: center;
/* margin-top: 40rpx; */
/* border: 1rpx solid #000000; */
}
.sku {
margin-left: 100rpx;
position: absolute;
right: 30rpx;
margin-top: 30rpx;
}
.sku-price {
color: red;
position: relative;
margin-top: 30rpx;
}
.price {
color: red;
position: relative;
}
.title {
font-size: 38rpx;
margin-top: 40rpx;
}
.small_text {
font-size: 28rpx;
margin-right: 40rpx;
/* margin-left: 10rpx; */
margin-left: 25rpx;
}
.item-select {
width: 40rpx;
height: 40rpx;
margin-top: 90rpx;
margin-left: 20rpx;
}
.item-allselect {
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
margin-top:25rpx;
}
.item-image {
width: 180rpx;
height: 180rpx;
margin: 20rpx;
}
.bottom_line {
width: 100%;
height: 2rpx;
background: lightgray;
}
.bottom_total {
position: fixed;
display: flex;
flex-direction: column;
bottom: 0;
width: 100%;
height: 120rpx;
line-height: 120rpx;
background: white;
/* margin-top: 300rpx; */
border-top: 1rpx solid #ccc;
}
.button-red {
background-color: #f0145a;
position: fixed;
right: 0;
color: white;
text-align: center;
display: inline-block;
font-size: 30rpx;
border-radius: 0rpx;
width: 30%;
height: 120rpx;
line-height: 120rpx;
/* border: 1rpx solid #ccc; */
}

备注 @import “../template/template.wxss”; 先不用管 可以注释掉, 后面会有代码

####cart.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
#初始化数据
data: {
hidden:null,
hiddenEmpty:true,
isAllSelect: false,
totalMoney: 0,
// 商品详情介绍
carts: [
{
id: 1,
pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg",
name: "日本资生堂洗颜",
price: 200,
isSelect: false,
// 数据设定
count: 2
},
{
id: 2,
pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058301941.jpg',
name: "倩碧焕妍活力精华露",
price: 340,
isSelect: false,
// 数据设定
count: 1
},
{
id: 3,
pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
name: "特效润肤露",
price: 390,
isSelect: false,
// 数据设定
count: 1
},
{
id: 4,
pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058228431.jpg',
name: "倩碧水嫩保湿精华面霜",
price: 490,
isSelect: false,
// 数据设定
count: 1
},
{
id: 5,
pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
name: "兰蔻清莹柔肤爽肤水",
price: 289,
isSelect: false,
// 数据设定
count: 1
},
{
id: 6,
pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg",
name: "LANCOME兰蔻小黑瓶精华",
price: 230,
isSelect: false,
// 数据设定
count: 1
},
],
},

未完待续……

明天将会把购物车用到的 template 模板、选择计算和数量加减的部分实现!

####更多精彩内容
微信小程序电商实战-入门篇
微信小程序电商实战-首页(上)
微信小程序电商实战-首页(下)
微信小程序电商实战-商品详情(上)
微信小程序电商实战-商品列表流式布局
微信小程序实战篇:基于wxcharts.js绘制移动报表
微信小程序实战篇:商品属性联动选择(案例)

####关注我们
如果需要源码可以关注“IT实战联盟”公众号并留言(源码名称+邮箱),小萌看到后会联系作者发送到邮箱,也可以加入交流群和作者互撩哦~~~
IT实战联盟.jpg

上一篇