Comment mettre en œuvre la commande électronique et la livraison à emporter dans Uniapp

Comment mettre en œuvre la commande électronique et la livraison à emporter dans uni-app

Avec le développement rapide de l'Internet mobile, la commande électronique et la livraison à emporter sont devenues des besoins quotidiens dans la vie des gens. Afin de répondre aux besoins des utilisateurs, de nombreuses entreprises de restauration ont commencé à adopter des systèmes électroniques de commande et de livraison de plats à emporter pour fournir des services plus pratiques. Cet article expliquera comment implémenter la commande électronique et la livraison à emporter dans uni-app, et fournira des exemples de code spécifiques.

1. Préparation
Avant de commencer le développement, nous devons d'abord installer l'environnement de développement uni-app et nous assurer que l'interface back-end a été construite. Le backend peut être implémenté à l'aide de piles technologiques telles que Node.js. Cet article n'implique pas l'implémentation spécifique du backend.

2. Conception de l'interface
Avant de réaliser les fonctions de commande électronique et de livraison à emporter, nous devons d'abord concevoir l'interface appropriée. La conception de l'interface doit prendre en compte les habitudes et les processus opérationnels de l'utilisateur pour garantir que les utilisateurs peuvent facilement commander et livrer de la nourriture.

1. Page d'accueil : affiche le logo du restaurant, le nom, les plats recommandés et d'autres informations, et fournit des fonctions telles que la recherche, le filtrage et la classification.
2. Page Menu : affiche la liste des menus du restaurant, y compris le nom, la photo, le prix, la quantité et d'autres informations sur les plats. Les utilisateurs peuvent sélectionner des plats en cliquant sur le bouton Ajouter et modifier le nombre de plats.
3. Page du panier : Affiche la liste des plats sélectionnés par l'utilisateur et le montant total. L'utilisateur peut ajouter, réduire et supprimer des plats.
4. Page de commande : affiche les informations de commande soumises par l'utilisateur, y compris l'adresse de livraison, la personne à contacter, le délai de livraison, etc.
5. Page de retrait : offre aux utilisateurs la possibilité de renseigner des informations telles que l'adresse de livraison et la personne de contact, de confirmer la commande et de payer.

3. Implémenter les fonctions de commande électronique et de livraison à emporter
Pour implémenter les fonctions de commande électronique et de livraison à emporter dans uni-app, nous avons principalement besoin des étapes suivantes :

1. Obtenir les données du menu : Dans la page de menu, nous avons besoin d'obtenir les données du restaurant. données de menu à partir de l’interface back-end et afficher les données sur la page. Vous pouvez utiliser la méthode uni.request() pour envoyer une requête réseau et obtenir les données renvoyées par l'interface backend.

Exemple de code :

// 菜单页
export default {
  data() {
    return {
      menuList: [] // 菜单列表
    }
  },
  mounted() {
    this.getMenuList()
  },
  methods: {
    getMenuList() {
      uni.request({
        url: '接口地址',
        success: (res) => {
          this.menuList = res.data.menuList
        }
      })
    }
  }
}

2. Ajouter des plats au panier : Dans la page de menu, lorsque l'utilisateur clique sur le bouton Ajouter, nous devons ajouter les plats sélectionnés au panier. Vous pouvez utiliser vuex pour stocker les données du panier.

Exemple de code :

// 菜单页
export default {
  methods: {
    addToCart(item) {
      this.$store.commit('addToCart', item)
    }
  }
}

// store.js
export default new Vuex.Store({
  state: {
    cartList: [] // 购物车列表
  },
  mutations: {
    addToCart(state, item) {
      state.cartList.push(item)
    }
  }
})

3. Fonctionnement du panier : dans la page du panier, les utilisateurs peuvent ajouter, réduire et supprimer des articles dans le panier. Vous pouvez utiliser vuex pour mettre à jour les données du panier.

Exemple de code :

// 购物车页
export default {
  computed: {
    cartList() {
      return this.$store.state.cartList
    },
    totalPrice() {
      let total = 0
      for (let item of this.cartList) {
        total += item.price * item.quantity
      }
      return total
    }
  },
  methods: {
    increase(item) {
      this.$store.commit('increase', item)
    },
    decrease(item) {
      this.$store.commit('decrease', item)
    },
    remove(item) {
      this.$store.commit('remove', item)
    }
  }
}

// store.js
export default new Vuex.Store({
  mutations: {
    increase(state, item) {
      item.quantity++
    },
    decrease(state, item) {
      if (item.quantity > 1) {
        item.quantity--
      }
    },
    remove(state, item) {
      const index = state.cartList.indexOf(item)
      state.cartList.splice(index, 1)
    }
  }
})

4. Soumettre la commande et le paiement : sur la page de plats à emporter, les utilisateurs doivent remplir des informations telles que l'adresse de livraison et la personne de contact, soumettre la commande et payer. Vous pouvez utiliser la méthode uni.request() pour envoyer les informations de commande à l'interface backend, et l'interface backend renverra le résultat du paiement.

Exemple de code :

// 外卖页
export default {
  data() {
    return {
      address: '', // 配送地址
      contact: '', // 联系人
      payResult: '' // 支付结果
    }
  },
  methods: {
    submitOrder() {
      uni.request({
        url: '接口地址',
        method: 'POST',
        data: {
          address: this.address,
          contact: this.contact,
          cartList: this.$store.state.cartList
        },
        success: (res) => {
          this.payOrder(res.data.orderId)
        }
      })
    },
    payOrder(orderId) {
      uni.requestPayment({
        timeStamp: '',
        nonceStr: '',
        package: '',
        signType: '',
        paySign: '',
        success: (res) => {
          this.payResult = '支付成功'
        },
        fail: (res) => {
          this.payResult = '支付失败'
        }
      })
    }
  }
}

Résumé :
Cet article présente comment implémenter les fonctions de commande électronique et de livraison à emporter dans uni-app, et fournit des exemples de code spécifiques. Grâce aux méthodes ci-dessus, nous pouvons facilement mettre en œuvre des systèmes de commande électronique et de livraison de plats à emporter pour fournir des services plus pratiques. Bien entendu, dans le cadre du développement actuel, des ajustements et des extensions appropriés doivent être effectués en fonction des besoins spécifiques. J'espère que cet article pourra être utile à votre travail de développement.

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!