微信小程序红色取号点菜服务页面样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!-- 可用组件：https://mp.weixin.qq.com/debug/wxadoc/dev/component/ -->
<view class="ordering">
  <!--餐馆顶部-->
  <view class="o-top">
    <image class="o-top-img" src="{{ restaurant.img }}"></image>
    <view class="o-top-name">
      {{ restaurant.name }}
      <text>{{ restaurant.status }}</text>
    </view>
    <view class="o-top-number">立即排号</view>
  </view>
  <!--中间导航-->
  <view class="o-center">
    <view bindtap="choose" data-tab="0" class="o-c-menu {{ currentmenu == 0 ? 'active' : ''}}">取号</view>
    <view bindtap="choose" data-tab="1" class="o-c-call {{ currentmenu == 1 ? 'active' : ''}}">点菜</view>
    <view bindtap="choose" data-tab="2" class="o-c-shop {{ currentmenu == 2 ? 'active' : ''}}">服务</view>
    <view bindtap="choose" data-tab="3" class="o-c-shop {{ currentmenu == 3 ? 'active' : ''}}">商家</view>
  </view>
  <!--导航内容0-->
  <view class="menu0" wx:if="{{ currentmenu == 0 }}">
    <view data-desk="0" bindtap="getdesk">小桌（1-2人）</view>
    <view data-desk="1" bindtap="getdesk">中桌（3-4人）</view>
    <view data-desk="2" bindtap="getdesk">大桌（5人以上）</view>
  </view>
  <!--导航内容1-->
  <view  wx:if="{{ currentmenu == 1 }}">
    <view class="menu1">
      <!--左侧导航选项-->
      <view class="menu0-left">
        <scroll-view scroll-y="true" style="height: {{ scrollHeight }}rpx">
          <view bindtap="leftChoose" data-menulistid="{{ item.id }}" class="{{ index == 0 ? 'iconfont icon-huo' : '' }} menu0-l-item {{ currentleftmenu == index ? 'active' : '' }}" data-menu="{{ index }}" wx:for="{{ restaurant.menuList }}" wx:key="unique">
            {{ item.title }}
          </view>
        </scroll-view>
      </view>
      <!--商品选项-->
      <view class="menu0-right">
        <!--优惠卷-->
        <view wx:if="{{ restaurant.coupon.id }}" class="shop-coupon posr">
          <view class="circle-wrap posa">
            <view class="circle" wx:for="0123456789"></view>
          </view>
          <view class="coupon">
            <view class="coupon-left">
              <text>{{ restaurant.coupon.delmoney }}元</text>
              <text>满{{ restaurant.coupon.condition }}元使用</text>
            </view>
            <view class="coupon-right">
              <view>{{ restaurant.name }}</view>
              <view>{{ restaurant.coupon.time }}</view>
            </view>
            <view bindtap="getCoupon" class="get-coupon" data-couponid="{{ restaurant.coupon.id }}">点击领取</view>
          </view>
        </view>
        <!--菜单内容-->
        <scroll-view scroll-y="true" scroll-with-animation="true"  scroll-into-view="{{ currentmenuid }}" style="height: {{ scrollHeight - needDistance }}rpx">
          <block wx:for="{{ restaurant.menuList }}" wx:for-item="menu0List">
            <!--商品分类标题-->
            <view class="menu0-r-title" id="{{ menu0List.id }}">{{ menu0List.title }}</view>
            <!--循环商品信息-->
            <view class="menu0-r-goods" data-menus="{{ index }}" wx:for="{{ menu0List.list }}" wx:key="unique">
              <image src="{{ item.img }}"></image>
              <view class="menu0-r-g">
                <view>{{ item.name }}</view>
                <view>月售 {{ item.count }} 好评 {{ item.good }}</view>
                <view class="menu0-r-price">
                  ￥ {{ item.price }} 元
                </view>
              </view>
              <!--购买商品按钮-->
              <view class="order-btn">
                <view style="visibility: {{ chooseGoods.goods[item.id] > 0 ? 'visible' : 'hidden' }}" class="del-btn" catchtap="delorder" data-goodsid="{{ item.id }}">-</view>
                <view style="visibility: {{ chooseGoods.goods[item.id] > 0 ? 'visible' : 'hidden' }}" class="order-number">{{ chooseGoods.goods[item.id] }}</view>
                <view class="add-btn" catchtap="addorder" data-goodsid="{{ item.id }}">+</view>
              </view>
            </view>
          </block>
        </scroll-view>
      </view>
    </view>
    <!--购物车-->
    <view class="shop-car-wrap {{ chooseGoods.allCount > 0 ? 'show' : '' }}">
      <view wx:if="{{ showShopCarContent && chooseGoods.money > 0 }}" class="shop-car-content">
        <view class="shop-car-content-title"><text style="color: #000;">我的购物车</text></view>
        <!--已选商品信息-->
        <scroll-view scroll-y="true" style="height: 470rpx">
          <block wx:for="{{ restaurant.menuList }}" wx:for-item="menu0List">
            <!--循环商品信息-->
            <view wx:if="{{ chooseGoods.goods[item.id] > 0 }}" class="menu0-r-goods" data-menus="{{ index }}" wx:for="{{ menu0List.list }}" wx:key="unique">
              <image src="{{ item.img }}"></image>
              <view class="menu0-r-g">
                <view>{{ item.name }}</view>
                <!--<view>月售 {{ item.count }} 好评 {{ item.good }}</view>-->
                <view class="menu0-r-price">
                  ￥ {{ item.price }} 元
                </view>
              </view>
              <!--购买商品按钮-->
              <view class="order-btn">
                <view style="visibility: {{ chooseGoods.goods[item.id] > 0 ? 'visible' : 'hidden' }}" class="del-btn" catchtap="delorder" data-goodsid="{{ item.id }}">-</view>
                <view style="visibility: {{ chooseGoods.goods[item.id] > 0 ? 'visible' : 'hidden' }}" class="order-number">{{ chooseGoods.goods[item.id] }}</view>
                <view class="add-btn" catchtap="addorder" data-goodsid="{{ item.id }}">+</view>
              </view>
            </view>
          </block>
        </scroll-view>
      </view>
      <view class="shop-car">
        <text bindtap="showContent" class="iconfont icon-gouwuche2"><text wx:if="{{ chooseGoods.allCount > 0 }}" class="shop-car-count">{{ chooseGoods.allCount }}</text></text>
        <text bindtap="showContent" class="shop-car-money">￥{{ chooseGoods.money }}元</text>
        <text bindtap="goCheckOrder" class="shop-car-btn">提交订单</text>
      </view>
    </view>
    <!--<view class="menu0-bottom"></view>-->
  </view>
  <!--导航内容2-->
  <view class="menu2" wx:if="{{ currentmenu == 2 }}">
    <view catchtap="menu1choose" data-tabmenu="{{ index }}" class="{{ item.icon }}" wx:for="{{ menu1content }}" wx:key="unique">
      {{ item.title }}
    </view>
  </view>
  <!--导航内容3-->
  <view class="menu3" wx:if="{{ currentmenu == 3 }}">
    <!--顶部地址和拨打电话-->
    <view class="menu2-top">
      <view class="menu2-top-left iconfont icon-icglobaltitlebar48iconfontmap">{{ restaurant.address }}</view>
      <view class="iconfont icon-dianhua" bindtap="callPhone"></view>
    </view>
  <scroll-view scroll-y="true" style="height: {{ scrollHeight2 }}rpx;" class="menu2-user-comment">
    <!--评分-->
    <view class="menu2-grade">
      <text class="menu2-grade-star iconfont icon-wuxing {{ restaurant.grade }}"></text>
      <text class="posr">
        <text>{{ restaurant.gradeNumber }}</text>
        <text>综合评分</text>
      </text>
    </view>
    <!--总体评论-->
    <view class="menu2-comment">
      <view class="menu2-comment-item" wx:for="{{ restaurant.comment}}" wx:key="unique">
        {{ item.content }}({{ item.number }})
      </view>
    </view>
    <!--用户评论-->

      <view class="user-detail-comment" wx:for="{{ comment }}" wx:key="unique">
        <view class="m-u-c-top">
          <image src="{{ item.img }}"></image>
          <view>{{ item.username }}</view>
          <view class="iconfont icon-wuxing {{ item.grade }}"></view>
          <view>{{ item.time }}</view>
        </view>
        <view class="menu2-comment">
          <view class="menu2-comment-item" wx:for="{{ item.userComment}}" wx:key="unique" wx:for-item="detailitem">
            {{ detailitem }}
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</view>
<!--遮罩层-->
<view bindtap="showContent" wx:if="{{ chooseGoods.money > 0 }}" class="mask {{ showMask ? 'active' : '' }}"></view>

