小程序点餐系统——订单页

亦凉 2022-11-17 05:21 231阅读 0赞

### 文章目录 ###

*  订单页
 *   *  效果图
 *  代码
 *   *  页面设计
     *  页面样式
     *  页面逻辑

# 订单页 #

## 效果图 ##

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

# 代码 #

## 页面设计 ##

<scroll-view class="container" scroll-y="true">
      <block wx:for="{ {orderList}}" wx:for-item="item" wx:for-index="idx" wx:key="{ {item.order_id}}">
        <view class="orderList" data-postId="{ {item.order_id}}">
          <view class="order-content" wx:for="{ {item.foods}}" wx:for-item="items" wx:key="orderlist">
            <view class="content-time">下单时间：{
       {items.date}} {
       {items.time}}</view>
            <view class="content-btm" style='display:flex'>
              <view class="content-info">
                <text class="food-name">{
       {items.name}}</text>
                <text class="food-describe"s>{
       {items.describe}}</text>
                <text class="food-price">￥{
       {items.price}}</text>
              </view>
              <view class="content-infoR">
                <view class="order-detail" catchtap="orderdetail" data-postId="{ {item.order_id}}"> 查看详情</view>
                <view wx:if="{ {item.taken}}" class="taken">已取餐</view>
                <view wx:else class="notaken">未取餐</view>
              </view>
            </view>
          </view>
        </view>
      </block>
      <view class="bottom" wx:if="{ {is_last}}">到底啦~</view>
    </scroll-view>

## 页面样式 ##

page { 
      background: #f8f8f8;
    }
    .orderList { 
      width: 100%;
      padding: 0 20rpx;
      box-sizing: border-box;
    }
    .order-content { 
      padding: 40rpx 0;
      align-items: center;
      border-bottom: 1rpx solid #ececec;
    }
    .order-info { 
      font-size: 22rpx;
      color: #999;
      margin-left: 30rpx;
      height: 36rpx;
      line-height: 36rpx;
    }
    .order-detail { 
      text-align: center;
      color: #ff9000;
      font-size: 24rpx;
      padding: 5rpx 10rpx;
      background: #fff;
      border: 1px solid #ff9000;
    }
    /* 是否取餐样式 */
    .taken { 
      font-size: 30rpx;
      background: #d2d2d2;
      color: #999;
      padding: 10rpx;
      margin-left:20rpx;
    }
    .notaken { 
      font-size: 30rpx;
      background: #ffd161;
      color: #fff;
      padding: 10rpx;
      margin-left:20rpx;
    }
    .content-time { 
      font-size: 26rpx;
      color: #999;
    }
    .content-info { 
      color: #666;
      font-size: 28rpx;
    }
    .food-name { 
      font-weight: 600;
      font-size: 30rpx;
    }
    .content-btm { 
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 10rpx;
    }
    .food-describe{ 
      color: #999;
      padding-left: 10rpx;
    }
    .food-price{ 
      font-size: 22rpx;
      padding-left: 20rpx;
    }
    .content-infoR{ 
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center
    }
    .bottom{ 
      text-align: center;
      color:#999
    }

## 页面逻辑 ##

// 引入文件
    const fetch = require('../../../utils/fetch')
    Page({ 
      data: { 
        orderList: [],
        // 数据是否加载完毕
        is_last: false
      },
      // 加载文件的标识
      last_id: 0,
      // 定义请求接口，封装请求的公共部分（三个参数：数据、成功、失败）
      loadData: function(data, success, fail) { 
        // 每一页10条数据
        data.row = 10
        fetch('food/orderlist', data).then((res) => { 
          this.last_id = res.data.last_id
          this.setData({ 
            is_last: res.data.is_last
          }, () => { 
            success(res.data)
          })
        }, fail)
      },
    
      onLoad: function(options) { 
        wx.showLoading({ 
          title: '加载中...'
        })
        this.loadData({ 
          last_id: 0
        }, (data) => { 
          this.setData({ 
            orderList: data.list,
          }, () => { 
            wx.hideLoading();
          })
        })
      },
      onShow: function() { 
        // 获取app
        var app = getApp();
        // 获取到并判断全局变量isReloadOrderList，是否为true，为true就刷新
        if (app.isReloadOrderList) { 
          this.onLoad()
          app.isReloadOrderList = false
        }
      },
      orderdetail: function(e) { 
        var index = e.currentTarget.dataset.postid
        wx.navigateTo({ 
          url: '../detail/detail?order_id=' + index
        })
      },
      // 下拉刷新
      onPullDownRefresh: function() { 
        // 显示顶部刷新图标
        wx.showNavigationBarLoading();
        this.loadData({ 
          last_id: 0
        }, (data) => { 
          this.setData({ 
            orderList: data.list,
          }, () => { 
            // 隐藏导航条栏加载框
            wx.hideNavigationBarLoading();
          })
        })
      },
      // 上拉触底事件
      onReachBottom: function() { 
        // 判断数据是否到底，如果is_last为true到底了，则不执行请求
        if (this.data.is_last) { 
          return
        }
        // 显示加载图标 
        wx.showLoading({ 
          title: '玩命加载中',
        })
        this.loadData({ 
          last_id: this.last_id,
        }, (data) => { 
          var orderList = this.data.orderList;
          for (var i = 0; i < data.list.length; i++) { 
            orderList.push(data.list[i]);
          }
          // 设置数据 
          this.setData({ 
            orderList: orderList
          }, () => { 
            // 隐藏加载框 
            wx.hideLoading();
          })
        })
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221022/bdc687bb532a43a7bfef6549dde8543a.png