购买面板增加产品属性选择

liangdas · Jun 25, 2017 · ba85e4a · ba85e4a
1 parent 4101096
commit ba85e4a
Show file tree

Hide file tree

Showing 7 changed files with 215 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -5,24 +5,24 @@
 <img src="http://res.cloudinary.com/dcemaqxcp/image/upload/c_scale,q_40,w_640/v1495726849/D55DF2778A92A721C4B5A509AE7ACD96_lkz2g8.jpg" width="320" alt=""/>
 
 ## 项目环境搭建
-1 **克隆代码**
+* **克隆代码**
 
 ```
 git clone https://github.com/shen100/wemall.git
 ``` 
 
-2 **配置nginx**  
+* **配置nginx**  
 将`wemall/nginx/dev.wemall.com.conf`文件拷贝到nginx的虚拟主机目录下  
 
-3 **配置hosts**    
+* **配置hosts**    
 127.0.0.1 dev.wemall.com  
 
-4 **创建数据库**  
+* **创建数据库**  
 先创建数据库如`wemall`，再use wemall，然后导入`wemall/sql/wemall.sql` 
 >注意: 本地开发模式下，数据库是`wemall`，用户是`root`，密码是`test1234`  
 >可以通过`wemall/configuration.json`配置文件进行修改  
 
-5 **安装node.js第三方模块**  
+* **安装node.js第三方模块**  
 进入`wemall/nodejs`目录，运行命令
 
 ```
@@ -35,7 +35,7 @@ npm install
 npm install --registry=https://registry.npm.taobao.org
 ```
 
-6 **启动node.js程序**  
+* **启动node.js程序**  
 进入`wemall/nodejs`目录，运行命令
 
 ```
@@ -48,13 +48,16 @@ npm start
 npm run staticServ
 ```
 
-7 **运行go程序**  
-进入`wemall`目录下，`将configuration.dev.json`改名`为configuration.json`, 运行
+* **运行go程序**  
+进入`wemall`目录，`将configuration.dev.json`改名`为configuration.json`, 运行
 
 ```
 go run main.go
 ```
 
+* **微信小程序**   
+进入`wemall/weixin`目录，`将config.dev.js`改名`为config.js`, 
+
 ## 技术选型
 ### 前端
 * web服务器: nginx

diff --git a/wexin/app.wxss b/wexin/app.wxss
@@ -4,7 +4,7 @@
 }
 
 .input-number-icon {
-    border: 1px #aaa solid;
+    border: 1px #d2d2d2 solid;
     width: 60rpx;
     height: 60rpx;
     background-color: #fff;
@@ -23,6 +23,29 @@
     height: 60rpx;
     color: #222;
     font-size: 36rpx;
-    border-top: 1px #aaa solid;
-    border-bottom: 1px #aaa solid;
+    border-top: 1px #d2d2d2 solid;
+    border-bottom: 1px #d2d2d2 solid;
 }
+
+.text-radio-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.text-radio {
+    margin-right: 32rpx;
+    margin-bottom: 32rpx;
+    color: #333;
+    font-size: 32rpx;
+    padding: 0 30rpx;
+    height: 60rpx;
+    line-height: 60rpx;
+    background: #f6f6f6;
+    border-radius: 12rpx;
+}
+
+.text-radio-selected {
+    color: #fff;
+    background: #fc464a;
+}
diff --git a/wexin/config/config.js → wexin/config/config.dev.js b/wexin/config/config.js → wexin/config/config.dev.js
diff --git a/wexin/pages/product/components/buy.wxml b/wexin/pages/product/components/buy.wxml
@@ -1,9 +1,10 @@
 <import src="../../../components/InputNumber.wxml" />
+<import src="../../../components/TextRadio.wxml" />
 
 <template name="buy">
-    <view class="product-buy">
-        <view class="product-buy-bg"></view>
-        <view class="buy-popup">
+    <view wx:if="{{buyPopupVisible}}" class="product-buy">
+        <view bindtap="onWillHideBuy" class="product-buy-bg"></view>
+        <view class="buy-popup" animation="{{buyAnimationData}}" style="bottom: {{buyPopupBottom}};">
             <view class="buy-product-prop">
                 <view class="product-buy-info">
                     <view class="product-buy-info-img-box">
