Skip to content

Commit ba85e4a

Browse files
shen100shen100
committed
购买面板增加产品属性选择
1 parent 4101096 commit ba85e4a

File tree

7 files changed

+215
-30
lines changed

7 files changed

+215
-30
lines changed

‎README.md

+11-8
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,24 @@
55
<img src="http://res.cloudinary.com/dcemaqxcp/image/upload/c_scale,q_40,w_640/v1495726849/D55DF2778A92A721C4B5A509AE7ACD96_lkz2g8.jpg" width="320" alt=""/>
66

77
## 项目环境搭建
8-
1 **克隆代码**
8+
* **克隆代码**
99

1010
```
1111
git clone https://github.com/shen100/wemall.git
1212
```
1313

14-
2 **配置nginx**
14+
* **配置nginx**
1515
将`wemall/nginx/dev.wemall.com.conf`文件拷贝到nginx的虚拟主机目录下
1616

17-
3 **配置hosts**
17+
* **配置hosts**
1818
127.0.0.1 dev.wemall.com
1919

20-
4 **创建数据库**
20+
* **创建数据库**
2121
先创建数据库如`wemall`，再use wemall，然后导入`wemall/sql/wemall.sql`
2222
>注意: 本地开发模式下，数据库是`wemall`，用户是`root`，密码是`test1234`
2323
>可以通过`wemall/configuration.json`配置文件进行修改
2424
25-
5 **安装node.js第三方模块**
25+
* **安装node.js第三方模块**
2626
进入`wemall/nodejs`目录，运行命令
2727

2828
```
@@ -35,7 +35,7 @@ npm install
3535
npm install --registry=https://registry.npm.taobao.org
3636
```
3737

38-
6 **启动node.js程序**
38+
* **启动node.js程序**
3939
进入`wemall/nodejs`目录，运行命令
4040

4141
```
@@ -48,13 +48,16 @@ npm start
4848
npm run staticServ
4949
```
5050

51-
7 **运行go程序**
52-
进入`wemall`目录下，`将configuration.dev.json`改名`为configuration.json`, 运行
51+
* **运行go程序**
52+
进入`wemall`目录，`将configuration.dev.json`改名`为configuration.json`, 运行
5353

5454
```
5555
go run main.go
5656
```
5757

58+
* **微信小程序**
59+
进入`wemall/weixin`目录，`将config.dev.js`改名`为config.js`,
60+
5861
## 技术选型
5962
### 前端
6063
* web服务器: nginx

‎wexin/app.wxss

+26-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
}
55

66
.input-number-icon {
7-
border: 1px #aaa solid;
7+
border: 1px #d2d2d2 solid;
88
width: 60rpx;
99
height: 60rpx;
1010
background-color: #fff;
@@ -23,6 +23,29 @@
2323
height: 60rpx;
2424
color: #222;
2525
font-size: 36rpx;
26-
border-top: 1px #aaa solid;
27-
border-bottom: 1px #aaa solid;
26+
border-top: 1px #d2d2d2 solid;
27+
border-bottom: 1px #d2d2d2 solid;
2828
}
29+
30+
.text-radio-container {
31+
display: flex;
32+
flex-direction: row;
33+
flex-wrap: wrap;
34+
}
35+
36+
.text-radio {
37+
margin-right: 32rpx;
38+
margin-bottom: 32rpx;
39+
color: #333;
40+
font-size: 32rpx;
41+
padding: 0 30rpx;
42+
height: 60rpx;
43+
line-height: 60rpx;
44+
background: #f6f6f6;
45+
border-radius: 12rpx;
46+
}
47+
48+
.text-radio-selected {
49+
color: #fff;
50+
background: #fc464a;
51+
}

‎wexin/config/config.js ‎wexin/config/config.dev.js

File renamed without changes.

‎wexin/pages/product/components/buy.wxml

+16-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<import src="../../../components/InputNumber.wxml" />
2+
<import src="../../../components/TextRadio.wxml" />
23

