商店详情-购物车

app/app.wxss

@@ -65,6 +65,9 @@ button[type="primary"][plain] {
   color: #ff5801;
   border-color: #ff5801;
 }
+button[type="primary"][disabled] {
+  background-color: #ffa97c;
+}
 
 .button-hover[type=primary], .button-hover.weui-btn_primary {
   color: rgba(255, 255, 255, 0.8);

app/pages/shop/show.js

@@ -1,6 +1,14 @@
 // pages/shop/show.js
 
 var sliderWidth = 96;
+var initOrder = {
+  totalNum: 0,
+  totalPrice: 0,
+  totalGoodsPrice: 0,
+  totalPackingFee: 0,
+  goodsNums: {},
+  goods: []
+}
 
 Page({
   data: {
@@ -10,14 +18,9 @@ Page({
     sliderLeft: 0,
 
     activeMenuIndex: 0,
+    showCart: false,
 
-    order: {
+    order: initOrder,
-      totalPrice: 0,
-      totalNum: 0,
-      totalPackingFee: 0,
-      goodsNums: {},
-      goods: []
-    },
 
     info: {
       "seller_id": "2",
@@ -103,7 +106,7 @@ Page({
               "pic_hd2": null,
               "detail": "鸡翅饭 xx",
               "price": "20.00",
-              "packing_fee": "0.00",
+              "packing_fee": "2.00",
               "sales": "41",
               "praise": "0",
               "stock": "59",
@@ -314,58 +317,56 @@ Page({
     })
   },
 
-  addGoodsNum(order, goodsId, subId, num = 1) {
+  addGoodsNum(order, item) {
     var {goods, goodsNums} = order
-    var item;
+    var {goods_id, sub_id, num} = item
-    if (subId) {
+    var itemIndex;
-      item = goods.find(item => {
+    if (sub_id) {
-        return item['goods_id'] == goodsId && item['subId'] == subId
+      itemIndex = goods.findIndex(item => {
+        return item['goods_id'] == goods_id && item['sub_id'] == sub_id
       })
-      if (item) {
-        item['num'] += num
     } else {
-        goods.push({
+      itemIndex = goods.findIndex(item => {
-          'goods_id': goodsId,
+        return item['goods_id'] == goods_id
-          'sub_id': subId,
-          'num': num
       })
     }
+    if (itemIndex >= 0) {
+      goods[itemIndex]['num'] += num
     } else {
-      item = goods.find(item => {
+      goods.push(item)
-        return item['goods_id'] == goodsId
-      })
-      if (item) {
-        item['num'] += num
-      } else {
-        goods.push({
-          'goods_id': goodsId,
-          'num': num
-        })
     }
-    }
+    if (goodsNums[goods_id]) {
-    if (goodsNums[goodsId]) {
+      goodsNums[goods_id] += num
-      goodsNums[goodsId] += num
     } else {
-      goodsNums[goodsId] = num
+      goodsNums[goods_id] = num
     }
 
   },
-  removeGoodsNum(order, goodsId, subId, num = 1) {
+  removeGoodsNum(order, item) {
     var {goods, goodsNums} = order
-    if (subId) {
+    var {goods_id, sub_id, num} = item
-      for(let i=0, len=goods.length; i<len;i++) {
+    var itemIndex;
-        let item = goods[i]
+    if (sub_id) {
-        if(item['goods_id'] == goodsId && item['sub_id'] == subId) {
+      itemIndex = goods.findIndex(item => {
-
+        return item['goods_id'] == goods_id && item['sub_id'] == sub_id
-        }
+      })
-      }
     } else {
-
+      itemIndex = goods.findIndex(item => {
+        return item['goods_id'] == goods_id
+      })
     }
-    if (goodsNums[goodsId] > 1) {
+    if (itemIndex >= 0) {
-      goodsNums[goodsId] -= num
+      item = goods[itemIndex]
+      if (item.num > 1) {
+        item.num -= num
       } else {
-      delete goodsNums[goodsId]
+        goods.splice(itemIndex, 1)
+      }
+    }
+    if (goodsNums[goods_id] > 1) {
+      goodsNums[goods_id] -= num
+    } else {
+      delete goodsNums[goods_id]
     }
   },
 
@@ -373,16 +374,23 @@ Page({
     var {order, info: {menus}} = this.data;
     var {menuIndex, goodsIndex, subIndex} = e.currentTarget.dataset;
     var goods = menus[menuIndex].goods2[goodsIndex];
-    var goods_id = goods['goods_id']
+    var {goods_id, goods_name} = goods
-    var sub_id;
     if (subIndex >= 0) {
       goods = goods.sub_goods[subIndex];
-      sub_id = goods['sub_id']
+      var {sub_id, sub_name} = goods
     }
     order.totalNum += 1;
-    order.totalPrice += +goods.price;
+    order.totalGoodsPrice += +goods.price;
     order.totalPackingFee += +goods.packing_fee;
-    this.addGoodsNum(order, goods_id, sub_id)
+    order.totalPrice = order.totalGoodsPrice + order.totalPackingFee;
+    this.addGoodsNum(order, {
+      goods_id, goods_name,
+      sub_id, sub_name,
+      price: goods.price,
+      packing_fee: goods.packing_fee,
+      menuIndex, goodsIndex, subIndex,
+      num: 1
+    })
     this.setData({
       order
     })
@@ -398,11 +406,39 @@ Page({
       sub_id = goods['sub_id']
     }
     order.totalNum -= 1;
-    order.totalPrice -= +goods.price;
+    order.totalGoodsPrice -= +goods.price;
     order.totalPackingFee -= +goods.packing_fee;
-    this.removeGoodsNum(order, goods_id, sub_id)
+    order.totalPrice = order.totalGoodsPrice + order.totalPackingFee;
+    this.removeGoodsNum(order, {
+      goods_id, sub_id,
+      num: 1
+    })
     this.setData({
       order
     })
+    if (order.totalNum == 0) {
+      this.hideCart()
+    }
+  },
+  clearCart(e) {
+    this.setData({
+      order: initOrder,
+      showCart: false
+    })
+  },
+  hideCart(e) {
+    this.setData({
+      showCart: false
+    })
+  },
+  toggleCart(e) {
+    var {showCart, order: {totalNum}} = this.data
+
+    if (totalNum <= 0) {
+      return;
+    }
+    this.setData({
+      showCart: !showCart
+    })
   }
 })

app/pages/shop/show.wxml

@@ -1,4 +1,7 @@
-<import src="templates/goods-actions.wxml"/>
+<import src="templates/goods-actions.wxml" />
+<import src="templates/cart-box.wxml" />
+<import src="templates/sub-goods.wxml" />
+
 <!--pages/shop/show.wxml-->
 <view class="shop-show">
   <view class="shop-info weui-panel weui-panel_access">
@@ -33,7 +36,7 @@
     </view>
   </view>
   <view class="shop-content">
-    <view class=" weui-tab">
+    <view class=" weui-tab weui-tab_shop">
       <view class="weui-navbar">
         <block wx:for="{{tabs}}" wx:key="*this">
           <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
@@ -43,7 +46,8 @@
         <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
       </view>
       <view class="weui-tab__panel">
-        <view class="weui-tab__content menu-tab weui-flex" hidden="{{activeIndex != 0}}">
+        <view class="weui-tab__content menu-tab" hidden="{{activeIndex != 0}}">
+          <view class="menu-content weui-flex">
             <view class="menu-list">
               <view bindtap="menuClick" id="{{index}}" class="menu-item {{index == activeMenuIndex ? 'menu-item_active' : ''}} " wx:for="{{info.menus}}" wx:key="menu_id">
                 {{item.menu_name}}
@@ -64,15 +68,36 @@
                       选规格
                       <view wx:if="{{order['goodsNum'][item.goods_id] > 0}}" class="weui-badge goods-item__sub-goods-badge">{{order['goodsNum'][item.goods_id]}}</view>
                     </view>
-                  <template is="goods-actions" data="{{menu_index: activeMenuIndex, goods_index: index, num: order['goodsNums'][item.goods_id]}}" wx:else />
+                    <template is="goods-actions" data="{{menuIndex: activeMenuIndex, goodsIndex: index, num: order['goodsNums'][item.goods_id]}}" wx:else />
-                  
                   </view>
                 </view>
               </view>
             </view>
           </view>
+          <view class="menu-cart weui-flex">
+            <view bindtap="toggleCart" class="weui-flex__item menu-cart__content weui-flex">
+              <view wx:if="{{!showCart}}" class="menu-cart__badge-wrap">
+                <image class="menu-cart__icon" src="{{order.totalNum > 0 ? '/images/cart-full@2x.png': '/images/cart-empty@2x.png'}}"></image>
+                <view wx:if="{{order.totalNum > 0}}" class="weui-badge menu-cart__badge">{{order.totalNum}}</view>
+              </view>
+              <view class="weui-flex__item menu-cart__price-wrap">
+                <view class="menu-cart__price" wx:if="{{order.totalPrice > 0}}">¥{{order.totalPrice}}</view>
+                <view class="text-small grey-color">另需配送费{{info.delivery_fee}}元</view>
+              </view>
+            </view>
+            <button class="weui-btn menu-cart__btn" type="primary" disabled="{{order.totalPrice < info.min_price ? true: false}}">
+              <block wx:if="{{order.totalPrice > 0 }}">
+                <text wx:if="{{order.totalPrice > info.min_price}}">选好了</text>
+                <text wx:else>还差{{info.min_price - order.totalPrice}}元起送</text>
+              </block>
+              <text wx:else>{{info.min_price}}元起送</text>
+            </button>
+          </view>
+        </view>
         <view class="weui-tab__content" hidden="{{activeIndex != 1}}">选项二的内容</view>
       </view>
     </view>
   </view>
 </view>
+<template wx:if="{{showCart}}" is="cart-box" data="{{...order}}" />
+<template  is="sub-goods" />

app/pages/shop/show.wxss

@@ -1,6 +1,7 @@
 /* pages/shop/show.wxss */
-
 @import './templates/goods-actions.wxss';
+@import './templates/cart-box.wxss';
+@import './templates/sub-goods.wxss';
 
 .shop-show {
   display: flex;
@@ -65,19 +66,32 @@
 }
 
 .shop-content {
+  position: relative;
   flex: 1;
-  height: 0;
   background-color: #fff;
 }
+.weui-tab_shop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+}
 
 /* menu-tab */
 
 .menu-tab {
+  position: relative;
   padding-bottom: 50px;
   box-sizing: border-box;
   height: 100%;
 }
 
+.menu-content {
+  height: 100%;
+}
+
 .menu-list {
   width: 80px;
   font-size: 13px;
@@ -114,9 +128,11 @@
   margin-left: 8px;
   padding: 8px 8px 8px 0;
 }
+
 .goods-item:not(:last-child) {
   border-bottom: 1rpx solid #e8e8e8;
 }
+
 .goods-item__name {
   font-weight: 400;
 }
@@ -147,3 +163,54 @@
   top: -0.5em;
   right: -0.5em;
 }
+
+.menu-cart {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 50px;
+  align-items: center;
+}
+.menu-cart__content {
+  height: 50px;
+  align-items: center;
+}
+
+.menu-cart__badge-wrap {
+  position: relative;
+  top: -10px;
+  margin-left: 10px;
+}
+.menu-cart__badge {
+  position: absolute;
+  top: -.4em;
+  right: -.4em;
+}
+
+.menu-cart__icon {
+  width: 50px;
+  height: 50px;
+}
+
+.menu-cart__price-wrap {
+  margin-left: 10px;
+}
+
+.menu-cart__btn[type=primary] {
+  margin: 0;
+  height: 50px;
+  min-width: 100px;
+  font-size: 16px;
+  line-height: 50px;
+  border: none;
+  border-radius: 0;
+}
+.menu-cart__btn::after {
+  content: none;
+}
+
+.menu-cart__price {
+  color: #ff5801;
+  font-size: 1.2em;
+}

app/pages/shop/templates/cart-box.wxml

@@ -0,0 +1,36 @@
+<import src="goods-actions"/>
+
+<template name="cart-box">
+  <view class="cart-box">
+    <view class="cart-box__overlay" bindtap="hideCart"></view>
+    <view class="cart-box__content">
+      <view class="cart-box__icon">
+        <image src="/images/cart-full@2x.png" class="cart-box__icon-img"></image>
+        <view wx:if="{{totalNum > 0}}" class="weui-badge cart-box__icon-badge">{{totalNum}}</view>
+      </view>
+      <view class="cart-box__hd weui-flex">
+        <view class="weui-flex__item">
+            餐盒费{{totalPackingFee}}元
+        </view>
+        <view class=" cart-box__btn-clear" bindtap="clearCart">
+            <image class="cart-box__btn-clear-img" src="/images/delete@2x.png"></image>清空购物车
+        </view>
+      </view>
+      <view class="cart-box__bd">
+        <view wx:for="{{goods}}" wx:key="index" class="cart-box__item">
+            <view class="cart-box__item-name">
+                {{item.goods_name}}
+                <view wx:if="{{item.sub_name}}" class="text-small grey-color">+{{item.sub_name}}</view>
+            </view>
+            <view class="cart-box__item-price">
+            ¥{{item.price}}
+            <view wx:if="{{item.packing_fee > 0}}" class="text-small grey-color">餐盒费{{item.packing_fee}}元</view>
+            </view>
+            <view class="cart-box__item-btns">
+                <template is="goods-actions" data="{{...item}}"></template>
+            </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>

app/pages/shop/templates/cart-box.wxss

@@ -0,0 +1,91 @@
+.cart-box {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 50px;
+    z-index: 1000;
+}
+
+.cart-box__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.cart-box__content {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #fff;
+}
+
+.cart-box__hd {
+    position: relative;
+    padding: 8px;
+    background-color: #F4F4F4;
+}
+
+.cart-box__hd::before {
+    content: '';
+    position: absolute;
+    top: -5px;
+    left: 26px;
+    height: 10px;
+    width: 10px;
+    background-color: #F4F4F4;
+    transform: rotate(45deg);
+}
+
+.cart-box__list {
+    max-height: 150px;
+    overflow-y: auto;
+}
+
+.cart-box__item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 1rpx solid #e8e8e8;
+}
+
+.cart-box__item-name {
+    flex: 1;
+}
+
+.cart-box__item-price {
+    padding: 0 10px;
+    color: #ff5801;
+    text-align: right;
+}
+
+
+.cart-box__btn-clear {
+    color: #999;
+}
+.cart-box__btn-clear-img {
+    margin: -4px 5px 0 0;
+    height: 18px;
+    width: 18px;
+    vertical-align: middle;
+}
+
+.cart-box__icon {
+    position: absolute;
+    top: -60px;
+    left: 8px;
+}
+.cart-box__icon-img {
+    height: 50px;
+    width: 50px;
+}
+
+.cart-box__icon-badge {
+    position: absolute;
+    top: -.4em;
+    right: -.4em;
+}

app/pages/shop/templates/goods-actions.wxml

@@ -1,9 +1,14 @@
 <template name="goods-actions">
   <view class="goods-actions weui-flex">
     <block wx:if="{{num > 0}}">
-      <view data-menu-index="{{menu_index}}" data-goods-index="{{goods_index}}" data-sub-index="{{sub_index}}" bindtap="decease" class="goods-action-btn goods-action-btn_decrease">-</view>
+      <view data-menu-index="{{menuIndex}}" data-goods-index="{{goodsIndex}}" data-sub-index="{{subIndex}}" bindtap="decrease" class="goods-action-btn goods-action-btn_decrease">
+        <image src="/images/decrease@2x.png" class="goods-action-btn__img"></image>
+      </view>
       <view class="goods-action-num">{{num}}</view>
     </block>
-    <view data-menu-index="{{menu_index}}" data-goods-index="{{goods_index}}" data-sub-index="{{sub_index}}" bindtap="increase" class="goods-action-btn goods-action-btn_increase">+</view>
+
+    <view data-menu-index="{{menuIndex}}" data-goods-index="{{goodsIndex}}" data-sub-index="{{subIndex}}" bindtap="increase" class="goods-action-btn goods-action-btn_increase">
+      <image src="/images/increase@2x.png" class="goods-action-btn__img"></image>
+    </view>
   </view>
 </template>

app/pages/shop/templates/goods-actions.wxss

@@ -1,22 +1,11 @@
 .goods-action-btn {
-    width: 25px;
+    width: 28px;
-    height: 25px;
+    height: 28px;
-    text-align: center;
-    color: #ff5801;
-    font-size: 1.2em;
-    line-height: 25px;
-    font-weight: 400;
-    box-sizing: border-box;
-    border-radius: 50%;
 }
 
-.goods-action-btn_decrease {
+.goods-action-btn__img {
-    border: 1rpx solid #e8e8e8;
+    height: 100%;
-}
+    width: 100%;
-
-.goods-action-btn_increase {
-    background-color: #ff5801;
-    color: #fff;
 }
 
 .goods-action-num {

app/pages/shop/templates/sub-goods.wxml

@@ -0,0 +1,23 @@
+<import src="goods-actions"/>
+
+<template name="sub-goods">
+  <view class="sub-goods">
+    <view class="sub-goods__overlay"></view>
+    <view class="sub-goods__content">
+      <view class="sub-goods__hd">
+        test
+      </view>
+      <view class="sub-goods__bd">
+        <view >规格: </view>
+        <view class="sub-goods__list">
+          <view class="sub-goods__item sub-goods__item_active">
+            750ml
+          </view>
+          <view class="sub-goods__item">
+            255ml
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>

app/pages/shop/templates/sub-goods.wxss

@@ -0,0 +1,41 @@
+.sub-goods {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+}
+
+.sub-goods__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.sub-goods__content {
+    position: absolute;
+    left: 50%;
+    top: 30%;
+    width: 300px;
+    box-sizing: border-box;
+    background-color: #fff;
+    transform: translateX(-50%);
+    border-radius: 5px;
+}
+
+.sub-goods__hd {
+    padding: 5px 0;
+    text-align: center;
+}
+
+.sub-goods__bd {
+    padding: 10px;
+}
+
+.sub-goods__item {
+    
+}