@@ -13,10 +14,21 @@
                         <view class="product-buy-info-name">{{product.name}}阿道夫阿卡的风景爱疯啊阿迪飞道夫阿卡的风景爱疯啊阿迪飞道夫阿卡的风景爱疯啊阿迪飞</view>
                         <view class="product-buy-info-price">¥ {{product.price}}</view>
                     </view>
-                    <view class="product-buy-info-close-box">
+                    <view bindtap="onWillHideBuy" class="product-buy-info-close-box">
                         <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=" />
                     </view>
                 </view>
+                <view wx:if="{{product.properties && product.properties.length}}">
+                    <view class="product-property" wx:for="{{product.properties}}" wx:for-item="property" wx:key="{{property.id}}">
+                        <view class="product-property-name">{{property.name}}:</view>
+                        <view>
+                            <view class="text-radio-container">
+                                <view bindtap="onPropertyChange" data-id="{{property.id + '-' + item.id}}" 
+                                    class="text-radio {{item.selected ? 'text-radio-selected' : ''}}" wx:for="{{property.values}}" wx:key="{{item.id}}">{{item.name}}</view>   
+                            </view>
+                        </view>
+                    </view>
+                </view>
                 <view class="buy-count-box">
                     <view>
                         <view class="buy-count-title">购买数量:</view>

diff --git a/wexin/pages/product/product.js b/wexin/pages/product/product.js
@@ -2,11 +2,16 @@ var config   = require('../../config/config.js');
 
 Page({
     data: {
-        id           : '',
-        product      : null,
-        swiperHeight : '',
+        id               : '',
+        product          : null,
+        swiperHeight     : '',
+        buyAnimationData : {},
+        buyPopupVisible  : false,
+        //小程序不能获取组件的高度，暂时写个相对较大的固定值
+        buyPopupBottom   : '-1000rpx',
+        propertyNames    : ''
     },
-    onPriceTap: function() {
+    onPriceTap() {
 
     },
     onHomeTap() {
@@ -38,7 +43,7 @@ Page({
             }
         });
     },
-    onLoad: function(options) {
+    onLoad(options) {
         var self = this;
         this.setData({
             id: options.id
@@ -69,10 +74,140 @@ Page({
                         product.contents[i].value = config.static.imageDomain + url;
                     }
                 }
+
+                product.properties = [
+                    {
+                        id: 1, 
+                        name: '尺寸',
+                        values: [
+                            {
+                                id: 1,
+                                parentId: 1,
+                                name: 'S',
+                            },
+                            {
+                                id: 2,
+                                parentId: 1,
+                                name: 'M',
+                            },
+                            {
+                                id: 3,
+                                parentId: 1,
+                                name: 'L',
+                            },
+                            {
+                                id: 4,
+                                parentId: 1,
+                                name: 'XL',
+                            },
+                            {
+                                id: 5,
+                                parentId: 1,
+                                name: 'XXL',
+                            }
+                        ]
+                    },
+                    {
+                        id: 2,
+                        name: '颜色',
+                        values: [
+                            {
+                                id: 1,
+                                parentId: 2,
+                                name: '红色',
+                            },
+                            {
+                                id: 2,
+                                parentId: 2,
+                                name: '绿色',
+                            },
+                            {
+                                id: 3,
+                                parentId: 2,
+                                name: '红色',
+                            },
+                            {
+                                id: 4,
+                                parentId: 2,
+                                name: '红色',
+                            },
+                            {
+                                id: 5,
+                                parentId: 2,
+                                name: '红色',
+                            },
+                            {
+                                id: 6,
+                                parentId: 2,
+                                name: '绿色',
+                            }
+                        ]
+                    }
+                ];
+                var propertyNames = '';
+                for (var i = 0; i < product.properties.length; i++) {
+                    propertyNames += (product.properties[i].name + ' ');
+                }
                 self.setData({
-                    product: product 
+                    product       : product,
+                    propertyNames : propertyNames
                 });
             }
         });
+    },
+    onPropertyChange(event) {
+        var data       = event.currentTarget.dataset.id;
+        var dataArr    = data.split('-');
+        var parentId   = dataArr[0];
+        var id         = dataArr[1];
+        var properties = this.data.product.properties;
+        for (var i = 0; i < properties.length; i++) {
+            if (parentId == properties[i].id) {
+                var values = properties[i].values;
+                for (var j = 0; j < values.length; j++) {
+                    if (values[j].id == id) {
+                        values[j].selected = !values[j].selected;
+                    } else {
+                        values[j].selected = false;
+                    }
+                }
+            }
+        }
+        this.setData({
+            product: this.data.product
+        });
+    },
+    onWillBuy() {
+        var self = this;
+        var animation = wx.createAnimation({
+            duration       : 300,
+            timingFunction : 'ease-out'    
+        });
+        animation.bottom(0).step();
+        this.setData({
+            buyPopupVisible : true,
+            buyPopupBottom  : this.data.buyPopupBottom
+        });
+        setTimeout(function() {
+            self.setData({
+                buyAnimationData : animation.export()
+            });    
+        }, 50);
+    },
+    onWillHideBuy() {
+        var self = this;
+        var animation = wx.createAnimation({
+            duration       : 300,
+            timingFunction : 'ease-in'    
+        });
+        animation.bottom(this.data.buyPopupBottom).step();
+        this.setData({
+            buyAnimationData : animation.export()
+        });
+        setTimeout(function() {
+            self.setData({
+                buyPopupVisible : false
+            });    
+        }, 330);
     }
 })
