虚拟点餐系统(2)点菜界面

Logo及选项卡切换

<!--pages/placeorder/placeorder.wxml-->
<!--餐厅logo及名称 开始-->
<view class="placeorder-box">
  <view class="placeorder-logo">
    <image src="/icon/xnct.jpg"></image>
  </view>
  <view class="placeorder-info">
      <text class="placeorder-info-title">虚拟餐厅</text>
      <text class="placeorder-info-welcome">欢迎光临</text>
  </view>
</view>
<!--餐厅logo及名称 结束-->

<!--服务选项卡 开始-->
<view class="placeorder-service">
  <view class="placeorder-tab">
    <view bind:tap="selected" id="1" class="placeorder-item {{selected == 1 ? 'active':''}}">点菜</view>
    <view bind:tap="selected" id="2" class="placeorder-item {{selected == 2 ? 'active':''}}">评价</view>
    <view bind:tap="selected" id="3" class="placeorder-item {{selected == 3 ? 'active':''}}">详情</view>
  </view>
  <view class="placeorder-tabContent">
    <view wx:if="{{selected == 1}}">点菜...</view>
    <view wx:if="{{selected == 2}}">评价...</view>
    <view wx:if="{{selected == 3}}">详情...</view>
  </view>
</view>
<!--服务选项卡 结束-->

/* pages/placeorder/placeorder.wxss */
page{
  background:#f7f7f7; /*页面背景色*/
}
/*餐厅logo及名称 开始*/
.placeorder-box{
  display:flex; /*弹性布局*/
  height:200rpx; /*高度*/
  background:#00cc00; /*背景颜色*/
}
.placeorder-box .placeorder-logo{
  width:150rpx;
  height:150rpx;
}
.placeorder-box .placeorder-logo image{
  width:100%;
  height:100%;
  border-radius:50%;  /*圆角*/
  box-shadow:5rpx 3rpx 3rpx #ccc; /*阴影效果*/
}
.placeorder-box view{
  margin:20rpx 0 0 40rpx;
}
.placeorder-box .placeorder-info text{
  display:block;
  margin-bottom:20rpx;
}
.placeorder-box .placeorder-info .placeorder-info-title{
  font-size:38rpx;
  font-weight:blod;
  color:#fff;
}
.placeorder-box .placeorder-info .placeorder-info-welcome{
  font-size:30rpx;
  color:#ccc;
}
/*餐厅logo及名称 结束*/

/*服务选项卡 开始*/
.placeorder-service{
  width:100%;
}
.placeorder-service .placeorder-tab{
  width:100%;
  height:120rpx;
  border-bottom:1px solid #ccc;
  display:flex;
  flex-direction:row;
  justify-content:center;
}
.placeorder-service .placeorder-tab .placeorder-item{
  width:30%;
  text-align:center;
  height:120rpx;
  line-height:120rpx;
  font-size:30rpx;
  font-weight:bold;
}
.placeorder-service .placeorder-tab  .active{
  color:#ff9900;
  border-bottom:1px solid #ff9900;
}
/*服务选项卡 结束*/

// pages/placeorder/placeorder.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    selected:1 /* 当前被选中的选项卡，默认值为1 */
  },
  /**
   * 选项卡切换
   * @param  options 
   */
  selected:function(e){
    this.setData({selected:e.target.id});
  }
})

点菜左侧菜单、右侧菜单

<!--pages/placeorder/placeorder.wxml-->
<!--点菜--> 
<view wx:if="{{selected == 1}}">
      <!--左侧菜单栏 开始-->
      <scroll-view scroll-y="{{true}}" class="placeorder-leftBar">
        <view class="active">热销</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view>红烧鱼块</view>
        <view> </view>
        <view> </view>
      </scroll-view>
      <!--左侧菜单栏 结束-->
      <!--右侧菜单栏 开始-->
      <scroll-view scroll-y="{{true}}" class="placeorder-rightBar">
        <view class="placeorder-rightBar-title">热销</view>
        <view class="placeorder-rightBar-content">
          <view class="placeorder-rightBar-item">
            <view class="goods-logo">
              <image src="/icon/goods-1.png"></image>
            </view>
            <view class="goods-info">
              <view class="goods-info-title">红烧鱼块</view>
              <view class="goods-info-sales">月售 188</view>
              <view class="goods-info-price">￥ 22</view>
            </view>
            <view class="goods-number">
              <view class="goods-number-icon">
                <image src="/icon/less.png"></image>
              </view>
              <view class="goods-number-form">
                <input value="100" />
              </view>
              <view class="goods-number-icon">
                <image src="/icon/plus.png"></image>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <!--右侧菜单栏 结束-->
    </view>

