微信小程序做出外卖菜单点单功能

1. 简介

随着移动互联网的发展，外卖已成为人们生活中必不可少的一部分。因此，外卖点餐功能的实现对于许多企业以及小商户来说都是非常必要的。微信小程序是近年来兴起的一种轻量级的应用，它允许用户在微信内部直接运行应用程序，无需下载和安装。开发一个微信小程序的外卖点餐功能对于餐馆和消费者来说都是非常方便的。

2. 实现步骤

2.1 页面设计

在小程序中，外卖点餐通常要设计两个页面，一个是菜单展示页面，另一个是点单页面。菜单页面通常要包含分类、菜品名称、价格、图片等信息。点单页面通常要包含已选菜品数量、总价、菜品赠品等信息。

2.2 数据库设计

在设计小程序的外卖点餐功能时，需要对数据库进行设计。通常可以将数据库分为两部分：一部分是菜品的信息数据库，另一部分是订单的信息数据库。

下面是菜品信息数据库的数据结构设计，可以使用JSON格式存储。

{
  "categories": [
    {
      "categoryId": 1,
      "categoryName": "中餐",
      "foods": [
        {
          "foodId": 1,
          "foodName": "麻婆豆腐",
          "price": 22,
          "imageUrl": "https://xxxx/xxxxx.jpg",
          "description": "麻辣味道，口感鲜美",
          "sales": "233",
          "goodComment": "95%"
        },
        {
          "foodId": 2,
          "foodName": "水煮鱼",
          "price": 38,
          "imageUrl": "https://xxxx/xxxxx.jpg",
          "description": "清爽口感，入口即化",
          "sales": "345",
          "goodComment": "92%"
        }
      ]
    },
    {
      "categoryId": 2,
      "categoryName": "西餐",
      "foods": [
        {
          "foodId": 3,
          "foodName": "意大利面",
          "price": 28,
          "imageUrl": "https://xxxx/xxxxx.jpg",
          "description": "软硬适中，口味清香",
          "sales": "123",
          "goodComment": "85%"
        }
      ]
    }
  ]
}

订单信息数据库的数据结构设计如下：

{
  "orders": [
    {
      "orderId": "201910231234",
      "createTime": "2019-10-23 12:34:56",
      "foods": [
        {
          "foodId": 1,
          "foodName": "麻婆豆腐",
          "price": 22,
          "quantity": 2
        },
        {
          "foodId": 3,
          "foodName": "意大利面",
          "price": 28,
          "quantity": 1
        }
      ],
      "totalPrice": 72,
      "status": 0,
      "address": "中国广东省广州市天河区XXXXXX"
    }
  ]
}

2.3 功能实现

2.3.1 菜单展示功能

菜单展示页面是外卖点餐功能的核心部分，主要负责菜品的展示和分类。开发这个功能需要用到小程序的组件和API。

在菜单展示页面，通常需要实现以下功能：

展示菜品的分类

根据分类展示菜品列表

支持滚动展示

实现搜索功能

支持购物车

下面是一个展示菜品的组件的示例：

<template name="foods">
  <view class="foods-container">
    <view class="food-category">
      <text class="left-icon"></text>
      <text class="category-name">{{category.categoryName}}</text>
      <text class="right-icon"></text>
    </view>
    <scroll-view class="food-list" scroll-y="true">
      <view class="food" v-for="(food, index) in category.foods" :key="index">
        <img :src="food.imageUrl" class="food-image">
        <view class="food-info">
          <text class="food-name">{{food.foodName}}</text>
          <text class="food-price">￥ {{food.price}}</text>
        </view>
        <view class="food-buttons">
          <image src="/images/minus.png" class="food-button minus" @click="minus(food)" v-if="foodCount(food) > 0">
          <text class="food-count" v-if="foodCount(food) > 0">{{foodCount(food)}}</text>
          <image src="/images/add.png" class="food-button add" @click="add(food)">
        </view>
      </view>
    </scroll-view>
  </view>
</template>

组件的使用方法如下：

<template>
  <foods
    v-for="(category, index) in categories"
    :key="index"
    :category="category"
    @add="addToCart"
    @minus="minusFromCart"
    :food-count="cartMap[category.categoryId]" 
  />
</template>

上面的组件实现了菜品的展示，并支持了购物车功能，其中的add和minus定义了加入购物车和从购物车删除菜品的方法。cartMap定义了已选的菜品数量。通过传递参数实现了子组件与父组件之间的数据传递。

2.3.2 订单提交功能

菜品点单完成后，用户需要提交订单。订单的提交过程通常需要一些信息，例如用户的地址、手机号码等信息。这些信息需要保存在订单信息数据库中，并将订单信息发送给商家。

可以将订单信息的提交分为以下几个步骤：

获取订单信息

验证订单信息

将订单信息保存到数据库中

发送订单信息给商家

以下是一个订单提交的代码示例：

submitOrder: function() {
  if (!this.data.address) {
    wx.showToast({
      title: '请选择收货地址',
      icon: 'none'
    });
    return;
  }
  if (this.data.cartFoods.length == 0) {
    wx.showToast({
      title: '请选择菜品',
      icon: 'none'
    });
    return;
  }
  let order = {};
  let foods = [];
  for (let i = 0; i < this.data.cartFoods.length; i++) {
    let food = this.data.cartFoods[i];
    foods.push({
      foodId: food.foodId,
      foodName: food.foodName,
      price: food.price,
      quantity: food.quantity
    })
  }
  order.foods = foods;
  order.totalPrice = this.data.totalPrice;
  order.address = this.data.address;
  order.status = 0;
  order.createTime = new Date().toLocaleString();
  order.orderId = "order" + new Date().getTime();
  let orders = [];
  try {
    let value = wx.getStorageSync('orders');
    if (value) {
      orders = JSON.parse(value);
    }
  } catch (e) {
    console.log(e);
  }
  orders.push(order);
  try {
    wx.setStorageSync('orders', JSON.stringify(orders));
    wx.showToast({
      title: '成功提交订单',
      icon: 'success'
    });
  } catch (e) {
    console.log(e);
  }
}

上面的代码实现了提交订单的过程，其中用到了小程序的API，例如wx.showToast、wx.getStorageSync、wx.setStorageSync等等。

3. 总结

通过上面的介绍可以看出，外卖点餐功能的实现需要用到小程序的组件和API，并且需要进行菜品信息数据库和订单信息数据库的设计。只有这样才能实现一个完整的外卖点餐功能。

小程序外卖点单功能具有信息快速更新，展示效果好、交互性强等特点，将肯定会在未来的市场中占据不小的一席之地。