微信小程序实战（完结篇）-第8章 一个全面的项目-点餐系统

微信小程序实战（完结篇）-第8章 一个全面的项目-点餐系统

8.1 开发前准备

8.1.1项目展示

8.1.2项目分析

8.1.3项目初始化

8.1.4封装网络请求

fetch.js页面

module.exports = function(path, data, method) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: '',   // 接口地址
      method: method,  data: data,  header: {'Content-Type': 'json' }, 
      success: resolve,
      fail: function() {// 请求失败执行fail操作
        reject()
        wx.showModal({ showCancel: false, title: '失败' }) }
    })
  }) }

请求接口页面

// 引入fetch.js文件
const fetch = require('../../utils/fetch.js')
// 接口请求
fetch(path).then((res) => {
  // 请求成功的操作
 },() => {
  // 请求失败操作
});

8.2 【任务1】商家首页

8.2.1任务分析

8.2.2焦点图切换

在首页顶部区域，设置了焦点图切换的效果，图片资源通过请求接口获取数据。焦点图区域的布局：

index.wxml

<block wx:for="{{listData}}">
  <swiper>
      <swiper-item>
        <image></image>
      </swiper-item>
  </swiper>
</block>

8.2.3中间区域单击跳转到菜单列表

首页中间部分展示了手机点餐的推广banner图，单击“开启订餐之旅”跳转到菜单列表，引导顾客进行点餐，中间区域的布局：

index.wxml

<block wx:for="{{listData}}">  
<!-- listData 为后台返回的数据 -->
<view bindtap="gostart">
<image></image>
</block>

8.2.4底部商品展示

底部区域的布局：

index.wxml

<block wx:for="{{listData}}">  
<view  wx:for="{{item.image_bottom}}" 
    wx:for-item="bottomItem" >
      <image></image>
    </view>
</block>

8.3 【任务2】菜单列表

8.3.1任务分析

8.3.2折扣信息区

展示商家的折扣活动信息或店铺优惠信息，折扣信息区页面结构布局:

list.wxml

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

8.3.3设计菜单列表布局

pages/list/list.wxml文件，左侧菜单列表页面结构布局：

pages/list/list.wxml文件，右侧菜单列表页面结构布局：

8.3.4请求数据

list.js

const fetch = require('../../utils/fetch.js')
Page({
 data:{ loading:false }  // false，不显示底部操作菜单
 onLoad: function(options) {
     wx.showLoading({ title: '努力加载中' })
       fetch('food/list').then(res => { 
       wx.hideLoading();
       this.setData({  listData: res.data ,loading:true })
     }, () => {   wx.hideLoading()   })
   }
})

8.3.5实现菜单栏联动单品列表功能

8.4 【任务3】购物车

8.4.1任务分析

8.4.2设计底部购物车区域

菜单列表页面数据请求成功后，loading值设为true，显示底部购物车区域。当购物车里商品数量为0时，购物车图标为灰色，处于不可单击状态

8.4.3添加商品到购物车

单击图标“+”，把商品添加到购物车。

8.4.4购物车界面

8.4.5增加商品数量

8.4.6减少商品数量

8.4.7清空购物车

8.4.8满减优惠

总价等于0，并且loading为真，显示“满25立减3元(手机点餐专享)”。总价小于25元，并且总价不等于0，且loading为真，显示 “满25立减3元,还差{{25-总计}}元,去凑单。

8.4.9跳转到订单确认页面

8.5 【任务4】订单确认

8.5.1任务分析

8.5.2订单信息

balance.js

const fetch = require('../../../utils/fetch.js')
Page({
onLoad: function(options) {
    // 请求订单接口
   fetch('food/order', {: options.order_id}).then(res => {})
} order_id

8.5.3备注功能实现

balance.js

listenerTextarea: function(e) {
    var note = e.detail.value
  // 存储note值 
    wx.setStorageSync('note', note)
}

detail.js

onLoad: function (options) {
    // 获取note值
    var note = wx.getStorageSync('note')
  }

8.5.4支付功能

8.5.5支付成功返回订单列表

8.6 【任务5】订单详情

8.6.1任务分析

8.6.2取餐部分信息展示

8.6.3订单详情部分

8.6.4订单信息部分

8.7 【任务6】订单列表

8.7.1任务分析

8.7.2订单列表设计

order/list/list.wxml

<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">
        <view class="content-time">下单时间</view></view>
        <view class="content-btm"> … </view></view>
     </view>
   </view>  
</block>
 <view class="bottom" wx:if="{{is_last}}">到底啦~</view>
</scroll-view>

8.7.3封装数据情求

order/list/list.js

const fetch = require('../../../utils/fetch')
Page({
  data: {
    orderList: [], // 下拉触底时追加数据
    is_last: false  // 数据是否加载完毕
  },
  last_id: 0,   // 加载文件的标识
  // 定义请求方法，封装请求的公共部分（3个参数：数据、成功、失败）
  loadData: function(data, success, fail) {
    data.row = 10  // 每一页10条数据
    fetch('food/orderlist', data).then((res) => {})
})

8.7.4初始化页面

8.7.5下拉刷新功能

order/list/list.js

onPullDownRefresh: function() {
 wx.showNavigationBarLoading(); // 显示顶部刷新图标
  this.loadData({
    last_id: 0
  }, data => {
    this.setData({
      orderList: data.list
    }, () => {
   wx.hideNavigationBarLoading(); // 隐藏导航条栏加载框
    })
  })
}

8.7.6上拉触底功能

order/list/list.js

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() // 隐藏加载框 
    })
  })
}

8.8 【任务7】消费记录

8.8.1任务分析

8.8.2设计消费记录列表

record/record.js

const fetch=require('../../utils/fetch.js')
Page({
  onLoad: function (options) {
    wx.showLoading({ title: '努力加载中' })
   wx.setNavigationBarTitle({ title: '消费记录' }) // 设置小程序导航栏标题文字内容
    // 请求消费记录接口 
    fetch('food/record').then(res=>{
    wx.hideLoading() // 关闭加载信息
      this.setData({ listData:res.data })
  }) 
}
})

本章总结

点餐系统小程序主要完成底部标签导航的设计、幻灯片轮播效果设计、菜单列表的效果显示、购物车功能实现、订单详情页面设计、订单列表设计、消费记录页面的设计。通过对本章的学习，读者需要重点掌握如何设计一个完整的小程序项目，熟悉项目的开发流程，学会如何在开发中运用所学技术解决实际问题。

需要该项目整体运行源代码的读者可以私信我，免费索取。

本专栏到此结束，希望对感兴趣的读者有所帮助。