carte page

app.json

@@ -1,7 +1,11 @@
 {
   "pages": [
-    "pages/userCenter/index",
 
+    "pages/carte/index",
+    "pages/myCart/index",
+    "pages/hot/index",
+    "pages/dishOrders/index",
+
     "pages/vip/index",
     "pages/myGrade/index",
     "pages/getGrade/index",
@@ -13,13 +17,9 @@
     "pages/activities/index",
     "pages/userInfo/index",
 
-    "pages/carte/index",
-    "pages/myCart/index",
-    "pages/hot/index",
-    "pages/dishOrders/index",
-
     "pages/welcome/index",
     "pages/index/index",
+    "pages/userCenter/index",
     "pages/detail/index",
     "pages/evaluate/index"
   ],

pages/carte/index.js

@@ -4,6 +4,18 @@ const app = getApp()
 
 Page({
   data: {
+    showMenu: false
+  },
+  openMenus(event) {
+    if (event.currentTarget.dataset.close) {
+      this.setData({
+        showMenu: false
+      })
+    } else {
+      this.setData({
+        showMenu: !this.data.showMenu
+      })
+    }
   },
   onLoad() {
   },

pages/carte/index.wxml

@@ -1,4 +1,20 @@
 <!--index.wxml-->
 <view class="carte">
-  carte
+  <scroll-view class="carteWrap">
+    <view class="carteBtns"></view>
+    <view class="carteList"></view>
+    <view class="copyRight">金风凝香 提供技术支持</view>
+  </scroll-view>
+  <view class="carteMenusMask {{showMenu ? 'showMenuMask' : ''}}" data-close="{{true}}" bindtap='openMenus'></view>
+  <view class="carteMenus {{showMenu ? 'showMenu' : ''}}">
+    <view class="menuList"></view>
+    <view class="openMenus" bindtap='openMenus'>
+      <image src="../../assets/openMenusIcon.svg"></image>
+      <text>菜单</text>
+    </view>
+  </view>
+  <view class="basket">
+    <image src="../../assets/cart.svg"></image>
+    <text>购物车</text>
+  </view>
 </view>

pages/carte/index.wxss

@@ -1,7 +1,101 @@
 /**index.wxss**/
-page{
-  height:100%;
+
+page {
+  height: 100%;
+}
+
+.carte {
+  background: #dbd1de;
+  position: relative;
+  height: 100%;
+}
+
+.carteWrap {
+}
+
+.carteMenusMask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9;
+  background: rgba(0, 0, 0, 0.65);
+  transition: all 0.3s;
+  opacity: 0;
+}
+
+.showMenuMask {
+  opacity: 1;
+}
+
+.carteMenus {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 10;
+}
+
+.carteMenus .menuList {
+  background: #e3e2e2;
+  width: 0;
+  height: 100%;
+  transition: all 0.3s;
+}
+
+.showMenu .menuList {
+  width: 290rpx;
+}
+
+.carteMenus .openMenus {
+  background: #e3e2e2;
+  width: 60rpx;
+  height: 100rpx;
+  padding-right: 15rpx;
+  position: absolute;
+  top: 50%;
+  right: -74rpx;
+  transform: translateY(-50%);
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.carteMenus .openMenus image {
+  width: 35rpx;
+  height: 35rpx;
+}
+
+.carteMenus .openMenus text {
+  font-size: 22rpx;
+  color: #8e8c8f;
+}
+
+.basket {
+  border-radius: 63rpx;
+  border: solid 5rpx #fff;
+  background: rgba(220, 80, 50, 1);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 116rpx;
+  height: 116rpx;
+  position: fixed;
+  bottom: 40rpx;
+  right: 30rpx;
+}
+
+.basket image {
+  width: 42rpx;
+  height: 42rpx;
+}
+
+.basket text {
+  font-size: 24rpx;
+  color: #fff;
 }
-.carte{
-  height:100%;
-}

pages/index/index.wxml

@@ -114,6 +114,6 @@
       <view class="evalsTotal" bindtap="goEvaluate">共有{{evalsInfo.total}}条评价 查看全部评价 <image src="../../assets/right.svg"></image></view>
     </view>
     <view class="copyRight">金风凝香 提供技术支持</view>
-    <view class="goPay" bindtap="goCarte"><image src="../../assets/carteIcon.svg"></image> 去点菜</view>
+    <!-- <view class="goPay" bindtap="goCarte"><image src="../../assets/carteIcon.svg"></image> 去点菜</view> -->
   </scroll-view>
 </view>