34
<template name="buy">
4-
<view class="product-buy">
5-
<view class="product-buy-bg"></view>
6-
<view class="buy-popup">
5+
<view wx:if="{{buyPopupVisible}}" class="product-buy">
6+
<view bindtap="onWillHideBuy" class="product-buy-bg"></view>
7+
<view class="buy-popup" animation="{{buyAnimationData}}" style="bottom: {{buyPopupBottom}};">
78
<view class="buy-product-prop">
89
<view class="product-buy-info">
910
<view class="product-buy-info-img-box">
@@ -13,10 +14,21 @@
1314
<view class="product-buy-info-name">{{product.name}}阿道夫阿卡的风景爱疯啊阿迪飞道夫阿卡的风景爱疯啊阿迪飞道夫阿卡的风景爱疯啊阿迪飞</view>
1415
<view class="product-buy-info-price">¥ {{product.price}}</view>
1516
</view>
16-
<view class="product-buy-info-close-box">
17+
<view bindtap="onWillHideBuy" class="product-buy-info-close-box">
1718
<image class="product-buy-info-close" mode="aspectFit" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAFG0lEQVRoQ9Vay3HcRhDtBglcTUcgOgKJEZiMQFQEMiMQ98BB8STyxMLsYakIvIpAUgSmIvAqAlERWL5yuduuNzWDGsziM/jQKs2BxQIWmH79ed3TDaaffPFU8mutX4jI8yRJDkXkuOa998x8T0Sr/f39z7PZ7PsUe48CAKGJ6A0EZubDngKtiGiZpun7MWAGASiK4jURXTUJLSJfmLmiYRF5wcy/NIBcbjab68vLS1io1+oFYD6fH4vIgoigeX99EpE7Zr5TSkGzjQvv2G63sNgfRPTM/6GI3GZZdt3HItEA5vP5WxG5chuKyL9EhA1v+2zoC2zj5pyZYVGzROQ+SZKzi4uLuxhTdAJYLBYH6/X6L1/rInI9RvBQsJubm8O9vb0lEf3u3TtTSuFa62oFYF/8wQkP395ut6dDfLVLENwviuLcxpaLlaVS6qzt2UYAoeZF5H2e5/DbJ13WrRBPUSBqAfwo4Z1msP/DwwNAPLfXGt2pFoDW+k8iMtr+vzQfmtWCQPIzlmDmk7rA3gFQFMUpM8PvsT4rpeqy6pO6kXu5705gpyzLjkLGqwCwrvOViA5Ak1mWHQ6lyKkQIrCZGbkH651SCoFergqAoiiQXd9a13mV5/nHqQQZ8x6tNXKCodjNZvObz4IlAF/7P9p1QrC25vq7LiZLAL6pmgKmLtDW6/UiTdNZX1fTWhuSiElW+F1RFEuXsdM0/dXt5wP4iuIMySrP87DW2fGAgGpXaZqexIKwwoPpsKIybmCFWZ7nt4ad8KfpZpff+lpBnR8DIhA+GoCVE9UqCsCVUuqoBOC7TxgkU4IYI7wFAK2/wf/OjZwFwDYvieibUqrvwaTin02WGCs8hLblPArLMrEZAEVRGP8nok9KqdMurdfdb3OnKYR3e2qtxbLRdZ7nV84ClYtDAIRM4SyxXq+hEBewvXy+QVHfUV64Eoctm/xjUZXRPQUIpP/g2BnFOG17e0nNlDlc51dDhXfPBe7kLo8W3gayy8pPByD0+aZCbIiidixgT10o4Eb7p9UQMqzv807OqDzRBWoHgN10kiCuYxvbM3KH9tEgtNaoiVApGMZ0NGoiu65c7dKIR2+h5kufH5Kxm/ZtotFKYMQKHSN8Q2APsoRf8rgayuWBMkUrpTpbLT7APklqrCXqSh7nQuUxUkSiDzJ9hJ/CElrrnZLHL6ddHESVE+GhO7YsDjN2bNMgYMvyaOkDKA8MsRWpd+g+jz2Y+JYAm2RZdhxzjvCPu0R05HqwJQA/I/dhI1giRoA6Yoh9tu24WwnYtsNzX2aa8veB9islSQgACcIcnokIrfKTKQUZ8q6AOnf6VDuUqbUuKVVERlenQ4R2z9R0xkvfd7/ZAWAfwpDCDB9iOxRjBG3Jun6L0xxgwt829UZ9V8Ko6KRr8jI1AL8/29anasy6QZJCjngVOzUZCyZoLn9po9rWsqEm04Lv340VsOl5675oLJuGMnpUXXmis+6pAXG32WzOpp7SYPLJzCCQg1jhTYzGaNNSGeoQf6o4eDTq72kTKBrKZRsf5UWWZecxCTIKADa05gULmMaSWyLyMUmSZZ/pu61rXooIWud+H+obrvXpikcDcAJba8DU/kTR3Qb9rvBJgYiAvczMmJmNdrfbLdgNA+9K82zMyLY3ACepHVjjFIZSvGkC3+qhCFJ8bpBl2TLGXepeNhiA/zI7loKW8cFH4ycF9hMEWCdqqh8Tn5MAqNsIMfP4+Gja9E+ZP/4DhzqPXrNCwSIAAAAASUVORK5CYII=" />
1819
</view>
1920
</view>
21+
<view wx:if="{{product.properties && product.properties.length}}">
22+
<view class="product-property" wx:for="{{product.properties}}" wx:for-item="property" wx:key="{{property.id}}">
23+
<view class="product-property-name">{{property.name}}:</view>
24+
<view>
25+
<view class="text-radio-container">
26+
<view bindtap="onPropertyChange" data-id="{{property.id + '-' + item.id}}"
27+
class="text-radio {{item.selected ? 'text-radio-selected' : ''}}" wx:for="{{property.values}}" wx:key="{{item.id}}">{{item.name}}</view>
28+
</view>
29+
</view>
30+
</view>
31+
</view>
2032
<view class="buy-count-box">
2133
<view>
2234
<view class="buy-count-title">购买数量:</view>

