Guide de mise en œuvre pour UniApp pour mettre en œuvre les commandes à emporter et le suivi des livraisons

Guide de mise en œuvre d'UniApp pour les commandes à emporter et le suivi des livraisons

Introduction :
Avec le développement rapide du marché des plats à emporter, de plus en plus de personnes choisissent de commander des plats à emporter et de les livrer via une application mobile, ce qui apporte davantage d'opportunités et de défis commerciaux au secteur de la restauration. . En tant que cadre de développement multiplateforme, UniApp peut développer des applications multiplateformes rapidement et efficacement. Cet article expliquera comment utiliser UniApp pour implémenter les fonctions de commande à emporter et de suivi des livraisons, et joindra des exemples de code pertinents.

1. Analyse de la demande

1. Connexion utilisateur : les utilisateurs doivent se connecter à l'application via leur numéro de téléphone mobile ou leur compte tiers.
2. Commande à emporter : les utilisateurs peuvent sélectionner et commander leurs plats préférés via l'APP.
3. Gestion du panier : les utilisateurs peuvent ajouter plusieurs repas au panier, ainsi qu'ajuster et supprimer les quantités.
4. Paiement des commandes : les utilisateurs peuvent payer leurs commandes via l'APP.
5. Requête de commande : les utilisateurs peuvent interroger leurs commandes, y compris les commandes historiques et les commandes inachevées.
6. Suivi de la livraison : les utilisateurs peuvent vérifier l'emplacement et l'avancement de la livraison du livreur en temps réel.

2. Sélection technologique

1. Développement front-end : framework UniApp, framework Vue.js.
2. Développement Back-end : Node.js, framework Express.
3. Base de données : MongoDB.

3. Étapes de mise en œuvre

1. Créer un projet UniApp
   Exécutez la commande suivante dans la ligne de commande pour créer un projet UniApp :

$ uni-create-project myApp

2. Écrivez la page front-end
   Créez les pages correspondantes dans le répertoire des pages de UniApp, y compris la page de connexion, la page de commande, la page du panier, la page de commande et la page de suivi de livraison. En même temps, créez le fichier Vue correspondant et écrivez le code de la page front-end.
3. Réaliser la fonction de connexion utilisateur
   Sur la page de connexion, les utilisateurs peuvent saisir leur numéro de téléphone mobile et leur mot de passe pour se connecter. Envoyez une demande de connexion au backend en appelant la fonction uni.request().

uni.request({
  url: 'http://yourbackend.com/login',
  data: {
    phone: '手机号',
    password: '密码'
  },
  success: (res) => {
    if (res.data.code === 200) {
      // 登录成功
      uni.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 2000
      })
      // 将登录状态保存到本地缓存
      uni.setStorageSync('token', res.data.token)
    } else {
      // 登录失败
      uni.showToast({
        title: '登录失败',
        icon: 'none',
        duration: 2000
    })
  }
})

4. Active la fonction de commande à emporter
   Sur la page de commande, les utilisateurs peuvent sélectionner les plats, la quantité et les remarques par glissement, puis cliquer sur le bouton de confirmation de commande. Envoyez une demande de commande au backend en appelant la fonction uni.request().

uni.request({
  url: 'http://yourbackend.com/order',
  method: 'POST',
  header: {
    'Authorization': 'Bearer ' + uni.getStorageSync('token')
  },
  data: {
    food: '订购的菜品',
    quantity: '订购的数量',
    remark: '备注信息'
  },
  success: (res) => {
    if (res.data.code === 200) {
      // 下单成功
      uni.showToast({
        title: '下单成功',
        icon: 'success',
        duration: 2000
      })
    } else {
      // 下单失败
      uni.showToast({
        title: '下单失败',
        icon: 'none',
        duration: 2000
      })
    }
  }
})

5. Implémenter la fonction de gestion du panier
   Sur la page du panier, les utilisateurs peuvent consulter la liste des repas dans le panier, ajuster la quantité et les supprimer. Envoyez la demande d'opération de panier au backend en appelant la fonction uni.request().

