增加购物车页面

liangdas · May 31, 2017 · 6cbb401 · 6cbb401
1 parent a619a93
commit 6cbb401
Show file tree

Hide file tree

Showing 11 changed files with 218 additions and 24 deletions.
diff --git a/wexin/icons/cart_logo.png b/wexin/icons/cart_logo.png
diff --git a/wexin/icons/check.png b/wexin/icons/check.png
diff --git a/wexin/icons/uncheck.png b/wexin/icons/uncheck.png
diff --git a/wexin/pages/cart/cart.js b/wexin/pages/cart/cart.js
@@ -1,10 +1,37 @@
+var config   = require('../../config/config.js');
+
 Page({
     data: {
-        name: 'test'
+        appName: config.name,
+        carts: []
     },
     onLoad: function() {
+        var carts = [
+            {
+                id: 1,
+                name: "【爱宝宝母婴微商城】防腹泻奶粉——赋儿嘉",
+                image: {
+                    url: "/upload/img/2017/05/28/4ad4c6f6-fc95-4a1e-940b-81f2e6bceaee.jpg"
+                },
+                price: 198,
+                count: 2
+            },
+            {
+                id: 2,
+                name: "【爱宝宝母婴微商城】防腹泻奶粉",
+                image: {
+                    url: "/upload/img/2017/05/28/4ad4c6f6-fc95-4a1e-940b-81f2e6bceaee.jpg"
+                },
+                price: 298,
+                count: 3
+            }
+        ]
+        for (var i = 0; i < carts.length; i++) {
+            carts[i].image.url = config.static.imageDomain + carts[i].image.url;
+            carts[i].checked = true;
+        }
         this.setData({
-            name: 'xxx'
-        })
+            carts: carts 
+        });
     }
 })
diff --git a/wexin/pages/cart/cart.json b/wexin/pages/cart/cart.json
@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "购物车"
+}
diff --git a/wexin/pages/cart/cart.wxml b/wexin/pages/cart/cart.wxml
@@ -1,4 +1,35 @@
-<!--购物车-->
-<view class="container log-list">
-    <text class="log-item">我的购物车</text>
+<view class="cart-box">
+    <scroll-view class="cart-box-scroll">
+        <view class="cart-wemall-header">
+            <view class="wemall-checkbox-container">
+                <image wx:if="{{allChecked}}" mode="aspectFit" src="../../icons/check.png" class="wemall-checkbox"></image>
+                <image wx:else mode="aspectFit" src="../../icons/uncheck.png" class="wemall-checkbox"></image>
+            </view>
+            <view class="cart-wemall-logo-name">
+                <view>
+                    <image mode="aspectFit" src="../../icons/cart_logo.png" class="cart-wemall-logo"></image>
+                </view>
+                <view class="cart-wemall-name">{{appName}}</view>
+            </view>
+            <view class="wemall-action">
+                <view class="wemall-action-edit">编辑</view>
+            </view>
+        </view>
+        <view class="cart-item" wx:for="{{carts}}" wx:key="{{item.id}}">
+            <view class="wemall-checkbox-container" style="margin-top: 70rpx;">
+                <image wx:if="{{item.checked}}" mode="aspectFit" src="../../icons/check.png" class="wemall-checkbox"></image>
+                <image wx:else mode="aspectFit" src="../../icons/uncheck.png" class="wemall-checkbox"></image>
+            </view>
+            <view>
+                <image class="product-image" mode="aspectFit" src="{{item.image.url}}"></image>
+            </view>
+            <view class="product-info">
+                <text class="product-name">{{item.name}}</text>
+                <view class="product-price-box">
+                    <view class="product-price">¥ {{item.price}}</view>
+                    <view class="product-count">X{{item.count}}</view>
+                </view>
+            </view>
+        </view>
+    </scroll-view>
 </view>