‎wexin/pages/product/product.js

+141-6
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,16 @@ var config = require('../../config/config.js');
22

33
Page({
44
data: {
5-
id : '',
6-
product : null,
7-
swiperHeight : '',
5+
id : '',
6+
product : null,
7+
swiperHeight : '',
8+
buyAnimationData : {},
9+
buyPopupVisible : false,
10+
//小程序不能获取组件的高度，暂时写个相对较大的固定值
11+
buyPopupBottom : '-1000rpx',
12+
propertyNames : ''
813
},
9-
onPriceTap: function() {
14+
onPriceTap() {
1015

1116
},
1217
onHomeTap() {
@@ -38,7 +43,7 @@ Page({
3843
}
3944
});
4045
},
41-
onLoad: function(options) {
46+
onLoad(options) {
4247
var self = this;
4348
this.setData({
4449
id: options.id
@@ -69,10 +74,140 @@ Page({
6974
product.contents[i].value = config.static.imageDomain + url;
7075
}
7176
}
77+
78+
product.properties = [
79+
{
80+
id: 1,
81+
name: '尺寸',
82+
values: [
83+
{
84+
id: 1,
85+
parentId: 1,
86+
name: 'S',
87+
},
88+
{
89+
id: 2,
90+
parentId: 1,
91+
name: 'M',
92+
},
93+
{
94+
id: 3,
95+
parentId: 1,
96+
name: 'L',
97+
},
98+
{
99+
id: 4,
100+
parentId: 1,
101+
name: 'XL',
102+
},
103+
{
104+
id: 5,
105+
parentId: 1,
106+
name: 'XXL',
107+
}
108+
]
109+
},
110+
{
111+
id: 2,
112+
name: '颜色',
113+
values: [
114+
{
115+
id: 1,
116+
parentId: 2,
117+
name: '红色',
118+
},
119+
{
120+
id: 2,
121+
parentId: 2,
122+
name: '绿色',
123+
},
124+
{
125+
id: 3,
126+
parentId: 2,
127+
name: '红色',
128+
},
129+
{
130+
id: 4,
131+
parentId: 2,
132+
name: '红色',
133+
},
134+
{
135+
id: 5,
136+
parentId: 2,
137+
name: '红色',
138+
},
139+
{
140+
id: 6,
141+
parentId: 2,
142+
name: '绿色',
143+
}
144+
]
145+
}
146+
];
147+
var propertyNames = '';
148+
for (var i = 0; i < product.properties.length; i++) {
149+
propertyNames += (product.properties[i].name + ' ');
150+
}
72151
self.setData({
73-
product: product
152+
product : product,
153+
propertyNames : propertyNames
74154
});
75155
}
76156
});
157+
},
158+
onPropertyChange(event) {
159+
var data = event.currentTarget.dataset.id;
160+
var dataArr = data.split('-');
161+
var parentId = dataArr[0];
162+
var id = dataArr[1];
163+
var properties = this.data.product.properties;
164+
for (var i = 0; i < properties.length; i++) {
165+
if (parentId == properties[i].id) {
166+
var values = properties[i].values;
167+
for (var j = 0; j < values.length; j++) {
168+
if (values[j].id == id) {
169+
values[j].selected = !values[j].selected;
170+
} else {
171+
values[j].selected = false;
172+
}
173+
}
174+
}
175+
}
176+
this.setData({
177+
product: this.data.product
178+
});
179+
},
180+
onWillBuy() {
181+
var self = this;
182+
var animation = wx.createAnimation({
183+
duration : 300,
184+
timingFunction : 'ease-out'
185+
});
186+
animation.bottom(0).step();
187+
this.setData({
188+
buyPopupVisible : true,
189+
buyPopupBottom : this.data.buyPopupBottom
190+
});
191+
setTimeout(function() {
192+
self.setData({
193+
buyAnimationData : animation.export()
194+
});
195+
}, 50);
196+
},
197+
onWillHideBuy() {
198+
var self = this;
199+
var animation = wx.createAnimation({
200+
duration : 300,
201+
timingFunction : 'ease-in'
202+
});
203+
animation.bottom(this.data.buyPopupBottom).step();
204+
this.setData({
205+
buyAnimationData : animation.export()
206+
});
207+
setTimeout(function() {
208+
self.setData({
209+
buyPopupVisible : false
210+
});
211+
}, 330);
77212
}
78213
})