diff --git a/wexin/pages/product/product.wxml b/wexin/pages/product/product.wxml
@@ -28,7 +28,7 @@
                 </view>
             </view>
             <view class="product-spec-picker">
-                <view class="product-spec">选择: 规格</view>
+                <view bindtap="onWillBuy" class="product-spec">选择: {{propertyNames}}</view>
                 <view style="flex: 1;"></view>
                 <view class="product-spec-arrow">
                     <image class="product-spec-arrow-img" src="../../icons/right_arrow.png"></image>
@@ -57,7 +57,7 @@
             <text class="cart-text">购物车</text>
         </view>
         <view bindtap="onAddToCartTap" class="tabbar-item tabbar-add-cart"><text>加入购物车</text></view>
-        <view class="tabbar-item tabbar-buy-now"><text>立即购买</text></view>
+        <view bindtap="onWillBuy" class="tabbar-item tabbar-buy-now"><text>立即购买</text></view>
     </view>
-    <template is="buy" data="{{product}}"/>
+    <template is="buy" data="{{product: product, buyPopupBottom: buyPopupBottom, buyPopupVisible: buyPopupVisible, buyAnimationData: buyAnimationData, onPropertySelect: onPropertySelect}}"/>
 </view>
diff --git a/wexin/pages/product/product.wxss b/wexin/pages/product/product.wxss
@@ -223,7 +223,6 @@ page {
 
 .buy-popup {
     position: absolute;
-    bottom: 0;
     width: 100%;
 }
 
@@ -235,14 +234,15 @@ page {
 .product-buy-info {
     display: flex;
     flex-direction: rows;
-    margin-bottom: 30rpx;
+    margin-bottom: 40rpx;
 }
 
 .product-buy-info-close-box {
     padding-top: 20rpx;
-    width: 48rpx;
-    height: 48rpx;
-    margin-right: 30rpx;
+    width: 108rpx;
+    height: 80rpx;
+    text-align: center;
+    background: #fff;
 }
 
 .product-buy-info-close {
@@ -276,7 +276,6 @@ page {
 .product-buy-info-name {
     font-size: 36rpx;
     line-height: 48rpx;
-
     overflow : hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -326,4 +325,17 @@ page {
     color: #fff;
     font-size: 48rpx;
     background-color: #fc464a;
+}
+
+.product-property {
+    border-top: 1px #e2e2e2 solid;
+    padding-top: 20rpx;
+    padding-bottom: 6rpx;
+}
+
+.product-property-name {
+    font-size: 36rpx;
+    height: 60rpx;
+    line-height: 60rpx;
+    margin-bottom: 12rpx;
 }