// 增加购物车中的餐品数量
uni.request({
  url: 'http://yourbackend.com/cart/add',
  method: 'POST',
  header: {
    'Authorization': 'Bearer ' + uni.getStorageSync('token')
  },
  data: {
    food: '菜品名称',
    quantity: '数量'
  },
  success: (res) => {
    if (res.data.code === 200) {
      // 添加成功
      uni.showToast({
        title: '添加成功',
        icon: 'success',
        duration: 2000
      })
    } else {
      // 添加失败
      uni.showToast({
        title: '添加失败',
        icon: 'none',
        duration: 2000
      })
    }
  }
})

// 删除购物车中的餐品
uni.request({
  url: 'http://yourbackend.com/cart/delete',
  method: 'POST',
  header: {
    'Authorization': 'Bearer ' + uni.getStorageSync('token')
  },
  data: {
    food: '菜品名称'
  },
  success: (res) => {
    if (res.data.code === 200) {
      // 删除成功
      uni.showToast({
        title: '删除成功',
        icon: 'success',
        duration: 2000
      })
    } else {
      // 删除失败
      uni.showToast({
        title: '删除失败',
        icon: 'none',
        duration: 2000
      })
    }
  }
})

6. Implémenter la fonction de paiement de la commande
   Sur la page de commande, les utilisateurs peuvent choisir le mode de paiement et finaliser le paiement de la commande. Le paiement s'effectue en appelant la fonction uni.requestPayment().

uni.requestPayment({
  provider: 'wxpay',
  orderInfo: '支付订单的信息',
  success: (res) => {
    // 支付成功
    uni.showToast({
      title: '支付成功',
      icon: 'success',
      duration: 2000
    })
  },
  fail: (res) => {
    // 支付失败
    uni.showToast({
      title: '支付失败',
      icon: 'none',
      duration: 2000
    })
  }
})

7. Implémente la fonction de requête de commande
   Sur la page de commande, les utilisateurs peuvent interroger leurs commandes historiques et leurs commandes inachevées. Envoyez une demande de requête de commande au backend en appelant la fonction uni.request().

uni.request({
  url: 'http://yourbackend.com/orders',
  method: 'GET',
  header: {
    'Authorization': 'Bearer ' + uni.getStorageSync('token')
  },
  success: (res) => {
    if (res.data.code === 200) {
      // 查询成功
      const orders = res.data.orders
      // TODO: 处理订单数据
    } else {
      // 查询失败
      uni.showToast({
        title: '查询失败',
        icon: 'none',
        duration: 2000
      })
    }
  }
})

8. Implémenter la fonction de suivi des livraisons
   Sur la page de suivi des livraisons, les utilisateurs peuvent visualiser l'emplacement et la progression de la livraison du livreur en temps réel. Obtenez les informations de localisation du livreur en accédant à l'API de la carte.

// 获取配送员的位置信息
uni.getLocation({
  success: (res) => {
    const latitude = res.latitude
    const longitude = res.longitude
    // TODO: 显示配送员位置
  },
  fail: (res) => {
    uni.showToast({
      title: '获取位置信息失败',
      icon: 'none',
      duration: 2000
    })
  }
})

IV. Résumé
Cet article présente comment utiliser le framework UniApp pour implémenter les fonctions de commande à emporter et de suivi des livraisons, et joint des exemples de code pertinents. Grâce aux fonctionnalités multiplateformes d'UniApp, nous pouvons développer rapidement des applications de commande à emporter multiplateformes pour fournir aux utilisateurs des services de commande à emporter plus pratiques. Dans le même temps, cela apporte également davantage d’opportunités commerciales et de compétitivité au secteur de la restauration. Je pense que grâce au guide contenu dans cet article, les lecteurs peuvent rapidement commencer à développer des fonctions de commande à emporter et de suivi des livraisons, et offrir aux utilisateurs une meilleure expérience.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!