‎wexin/pages/product/product.wxml

+3-3
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</view>
2929
</view>
3030
<view class="product-spec-picker">
31-
<view class="product-spec">选择: 规格</view>
31+
<view bindtap="onWillBuy" class="product-spec">选择: {{propertyNames}}</view>
3232
<view style="flex: 1;"></view>
3333
<view class="product-spec-arrow">
3434
<image class="product-spec-arrow-img" src="../../icons/right_arrow.png"></image>
@@ -57,7 +57,7 @@
5757
<text class="cart-text">购物车</text>
5858
</view>
5959
<view bindtap="onAddToCartTap" class="tabbar-item tabbar-add-cart"><text>加入购物车</text></view>
60-
<view class="tabbar-item tabbar-buy-now"><text>立即购买</text></view>
60+
<view bindtap="onWillBuy" class="tabbar-item tabbar-buy-now"><text>立即购买</text></view>
6161
</view>
62-
<template is="buy" data="{{product}}"/>
62+
<template is="buy" data="{{product: product, buyPopupBottom: buyPopupBottom, buyPopupVisible: buyPopupVisible, buyAnimationData: buyAnimationData, onPropertySelect: onPropertySelect}}"/>
6363
</view>

‎wexin/pages/product/product.wxss

+18-6
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,6 @@ page {
223223

224224
.buy-popup {
225225
position: absolute;
226-
bottom: 0;
227226
width: 100%;
228227
}
229228

@@ -235,14 +234,15 @@ page {
235234
.product-buy-info {
236235
display: flex;
237236
flex-direction: rows;
238-
margin-bottom: 30rpx;
237+
margin-bottom: 40rpx;
239238
}
240239

241240
.product-buy-info-close-box {
242241
padding-top: 20rpx;
243-
width: 48rpx;
244-
height: 48rpx;
245-
margin-right: 30rpx;
242+
width: 108rpx;
243+
height: 80rpx;
244+
text-align: center;
245+
background: #fff;
246246
}
247247

248248
.product-buy-info-close {
@@ -276,7 +276,6 @@ page {
276276
.product-buy-info-name {
277277
font-size: 36rpx;
278278
line-height: 48rpx;
279-
280279
overflow : hidden;
281280
text-overflow: ellipsis;
282281
display: -webkit-box;
@@ -326,4 +325,17 @@ page {
326325
color: #fff;
327326
font-size: 48rpx;
328327
background-color: #fc464a;
328+
}
329+
330+
.product-property {
331+
border-top: 1px #e2e2e2 solid;
332+
padding-top: 20rpx;
333+
padding-bottom: 6rpx;
334+
}
335+
336+
.product-property-name {
337+
font-size: 36rpx;
338+
height: 60rpx;
339+
line-height: 60rpx;
340+
margin-bottom: 12rpx;
329341
}

0 commit comments

Comments
 (0)