餐饮店小程序

【实例简介】

餐饮店点餐、结算等

【实例截图】

【核心代码】

<view class="index">
    <view class="nav-tab-wrp">
      <navigator url="javascript:(0)" class="nav-tab-item active" hover-class="navigator-hover">点餐</navigator>
      <navigator url="navigate?title=navigate" class="nav-tab-item" hover-class="navigator-hover">评价</navigator>
      <navigator url="navigate?title=navigate" class="nav-tab-item" hover-class="navigator-hover">商家</navigator>
    </view>
    <view class="cart-tab-wrp">
      <view class="cart-item-total cart-tab-item">
        <view class="cart-item-icon-wrp">
            <image class="cart-item-icon" src="./resources/pic/orderBox.png" />
            <text hidden="{{total.count}}" class="cart-item-total-num bc_red">{{total.count}}</text>
        </view>
        <text class="cart-item-total-price">￥{{total.money}}</text>
      </view>
      <view class="cart-tab-item">
        <navigator url="../Order/cert/cert?title=确认" class="cart-tab-item-btn" hover-class="navigator-hover">选好了</navigator>
      </view>
    </view>
    <view class="menu-wrp">
        <scroll-view scroll-y="true" class="left-side">
            <!--菜单列表-->
            <block wx:for="{{menus}}"  wx:key="id" wx:for-item="menu">
                <view class="menu-item" data-id="{{menu.id}}" data-tag="{{menu.tag}}" bindtap="selectMenu">
                    <view class="menu-item-wrp">
                        <view class="{{selectedMenuId == menu.id ? 'bc_red' : 'bc_gray'}} m-item-icon">
                            <image class="image" src="resources/pic/ding-ico1.png" />
                        </view>
                        <view>
                            <text class="m-item-title">{{menu.name}}</text>
                        </view>
                    </view>
                </view>
            </block>
            <view class="menu-footer"></view>
        </scroll-view>
        <scroll-view scroll-y="true" scroll-into-view="{{toView}}" class="right-side">
            <view class="dish-header"></view>
            <block wx:for="{{menus}}"  wx:key="id" wx:for-item="menu">
                <view>
                    <view id="{{menu.tag}}" class="dish-category-title">{{menu.name}}</view>
                    <block wx:for="{{menu.dishs}}"  wx:key="id" wx:for-item="dish">
                        <view class="dish-item">
                            <view class="dish-item-wrp">
                                <view class="dish-item-pic">
                                    <image class="image" src="resources/pic/{{dish.pic}}" />
                                </view>
                                <view class="dish-item-info" style="">
                                    <view>
                                        <text class="dish-item-name">{{dish.name}}</text>
                                    </view>
                                    <view>
                                        <text class="dish-item-sales">月销量{{dish.sales}}</text>
                                    </view>
                                    <view>
                                        <text class="dish-item-money">¥{{dish.price}}</text>
                                    </view>
                                </view>

                                <view class="dish-item-count" style="">
                                    <view class="dish-item-tab">
                                        <view hidden="{{dish.count == 0}}" class="dish-item-count-minus" data-id="{{dish.id}}"
                                        data-cid="{{menu.id}}" bindtap="minusCount">
                                            <image class="image" src="resources/pic/countMinus.png" />
                                        </view>
                                    </view>
                                    <view class="dish-item-count-text dish-item-tab">
                                        <text hidden="{{dish.count == 0}}">{{dish.count}}</text>
                                    </view>
                                    <view class="dish-item-count-plus" data-id="{{dish.id}}" 
                                    data-cid="{{menu.id}}" bindtap="addCount">
                                        <image class="image" src="resources/pic/countSelAdd.png" />
                                    </view>
                                </view>
                            </view>
                        </view>                   
                    </block>

                </view>
            </block>        
            <view class="dish-footer"></view>
        </scroll-view>
    </view>
</view>