二、wxss样式文件代码如下：

.o-top {
  height: 181rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #e5e5e5;
  padding: 33rpx 20rpx 20rpx;
  display: flex;
}
.o-top .o-top-img {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  margin-right: 70rpx;
}
.o-top .o-top-name {
  display: flex;
  flex-direction: column;
  font-size: 28rpx;
  color: #333;
}
.o-top .o-top-name text {
  margin-top: 18rpx;
  font-size: 24rpx;
  color: #999;
}
.o-top .o-top-name text::before {
  content: '满';
  color: #fff;
  background-color: #f00;
  padding: 2rpx 5rpx;
  margin-right: 10rpx;
}
.o-top .o-top-number {
  background-color: #f00;
  color: #fff;
  font-size: 24rpx;
  height: 47rpx;
  line-height: 47rpx;
  padding: 5rpx 15rpx;
  border-radius: 30rpx;
  text-align: center;
  transform: translate(200rpx, 80rpx);
}
.o-center {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1rpx solid #e5e5e5;
}
.o-center view {
  text-align: center;
  box-sizing: border-box;
  width: 33.33%;
  line-height: 54rpx;
  font-size: 26rpx;
}
.o-center .active {
  border-bottom: 6rpx solid #f00;
  font-weight: 700;
  text-shadow: 2rpx 2rpx 2rpx #eee;
}
.menu0 {
  padding: 0 50rpx;
}
.menu0 view {
  box-sizing: border-box;
  width: 100%;
  line-height: 70rpx;
  background-color: #f00;
  color: #fff;
  font-weight: 700;
  margin-top: 40rpx;
  border-radius: 70rpx;
  text-align: center;
}
.menu1 {
  display: flex;
}
.menu1 .menu0-left scroll-view {
  width: 168rpx;
  box-sizing: border-box;
  background-color: #eee;
}
.menu1 .menu0-left scroll-view view {
  line-height: 96rpx;
  margin: 0 20rpx;
  text-align: center;
  border-bottom: 1rpx dotted #c6c6c6;
}
.menu1 .menu0-left scroll-view .active {
  background-color: #fff;
  margin: 0;
  border-radius: 10rpx;
}
.menu1 .menu0-left scroll-view .icon-huo {
  margin: 0;
  position: relative;
}
.menu1 .menu0-left scroll-view .icon-huo::before {
  position: absolute;
  color: #f00;
  left: 0;
}
.menu1 .menu0-right {
  flex: 1;
}
.menu1 .menu0-right .shop-coupon {
  height: 142rpx;
  background-color: #f6f6f6;
  box-sizing: border-box;
  border-bottom: 1rpx solid #e5e5e5;
  padding: 22rpx 69rpx 23rpx 55rpx;
}
.menu1 .menu0-right .shop-coupon .circle-wrap {
  transform: translate(-5rpx, -2rpx);
}
.menu1 .menu0-right .shop-coupon .circle {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background-color: #f6f6f6;
}
.menu1 .menu0-right .shop-coupon .coupon {
  background-color: #fff;
  height: 95rpx;
  box-sizing: border-box;
  display: flex;
}
.menu1 .menu0-right .shop-coupon .coupon .coupon-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160rpx;
  font-size: 30rpx;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(90deg, #5394d5, #4984d5);
}
.menu1 .menu0-right .shop-coupon .coupon .coupon-left text:nth-child(2) {
  font-size: 20rpx;
  font-weight: 500;
}
.menu1 .menu0-right .shop-coupon .coupon .coupon-right {
  margin-left: 15rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
  color: #333;
}
.menu1 .menu0-right .shop-coupon .coupon .coupon-right view:nth-child(2) {
  color: #999;
  font-size: 20rpx;
}
.menu1 .menu0-right .shop-coupon .coupon .get-coupon {
  width: 113rpx;
  border: 1rpx solid #f00;
  border-radius: 30rpx;
  color: #f00;
  font-size: 20rpx;
  text-align: center;
  height: 31rpx;
  transform: translate(-9rpx, 50rpx);
  line-height: 31rpx;
}
.menu1 .menu0-right .menu0-r-title {
  line-height: 40rpx;
  font-size: 24rpx;
  padding-left: 16rpx;
  background-color: #f6f6f6;
}
.menu0-r-goods {
  padding: 25rpx 20rpx 22rpx 14rpx;
  border-bottom: 1rpx solid #e5e5e5;
  display: flex;
}
.menu0-r-goods image {
  width: 103rpx;
  height: 103rpx;
  margin-right: 29rpx;
}
.menu0-r-goods .menu0-r-g {
  display: flex;
  flex-direction: column;
  line-height: 38rpx;
}
.menu0-r-goods .menu0-r-g view:nth-child(1) {
  color: #333;
  font-size: 26rpx;
}
.menu0-r-goods .menu0-r-g view:nth-child(2) {
  color: #666;
  font-size: 22rpx;
}
.menu0-r-goods .menu0-r-g .menu0-r-price {
  font-size: 24rpx;
  color: #f00;
}
.order-btn {
  display: flex;
  transform: translate(10rpx, 70rpx);
}
.order-btn view {
  width: 60rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 30rpx;
  font-weight: 700;
  color: #fff;
  background-color: #0094ff;
  border-radius: 50%;
  margin-left: 5rpx;
}
.shop-car-wrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  background-color: #fff;
}
.shop-car-wrap .shop-car-content {
  box-sizing: border-box;
  position: fixed;
  bottom: 85rpx;
  width: 100%;
  height: 500rpx;
  background-color: #fff;
  border: 1rpx solid #000;
}
.shop-car-wrap .shop-car-content .shop-car-content-title {
  line-height: 30rpx;
  font-size: 20rpx;
}
.shop-car-wrap .shop-car-content .menu0-r-goods {
  padding: 0 20rpx;
  border-bottom: 1rpx solid #e5e5e5;
  display: flex;
  justify-content: space-around;
}
.shop-car-wrap .shop-car-content .menu0-r-goods image {
  width: 103rpx;
  height: 103rpx;
}
.shop-car-wrap .shop-car-content .menu0-r-goods .menu0-r-g {
  display: flex;
  flex-direction: column;
}
.shop-car-wrap .shop-car-content .menu0-r-goods .menu0-r-g view:nth-child(1) {
  color: #333;
  font-size: 26rpx;
}
.shop-car-wrap .shop-car-content .menu0-r-goods .menu0-r-g view:nth-child(2) {
  color: #666;
  font-size: 22rpx;
}
.shop-car-wrap .shop-car-content .menu0-r-goods .menu0-r-g .menu0-r-price {
  font-size: 24rpx;
  color: #f00;
}
.shop-car-wrap .shop-car-content .order-btn {
  display: flex;
  transform: translate(10rpx, 10rpx);
}
.shop-car-wrap .shop-car-content .order-btn view {
  width: 60rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 30rpx;
  font-weight: 700;
  color: #fff;
  background-color: #0094ff;
  border-radius: 50%;
  margin-left: 5rpx;
}
.shop-car-wrap .shop-car {
  display: flex;
  align-items: center;
}
.shop-car-wrap .shop-car text {
  width: 33.33%;
  line-height: 85rpx;
}
.shop-car-wrap .shop-car text:nth-child(1) {
  position: relative;
  text-align: center;
  font-size: 100rpx;
}
.shop-car-wrap .shop-car text:nth-child(1) .shop-car-count {
  position: absolute;
  top: -25rpx;
  right: 85rpx;
  background-color: #f00;
  width: 30rpx;
  text-align: center;
  border-radius: 50%;
  line-height: 30rpx;
  font-size: 18rpx;
}
.shop-car-wrap .shop-car text:nth-child(1)::before {
  display: block;
  transform: translateY(-10rpx);
}
.shop-car-wrap .shop-car text:nth-child(3) {
  text-align: center;
}
.show {
  background-color: #0094ff;
  color: #fff;
}
.show .iconfont::before {
  text-shadow: 0rpx -1rpx 2rpx #0094ff;
}
.menu2 {
  border-top: 10rpx solid #dfdfdf;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.menu2 view {
  width: 33.33%;
  height: 288rpx;
  box-sizing: border-box;
  font-size: 36rpx;
  line-height: 450rpx;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.menu2 .iconfont::before {
  display: block;
  position: absolute;
  top: -100rpx;
  left: 100rpx;
  transform: scale(3);
}
.menu2 .iconfont:nth-child(1)::before {
  color: #f15a24;
}
.menu2 .iconfont:nth-child(2)::before {
  color: #ff9839;
}
.menu2 .iconfont:nth-child(3)::before {
  color: #8cc63f;
}
.menu2 .iconfont:nth-child(4)::before {
  color: #29abe2;
}
.menu3 {
  border-top: 10rpx solid #dfdfdf;
}
.menu3 .menu2-top {
  display: flex;
  padding-left: 66rpx;
  line-height: 130rpx;
  border-bottom: 1rpx solid #eee;
}
.menu3 .menu2-top view:nth-child(2) {
  width: 113rpx;
  text-align: center;
}
.menu3 .menu2-top .menu2-top-left {
  flex: 1;
  position: relative;
  font-size: 30rpx;
}
.menu3 .menu2-top .menu2-top-left::before {
  display: inline-block;
  font-size: 40rpx;
  transform: translateX(-30rpx);
}
.menu3 .menu2-top .menu2-top-left::after {
  content: '';
  display: inline-block;
  height: 95rpx;
  width: 2rpx;
  position: absolute;
  top: 25rpx;
  right: 0;
  background-color: #efefef;
}
.menu3 .menu2-grade {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 130rpx;
  margin: 0 28rpx;
  border-bottom: 3rpx solid #dfdfdf;
}
.menu3 .menu2-grade .menu2-grade-star {
  flex: 1;
  margin-left: 200rpx;
}
.menu3 .menu2-grade .menu2-grade-star::before {
  color: #ccc;
}
.menu3 .menu2-grade .menu2-grade-star::after {
  color: #faee00;
}
.menu3 .menu2-grade .posr {
  width: 233rpx;
  height: 130rpx;
  box-sizing: border-box;
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
}
.menu3 .menu2-grade .posr text {
  display: block;
  text-align: center;
  line-height: 50rpx;
}
.menu3 .menu2-grade .posr text:nth-child(1) {
  font-size: 40rpx;
  font-weight: 700;
}
.menu3 .menu2-grade .posr text:nth-child(2) {
  color: #acacac;
  font-size: 30rpx;
}
.menu3 .menu2-grade .posr::before {
  content: '';
  display: inline-block;
  height: 95rpx;
  width: 2rpx;
  position: absolute;
  top: 25rpx;
  left: -20rpx;
  background-color: #efefef;
}
.menu3 .menu2-comment {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border-bottom: 1rpx solid #dfdfdf;
}
.menu3 .menu2-comment .menu2-comment-item {
  font-size: 24rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  background-color: #fdf899;
  margin: 5rpx;
}
.menu3 .m-u-c-top {
  display: flex;
  padding: 20rpx 20rpx 0 20rpx;
  align-items: center;
}
.menu3 .m-u-c-top view:nth-child(2) {
  font-size: 24rpx;
  font-weight: 700;
  margin-left: 20rpx;
}
.menu3 .m-u-c-top .iconfont {
  overflow: hidden;
  margin-left: 20rpx;
}
.menu3 .m-u-c-top .iconfont::before {
  color: #ccc;
}
.menu3 .m-u-c-top .iconfont::after {
  color: #faee00;
}
.menu3 .m-u-c-top view:nth-child(4) {
  flex: 1;
  text-align: right;
  font-size: 24rpx;
  color: #969696;
}
.menu3 .menu2-user-comment image {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
}
.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  bottom: 0;
  display: none;
  z-index: 99;
}
.active {
  display: block;
}