diff --git a/wexin/pages/cart/cart.wxss b/wexin/pages/cart/cart.wxss
@@ -0,0 +1,114 @@
+page {
+    width: 100%;
+    height: 100%;
+    font-size: 0;
+}
+
+.cart-box {
+    background-color: #f9f9f9;
+    width: 100%;
+    height: 100%;
+}
+
+.cart-box-scroll {
+    width: 100%;
+    padding-bottom: 120rpx;
+    background-color: #fff;
+}
+
+.cart-wemall-header {
+    font-size: 0;
+    margin-top: 30rpx;
+    height: 80rpx;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    background-color: #fff;
+}
+
+.cart-wemall-logo-name {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+
+.cart-wemall-logo {
+    width: 40rpx;
+    height: 40rpx;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.cart-wemall-name {
+    padding-left: 10rpx;
+    font-size: 40rpx;
+    line-height: 40rpx;
+    color: #222;
+}
+
+.wemall-action {
+    display: flex;
+    flex: 1;
+    text-align: right;
+    padding-right: 30rpx;
+}
+
+.wemall-action-edit {
+    flex: 1;
+    color: #666;
+    font-size: 32rpx;
+    line-height: 32rpx;
+}
+
+.wemall-checkbox-container {
+    text-align: center;
+    width: 90rpx;
+    height: 90rpx;
+}
+
+.wemall-checkbox {
+    width: 48rpx;
+    height: 48rpx;
+}
+
+.cart-item {
+    padding-top: 20rpx;
+    display: flex;
+    flex-direction: row;   
+    margin-bottom: 36rpx;
+    background-color: #f9f9f9;
+}
+
+.product-image {
+    width: 200rpx;
+    height: 200rpx;
+}
+
+.product-info {
+    margin-left: 20rpx;
+    flex: 1;
+    display: flex;
+    flex-direction: column;   
+    margin-right: 30rpx;
+}
+
+.product-name {
+    font-size: 36rpx;
+    color: #222;
+    line-height: 50rpx;
+}
+
+.product-price-box {
+    display: flex;
+    flex-direction: row;   
+}
+
+.product-price {
+    font-size: 36rpx;
+}
+
+.product-count {
+    font-size: 36rpx;
+    flex: 1;
+    text-align: right;
+}
diff --git a/wexin/pages/index/index.js b/wexin/pages/index/index.js
@@ -6,13 +6,16 @@ Page({
         categories: [],
         categoryIndex: 0,
         itemWidth: '',
-        products: []
+        products: [],
+
+
+        niaoBuShiColor: '',
     },
     onCategoryTap: function() {
-        testinAB.track('click', 1, function() {
+        testinAB.track('nbsbtnclick', 1, function() {
             wx.showModal({
                 title: '提示',
-                content: 'click指标上报成功'
+                content: 'nbsbtnclick 指标上报成功'
             })
         });    
     },
@@ -30,13 +33,6 @@ Page({
                 self.setData({
                     itemWidth: (res.screenWidth - 40) / 2 + 'px'
                 });
-                console.log((res.screenWidth - 60) / 2)
-                console.log(res.pixelRatio)
-                console.log(res.windowWidth)
-                console.log(res.screenWidth)
-                console.log(res.pixelRatio)
-                console.log(res.version)
-                console.log(res.platform)
             }
         });
 
@@ -66,15 +62,20 @@ Page({
         });
 
         var self = this;
-        testinAB.init('TESTIN_h7b3111f2-e238-441b-8951-24c4e2121c58');
+        testinAB.init('TESTIN_h793c3619-8bac-4ddb-b541-df2c3d7aa1b7');
         testinAB.setDefVars({
             selectedColor: '#e4393c'    
         });
 
-        testinAB.getVars(function(vars) {
-            console.log(vars.get('selectedColor'));
+        testinAB.getVars(function getVars(vars) {
+            var color = vars.get('color');
+            if (color == 'yellow') {
+                color = '#ff0';
+            } else if (color == 'red') {
+                color = '#f00';
+            }
             self.setData({
-                //selectedColor: vars.get('selectedColor')
+                niaoBuShiColor: color
             });
         });
     }

diff --git a/wexin/pages/index/index.wxml b/wexin/pages/index/index.wxml
@@ -4,9 +4,11 @@
             <image class="slideshow-img" mode="aspectFill" src="https://img13.360buyimg.com/da/jfs/t5458/60/2543073437/54409/fd724d/591c1354N4fd7c3a6.jpg"></image>
         </view>
         <scroll-view class="category-list" scroll-x>
-            <view wx:key="{{item.id}}" bindtap="onCategoryTap" class="category-item" 
+            <view wx:key="{{item.id}}" class="category-item" 
                 wx:for="{{categories}}" style="padding-left: {{ index == 0 ? '30rpx' : '0' }};">
-                <text style="color: {{categoryIndex == index ? '#e4393c' : '#666'}}">{{item.name}}</text>
+                <!-- <text style="color: {{categoryIndex == index ? '#e4393c' : '#666'}}">{{item.name}}</text> -->
+                <text bindtap="onCategoryTap"  style="color: {{ index == 1 && niaoBuShiColor ? niaoBuShiColor : (categoryIndex == index ? '#e4393c' : '#666')}}">{{item.name}}</text>
+
             </view>
         </scroll-view>
         <view class="product-list" style="display: {{itemWidth ? 'flex' : 'none'}};">

diff --git a/wexin/pages/product/product.js b/wexin/pages/product/product.js
@@ -1,11 +1,20 @@
-var config = require('../../config/config.js');
+var config   = require('../../config/config.js');
+var testinAB = require('../../sdk/sdk.js');
 
 Page({
     data: {
         id           : '',
         product      : null,
         swiperHeight : '',
     },
+    onPriceTap: function() {
+        testinAB.track('pricebtnclick', 1, function() {
+            wx.showModal({
+                title: '提示',
+                content: 'pricebtnclick 指标上报成功'
+            })
+        }); 
+    },
     onLoad: function(options) {
         var self = this;
         this.setData({
@@ -42,5 +51,12 @@ Page({
                 });
             }
         });
+
+        var self = this;
+        testinAB.getVars(function(vars) {
+            self.setData({
+                price: vars.get('price')
+            });
+        });
     }
 })
diff --git a/wexin/pages/product/product.wxml b/wexin/pages/product/product.wxml
@@ -14,7 +14,7 @@
             </view>
             <view class="product-price-box">
                 <text class="product-price-y">¥ </text>
-                <text class="product-price">{{product.price}}</text>
+                <text class="product-price" bindtap="onPriceTap">{{price ? price : product.price}}</text>
             </view>
             <view class="delivery-stock-box">
                 <view class="delivery-price">