小程序点餐系统——点餐列表页（未讲解完）

快来打我* 2022-11-17 05:28 524阅读 0赞

### 文章目录 ###

*  点餐列表（※）
 *  代码
 *   *  页面设计
     *  页面样式
     *  页面逻辑

# 点餐列表（※） #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]

# 代码 #

## 页面设计 ##

页面分为四部分

*  顶部：折扣信息区
 *  左侧：菜单总览
 *  右侧：菜单详细列表栏
 *  底部：购物操作

顶部：  
![在这里插入图片描述][20210408194748475.png]  
很简单

<view class="discount">
 <text class="discount-txt">减</text>满50元减10元（在线支付专享）
 </view>
 <view>

菜单总览  
这里我们用到  
scroll-view 可滚动视图区域  
如图：左右都是可以上下滚动的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]  
因为左右菜单是一体，所以在两个并列的scroll-view的外面还要套上一个view标签

listDate里的内容很多  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 2]

<scroll-view scroll-y="true" style="height:1200rpx;" bindscroll="scroll" scroll-into-view="{ {toView}}" class="foods-wrapper" scroll-with-animation="true">
 <view class="content" id="a{ {index}}" wx:for="{ {listData}}" wx:key="lists">
 <view class="list-tab">{
 {item.name}}</view>
 <view class="content-list" wx:for="{ {item.foods}}" wx:for-item="items" wx:key="list" wx:for-index="indexs">
 <view class="list-image-box">
 <image class="list-image" mode="widthFix" src="{ {items.image_url}}"></image>
 </view>
 <view class="list-name-box">
 <view>{
 {items.name}}</view>
 <view class="list-price">
 ¥ {
 {items.specfoods[0].price}}.00
 
 </view>
 </view>
 </view>
 </view>
 </scroll-view>

底部菜单操作栏

<view class="bottom-operate-menu" wx:if="{ {loading}}">
 <view class="shopping-cart">
 <view style="padding:5px;display:flex">
 
 {
 {cupNumber}}
 
 <view class="shopping-cart-price" wx:if="{ {sumMonney==0}}">购物车是空的</view>
 <view class="shopping-cart-price" style="color:white;font-size:18px" wx:if="{ {sumMonney!=0}}">¥ {
 {sumMonney}}.00</view>
 </view>
 </view>
 <view class="submit-btn { {sumMonney!=0?'activity-color-bg':'' }}" bindtap="goBalance">
 <view class="submit-btn-label { {sumMonney!=0?'color-white':'' }}">选好了</view>
 </view>
 </view>

![在这里插入图片描述][20210408203836492.png]  
点击购物车弹出  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 3]

<view class="drawer-screen" bindtap="showCartList" data-statu="close" wx:if="{ {showCart}}"></view>
 <view class="cartlist-content" wx:if="{ {showCart}}">
 <view class="cartlist-title">
 <label class='label-title-bar'>
 <label class="lable-selected">已选商品</label>
 </label>
 <label class="lable-icon-clear" bindtap="clearCartList">
 
 <label class="label-clear">清空购物车</label>
 </label>
 </view>
 <scroll-view scroll-y="true" class="{ {cartList.length>5?'cart-scroll-list':''}}">
 <view class="cart-list-box" wx:for="{ {cartList}}" wx:key="unique">
 <view class="listL-info">
 <view>{
 {item.name}}</view>
 <view class="list-info-size">{
 {item.detail}}</view>
 </view>
 <view class="listR-info">
 <view class="listR-info-con">
 <label class="activity-color">¥ {
 {item.sum}}.00</label>
 
 {
 {item.number}}
 
 </view>
 </view>
 </view>
 </scroll-view>
 </view>

## 页面样式 ##