三、js页面代码如下：

'use strict';

// 获取全局应用程序实例对象
// const app = getApp()

// 创建页面实例对象
Page({
  /**
   * 页面的初始数据
   */
  data: {
    title: 'ordering',
    restaurant: {
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      name: '人马科技大饭堂',
      id: 'remaid',
      address: '汇德商业大厦501',
      tel: '123412341234',
      status: '满桌',
      grade: 'four-star',
      gradeNumber: '4.8',
      comment: [{
        content: '服务态度好',
        number: '932'
      }, {
        content: '食材新鲜',
        number: '932'
      }, {
        content: '味道赞',
        number: '932'
      }, {
        content: '一',
        number: '9132'
      }, {
        content: '两个',
        number: '9132'
      }, {
        content: '四个个字',
        number: '9132'
      }, {
        content: '三个字',
        number: '9132'
      }],
      menuList: [{
        title: '热销1',
        id: 'list1',
        list: [{
          img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
          name: '红烧牛肉1',
          count: '1805',
          good: '173',
          price: '23.5',
          id: 'list1_1'
        }, {
          name: '红烧牛肉2',
          count: '1805',
          good: '173',
          price: '23.5',
          id: 'list1_2'
        }, {
          name: '红烧牛肉3',
          count: '1805',
          good: '173',
          price: '23.5',
          id: 'list1_3'
        }, {
          name: '红烧牛肉4',
          count: '1805',
          good: '173',
          price: '23.5',
          id: 'list1_4'
        }]
      }, {
        title: '热销2',
        id: 'list2',
        list: [{
          img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
          name: '红烧牛肉1',
          count: '1805',
          good: '173',
          price: '23.5',
          id: 'list2_1'
        }, {
          name: '红烧牛肉2',
          count: '1805',
          good: '173',
          price: '23.5',
          id: 'list2_2'
        }, {
          name: '红烧牛肉3',
          count: '1805',
          good: '173',
          price: '23.5',
          id: 'list2_3'
        }, {
          name: '红烧牛肉4',
          count: '1805',
          good: '173',
          price: '23.5',
          id: 'list2_4'
        }]
      }, {
        title: '热销3',
        id: 'list3',
        list: [{
          img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
          name: '红烧牛肉1',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉2',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉3',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉4',
          count: '1805',
          good: '173',
          price: '23.5'
        }]
      }, {
        title: '热销4',
        id: 'list4',
        list: [{
          img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
          name: '红烧牛肉1',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉2',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉3',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉4',
          count: '1805',
          good: '173',
          price: '23.5'
        }]
      }, {
        title: '热销5',
        id: 'list5',
        list: [{
          img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
          name: '红烧牛肉1',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉2',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉3',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉4',
          count: '1805',
          good: '173',
          price: '23.5'
        }]
      }, {
        title: '热销6',
        id: 'list6',
        list: [{
          img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
          name: '红烧牛肉1',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉2',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉3',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉4',
          count: '1805',
          good: '173',
          price: '23.5'
        }]
      }, {
        title: '热销7',
        id: 'list7',
        list: [{
          img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
          name: '红烧牛肉1',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉2',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉3',
          count: '1805',
          good: '173',
          price: '23.5'
        }, {
          name: '红烧牛肉4',
          count: '1805',
          good: '173',
          price: '23.5'
        }]
      }],
      coupon: {
        id: 'code123123',
        delmoney: 10,
        condition: 100,
        time: '2017-12-12'
      }
    },
    // 当前的tab
    currentmenu: 0,
    // 当前的left栏
    currentleftmenu: 0,
    // 侧边栏联动当前值
    currentmenuid: 'list1',
    // 设置scroll-view的高度
    scrollHeight: 880,
    needDistance: 0,
    scrollHeight2: 815,
    showShopCarContent: false,
    showMask: false,
    menu1content: [{
      icon: 'iconfont icon-canshi',
      title: '催促上菜'
    }, {
      icon: 'iconfont icon-lingdang-copy',
      title: '呼叫服务员'
    }, {
      icon: 'iconfont icon-mifen2',
      title: '加米饭'
    }, {
      icon: 'iconfont icon-jiubei',
      title: '加酒水'
    }],
    comment: [{
      username: '186****1234',
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      grade: 'five-star',
      time: '2016-5-5',
      userComment: ['一二三四', '一', '一二三四', '一二', '一二三', '一二三四']
    }, {
      username: '186****1234',
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      grade: 'one-star',
      time: '2016-5-5',
      userComment: ['一', '一二', '一二三', '一二三四']
    }, {
      username: '186****1234',
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      grade: 'two-star',
      time: '2016-5-5',
      userComment: ['一', '一二', '一二三', '一二三四']
    }, {
      username: '186****1234',
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      grade: 'four-star',
      time: '2016-5-5',
      userComment: ['一二三四', '一', '一二三四', '一二', '一二三', '一二三四']
    }, {
      username: '186****1234',
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      grade: 'three-star',
      time: '2016-5-5',
      userComment: ['一二三四', '一', '一二三四', '一二', '一二三', '一二三四']
    }],
    chooseGoods: {
      // 饭店id
      restaurant_id: 'renmaid',
      // 选择的商品数量
      goods: {},
      // 总金额
      money: 0,
      // 总数
      allCount: 0
    }
  },
  /**
   * 确认订单
   */
  goCheckOrder: function goCheckOrder() {
    if (this.data.chooseGoods.allCount <= 0) {
      return wx.showToast({
        title: '您还没有点餐',
        icon: 'success',
        mask: true
      });
    }
    // todo 提交订单信息，然后去到确认页面
    wx.navigateTo({
      url: '../payorder/payorder?operation=checkOrder'
    });
  },

  /**
   * 计算消费金额
   */
  calculateMoney: function calculateMoney() {
    var goods = this.data.chooseGoods.goods;
    var menuList = this.data.restaurant.menuList;
    var money = 0;
    var singleMoney = 0;
    for (var goodsId in goods) {
      // console.log(goodsId)
      // console.log(goods[goodsId])
      var _iteratorNormalCompletion = true;
      var _didIteratorError = false;
      var _iteratorError = undefined;

      try {
        for (var _iterator = menuList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
          var lists = _step.value;

          // console.log(lists)
          // 具体列表内的菜单
          var list = lists.list;
          // console.log(list)
          var _iteratorNormalCompletion2 = true;
          var _didIteratorError2 = false;
          var _iteratorError2 = undefined;

          try {
            for (var _iterator2 = list[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
              var goodsID = _step2.value;

              if (goodsID.id === goodsId) {
                // console.log(goodsID.price)
                // console.log(goods[goodsId])
                singleMoney = goodsID.price * goods[goodsId];
                // console.log('success')
              }
              // return console.log(goodsID)
            }
          } catch (err) {
            _didIteratorError2 = true;
            _iteratorError2 = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion2 && _iterator2.return) {
                _iterator2.return();
              }
            } finally {
              if (_didIteratorError2) {
                throw _iteratorError2;
              }
            }
          }
        }
      } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion && _iterator.return) {
            _iterator.return();
          }
        } finally {
          if (_didIteratorError) {
            throw _iteratorError;
          }
        }
      }

      money += singleMoney;
    }
    return money;
  },

  /**
   * 显示购物车内容
   */
  showContent: function showContent() {
    if (this.data.chooseGoods.money <= 0) return;
    this.setData({
      showShopCarContent: !this.data.showShopCarContent,
      showMask: !this.data.showMask
    });
  },

  /**
   * 获取优惠券
   * @param e
   */
  getCoupon: function getCoupon(e) {
    wx.showToast({
      title: '领取优惠券',
      icon: 'success',
      duration: 2000,
      mask: true
    });
  },

  /**
   * 设置右侧滚动栏的位置
   */
  setNeedDistance: function setNeedDistance() {
    if (!this.data.restaurant.coupon.id) return;
    this.setData({
      needDistance: 142
    });
  },

  /**
   * 改变menu选择
   * @param e
   */
  choose: function choose(e) {
    // console.log(e)
    this.setData({
      currentmenu: e.currentTarget.dataset.tab
    });
  },

  /**
   * 改变left menu选择
   * @param e
   */
  leftChoose: function leftChoose(e) {
    this.setData({
      currentleftmenu: e.currentTarget.dataset.menu,
      currentmenuid: e.currentTarget.dataset.menulistid
    });
  },

  /**
   * 选择桌子取号
   */
  getdesk: function getdesk(e) {
    var index = e.currentTarget.dataset.desk;
    var title = null;
    if (index === '0') {
      title = '小桌取号成功';
    } else if (index === '1') {
      title = '中桌取号成功';
    } else {
      title = '大桌取号成功';
    }
    wx.showToast({
      title: title,
      icon: 'success',
      duration: 2000
    });
  },

  /**
   * 户呼叫服务
   * @param e
   */
  menu1choose: function menu1choose(e) {
    console.log(e.currentTarget.dataset.tabmenu);
  },

  /**
   * 拨打电话
   */
  callPhone: function callPhone() {
    wx.makePhoneCall({
      phoneNumber: this.data.restaurant.tel
    });
  },

  /**
   * 修改标题栏文字
   */
  setNavigatorText: function setNavigatorText() {
    var that = this;
    wx.setNavigationBarTitle({
      title: that.data.restaurant.name
    });
  },

  /**
   * 添加商品
   * @param e
   */
  addorder: function addorder(e) {
    var goodsId = e.currentTarget.dataset.goodsid;
    if (!goodsId) {
      return wx.showModal({
        title: '抱歉',
        content: '您选的菜品暂时无法提供',
        showCancel: false,
        confirmText: '我知道了'
      });
    }
    var chooseGoods = this.data.chooseGoods;
    var goods = chooseGoods.goods;
    var count = goods[goodsId];
    // 已有该商品
    if (count) {
      goods[goodsId] = ++count;
    } else {
      goods[goodsId] = 1;
    }
    chooseGoods.goods = goods;
    this.setData({
      chooseGoods: chooseGoods
    });
    var money = this.calculateMoney();
    chooseGoods.money = money;
    // 增加计数
    ++chooseGoods.allCount;
    this.setData({
      chooseGoods: chooseGoods
    });
    wx.setStorageSync('chooseGoods', this.data.chooseGoods);
  },

  /**
   * 删除商品
   * @param e
   */
  delorder: function delorder(e) {
    var goodsId = e.currentTarget.dataset.goodsid;
    var chooseGoods = this.data.chooseGoods;
    var goods = chooseGoods.goods;
    var count = goods[goodsId];
    goods[goodsId] = --count;
    chooseGoods.goods = goods;
    this.setData({
      chooseGoods: chooseGoods
    });
    var money = this.calculateMoney();
    chooseGoods.money = money;
    // 减少计数
    --chooseGoods.allCount;
    if (chooseGoods.allCount <= 0) {
      this.setData({
        showMask: false,
        showShopCarContent: false
      });
    }
    this.setData({
      chooseGoods: chooseGoods
    });
    wx.setStorageSync('chooseGoods', this.data.chooseGoods);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function onLoad() {
    // TODO: onLoad
    // 改变标题栏文字
    this.setNavigatorText();
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function onReady() {
    // TODO: onReady
    this.setNeedDistance();
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function onShow() {
    // TODO: onShow
  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function onHide() {
    // TODO: onHide
  },


  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function onUnload() {
    // TODO: onUnload
  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function onPullDownRefresh() {
    // TODO: onPullDownRefresh
  }
});
//# sourceMappingURL=ordering.js.map

模板简介：该模板名称为【微信小程序红色取号点菜服务页面样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。