微信小程序---点餐小程序

wxml:

<!-- 幻灯片滚动效果 -->

<swiper indicator-dots autoplay interval="3000" duration="500">

  <block wx:for="{{lbt}}" wx:key="*this">

    <swiper-item>

      <image src="{{item}}" class="slide-image" />

    </swiper-item>

  </block>

</swiper>

<view class="title-list">

  <view wx:for="{{titles}}" wx:key="*this" bindtap="onTitleTap" 

  data-title="{{item}}" class="title-item">

    {{item}}

  </view>

</view>

wxss:

.slide-image {

  width: 100%;

}

.title-list{

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.title-item{

  width: calc(33.33% - 2px);

  height: 100px;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  border:1px solid #cfcdcd

}

//index.js

Page({

    data: {

      lbt:[

        '/images/1.jpg',

        '/images/2.jpg',

        '/images/3.jpg'

      ],

      titles: ['堂食 ', '外卖', '外带', '订单', '账单', '报表']

      

    },

  

    onTitleTap: function(e) {

      const title = e.currentTarget.dataset.title;

      wx.navigateTo({

        url: `/pages/dishes/dishes?title=${encodeURIComponent(title)}`

      });

    }

})

<!--pages/dishes/dishes.wxml-->

<view class="a">

  <!-- 侧边栏导航 -->

  <view class="aside">

    <block wx:for="{{zuoxx}}" wx:key="id">

      <text class="type nav {{fcurNav == item.id ? 'selected' : ''}}" bindtap="selectNav" data-id="{{item.id}}">{{item.name}}</text>

    </block>

  </view>

  <!-- 菜品列表 -->

  <view class="content">

  <block wx:for="{{dishesList[curIndex]}}" wx:key="id">

    <view class="dish flex-wrap flex-direction-row" bindtap="selectDish" data-dish="{{item.id}}">

      <view class="flex-item">

        <text class="title">{{item.name}}</text>

        <text class="q">¥{{item.price}}</text>

      </view>

      <view class="add-btn">

        <icon type="{{item.status ? 'success' : 'circle'}}" color="orange" size="30"/>

      </view>

    </view>

  </block>

</view>

</view>

  <!-- 底部购物车 -->

  <view class="cart">

    <text class="cart-text">购物车:{{cartCount}}</text>

  </view>

  <loading hidden="{{hidden}}">玩命加载中...</loading>

/* dishes.wxss */

.a {

  display: flex;

  width: 100%;

  height: 100%;

}

.aside {

  display: flex;

  flex-direction: column;

  background-color: rgb(238, 238, 238);

}

.type {

  padding: 10px;

  text-align: center;

  border-bottom: 1px solid #ddd;

}

.nav {

  cursor: pointer;

}

.selected {

  background-color: #fff;

}

.content {

  padding: 10px;

  background-color: #fff;

  width: 285px;

}

.dish {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 10px;

  padding: 10px;

  border-bottom: 2px solid rgb(231, 231, 231);

}

.flex-item {

  display: flex;

  flex-direction: column;

}

.title {

  font-size: 16px;

  color: #333;

}

.q{

  padding: 2px;

  font-size: 13px;

  color: rgb(245, 200, 1);

}

.add-btn {

  display: flex;

  align-items: center;

  width: 50px;

  height: 50px;

}

.cart {

  position: fixed;

  bottom: 0;

  width: 95%;

  height: 50px;

  background-color: rgb(233, 232, 232);

  align-items: center;

  font-size: 16px;

  color: #333;

  display: flex;

  margin: 10px;

}

.cart-text {

  font-size: 16px;

  color: #333;

  padding: 20px;

}