/* 折扣信息区 */
    .discount{ 
      width: 100%;
      height: 70rpx;
      line-height: 70rpx;
      background: #fef9e6;
      font-size: 28rpx;
      text-align: center;
      color: #999;
      z-index: 111;
    }
    .discount-txt{ 
      color:#fff;
      padding:5rpx 10rpx;
      background: red;
      margin-right: 15rpx;
    }
    /* 左侧菜单 */
    .left-menu{ 
      width:160rpx;
      font-size:28rpx;
      position: absolute;
      left:0px;
      z-index: 10;
    }
    /* 子菜单公共样式 */
    .left-menu-common{ 
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
    }
    /* 子菜单未选中样式 */
    .left-menu-unselect{ 
      color: #6C6C6C;
      border-bottom:1px solid #E3E3E3;
      background:#F9F9F9;
    }
    /* 子菜单选中样式 */
    .left-menu-selected{ 
      color: #FF9C35;
      border-left:3px solid #FF9C35;
      background:white;
    }
    /* 右侧菜单 */
    .list-tab{ 
      margin-left:170rpx;
      font-size:25rpx;
      background:#F3F4F6;
      padding:2px;
      color:#FF9C35;
    }
    .content-list{ 
      margin-left:160rpx;
      display:flex;
      border-bottom: 1px solid #E3E3E3;
    }
    .list-image-box{ 
      width:160rpx;
      height:72px;
      text-align: center;
    }
    .list-image{ 
      width:108rpx;
      margin-top:16rpx;
    }
    .list-name-box{ 
      width:200px;
      font-size:30rpx;
      margin-top:20rpx;
    }
    .list-price{ 
      margin-top:20rpx;
      color:#F05A86
    }
    .add-icon{ 
      float:right;
      color:#FF9C35;
      font-size:46rpx;
    }
    /* 底部菜单操作 */
    .bottom-operate-menu{ 
      z-index: 1001; 
      position: fixed;
      bottom: 0px;
      height:55px;
      width:100%;
      display: flex;
    }
    .shopping-cart{ 
      width:75%;
      background:#353535;
      height: 100%; 
    }
    .shopping-cart-icon{ 
      font-size:40px;
      color:#87888E;
      margin-left:10px;
       position: relative;
    }
    .activity-color{ 
      color:#FF9C35;
    }
    .submit-btn{ 
      height:100%;
      background:#F7F7F7;
      width:25%;
      display:flex;
    }
    .activity-color-bg{ 
      background:#FF9C35;
    }
    .number-msg{ 
      padding: 1px 7px;
      border-radius:50%;
      background:red;
      color:white;
      font-size:14px;
      position: absolute;
      text-align: center;
      top:0px;
      right:-5px;
    }
    .shopping-cart-price{ 
      color:#A9A9A9;
      display:flex;
      align-items: center;
      margin-left:10px;
      font-size:15px
    }
    .submit-btn-label{ 
      color:#A9A9A9;
      font-size:15px;
      margin:auto;
    }
    .color-white{ 
      color:white;
    }
    /* 弹窗 */
    .drawer-screen {   
      width: 100%;  
      height: 100%;  
      position: fixed;  
      top: 0;  
      left: 0;  
      z-index: 1000;  
      background: #000;  
      opacity: 0.5;  
      overflow: hidden;  
    }  
    /* 购物车内容 */
    .cartlist-content{   
      width: 100%; 
      overflow: hidden;  
      position: fixed;   
      z-index: 1001;
      bottom: 55px;
      max-height: 250px;  
    }
    .cartlist-title{ 
      background:#F0F0F0;
      height:30px
    }
    .label-title-bar{ 
      color:#878787;
      font-size:12px;
      border-left:4px solid #FF9C35;
      margin-left: 20px;
    }
    .lable-selected{ 
      padding:5px
    }
    .lable-icon-clear{ 
        color:#878787;
        float: right;
        margin-right: 10px;
    }
    .label-clear{ 
      color:#878787;
      font-size:12px;
    
    }
    .cart-list-box{ 
      background:#FFFFFF;
      display:flex;
      font-size:13px;
      border-bottom:1px #E3E3E3 solid
    }
    .listL-info{ 
      width:50%;
      padding:5px 15px;
    }
    .listR-info{ 
      width:50%;
      padding:10px;
    }
    .listR-info-con{ 
      float:right
    }
    .font20{ 
      font-size:20px
    }
    .list-info-size{ 
      font-size:10px;
      color:#B1B1B1;
    }
    .icon-li-circle{ 
      margin-left:15px;
      font-size:20px
    }
    
    .cart-scroll-list{ 
      height:450rpx;
    }
    
    
    /* 满减区域 */
    .cut-bar{ 
      height:20px; 
      position: fixed;
      bottom:55px;
      background:#FFCD9B;
      width:100%;
      color:#FFF7EC;
      font-size:12px;
      text-align:center;
    }

## 页面逻辑 ##

最近时间有点紧，写的有点糙，我就不一 一 函数解释了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221022/6aafb669c1e94aae86f34abf07f90653.png
[20210408194748475.png]: /images/20221022/b8149780cdb04de49426e4c06d1b0ff1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]: /images/20221022/9827ce371f2c4e428d3cf6ed21a4a412.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 2]: /images/20221022/c47f605b752145c18873b922c17169d2.png
[20210408203836492.png]: /images/20221022/6ae8aeafedc042dc83bfc2f178b97eba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 3]: /images/20221022/cb0fa3de9a4241a1b56763345d9b69fb.png