ホームページ  >  記事  >  ウェブフロントエンド  >  uniappで電子注文とテイクアウトデリバリーを実装する方法

uniappで電子注文とテイクアウトデリバリーを実装する方法

WBOY
WBOYオリジナル
2023-10-25 09:18:24963ブラウズ

uniappで電子注文とテイクアウトデリバリーを実装する方法

uni-app で電子注文とテイクアウト デリバリーを実装する方法

モバイル インターネットの急速な発展により、電子注文とテイクアウト デリバリーは人々の生活の一部になりました。日々のニーズに応えます。ユーザーのニーズに応えるため、多くのケータリング会社は電子注文やテイクアウト配送システムを導入し、より便利なサービスを提供し始めています。この記事では、uni-appで電子注文とテイクアウトデリバリーを実装する方法と、具体的なコード例を紹介します。

1. 準備
開発を開始する前に、まずユニアプリ開発環境をインストールし、バックエンド インターフェイスが構築されていることを確認する必要があります。バックエンドは、Node.js などのテクノロジ スタックを使用して実装できます。この記事では、バックエンドの特定の実装については説明しません。

2. インターフェイスの設計
電子注文とテイクアウト デリバリーの機能を実現する前に、まず関連するインターフェイスを設計する必要があります。ユーザーが便利に食品を注文して配達できるように、インターフェイスのデザインはユーザーの操作習慣とプロセスを考慮する必要があります。

  1. トップページ:お店のロゴ、店名、おすすめ料理などの情報を表示し、検索、絞り込み、分類などの機能を提供します。
  2. メニュー ページ: 料理の名前、写真、価格、数量などの情報を含むレストランのメニュー リストが表示されます。ユーザーは、「追加」ボタンをクリックして料理を選択し、料理の数を変更できます。
  3. ショッピングカートページ: ユーザーが選択した料理のリストと合計金額が表示され、料理の追加、削減、削除が可能です。
  4. 注文ページ: 配送先住所、連絡先、配達時間など、ユーザーが送信した注文情報が表示されます。
  5. お持ち帰りページ: 配送先住所や連絡先などの情報を入力し、注文を確認し、支払いを行う機会をユーザーに提供します。

3.電子注文・テイクアウトデリバリー機能の実現
uni-appで電子注文・テイクアウトデリバリー機能を実現するには、主に以下の手順が必要です。メニュー データの取得: メニュー ページでは、バックエンド インターフェイスからレストランのメニュー データを取得し、ページにデータを表示する必要があります。 uni.request() メソッドを使用してネットワーク要求を送信し、バックエンド インターフェイスから返されたデータを取得できます。

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

料理をショッピング カートに追加: メニュー ページで、ユーザーが追加ボタンをクリックしたときに、選択した料理をショッピング カートに追加する必要があります。ショッピングカートの真ん中。 vuex を使用してショッピング カート データを保存できます。

  1. サンプル コード:
  2. // 菜单页
    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)
        }
      }
    })

ショッピング カートの操作: ショッピング カート ページでは、ユーザーはショッピング カート内のアイテムを追加、削減、削除できます。 vuex を使用してショッピング カート データを更新できます。

  1. サンプルコード:
  2. // 购物车页
    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)
        }
      }
    })

注文と支払いの送信: テイクアウト ページで、ユーザーは配送先住所や連絡先などの情報を入力し、注文を送信して、支払う。 uni.request() メソッドを使用して注文情報をバックエンド インターフェイスに送信すると、バックエンド インターフェイスは支払い結果を返します。

  1. サンプル コード:
  2. // 外卖页
    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 = '支付失败'
            }
          })
        }
      }
    }
概要:

この記事では、uni-app で電子注文とテイクアウト デリバリー機能を実装する方法を紹介し、具体的なコード例を示します。以上の方法により、電子注文・テイクアウト配送システムを簡単に導入することができ、より便利なサービスを提供することができます。もちろん、実際の開発においては、ニーズに応じて適切な調整や拡張を行う必要があります。この記事があなたの開発作業に役立つことを願っています。

以上がuniappで電子注文とテイクアウトデリバリーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。