/* pages/placeorder/placeorder.wxss */
/*左侧菜单栏 开始*/
.placeorder-leftBar{
  position:absolute;
  left:0;
  width:25%;
  height:70%;
  font-size:30rpx;
  background:#f2f2f2;
}
.placeorder-leftBar view{
  width:100%;
  height:80rpx;
  line-height:80rpx;
  text-align:center;
}

.placeorder-leftBar .active{
  color:#ff9900;
  font-weight:bold;
}
/*左侧菜单栏 结束*/

/*隐藏滚动条 开始*/
::-webkit-scrollbar{
  width:0;
  height:0;
  color:transparent;
}
/*隐藏滚动条 结束*/

/* 右侧菜单栏 开始 */
.placeorder-rightBar{
  position:absolute;
  right:0;
  width:75%;
  height:70%;
}
.placeorder-rightBar .placeorder-rightBar-title{
  width:100%;
  height:60rpx;
  line-height:60rpx;
  padding:0 15rpx;
  font-size:30rpx;
  border-bottom:1px solid #ccc;
}
.placeorder-rightBar .placeorder-rightBar-content{
  width:100%;
}

.placeorder-rightBar .placeorder-rightBar-content .placeorder-rightBar-item{
  width:100%;
  height:200rpx;
  border-bottom:1px solid #ccc;
  display:flex;
}
.placeorder-rightBar .placeorder-rightBar-content .placeorder-rightBar-item .goods-logo{
  width:30%;
  height:200rpx;
  text-align:center;
}
.placeorder-rightBar .placeorder-rightBar-content .placeorder-rightBar-item .goods-logo image{
  width:150rpx;
  height:150rpx;
  margin-top:25rpx;
}

.placeorder-rightBar .placeorder-rightBar-content .placeorder-rightBar-item .goods-info{
  width:40%;
  height:150rpx;
  margin:25rpx 0 0 25rpx;
}
.placeorder-rightBar .placeorder-rightBar-content .placeorder-rightBar-item .goods-info .goods-info-title{
  font-size:30rpx;
  font-weight:bold;
}
.placeorder-rightBar .placeorder-rightBar-content .placeorder-rightBar-item .goods-info .goods-info-sales{
  color:#ccc;
  font-size:26rpx;
  margin:10rpx 0;
}
.placeorder-rightBar .placeorder-rightBar-content .placeorder-rightBar-item .goods-info .goods-info-price{
  color:#f90;
  font-size:38rpx;
}
.placeorder-rightBar .placeorder-rightBar-content .placeorder-rightBar-item .goods-number{
  width:30%;
  height:150rpx;
  margin-top:25rpx;
  display:flex;
  flex-direction:row;
  justify-content: center;
  align-items:flex-end;
}
.placeorder-rightBar .placeorder-rightBar-content .placeorder-rightBar-item .goods-number .goods-number-icon{
  width:40rpx;
  height:40rpx;
}
.placeorder-rightBar .placeorder-rightBar-content .placeorder-rightBar-item .goods-number image{
  width:100%;
  height:100%;
}

.placeorder-rightBar .placeorder-rightBar-content .placeorder-rightBar-item .goods-number .goods-number-form{
  width:80rpx;
  height:40rpx;
  text-align:center;
}
.placeorder-rightBar .placeorder-rightBar-content .placeorder-rightBar-item .goods-number input{
  width:100%;
  height:100%;
}
/* 右侧菜单栏 结束 */

点菜界面底部

    <!--点菜底部 开始-->
    <view wx:if="{{selected != 2}}">
      <view class="goods-cart">
          <image src="/icon/cart.png"></image>
          <text>99</text>
      </view>
      <view class="placeorder-bottom">
          <view class="placeorder-bottom-price">￥90.00</view>
          <view class="placeorder-bottom-ready">选好了</view>
      </view>
    </view>
    <!--点菜底部 结束-->

 

/* pages/placeorder/placeorder.wxss */
/*点菜底部开始*/
.goods-cart{
  position:absolute;
  left:30rpx;
  bottom:0;
  z-index:100;
}
.goods-cart image{
  width:120rpx;
  height:120rpx;
  border-radius:50%;
}
.goods-cart text{
  position:absolute;
  bottom:80rpx;
  left:80rpx;
  display:block;
  text-align:center;
  width:40rpx;
  height:40rpx;
  line-height:40rpx;
  background:#f00;
  color:#fff;
  font-size:26rpx;
  border-radius:50%;
}

.placeorder-bottom{
  position:absolute;
  bottom:0;
  width:100%;
  height:80rpx;
  background:#fff;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  z-index:99;
}
.placeorder-bottom .placeorder-bottom-price{
  color:#f00;
  width:35%;
  height:80rpx;
  line-height:80rpx;
  text-align:right;
}
.placeorder-bottom .placeorder-bottom-ready{
  color:#fff;
  background:#f00;
  width:35%;
  height:80rpx;
  line-height:80rpx;
  text-align:center;
}
/*点菜底部结束*/